closing hotspot layer when clicking on image

Hi,

thank you so much for egjs-view360, it is a remarkable piece of code and it is great fun using it. I have added some hot spots to a panoviewer panorama, and I would like to have the layer closed once the user clicks on the layered jpeg. I cannot seem to find the right way to modify the onclick=“closeLayer(event);” or place it right. Currently there is

<div class="layer" onclick="closeLayer(event);"> but this means that you have to click next to the layered jpeg to close the layer. And if I just append the onclick directive to the <img> it does not work.

I am referring to this implementation example, any hints are appreciated. Thanks

[WoodNeck]

I think it’s just okay to continue on here as it’s all hotspot-related questions 😃

1. Well, I know what you mean with those buoyancy movements of hotspots. I didn’t actually made this demo but here’s why: The demo’s background image is tilted about 10 degrees, so there’s a compensation script for it to work. Remove the following lines to remove that compensation.

function setHotspotOffset(hotspot, viewer) {
        var oyaw = viewer.getYaw();
        var opitch = viewer.getPitch();
        var yaw = parseFloat(hotspot.getAttribute("data-yaw"));
        var pitch = parseFloat(hotspot.getAttribute("data-pitch"));
        var deltaYaw = yaw - oyaw;
        var deltaPitch = pitch - opitch;

        if (deltaYaw < -180) {
            deltaYaw += 360;
        } else if (deltaYaw > 180) {
            deltaYaw -= 360;
        }
        if (Math.abs(deltaYaw) > 90) {
            hotspot.style.transform = "translate(-200px, 0px)";
            return;
        }
        var radYaw = toRadian(deltaYaw);
        var radPitch = toRadian(deltaPitch);

        var fov = viewer.getFov();
        var hfov = getHFov(fov);

        var rx = Math.tan(toRadian(hfov) / 2);
        var ry = Math.tan(toRadian(fov) / 2);


        var point = [
            Math.tan(-radYaw) / rx,
            Math.tan(-radPitch) / ry,
        ];

        // Image rotation compensation
        // The original image is about 10 degrees tilted.
-       point = point.map(function (p) {
-           return p * Math.cos(15 / 180 * Math.PI);
-       });
-       point[1] = rotate(point, deltaYaw > 0 ? -10 : 10)[1];

        // point[0] /= 1.05;
        var left = viewer._width / 2 + point[0] * viewer._width / 2;
        var top = viewer._height / 2 + point[1] * viewer._height / 2;

        hotspot.style.transform = "translate(" + left + "px, " + top + "px) translate(-50%, -50%)";
}

1. That’s simple, add the div element inside the element with class “layer” and modify it just like the image element.

First change the page content like this

<div class="layer" onclick="closeLayer(event);">
  <img src="./img/book1.jpg">
+ <div class="layer-content"></div>
</div>

Grab that element, and modify it whatever you like on openLayer().

var layer = document.querySelector(".layer");
+ var layerContent = document.querySelector(".layer-content");

-function openLayer(img) {
+function openLayer(img, content) {
  layer.querySelector("img").src = "./img/" + img;
  layer.style.display = "block";
+ layerContent.innerHTML = content;
}

And of course, you can transfer 2 variables at once.

<div class="hotspot search" data-page="1" data-anchor-index="0" data-yaw="52" data-pitch="-14" onclick="openLayer('book1.jpg', 'This is second parameter')"></div>
<div class="hotspot search" data-page="1" data-anchor-index="1" data-yaw="-45" data-pitch="-18" onclick="openLayer('book2.jpg', 'You can put anything on here')"></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="6" data-pitch="-17" onclick="openLayer('book3.jpg', 'Good Luck')"></div>

1. Actually there’s one that we use for the local development, which looks like this.

There’s source code on here: https://github.com/naver/egjs-view360/blob/master/test/manual/PanoViewer/PanoViewer.html#L459

The point is on the render function so check that out 😃 You can use either gridView(that grid with a red circle on it), the file’s on here: https://github.com/naver/egjs-view360/blob/master/test/manual/js/GridView.js or just render the value direct as innerHTML like at the render function’s Line 471~473

And also, stay safe you too :3

[WoodNeck]

Wow, that’s really cool. I love it 😃 Thanks for making a great product with our component.

I’ll close this issue for now. Feel free to reopen it whenever you like.