You are not logged in.

Hotspot location in relation to screen and repositioning layers

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

tshah

Beginner

  • "tshah" started this thread

Posts: 8

  • Send private message

1

Thursday, April 8th 2021, 12:53am

Hotspot location in relation to screen and repositioning layers

Hello, I'm trying to position layers in relation to hotspots but am running into questions about how to reposition layers when the hotspot is too close to the edge of the screen. For example, by default I have a layer that is aligned 'lefttop' from the hotspot (parent). It works great when I am in fullscreen, when I click on the hotspot the layer (text box) shows up next to it. However when I turn the 360 the hotspot is closer to the edge of the screen and the layer then gets cut off. How do I dynamically place the layer to the opposite side if the hotspot's location is too close to the edge?



Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<hotspot name="spot1" style="skin_hotspotstyle" ath="10" atv="0" onclick="
 set(layer[one].parent, hotspot[spot1]); switch(layer[one].visible);"/>

<layer name="one"
 type="text"
 align="righttop" x="40" y="0"
 html="data:hose"
 css="data:textBoxStyles"
 autowidth="false"
 autoheight="false"
 vcenter="false"
 padding="30"
 wordwrap="true"
 bg="true"
 bgcolor="0x000000"
 bgalpha=".75"
 bgborder="0"
 bgroundedge="0"
 interactivecontent="false"
 onautosized=""
 visible="false"
 onclick="switch(layer[one].visible);"
 width="area.width / 3"
 height="area.height / 3"
 safearea="true"
 />

alexp

Beginner

Posts: 18

  • Send private message

2

Thursday, April 8th 2021, 9:40pm

Quoted from "tshah"

How do I dynamically place the layer to the opposite side if the hotspot's location is too close to the edge?
You can change the layer edge property.
Here is the action example, it works better if your layer aligned to "top"

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<action name="change_edge" type="Javascript"><![CDATA[
  var hotspotName = args[1];
  var layerName = args[2];
  var offset = parseFloat(args[3]);
  var l = krpano.layer.getItem(layerName);
// save original edge
  if (!l.origedge) l.origedge = l.edge || l.align;

  function getEdge (hs, offset) { 
    var edges = krpano.spheretoscreen(krpano.hotspot.getItem(hs).ath, 0);
    return edges.x < offset ?
        'lefttop' :
        edges.x > (krpano.stagewidth - offset) ? 'righttop' : l.origedge;
  };

  l.edge = getEdge(hotspotName, offset);
]]></action>


and call it on hotspot click

Source code

 
1

change_edge(get(name), layername, offsetvalue)

layername - name of the layer child of the hotspot
offsetvalue is a number for example: 50

tshah

Beginner

  • "tshah" started this thread

Posts: 8

  • Send private message

3

Tuesday, April 13th 2021, 2:06am

Thank you so much alexp!

Similar threads