You are not logged in.

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"
 />

2

Thursday, April 8th 2021, 9:40pm

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