Hotspot JavaScript Action How To

CSS styling, controls, custom look and feel, custom packaging and deployment.
travancic
Posts: 4
Joined: Sun Feb 21, 2021 8:53 am
Location: Minneapolis, MN, USA
Contact:

Hotspot JavaScript Action How To

Postby travancic » Sun Feb 21, 2021 9:05 am

OK, I am trying to call a JavaScript function (using jQuery) when user clicks on a hotspot.

Each hotspot click will show a DIV (either modal window or a div that slides into view) with bunch of info about particular hotspot.

I cannot seem to find any tutorials about this. Could not find any demos on demo page about this either.

I am wondering it this is even possible?

travancic
Posts: 4
Joined: Sun Feb 21, 2021 8:53 am
Location: Minneapolis, MN, USA
Contact:

Re: Hotspot JavaScript Action How To

Postby travancic » Sun Feb 21, 2021 9:42 am

And... this is how my code looks like. Trying to somehow trigger the showDetails() functions but nothing happens.

XML:

Code: Select all

  <hotspots>
    <hotspot id="hotspotred" renderMode="0" indicatorImage="circ-cross-large-red.svg" activateOnClick="true">
      <spotinfo clickAction="11" clickData="showDetails();" />
    </hotspot>
    <hotspot id="hotspotblue" renderMode="0" indicatorImage="circ-cross-large-blue.svg" activateOnClick="true">
      <spotinfo txt="test" css="color:#333333;width:200px;padding:15px 15px;border:1px solid #EEEEEE;background-color:rgba(255,255,255,1);" clickData="showDetails();" />
    </hotspot>
    <hotspot id="hotspotgreen" renderMode="0" indicatorImage="circ-cross-large-green.svg">
      <spotinfo clickData="showDetails();"  />
    </hotspot>
    <hotspot id="hotspotyellow" renderMode="0" indicatorImage="circ-cross-large-orange.svg">
      <spotinfo />
    </hotspot>
  </hotspots>


HTML

Code: Select all

<script language="javascript" type="text/javascript">
   
    function showDetails(){
        console.log("Show Details Function Triggered.");
    };

    jQuery(document).ready(function(){

        jQuery('#wr360PlayerId').rotator({
            licenseFileURL: 'license.lic',
            configFileURL: '360_assets/HouseHotspotJavaScript/index.xml',
            graphicsPath: 'imagerotator/html/img/basic',
            alt: 'JavaScript Action Test',
            responsiveBaseWidth: 1920,
            responsiveMinHeight: 0,
            googleEventTracking: false,
        });       

    });   

</script>

travancic
Posts: 4
Joined: Sun Feb 21, 2021 8:53 am
Location: Minneapolis, MN, USA
Contact:

Re: Hotspot JavaScript Action How To

Postby travancic » Sun Feb 21, 2021 12:29 pm

To answer my own question :) In case someone needs it.

This is the correct way to specify the function in the XML file. clickData should only contain function name, no parentheses or semicolon.

All works now.

Code: Select all

  <hotspots>
    <hotspot id="hotspotred" renderMode="0" indicatorImage="hotspot-icon-dupont.png" activateOnClick="true" effects="scaleUp">
      <spotinfo clickAction="11" clickData="showDetails" />
    </hotspot>
    <hotspot id="hotspotblue" renderMode="0" indicatorImage="hotspot-icon-dupont.png" activateOnClick="true" effects="scaleUp">
      <spotinfo clickAction="11" clickData="showDetails" />
    </hotspot>
    <hotspot id="hotspotgreen" renderMode="0" indicatorImage="hotspot-icon-dupont.png" activateOnClick="true" effects="scaleUp">
      <spotinfo clickAction="11" clickData="showDetails" />
    </hotspot>
    <hotspot id="hotspotyellow" renderMode="0" indicatorImage="hotspot-icon-dupont.png" activateOnClick="true" effects="scaleUp">
      <spotinfo clickAction="11" clickData="showDetails" />
    </hotspot>
  </hotspots>


And then you can add whatever you need to your function.

Code: Select all

<script language="javascript" type="text/javascript">
   
    function showDetails(){
        console.log("Show Details Function Works!");
    };

    jQuery(document).ready(function(){

        jQuery('#wr360PlayerId').rotator({
            licenseFileURL: 'license.lic',
            configFileURL: '360_assets/HouseHotspotJavaScript/index.xml',
            graphicsPath: 'imagerotator/html/img/basic',
            alt: 'JavaScript Action Test',
            responsiveBaseWidth: 1920,
            responsiveMinHeight: 0,
            googleEventTracking: false,
        });       

    });   

</script>

WebSupport
Posts: 1120
Joined: Thu Aug 23, 2012 11:35 am
Location: Pasadena, CA
Contact:

Re: Hotspot JavaScript Action How To

Postby WebSupport » Sun Feb 21, 2021 3:47 pm

Hi there and thanks for the update! 8-)

There's another way to do it and it's via hotspot APIs which are more advanced and have various other options. You can see them in action if you download this archive and see the api template in the root:

https://webrotate360.s3.amazonaws.com/s ... plates.zip

travancic
Posts: 4
Joined: Sun Feb 21, 2021 8:53 am
Location: Minneapolis, MN, USA
Contact:

Re: Hotspot JavaScript Action How To

Postby travancic » Sun Feb 21, 2021 4:49 pm

WebSupport wrote:Hi there and thanks for the update! 8-)

There's another way to do it and it's via hotspot APIs which are more advanced and have various other options. You can see them in action if you download this archive and see the api template in the root:

https://webrotate360.s3.amazonaws.com/s ... plates.zip


Thanks for a quick reply!

I did take a look at that earlier but I was stuck at how to reference the function I need in the XML. I think I am getting a better idea how everything works.

I did get it to work but I will take a deeper dive to see if I can optimize the process a bit.


Return to “Viewer Development and Customizations”

cron