Changing default hotspot skin by an animated PNG

alfabeta · August 11, 2024 at 12:02 AM

I created a copy of the style skin_hotspotstyle -> skin_hotspotstyle2 and changed the url to an animated (3 frames) PNG image.

A hotspot with this style only displays the first frame of the image.

How can I get it displayed as animated?

Tuur · August 11, 2024 at 9:03 AM

Hi,

Have a look here, especially to the xml

krpano.com - Examples

Tuur

alfabeta · August 11, 2024 at 2:21 PM

Thanks Tuur for your answer.

That's an alternative to what I've asked.
I already had tried that with my own PNGs.

I started with a 3 scenes virtual tours and added a hotspot to the first scene the same as one of those examples

Code

	<hotspot name="spot4" url="circle.png"                onloaded="do_crop_animation(102,102, 60)"  ath="0" atv="0" enabled="false" />

Also added the action "do_crop_animation".
I tried with some of my own circle.png simple yellow circles with transparent background and also animated ones with 3 frames.
Once tour.xml loads circle.png only displays for a fraction of second.
cursor:default -> cursor:pointer over the area where circle.png should be displayed.

I don't know how krpano circle.png was created. I guess it is a simple circle but https://krpano.com/viewsource.htm…pots/circle.png ...

Thank you.

s-maier · August 11, 2024 at 3:57 PM

Just use the normal url instead of the viewsourcecode one

https://krpano.com/releases/1.21/viewer/examples/animated-hotspots/circle.png

The animation uses frames that are crops of the image that contains a row of frames in one single image.

alfabeta · August 11, 2024 at 4:16 PM

Ok, now I see the actual PNGs. But how about using my own animated PNG without crop animation action?

Thank you.

alfabeta · August 11, 2024 at 10:14 PM

This is one of my hotspots

<hotspot name="room2" style="skin_hotspotstyle2" ath="142.312" atv="36.293" distorted="false" zoom="false" linkedscene="room2" onclick="loadscene(get(linkedscene),null,MERGE,ZOOMBLEND(1))" />

where

<style name="skin_hotspotstyle2" url="circle6A.png"scale="0.6" edge="top" oy="0" distorted="false" tooltip="" onloaded="add_all_the_time_tooltip(); " />

add_all_the_time_tooltip is an action to display the name of the linked scene above the hotspot.

Code

<action name="add_all_the_time_tooltip">
   txtadd(tooltipname, 'tooltip_', get(name));
   addplugin(get(tooltipname));
   txtadd(plugin[get(tooltipname)].parent, 'hotspot[', get(name), ']');
   set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
   set(plugin[get(tooltipname)].align,top);
   ...
   ...
   set(plugin[get(tooltipname)].textshadowangle,90);
   copy(plugin[get(tooltipname)].html,scene[get(linkedscene)].title);
   set(plugin[get(tooltipname)].enabled,false);
</action>

Display More

With this structure I get the animated PNG work as expected with. with the name of the linked scene.
But if I don't want the linked scene name displayed and delete onloaded="add_all_the_time_tooltip(); " from the style then animation brokes and a still image is displayed (first frame of png)

HarrisReid · August 12, 2024 at 11:38 AM

It sounds like your hotspot is only showing the first frame because it doesn't support animation. You might need to use CSS or JavaScript to handle the animation part. Try embedding the PNG as a sprite and using CSS @keyframes to animate it. If that's too complex, consider using a GIF or an SVG with built-in animation support instead.

s-maier · August 12, 2024 at 12:52 PM

Or just convert in the format krpano is using anyway

alfabeta · August 12, 2024 at 1:02 PM

Quote from HarrisReid

It sounds like your hotspot is only showing the first frame because it doesn't support animation.

"With this structure I get the animated PNG works as expected with the name of the linked scene."

s-maier · August 12, 2024 at 1:10 PM

Why don't you just place the 3 frames next to each other and use it with the animation action?

It would take like 2 minutes and everything works like you want it to.

alfabeta · August 12, 2024 at 3:06 PM

Okay, thank you, I get that.

Anyway I solved what I was asking.

From post #6
<hotspot name="room2" style="skin_hotspotstyle2" ath="142.312" atv="36.293" distorted="false" zoom="false" linkedscene="room2" onclick="loadscene(get(linkedscene),null,MERGE,ZOOMBLEND(1))" />

where the default url style was changed to the animated PNG.
Changes in hotspot:

XML

linkedscene="" onclick="loadscene('room2',null,MERGE,ZOOMBLEND(1))"  />

That way PNG is displayed correctly and tooltip is not displayed

Changing default hotspot skin by an animated PNG

Participate now!

Tags