just wanted to say thank you

Dear Naver Team,

thank you very much for the fantastic egjs-view360 suite! It has been some time since @WoodNeck helped me so well back in March, I still use egjs-view360 for each of our exhibitions in the gallery and here is my current use case. As you can see, I use a lot of hotspots to show the single works in a more detailed view. For placing them, @WoodNeck had already given me a hint in March 2020 on how to render the coordinates of a point with a function as directHTML. So far, I haven’t been able to adapt this for our panoramas, so I created a coordinate grid overlay as a workaround, which allows you to estimate the desired position of a hotspot. This works okay.

Here is the code for the grid:

<!-- grid -->

<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="0" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw0<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="15" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw15<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="30" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw30<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="45" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw45<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="60" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw60<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="75" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw75<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="90" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw90<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="105" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw105<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="120" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw120<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="135" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw135<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="150" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw150<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="165" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw165<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="180" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw180<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="195" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw195<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="210" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw210<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="225" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw225<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="240" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw240<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="255" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw255<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="270" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw270<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="285" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw285<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="300" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw300<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="315" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw315<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="330" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw330<br>pitch0</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="345" data-pitch="0" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw345<br>pitch0</span></div>

<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="0" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw0<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="15" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw15<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="30" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw30<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="45" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw45<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="60" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw60<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="75" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw75<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="90" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw90<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="105" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw105<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="120" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw120<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="135" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw135<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="150" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw150<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="165" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw165<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="180" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw180<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="195" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw195<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="210" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw210<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="225" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw225<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="240" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw240<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="255" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw255<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="270" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw270<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="285" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw285<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="300" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw300<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="315" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw315<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="330" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw330<br>pitch10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="345" data-pitch="10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw345<br>pitch10</span></div>

<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="0" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw0<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="15" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw15<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="30" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw30<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="45" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw45<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="60" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw60<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="75" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw75<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="90" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw90<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="105" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw105<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="120" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw120<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="135" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw135<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="150" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw150<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="165" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw165<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="180" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw180<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="195" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw195<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="210" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw210<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="225" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw225<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="240" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw240<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="255" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw255<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="270" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw270<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="285" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw285<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="300" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw300<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="315" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw315<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="330" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw330<br>pitch -10</span></div>
<div class="hotspot search" data-page="1" data-anchor-index="2" data-yaw="345" data-pitch="-10" onclick="openLayer('FILENAME', 'TEXTTITEL')"><span style="background:white !important;">yaw345<br>pitch -10</span></div>

<!-- /grid -->

Maybe it is helpful for one or the other.

Have the best possible start into the new year,

Matthias

[WoodNeck]

@kls0e We’ve added GALERIE BORN to our projects section 🚀

• https://naver.github.io/egjs-view360/panoviewer.html

[WoodNeck]

Hello again @kls0e! I remember you 😃 Seems like you’ve finished your project, and it looks super cool! Glad to hear that.

We’re actually preparing a hotspot as an official feature for View360, and the issue you’ve created is one of the reasons why we’re adding it 😁

I would like to add your work to the “Projects” section of our demo. Would it be okay?

• https://naver.github.io/egjs-view360/panoviewer.html