Pannellum: How to get coordinates

[s1mar]

Is there any other way or inbuilt feature to get the Pitch and yaw onClick ???

[mpetroff]

This is supported in the development version:

viewer = pannellum.viewer(...);
viewer.on('mousedown', function(event) {
    // For pitch and yaw of center of viewer
    console.log(viewer.getPitch(), viewer.getYaw());
    // For pitch and yaw of mouse location
    console.log(viewer.mouseEventToCoords(event));
});

[s1mar]

I tried on the hotspot example but couldn't get the above to work,I'm pretty green when it comes to jScript,if it isnt much of a trouble,can you please show me how to store the pannellum.viewer(..) reference and then add the event listener ??

[mpetroff]

As I said previously, you need to use the development version, not the release version as you're doing.

[s1mar]

Unable to build

[MmmDee]

I see that you're building this on Windows, maybe this will help (from #230)...

On Windows 10, it's sufficient to download Python3 from here . Make sure python is in your PATH. I renamed this newly downloaded python.exe to python3.exe (and also edited the very simple _build.bat_ script) since I also have python 2.7 installed, but you could simply change the order of the various pythons in the PATH environment variable.

Download _git_ for Windows here.

In a DOS window, do the same git clone as in Linux.

C:\Development> git clone https://github.com/mpetroff/pannellum.git
C:\Development> cd pannellum
C:\Development> cd utils\build
C:\Development> build
C:\Development> cd ..\..\build

Copy the files in this new build directory to your server. On Windows, I use either _FileZilla_ or the _NppFTP_ plugin within _Notepad++_.

I use Linux to make my multires tiles, but you can download the _Hugin_ tools for Windows, here.

In addition to Matthew's example, there's an example code fragment in #196 that shows "saving" the viewer context and adding event listeners.

edit: a more complete example is listed below

[s1mar]

@MmmDee : Can't I use the Pannellum.js file in the src directory directly ??

Also,I'm just trying to accomplish to get the mouse coords(yaw and pitch ) and store them in a variable but since I'm pretty new to jscript,I'm unable to use the functions in the Pannellum.js file in my own html file.

[s1mar]

TypeError: viewer.on is not a function;
I always get this error

[MmmDee]

As Matthew noted, you have to use the development branch, and NOT the CDN release version.

1) After you copy the development branch in the fashion I noted above, build it on your system (Windows or Linux).

2) Then copy the resulting built files onto your server (assuming you have one).

3) Refer to your copy of the files on your server to "include" them into your webpage. You really don't want to modify and use the pannellum.js file directly in the way I think you're trying. You add these lines to your html file:

• If you build/compress the repository, then you can copy those files to your website and include this in your webpage (of course replace _mywebsite_ and _pannellum_ directory with your own):

    <link rel="stylesheet" href="http://mywebsite/pannellum/pannellum.css">
    <script type="text/javascript" src="http://mywebsite/pannellum/pannellum.js"></script>

• If you only download the repository and can't build it, you can copy the "source" files to your webserver and reference them in your webpage like this. Note the addition of the separate libpannelum.js file.

    <link rel="stylesheet" href="http://mywebsitet/pannellumSRC/css/pannellum.css">
    <script type="text/javascript" src="http://mywebsite/pannellumSRC/js/pannellum.js"></script>
    <script type="text/javascript" src="http://mywebsite/pannellumSRC/js/libpannellum.js"></script>

[s1mar]

I downloaded it from the master branch and then I copied the .css and .js from the src into a proj folder in my wamp directory.

Specs:
Python 3.5.2
Wamp 3.0.4
Windows Server 2012

[s1mar]

Thanks @MmmDee ,But how to add a mouse click event or mousedown event in my webpage that will call the mousecoords function inside pannellum.js and give me the return value,so that I can manipulate it.

I tried adding a listner to just the div that holds the pannellum.viewer and call the mousecoords function but I always get "not defined" or function doesnt exist,aslo tried the approach suggested by matthew,

viewer = pannellum.viewer(...);
viewer.on('mousedown', function(event) {
// For pitch and yaw of center of viewer
console.log(viewer.getPitch(), viewer.getYaw());
// For pitch and yaw of mouse location
console.log(viewer.mouseEventToCoords(event));
});

But then the console show's me that viewer.on isnt a function

Please help!!!

[MmmDee]

If needed, you can copy the 2 js files (pannellum.js and libpannellum.js) and 1 css file (pannellum.css) from the repository directly into the appropriate directories elsewhere, but you'll also need the 5 image files (*.svg) from the css/img directory too and place them under your local/moved css directory.

As to your other question, you'll have to put the "compiled" files or source files in your server's public directory and include the appropriate links in your html file (see my prior post in this thread). I'll find my example source file.

Referring to the example in the next post, please note, the clicked "mouse coordinates" will be either the image's center pitch and yaw (via getPitch() and getYaw() OR mouse click pitch and yaw (via mouseEventToCoords()) rather than X and Y coordinates since the latter don't normally make sense in a panoramic image. Though, if want screen or window X/Y, they're available through the event object.

[MmmDee]

Here's an example illustrating mouseup event handling (using the _non-compiled_ repository files), mousedown event handling is accomplished in the same manner...

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Test</title>

    <link rel="stylesheet" href="http://mysite/pannellumSRC/css/pannellum.css">
    <script type="text/javascript" src="http://mysite/pannellumSRC/js/pannellum.js"></script>
    <script type="text/javascript" src="http://mysite/pannellumSRC/js/libpannellum.js"></script>

    <style>
    .panorama {
        width: 600px;
        height: 400px;
    }
    </style>
</head>

<body>

<div id="panorama" class="panorama"></div>

<script>
viewer = pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "https://pannellum.org/images/alma.jpg"
});

function mouseupListener(event) {
        console.log("Mouse Up");
        console.log("Yaw " + viewer.getYaw());
        console.log("Pitch " + viewer.getPitch());

        // do something with yaw and pitch here

        // save yaw and pitch location of center of image
        var yaw = viewer.getYaw();
        var pitch = viewer.getPitch();

        // save yaw and pitch location of mouse up
        var posPitch = viewer.mouseEventToCoords(event)[0];
        var posYaw   = viewer.mouseEventToCoords(event)[1];

        // do something here with event parameter, which looks like:
        //           MouseEvent {isTrusted: true, screenX: 593, screenY: 526, clientX: 520, clientY: 351…}
        // see the console or documentation for all info available in the event.
        var posX = event.offsetX;
        var posY = event.offsetY;
};

function mousedownListener(event) {
        console.log("Mouse Down");
};

function sceneChangeListener(sceneId) {
        console.log("Scene changed to: " + sceneId);
};

function imageLoadListener() {
        console.log("Load Done");
};

function errorListener(errorMsg) {
        console.log("Error message: " + errorMsg);
        viewer.off('error',errorListener);                     // Stop listening for errors
};

function errorClearedListener() {
        console.log("Error Cleared);
};

viewer.on('mouseup', mouseupListener);
viewer.on('mousedown', mousedownListener);
viewer.on('scenechange', sceneChangeListener);
viewer.on('error', errorListener);
viewer.on('errorcleared', errorClearedListener);
viewer.on('load', imageLoadListener);

</script>

</body>
</html>

[s1mar]

I still get that viewer1.on isn't a function,I just can't seem to fathom what I'm doing wrong

TypeError: viewer.on is not a function

[MmmDee]

Assuming there's not a typo in your html source file, then it it's likely something particular to your server setup and the way you're copying the pannellum files to it. Is your html file short enough to post here, or can you provide a link to it? My apologies as I modified my last example a few times before I was done. That probably explains why, in your comment, you have a combination of viewer1.on and viewer.on.

[MmmDee]

I changed the example above to use the mouseup event and confirmed it worked with the latest commit (22e231a) from Sep 1, 2016.

[s1mar]

@MmmDee Thanks,I'm away from my console but I'm going to try this first thing come monday and let you know how it goes.Also,can you guide me to some online resource where I can learn and master Jscript and learn more about server-client interactions and best practices,I want to write some awesome web apps and thank you once again for your guidance and assist