Custom buttons

[dougarts]

Hello,

I need the ability to code and create custom buttons that when clicked, will rotate to a specific frame. I noticed in trying to add buttons to the DOM after a project was finished that the DOM kept getting refreshed automatically and seemed to rename the element I put in their post publishing.

Is there a way to add button functionality to rotate the product automatically to a specific frame?

Best,

Emma

 

[WebSupport]

Hi Emma, you can publish your project using JavaScript API template (can be selected on the Publish form in SpotEditor) where you will see two link buttons called playToLabel and jumpToLabel which should accomplish what you need I think.

So you would first create a label in SpotEditor for an image you would like to navigate to via API and then you can use the API by instructing 360 product viewer to play or jump to the label. Here's an example copied from the template for playToLabel:

$("#playToLabel").click(function(e){
  e.preventDefault();
  api.images.playToLabel(
  "play",  // Label name as specified in SpotEditor under Images->List
  1,   // Playback speed which is a number of seconds to make a full 360 degree spin.
  function(labelName){  // Optional callback which is called when label is reached.
     alert("Reached label: " + labelName);
  });
});

To assign a label, navigate to Images->List in SpotEditor and double-click on a required image.

 

[dougarts]

Thank you so much! That worked perfectly except for being able to line up my buttons (hotspots) in the exact position I want them to be (Post publishing as I have not seen anything to actually move the hotspots only the image it brings up). Is that done in your obfuscated Javascript code or is there a CSS/XML file that takes care of this? I have not fully dug into it, but if you could direct me there it would save some time.

Best!

Emma

 

[dougarts]

Never mind! I totally found your super easy way to position them without looking through any code. You guys rock! Thank you for making such an easy to work with product.

Emma

 

[WebSupport]

Thank you!

 

[laurashank]

Hello. I am trying to use this function - jumpToLabel and I cannot make it work. I have added the label "poppetExplode" to the image, and added the function name to the hotspot action, then placed the function script in the head of my html file. It is not working for me. Could you tell me what I am doing wrong?

Thank you!

 

[WebSupport]

Hi Laura, here's a bit more info that might explain it better:

1) The Hotspot form allows you to respond to hotspot clicks by providing your callback function name (e.g myHotspotActionCallback) under JavaScript action as per your screenshot. The callback may look like this in your html:

<script>
function myHotspotActionCallback(hotspotName) {
// do something here when user clicks on the hotspot
}
</script>

The same can be accomplished via API by subscribing to the hotspot action event in which case you wouldn't need to provide the callback name (on the form) at all.

Also, instead of specifying the callback, you could select the Label action on the Hotspot form and then select an existing label for "jump to label" action right there. This would make the viewer jump to your selected label when user hits the hotspot.

2) You can "jump to label" via API which you are really close to in your example above. It's just that the API object that you call is not available inside your $("#jumpToLabel").click event handler. It becomes available via apiReadyCallback parameter in the script initialization, e.g:

var rotator = WR360.ImageRotator.Create('wr360PlayerId');
rotator.settings.configFileURL = '360_assets/NewProject1/NewProject1.xml';
            ....
rotator.settings.apiReadyCallback = function(api) {}; // <---- it's passed right here
rotator.runImageRotator();

So you would need to use the api object we pass inside the callback, e.g you could move your click handler inside the callback function.

I hope this makes sense! Let us know if any questions.

 

[laurashank]

Hi - Thank you! I actually wound up using the Label Action instead of Javascript action in the Hotspot editor...I was making it harder than it needed to be. But this will help me with future customization.

Thanks again!