Text inside a polygonal hotspot

  • hello, could someone help me?


    I would like to insert a text, inside a polygon and take the name of the hotspot as text.


    Like this example:


    https://krpano.com/releases/1.20.9/viewer/krpano.html?xml=examples/cylinder-grid-hotspots/cylinder-grid-hotspots.xml[/size]


    This is my current customization of the hotspots:


    [size=10]

    Code
    <style name="HOUZES"  fillcolor="0xff0000"  fillalpha="0.6"  capture="false" changespot="true" borderwidth="0"  bordercolor="0xaaaaaa"  borderalpha="0.6"  onover="tween(fillalpha,0.8);"  onout="tween(fillalpha,0.6);"  onclick=""  ondown.touch="onover(); asyncloop(pressed, onhover(); );"  onup.touch="onout();" />


    An important information, the hotspot must be fixed to the flat pano.


    To get the hotspot name would be something like that?


    hotspot[get(hs_name)]


    I count a lot with some help.


    Thank you!

  • Hi,

    here an example - first add this code anywhere in the xml:

    And then add:

    Code
    style="poly_hotspot_text"

    to the related <hotspot> elements.

    Best regards,
    Klaus

  • Extraordinary.

    Thanks a lot for the help.


    But could I ask for a little more help?


    The text is zooming. Would it be possible to define a size and keep it fixed? In the same way that the polygon works?

    Edited 4 times, last by msbojr (November 13, 2020 at 8:09 PM).

  • Add zoom=true this way:

    Code
    set(hs, 
            type=text,
            bg=false,
            enabled=false,
            zoom=true,
            css='font-size:14px;color:#FFFFFF;',
            html=get(caller.name)
        );

    or maybe better distorted=true instead:

    Code
    set(hs, 
            type=text,
            bg=false,
            enabled=false,
            distorted=true,
            css='font-size:14px;color:#FFFFFF;',
            html=get(caller.name)
        );
  • I would like to know if you could help me with a problem I am having, with IOS compatibility, of two items:

    Hotspots - are different in IOS (bigger, when clicked).
    Polygon text - An error occurs in IOS and does not even load the page. And I also need the text to have a fixed size, when zooming, do not change the defined size.

    Edited once, last by msbojr (November 18, 2020 at 9:32 PM).

  • The number of hotspots seems to be too much for iOS...

    Add also renderer='css3d' to render the hotspots via HTML, that saves texture memory:

    Code
    set(hs, 
            type=text,
            bg=false,
            enabled=false,
            distorted=true,
            renderer='css3d',
            css='font-size:14px;color:#FFFFFF;',
            html=get(caller.name)
        );
  • The number of hotspots seems to be too much for iOS...

    Add also renderer='css3d' to render the hotspots via HTML, that saves texture memory:

    Code
    set(hs, 
            type=text,
            bg=false,
            enabled=false,
            distorted=true,
            renderer='css3d',
            css='font-size:14px;color:#FFFFFF;',
            html=get(caller.name)
        );

    I will try to apply it to my panorama.

    I have a flat panorama with high resolution.
    I have to set font-size: 0.03px
    When I have 14px, the text is full screen

    When I apply it to all 231 hotspots, my zooming slows down (it loads with each zoom step)


    <style name="poly_hotspot_text" onloaded.addevent="add_poly_hotspot_text();" fillcolor="0x663300" fillalpha="0.20"
    bordercolor="0xb50000" borderalpha="0.30"/>


    <action name="add_poly_hotspot_text" scope="local">
    addhotspot(auto,hs);
    set(hs,
    type=text,
    bg=false,
    enabled=false,
    zoom=true,
    renderer='css3d',
    css='font-size:0.03px;color:#b50000;font-weight:bold;',
    html=get(caller.name)
    );
    caller.getcenter(hs.ath, hs.atv);
    </action>

  • Try this instead:

    Code
    set(hs, 
    type=text,
    bg=false,
    enabled=false,
    zoom=true,
    renderer='webgl',
    scale=0.01,
    css='font-size:20px;color:#b50000;font-weight:bold;',
    html=get(caller.name)
    );

    That means using WebGL rendering - and instead of a small font-size, scale the hotspot.


    Great

    it helped
    Thank you very much
    zoom also works well

    It's like this for me

    set(hs,
    type=text,
    bg=false,
    enabled=false,
    zoom=true,
    renderer='webgl',
    scale=0.003,
    css='font-size:15px;color:#b50000;font-weight:bold;',
    html=get(caller.name)
    );

  • Try this instead:

    Code
    set(hs, 
    type=text,
    bg=false,
    enabled=false,
    zoom=true,
    renderer='webgl',
    scale=0.01,
    css='font-size:20px;color:#b50000;font-weight:bold;',
    html=get(caller.name)
    );

    That means using WebGL rendering - and instead of a small font-size, scale the hotspot.

    how could I do onclick= ?
    switch this action (enable, disable) to the button (layer)

  • Do you mean showing the text only when clicking on it?

    You could change the onloaded event to onclick... but additionally code would be necessary to avoid that the text hotspot would be recreated again and again on each click... or some code to remove it...

    Now when using this action I have the hotspot name displayed on all 231 hotspots.

    I would like to turn it on and off via the onclick button (layer)


    <layer name="Poi"
    url="../images/poi.png"
    align="lefttop" x="27" y="145"
    onhover='showtext(Záujmové body,STYLE6);'
    scale="0.8"
    alpha="0.5"
    onover="tween(alpha, 1, 1);"
    onout="tween(alpha, 0.5, 0.75);"
    handcursor="true"
    keep="true"
    onclick="....................................."/>

  • and:

    Code
    <layer name="Poi" ... onclick="toggle_poly_hotspot_text()" 
  • and:

    Code
    <layer name="Poi" ... onclick="toggle_poly_hotspot_text()" 

    I try but it doesn't work

    after using onclick="toggle_poly_hotspot_text()" nothing happens


    <style name="poly_hotspot_text" onloaded.addevent="add_poly_hotspot_text();" fillcolor="0x663300" fillalpha="0.20"
    bordercolor="0xb50000" borderalpha="0.30" />


    <action name="add_poly_hotspot_text" scope="local" >
    addhotspot(auto,hs);
    set(hs,
    type=text,
    bg=false,
    enabled=false,
    zoom=true,
    renderer='webgl',
    scale=0.003,
    css='font-size:15px;color:#b50000;font-weight:bold;',
    html=get(caller.name)
    );
    caller.getcenter(hs.ath, hs.atv);
    </action>

    <action name="toggle_poly_hotspot_text">
    forall(hotspot, hs,
    if(hs.style == 'poly_hotspot_text',
    if(hs.texths,
    hs.texths.remove();
    hs.texths = null;
    ,
    addhotspot(auto, texths, webgl);
    hs.texths = texths;
    set(texths, type=text, bg=false, enabled=false, zoom=true, scale=0.003, css='font-size:15px;color:#b50000;font-weight:bold;', text=get(hs.name));
    );
    );
    );
    </action>

  • The actions were not intended to be mixed...
    The toggle_poly_hotspot_text action was storing the created hotspot so that it could be removed on the next call, but the older add_poly_hotspot_text wasn't aware of that... and additionally the getcenter() call was missing...


    So - next try:

  • The actions were not intended to be mixed...
    The toggle_poly_hotspot_text action was storing the created hotspot so that it could be removed on the next call, but the older add_poly_hotspot_text wasn't aware of that... and additionally the getcenter() call was missing...


    So - next try:

    perfect Klaus
    It works as I needed it to.

    Could the text be displayed above the picture hotspot?

    I use the one that already works for flat panorama.
    I use the image hotspot for 3d models


    <hotspot name="hs1" style="skin_hotspotstyle" onclick="popup('image', '%CURRENTXML%/hroby/225.jpg');skin_showthumbs(false);poi();" ondown.touch="delayedcall(0.3, asyncloop(pressed, onhover() ); );"
    onhover='showtext([font color="#FF0000"]225[/font][br]
                            Ľupták Pavel,STYLE6);'
    linkedscene_hoffset="361.81" use3dtransition="true"
    rotationorder="xyz"
    torigin="world"
    depthbuffer="true"
    ath="0" atv="0" scale="0.20000000000000" depth="1000" rx="362.55000000000388" ry="53.50000000000000" rz="0" ox="-11.00000000000000" oy="25.00000000000000" tx="273.74999999999045" ty="-602.00000000000000" tz="198.00000000000000"
    />

Participate now!

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