Hotspot Delete on moveable Icon-Click?

Hellkeeper · July 12, 2021 at 11:29 AM

Hello,

maybe you can give me a helping hand on how to best implement the following functionality.
I have a small krpano web app where visitors can dynamically set hotspots by clicking on a gigapixel panorama.
This hostspot is then draggable so that it can be positioned even more precisely. So far so good - everything works fine.
Now I would like to add another functionality to the hotspot - namely a small "Delete" symbol in the upper corner (see screenshot of the icon) - as soon as this is clicked, I would like to delete the hotspot.

HS Drag/Drop on "Main Icon", HS Delete on "Sub Icon" ...

Unfortunately, at the moment it is just not clear to me how I should get these two functions (move & delete) onto the hotspot - even if they are different regions of the icon ...?!

Hopefully one of you here can give me the right idea!

Thank you, best regards from Tyrol
Andreas

Hellkeeper · July 15, 2021 at 3:48 PM

really noone?

luo jian chao · July 15, 2021 at 4:09 PM

someone

But I don't know how to deal with your stuff

indexofrefraction · July 15, 2021 at 4:11 PM

you can nest hotspots like layers
the type has to be css3d, so they don't work in webvr

Code

<hotspot name="yourmarker" ... >
  <hotspot name="closebutton" onclick="..." .... />
</hotspot>

Hellkeeper · July 15, 2021 at 4:42 PM

@indexofrefraction - thx for this Info. But I'm creating the Hotspots dynamically. Not quite sure how to nest them then?

Code

addhotspot(get(hs));
set(hotspot[get(hs)].url, calc(viewerDom+viewerPath+'includes/krpano/1.20.9/skin/GPix_Marker.png'));
...

But I'm just near a solution with Layers and the Hotspot as Parent ... Guess this should work

Code

calc(del_layer_name,'layer_' + hotspot[get(hs)].name);
addlayer(get(del_layer_name));
set(layer[get(del_layer_name)].type, "image");
set(layer[get(del_layer_name)].parent, calc("hotspot["+get(hs)+"]"));
set(layer[get(del_layer_name)].onclick, trace("del layer click"););

indexofrefraction · July 15, 2021 at 6:07 PM

just add url, align, width, height to the child layer ...
maybe you must add renderer="css3d" to the parent and child as well
and remember such hotspots wont show in webvr

Hellkeeper · July 15, 2021 at 6:14 PM

thx for your input ... seems like it's working as it should now ... bit hard to do if one only works with krpano every few years ...
Solution:

Code

screentosphere(mouse.x, mouse.y, ath, atv);
txtadd(hs, 'hs_', get(hotspot.count));
addhotspot(get(hs));
jscall(calc('addHotspot("kbZ1", "' + hs + '", "' + ath + '", "' + atv + '");'));
set(hotspot[get(hs)].url, calc(viewerDom+viewerPath+'includes/krpano/1.20.9/skin/Marker.svg'));
assignstyle(hotspot[get(hs)], 'hotspot');
set(hotspot[get(hs)].onover, "set(url,calc(viewerDom+viewerPath+'includes/krpano/1.20.9/skin/Marker_hover.svg'))");
set(hotspot[get(hs)].onout,  "set(url,calc(viewerDom+viewerPath+'includes/krpano/1.20.9/skin/Marker.svg'))");
set(hotspot[get(hs)].ondown, "set(dragging,true); draghotspot();");
set(hotspot[get(hs)].onup, "set(dragging,false);");
set(hotspot[get(hs)].zorder, 50);
copy(hotspot[get(hs)].children, true);
copy(hotspot[get(hs)].ath, ath);
copy(hotspot[get(hs)].atv, atv);


calc(del_layer_name,'layer_' + hotspot[get(hs)].name);
addlayer(get(del_layer_name));
assignstyle(layer[del_layer_name], 'layer');
set(layer[get(del_layer_name)].type, "image");
set(layer[get(del_layer_name)].url, "/includes/krpano/1.20.9/skin/Marker_hover_delete.svg");
set(layer[get(del_layer_name)].parent, calc("hotspot["+get(hs)+"]"));
set(layer[get(del_layer_name)].enabled, true);
set(layer[get(del_layer_name)].keep, false);
set(layer[get(del_layer_name)].zorder, 100);
set(layer[get(del_layer_name)].x, +26);
set(layer[get(del_layer_name)].y, -11);
set(layer[get(del_layer_name)].onclick, "deletehotspot();");

Display More

indexofrefraction · July 15, 2021 at 6:18 PM

Participate now!