Introducing a new rotation mode! When it's on and the 360 product viewer is zoomed in, you can pan vertically and drag horizontally at the same time.

This is very convenient as pretty much the entire zoomed-in product can be evaluated quickly and there are no extra buttons to click to switch between the pan and drag modes. The only other option we have to achieve a similar effect is using the mouse wheel (Control tab -> More options -> Rotate on mouse wheel) which is not usable with touch-screen devices.

To enable the new mode, expand Control tab -> More Options where you will see a set of these three new settings under the Zoom section:

• Allow drag rotation when zoomed
• Allow panning on X-axis
• Allow panning on Y-axis

By default the last two are checked as our standard mode of operation is to allow X-Y panning when viewer is zoomed-in. Check "Allow drag rotation when zoomed" and uncheck "Allow panning on X-axis" since we can't drag and pan on X-axis at the same time.

Some of our users would flip input via Control -> Flip input axis to make viewer spin 360 product images when you drag up & down vs our usual left & right drag. In this case you would need to uncheck "Allow panning on Y-axis" instead.

To achieve even a more fluid user experience, enable this relatively new setting called "Zoom on single tap" which you can see at the top of the same tab in the screenshot. Once it's set, a single click or tap triggers zoom-in and user can immediately pan and zoom at the same time as discussed above.

This new mode works wonders for tall and narrow products such as the LED lantern in the example video at the beginning of the post.

Photo by Maarten van den Heuvel

In this new series of posts we will attempt to cover some of the topics that so far have not been documented well, starting with this API example that spins a 360 product view to a desired frame and zooms in to a selected hotspot via API (WebRotate 360 Product Viewer programming interface).

Check it out by opening this link and clicking the button at the top. Alternatively, download the entire SpotEditor project here and see the customized html template in the published folder.

See Example

To achieve the same result, start by creating a new project in WebRotate 360 SpotEditor (download here) or open an existing SpotEditor project.

Navigate to Images -> Rows tab that has the list of all images in the 360 product view and select one of the images that will be used as a label for zooming (e.g as a thumbnail in your custom gallery that will need to be zoomed in inside the 360 spin). Double click on the selected image and give the label some name, i.e 'zoom' in the attached screenshot.

Create a new hotspot and place it at a desired location on the same image as the one that was labeled in step 2 (see the second screenshot).

If you don't want to see the hotspot indicator images on the published 360 product view (i.e those circular shaped graphics that we usually use for the hotspots), you can assign a custom indicator image that can be a 1x1 transparent PNG image for example. You can import such custom indicator images by clicking the current indicator image on the first tab of the Hotspot form.

Once you publish the project, add the apiReadyCallback property to your integration snippet as shown in the following example.

The example has a pretty straightforward logic where we call api.images.playToLabel to spin to our 'zoom' label first and once the playback is finished, we call api.hotspots.getDynamicHotspots()[0] to get the first hotspot and extract its coordinates on the current frame (i.e the image we labeled with 'zoom').

You can also enumerate the array that is returned in getDynamicHotspots to find a hotspot by its name as needed. Note that the second parameter in 'playToLabel' is the speed at which we want to spin to the labeled image. The speed is measured in seconds and it's the time it takes for the 360 product view to make a full spin (i.e 2 seconds in this example).

jQuery('#wr360PlayerId').rotator({
    
    ....

    apiReadyCallback: function(api, isFullScreen) {
        if (isFullScreen)
            return;
       
        jQuery('#zoomButton').click(function() {
            api.images.playToLabel('zoom', 2, function() {
                var hostpost = api.hotspots.getDynamicHotspots()[0];   
                api.images.zoom(1, { x: hostpost.coordX, y: hostpost.coordY });
            });
        });
    },

    ....

});

Lastly, we call api.images.zoom(1, { x: hostpost.coordX, y: hostpost.coordY }) where we pass zoom step (which is 1 unless you have configured multiple zoom steps under Control -> More options -> zoom) and the coordinate for our zoom.

In the final release of v3.6.4 which is planned for November 2019 (version history), we will add a new API function that will allow receiving the coordinate of a hotspot on a desired image / label even before the hotspot is shown as right now, as you may have noticed, we had to wait for playToLabel to finish before calling zoom so that we can get the correct coordinates. With the new API, you won't need to wait in playToLabel and rather call api.images.zoom right after or before it (i.e not inside the playToLabel callback) which will produce a more dramatic effect with the concurrent play and zoom transitions.

See the next post in the Missing Manuals series here.

Photo by Marvin Meyer

As many of you already know, opening a 360 product view from your hard-drive may not always work "out-of-the-box" in modern web browsers. Since the release of Firefox 68 and the announcement that the next version of Microsoft Edge is based on the Chromium browser, pretty much anybody who uses WebRotate 360 needs to be aware of the required extra steps to configure your browser for local tests or offline viewing.

The good news is that everything works without issues once the 360 spins are uploaded online or loaded via a local web server on your computer or network. Also, the next version of WebRotate 360 Product Viewer will come with a built-in web browser that will be pre-configured for pain-free local and offline viewing.

Update [Nov 11, 2022]: Latest v4 now includes a built-in web server, so as along as you lunch the browser previews from inside SpotEditor (i.e not manually by clicking or dragging published html files), the following steps are now NOT required in v4 and onward.

Update [Aug 10, 2023] Latest v5 now includes WebRotate 360 QuickView that can be used for local offline viewing and SpotEditor previews.

Now lets see how to configure browser security for your local testing in these popular web browsers:

CHROME, EDGE and OPERA

When you launch a local preview upon publish in SpotEditor, it's loaded in a local web-server that is built-in in SpotEditor (since late v3.6.5 beta), so the preview works as-is in any browser.

If you want to launch a published view manually by double-clicking a published html file or dragging it to a browser window, things get trickier as you have to first configure the browser to allow loading local files.

On Windows we recommend creating an extra browser shortcut (on your desktop for example) and pasting this extra flag at the end of the Target field of the shortcut:  --allow-file-access-from-files. You may also rename the shortcut so you don't use it accidentally for regular web browsing.

Just make sure there're no instances of browser executable still running when launching it with the extra flag.

Alternatively, you may use this script and save it as .bat file that you can run on Windows to automate closing all active browser windows (if any) and re-launching it with the correct flag. Replace chrome.exe and its path with msedge.exe or opera.exe accordingly:

Set "App=chrome.exe"
Start /WAIT taskkill /F /IM %App% /T
:loop
Timeout /t 1 >NUL
tasklist.exe /FI "ImageName eq %App%" /NH |find /i "%App%" >NUL && Goto :loop
call  "c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

On Mac, we need to use Terminal app and an extra script file to launch Chrome with required permissions as follows:

• Create an empty text file and paste this line:
  open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
• Save the file as webrotate.sh to your desktop for example
• Launch Terminal app and type in the following (replace YourUserName):
  chmod +x /Users/YourUserName/Desktop/webrotate.sh
• Close Terminal app.

Now that you have prepared an executable script, you can launch Chrome with required settings whenever you need to test your 360 product views by opening the script file in Terminal via the "Open With" command in Finder.

Consider installing Firefox just for testing your published 360 product views as configuring offline file access in Firefox is pretty straightforward as described below.

FIREFOX

Follow these steps in Firefox to enable the loading of local files the way it has been possible in the last ten or so years until the release of Firefox 68.

• Open Firefox.
• In the address bar type in about:config
• You will see a message, warning that changing anything there may be harmful.
• Confirm that you accept the risk to proceed.
• A new page now opens where you can change Firefox configuration.
• In the search bar at the top of this page type in privacy.
• Find this option in the filtered list security.fileuri.strict_origin_policy (or privacy.file_unique_origin if using Firefox prior to v95).
• Click it until it displays as false as per attached screenshot.

This does expose you to a known security issue if somebody tricks you into downloading and launching a rogue html file from your hard-drive so you may consider setting up a separate Firefox profile if this is a concern.

SAFARI

To be able to preview your published work locally in Safari 11 (and up), navigate to Safari's Develop menu and check "Disable Local File Restrictions" as shown below. If you don't see the Develop menu in the menu bar, choose Safari > Preferences, click Advanced, then select "Show Develop menu in menu bar".

iOS

For offline applications where you need to load 360 spins on devices with iOS, consider third-party apps such as the one discussed in the following blog post:

Using WebRotate 360 Product Views Offline on iPad

Photo by panumas nikhomkhai

Today, after nearly two years of development, we're happy to offer our new service, PixRiot. It's designed to help our users who need a reliable online platform for the efficient management and fast delivery of their digital assets worldwide. It's built using the latest technology and relies on the best network of servers around the world to provide unmatched reliability and access speeds.

Update [Feb 01, 2022]: latest PixRiot release adds support for WebRotate 360 Product Viewer v4, videos, private folders, webp and more. Find more details in this blog post.

To show how simple it is to use PixRiot, let's review a workflow one would use to host and deliver their published WebRotate 360 assets (both interactive 360 product views and animated GIF videos are supported).

1) Download and install the latest WebRotate 360 publishing software (v3.6.4 beta; request commercial version of v3.6.4 beta here if you have purchased it before) and publish your 360 product images as usual in SpotEditor. Make sure the "Compatible with pixriot.com" check-box is checked on the Publish form and remember to re-publish any existing SpotEditor projects that you plan to upload to PixRiot.

2) Login at pixriot.com using account details you have received from us via email. Until our automatic sign-up is available, you can request your free PixRiot account here.

3) Create a new folder using the New Folder button in PixRiot assets toolbar as needed. The folders are designed to help you organize and manage your assets in a variety of ways. For example, you may create a folder per a website or a client project you manage or per a product category.

Each PixRiot folder can store any number of assets or sub-folders.

4) To upload a single 360 product view, navigate inside the new PixRiot folder in your browser and then drag a single folder you see under published/360_assets/ of your SpotEditor project (i.e Your-Project-Name) to the PixRiot folder you just created.

To upload multiple 360 product views at once, publish several SpotEditor projects to the same folder on your computer, navigate inside 360_assets of that folder and then drag all project folders you see there to your PixRiot folder at once. Alternatively you can rename 360_assets to something else as needed and drag just the renamed folder.

Uploaded assets are now searchable within your PixRiot account and are made public by default so you can quickly share them elsewhere. Advanced security management is coming later this year.

For a quick preview of the uploaded 360 product view, click on the "expand" button which is the first icon at the end of the asset panel.

5) Use the "globe" icon located at the end of the asset panel to share the upload. Config URL can be used with various CMS plugins that you can download here or our APIs. All WebRotate 360 plugins and APIs have a field or a property called either config, Config File URL or 360 View Path and this is where you can paste the URL.

If not using our plugins or APIs, select iFrame tab to copy a generic iFrame embed code which should work anywhere you can insert a shared YouTube video or a similar embed code.

To get your free PixRiot account, request form is available here or call us directly on +1 (800) 996-8617. You can use your free account for up to 500 MB of uploaded data and 2 GB of monthly traffic.

PixRiot Business plans starting at $22/month are available upon request. If you were a client of now defunct Megavisor, discounts are available.