Hide a Hotspot, when its close to another (in Pixel)

Q&A about the latest versions
Post Reply
User avatar
Multimediafabrik
Posts: 27
Joined: Thu Jun 21, 2018 11:28 pm

Wed Aug 19, 2020 10:06 am

Hey there,
so i want a Hotspot to be invisible, if the absolute distance (in Pixel) to another Hotspot is smaller than a given value (400px). My Hotspots get bigger, the closer you zoom in.
first of all i created an eventlistener that updates my currentFov variable, when you zoom in and out:
fov.png
fov.png (16.67 KiB) Viewed 438 times
then i created a code snipped, that sets the "invisible_node" variable the node ID of the Hotspot, that should be invisible. This code fires, when the "currentFov" variable is changed.
action.png
action.png (7.42 KiB) Viewed 438 times

Code: Select all

javascript:
var hotspots = pano.getCurrentPointHotspots();
var hotspotIDs = pano.getPointHotspotIds();
for (var i = 0; i < hotspots.length; i++) {
    if(hotspots[i].style.left == "-1000px"){
        hotspots.splice(i,1);
        hotspotIDs.splice(i,1);
    }
}
for (var i = 0; i < hotspots.length; i++) {
    for (var k = i + 1; k < hotspots.length; k++) {
        var distance = getDistanceBetweenElements(hotspots[i], hotspots[k]);
	if(distance < 400){
        var hotspot = pano.getHotspot(hotspotIDs[i]);
        var hotspotNodeId = hotspot.url.substring(1,hotspot.url.length-1);
        pano.setVariableValue("invisible_node",hotspotNodeId);
        hotspots.splice[i,1];
        hotspotIDs.splice[i,1];
	}
}
}

 function getPositionAtCenter(element) {
   const {top, left, width, height} = element.getBoundingClientRect();
   return {
     x: left + width / 2,
     y: top + height / 2
   };
 }
function getDistanceBetweenElements(a, b) {
  const aPosition = getPositionAtCenter(a);
  const bPosition = getPositionAtCenter(b);
  return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);  
}
finally, I set a trigger to the visibility of the Hotspot, that changes its value to "false", if the "invisible_node" value = the Hotspot node ID:
logicblock.png
logicblock.png (17.91 KiB) Viewed 438 times
Well, it doesnt work. I dont quite know why it doesnt work. Did i do something wrong? Do i need to do something differently? I'd be happy for any suggestions,
-Jonas
Branigan
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Wed Aug 19, 2020 11:13 am

Sorry, I don't know why it's not working, but I'm very interested in what you're doing. :)

I'm looking to affect the current FOV based on Display Width/Height, so your Javascript example - and how/where to apply it - has given me something to play with as an alternative to actually having to learn Javascript.
User avatar
Multimediafabrik
Posts: 27
Joined: Thu Jun 21, 2018 11:28 pm

Wed Aug 19, 2020 5:42 pm

I found one issue with my code, but it still doesnt work:
In the skin you have to use the "player" object, instead of the "pano" object.
Branigan
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Wed Aug 19, 2020 6:28 pm

Multimediafabrik wrote:
Wed Aug 19, 2020 5:42 pm
I found one issue with my code, but it still doesnt work:
In the skin you have to use the "player" object, instead of the "pano" object.
My knowledge of Javascript could be written on the back of a very small stamp, but when I did this:

Code: Select all

javascript:pano.setVariableValue('var_disp_width', pano.getViewerSize().width);
I used single quotes ( ' ) around the variable name and you've used double quotes ( " ) in your URL code:

Code: Select all

 pano.setVariableValue ("currentFov", pano.getFoV());
I really don't know if it varies depending on where you call from or where the variable is, but it's the only difference I could spot. :?
User avatar
Multimediafabrik
Posts: 27
Joined: Thu Jun 21, 2018 11:28 pm

Thu Aug 20, 2020 12:19 pm

Branigan wrote:
Wed Aug 19, 2020 6:28 pm
Multimediafabrik wrote:
Wed Aug 19, 2020 5:42 pm
I found one issue with my code, but it still doesnt work:
In the skin you have to use the "player" object, instead of the "pano" object.
My knowledge of Javascript could be written on the back of a very small stamp, but when I did this:

Code: Select all

javascript:pano.setVariableValue('var_disp_width', pano.getViewerSize().width);
I used single quotes ( ' ) around the variable name and you've used double quotes ( " ) in your URL code:

Code: Select all

 pano.setVariableValue ("currentFov", pano.getFoV());
I really don't know if it varies depending on where you call from or where the variable is, but it's the only difference I could spot. :?

Code: Select all

javascript:pano.setVariableValue('var_disp_width', pano.getViewerSize().width);
does this code work for you?
" or ' shouldnt make any difference
User avatar
Multimediafabrik
Posts: 27
Joined: Thu Jun 21, 2018 11:28 pm

Thu Aug 20, 2020 12:59 pm

update: The currentFov variable changes work perfectly. For debugging reasons I added a Textbox to my skin, that displays its value and it changes when it should.
The Problem: when the currentFov variable changes, the Trigger to fire the GO TO URL javascript doesnt fire.
i added a variable "fire" that gets bigger by 1 everytime the javascript fires. I added the variable to a Textbox just like before. It stays at 0.

Code: Select all

player.setVariableValue("fired", player.getVariableValue("fired") +1);
User avatar
Multimediafabrik
Posts: 27
Joined: Thu Jun 21, 2018 11:28 pm

Thu Aug 20, 2020 1:21 pm

another update:
i got the trigger to fire. i simply moved the action trigger from the hotspot itself to the container and for some reason it works now. Is this a bug?
Branigan
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Thu Aug 20, 2020 3:14 pm

Multimediafabrik wrote:
Thu Aug 20, 2020 12:19 pm

Code: Select all

javascript:pano.setVariableValue('var_disp_width', pano.getViewerSize().width);
does this code work for you?
" or ' shouldnt make any difference
Yes, it works for me. I just added it to a standard Text box.

I seem to remember when I used " in a live session poking about with Firefox - after watching the recent Javascript Webinar - it didn't like them and insisted on ' or I got error messages? :?

I'm currently trying to work out how to get Actions to trigger Variables that will trigger Logicblocks to respond to trigger other Actions, to try and do the equivalent of a Logic trigger that will then set a Variable by a rather convoluted path.

Your URL method of putting in the Javascript showed me a way that might work. Just very rusty on coding (decades) and haven't studied Javascript. Looks like I'll need to bite the bullet. ;)
User avatar
Multimediafabrik
Posts: 27
Joined: Thu Jun 21, 2018 11:28 pm

Thu Aug 20, 2020 4:46 pm

Branigan wrote:
Thu Aug 20, 2020 3:14 pm
Multimediafabrik wrote:
Thu Aug 20, 2020 12:19 pm

Code: Select all

javascript:pano.setVariableValue('var_disp_width', pano.getViewerSize().width);
does this code work for you?
" or ' shouldnt make any difference
Yes, it works for me. I just added it to a standard Text box.

I seem to remember when I used " in a live session poking about with Firefox - after watching the recent Javascript Webinar - it didn't like them and insisted on ' or I got error messages? :?

I'm currently trying to work out how to get Actions to trigger Variables that will trigger Logicblocks to respond to trigger other Actions, to try and do the equivalent of a Logic trigger that will then set a Variable by a rather convoluted path.

Your URL method of putting in the Javascript showed me a way that might work. Just very rusty on coding (decades) and haven't studied Javascript. Looks like I'll need to bite the bullet. ;)
that " error seems kinda weird to me. The only time it makes sense to throw an error with "" is when you use "" inside a "" like: var text = "hello "Branigan""; -> there you'd have to use ' and " like: var text = 'Hello "Branigan" ';.
Aside of that, all of my code is practically working now, you can see why in my recent comment, it might help you on your project too. For your "problem" you just mentioned, I'd recommend to set a Trigger, which sets a value to a variable. If you need a "responsive" value, which isnt static, I'd use the GO TO URL instead of set variable, and set it inside the javascript with pano.setVariableValue("variablename",value). Then you can use that variable as a value (not Trigger) by inputting the value $(*variablename). Its kinda like i do it in my example. First i set a variable in the javascript, then make a modifier which triggers on value-change of my variable. When this triggers i set another variable again in javascript. This variable gets compared in the logic block now, like this:
logicblock_with_variable.png
logicblock_with_variable.png (13.88 KiB) Viewed 356 times
User avatar
Multimediafabrik
Posts: 27
Joined: Thu Jun 21, 2018 11:28 pm

Thu Aug 20, 2020 5:00 pm

another update:
everything but one thing works now, but one thing. The Placeholder Hotspot URL $(hu) only gets its value, when you hover over the node. My variable $(*invisible_node) gets its hotspot URL value from the javascript and compares it in a logicblock of the visibility with $(hu). The problem is, the Hotspot only hides when i hover over it, as it only the gets the $(hu) value.
before i hover over it:
before_hover.png
before_hover.png (652.4 KiB) Viewed 353 times
after i hover on it, ALL hotspots get their $(hu) attribute, so the correct node hides. Is there any workaround on how i can get the hotspot URL without hovering over it?
after hover:
on_hover.png
on_hover.png (744.91 KiB) Viewed 353 times
Branigan
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Thu Aug 20, 2020 5:02 pm

Multimediafabrik wrote:
Thu Aug 20, 2020 4:46 pm

that " error seems kinda weird to me. The only time it makes sense to throw an error with "" is when you use "" inside a "" like: var text = "hello "Branigan""; -> there you'd have to use ' and " like: var text = 'Hello "Branigan" ';.
Aside of that, all of my code is practically working now, you can see why in my recent comment, it might help you on your project too. For your "problem" you just mentioned, I'd recommend to set a Trigger, which sets a value to a variable. If you need a "responsive" value, which isnt static, I'd use the GO TO URL instead of set variable, and set it inside the javascript with pano.setVariableValue("variablename",value). Then you can use that variable as a value (not Trigger) by inputting the value $(*variablename). Its kinda like i do it in my example. First i set a variable in the javascript, then make a modifier which triggers on value-change of my variable. When this triggers i set another variable again in javascript. This variable gets compared in the logic block now, like this:
logicblock_with_variable.png
Well, maybe it was something else, but once I got something that worked: sticking with it, just in case. ;)

Yes, that looks like it would do what I need. Thanks. :) Assuming nothing: I start with the longer version, then shorten the steps to get the same result, as when I tried something obvious and short before, like causing a Logic block to trigger on a value that's always true: didn't work properly (IMO).

Here: viewtopic.php?f=6&t=14909

Actually the fix of using 'Loading' there only works some of the time on some platforms. In the end I just used a tick from a timer I had going to bounce hotspots up/down.

Edit: You might get better luck emailing support@ggnome.com Come back and tell us the answer here? ;)
Last edited by Branigan on Thu Aug 20, 2020 11:18 pm, edited 1 time in total.
Branigan
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Thu Aug 20, 2020 6:17 pm

Branigan wrote:
Thu Aug 20, 2020 5:02 pm
Multimediafabrik wrote:
Thu Aug 20, 2020 4:46 pm

that " error seems kinda weird to me. The only time it makes sense to throw an error with "" is when you use "" inside a "" like: var text = "hello "Branigan""; -> there you'd have to use ' and " like: var text = 'Hello "Branigan" ';.
Aside of that, all of my code is practically working now, you can see why in my recent comment, it might help you on your project too. For your "problem" you just mentioned, I'd recommend to set a Trigger, which sets a value to a variable. If you need a "responsive" value, which isnt static, I'd use the GO TO URL instead of set variable, and set it inside the javascript with pano.setVariableValue("variablename",value). Then you can use that variable as a value (not Trigger) by inputting the value $(*variablename). Its kinda like i do it in my example. First i set a variable in the javascript, then make a modifier which triggers on value-change of my variable. When this triggers i set another variable again in javascript. This variable gets compared in the logic block now, like this:
logicblock_with_variable.png
Well, maybe it was something else, but once I got something that worked: sticking with it, just in case. ;)

Yes, that looks like it would do what I need. Thanks. :) Assuming nothing: I start with the longer version, then shorten the steps to get the same result, as when I tried something obvious and short before, like causing a Logic block to trigger on a value that's always true: didn't work properly (IMO).

Here: viewtopic.php?f=6&t=14909

Actually the fix of using 'Loading' there only works some of the time on some platforms. In the end I just used a tick from a timer I had going to bounce hotspots up/down.

Edit: You might get better luck emailing support@ggnome.com Come back and tell us the answer here? ;)
User avatar
Multimediafabrik
Posts: 27
Joined: Thu Jun 21, 2018 11:28 pm

Fri Aug 21, 2020 8:40 am

Multimediafabrik wrote:
Thu Aug 20, 2020 5:00 pm
another update:
everything but one thing works now, but one thing. The Placeholder Hotspot URL $(hu) only gets its value, when you hover over the node. My variable $(*invisible_node) gets its hotspot URL value from the javascript and compares it in a logicblock of the visibility with $(hu). The problem is, the Hotspot only hides when i hover over it, as it only the gets the $(hu) value.
before i hover over it:
before_hover.png
after i hover on it, ALL hotspots get their $(hu) attribute, so the correct node hides. Is there any workaround on how i can get the hotspot URL without hovering over it?
after hover:
on_hover.png
I works now. I didnt do anything. Maybe it was just a caching problem.
Branigan
Posts: 228
Joined: Tue May 19, 2020 3:43 pm

Fri Aug 21, 2020 12:01 pm

Multimediafabrik wrote:
Fri Aug 21, 2020 8:40 am

I works now. I didnt do anything. Maybe it was just a caching problem.
Oh, those... :(

Yes, after 3 attempts to get a change to happen, realise that this time it's not your fault and you need to close the browser (with autodelete everything as the standard setting) and load it up again. :D
Post Reply