Changing default hotspot skin by an animated PNG

  • 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?

  • 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.

  • 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.

    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)

  • 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.

  • 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

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!