Rotate to specific point or image on button click in JS

[Mavia Ali]

I have integrated web rotate 360 in my react app and it works perfect. Now, what I want is 360 image should auto rotate to any specific image when I click on button. Let me explain a complete scenario:

I have 4 buttons (Front, Right, Left, Rear). Now on click event of front button the front part of 360 image should be focused or auto rotate and same for other buttons as well.
Can you help me do that?

 

[ForumAdmin]

I'm glad React integration is going well! As for the requirement, it's pretty easy.

1. Create an image label. This is done under Images -> Rows tab in SpotEditor, where you can double-click on any of the images to create a named label. This will simply add a property to the published xml file (<image src="images/IMG_0015.jpg" label="xyz" />), so you can manually add them in xml if needed.



2. In your viewer API integration in React, call this method as needed with the first parameter being the name of the label you entered in #1. Second parameter is either the playback speed or an object as described below. Third parameter is a callback you can pass to get notified once the label has been reached.

 api.images.playToLabel(
    // Label name as specified in SpotEditor under Images->List
    "play",
    /* Playback speed (period). Period represents the number of seconds it takes to make a full spin. Alternatively, instead of the period number, you can pass an object like this:
        {
            speed: 2 - number of seconds it takes to make a full spin,
            direction: 0 - short path = 0, long path = 1, clockwise = 2, counterclockwise = 3,
            keyHotspot: 'spot1' - optional hotspot name to activate and/or trigger or zoom to,
            activateHotspot: true/false - activate keyHotspot,
            hotspotTriggerDelay: 2000 - number of milliseconds after which to trigger keyHotspot action (if action is present and even if not activated),
            resetZoom: true/false - zoom out if zoomed before starting the playback,
            zoomOutSpeed: 400 - resetZoom speed in milliseconds,
            zoomToHotspot: true/false - zoom to keyHotspot,
            zoomInSpeed: 400 - zoom to hotspot speed in milliseconds,
            disableDrag: true/false - disable image dragging via mouse or touch while playToLabel is running
        }
    */
    1,
    // Optional callback which is called when label is reached.
    function(labelName){
        alert("Reached label: " + labelName);
    }
);

 

[Mavia Ali]

Many thanks! That worked for my requirement.

 

[Mavia Ali]

How can I change the pointers/hotspots image, can you guide me over this as well please?

 

[Mavia Ali]

I am using normal + sign image provided by an open editor for hotspots. But what I want is when someone clicks on any hotspot the image should change to any other image. Do you have any idea how we can do this?

 

[ForumAdmin]

Hi, can you please paste a screenshot of the hotspot popup where you need to customize the image?

 

[Mavia Ali]

 

[Mavia Ali]

These are the hotspots numbered as (1, 2). I want to change it another icon (checkmark icon) when click on it.

 

[ForumAdmin]

Each such icon (hotspot indicator) has these CSS classes assigned:

hotspot_indicator hotspotname_indicator <-- where hotspotname is the name you gave the hotspot

When it's clicked, we assign two extra classes to the indicator elements:

indicator_active hotspotname_active

Generally, this should be sufficient to customize the active indicator presentation as needed.

PS: if your company hasn't purchased a webrotate license, please do for further support.