WebRotate 360 Blog

New 3D Product Rotation Mode

2017-05-01T22:52:00+00:00

We just devised a new 3D product rotation mode which was a result of a simple user request on our forum. Here's an initial "raw" example:

http://www.webrotate360.com/Downloads/Demos/Blog/2017-apr-xx-rows-single-index/2row.html

The new rotation mode is awesome and it's surprising we missed this possibility in v3.6 in the first place.. With this mode you can photograph or render just one vertical movement around an object vs multiple rows of many images. And you can go as smooth as needed in that you can have as many vertical increments as your heart desires without sacrificing production times or 3d viewer performance.

So where's the trick? The spin always falls back to the single horizontal row whenever you drag the images horizontally, which doesn't look too bad!

With this mode you can:

Drastically reduce the number of images in a 3d spin as there are no more rows with unique images on each index (except for the main horizontal "fall-back" row).
Spend so much less time producing the images.
Implement a very smooth vertical rotation as you can now have as many "rows" as needed without noticeable loss of performance as it would be the case with the classic rows.

And last but not least, the hotspot positioning in "3D" is a breeze as now you can simply go through a small set of vertical images to create the 3d hotspot effect.

We already saw how this mode worked out for a set of 3D product images of a shoe from a user and it worked and looked very nice, so we look forward to seeing more examples from you - please share if you would like them to appear on our new Examples page!

PS: this feature is available upon request and we will release it in the next v3.6.2 release in about 2-3 weeks along with the incremental zoom and a few more goodies.

Final Release of WebRotate 360 Product Viewer v3.6

2017-04-10T19:01:00+00:00

If you haven't noticed, version 3.6 of WebRotate 360 Product Viewer has been finally released!

This is a big event for us as it has been pretty much exactly two years since we started working on v3.6 and the number of enhancements and features that went into this release is huge (version history). There have been at least 5 beta releases and numerous one-off builds for our customers who needed some of the new features early in production. In general, our philosophy is to not release often as making sure nothing breaks for users across multitude of setups, browsers, and platforms on the web takes a lot of time.

UPDATE: get 30% off on WebRotate 360 Product Viewer PRO v3.6 on May 11-12. Enter '36pro' at checkout »

With v3.6 we have addressed these three major areas:

3D PRODUCT VIEWING

Until v3.6, we could only spin images on a single plane and this was alright for some time. After all, we have been shooting single-row 360 product views since 2009 and knew exactly where the need was. But Internet speeds have increased dramatically in the last 3-4 years and browsers stepped up their game, so loading multiple rows of images for full 3D product viewing become feasible and not just on desktop but mobile as well.

Not to mention, folks started to figure out how to shoot products in 3D and the usage of 3D modeling in product design have also increased. With v3.6 we give you the framework to create cool interactive 3D product views that work across all modern mobile devices and web browsers.

WEB INTEGRATION

What our users always loved about this product is the polished up viewer output. It's super interactive, slick, and fluid with a large number of easily configurable options. We put in extra effort making sure it doesn't take over your product pages while modern enough to contribute to your product presentation.

In v3.6 we pushed further to give you more control over the features and looks as well as more options to assist with the web integration. From advanced APIs and the "shortcode" template to new vector (SVG) skins and Google Analytics integration, with v3.6 you can take your vision to new heights.

MOBILE

A big chunk of work in early-mid 2016 was to make sure the viewer works great on modern mobile devices. We practically rewrote the hotspot rendering engine and introduced new hotspot type to address some of the shortcomings in the earlier versions. Viewer become fully responsive with more control over presentation on small mobile device and and high pixel density screens.

HOW TO DOWNLOAD

If you are on v3.5 or an earlier release of WebRotate 360 Product Viewer and have either PRO or Enterprise license, please contact us to get the upgrade (free for all customers).

Users on v3.6 beta or release candidate can check for updates on the About form in SpotEditor to download this release.

DOWNLOAD (FREE VERSION)

PS: our new incremental zoom didn't make it to this release so this feature will be released in the follow up v3.6.2 later on. And the work on the major 4.0 release is now going full speed...

Magento 2 Extension Is Now Available

2017-03-06T17:25:00+00:00

Finally, we have a hefty update for our Magento users.

Extension for Magento 2 has been released, incorporating some of the best features we have implemented in WebRotate 360 Product Viewer v3.6, including analytics, multi-row 3D product views, better responsiveness, API integration, and more.

Download

For those of you who are familiar with our Magento extensions, there has been always two integration modes you could use: Standard and Ad-hoc.

In Magento 1.x, the Standard integration overrides the default implementation of the product media block, disabling any previous customizations to this block. This downside was addressed in Ad-hoc, which embeds a 360 product view or a popup thumbnail to a selected html element on a product page, making it quite flexible and as a result quite popular as well.

So our new Magento 2 extension is essentially the Ad-hoc mode... We will be releasing an extra module for Magento 2 similar to the Standard integration mode (i.e with a product image gallery) sometime later this year.

PS: since we have learned first hand that a transition to Magento 2 is not a walk in the park (and a lot of companies are still waiting), we have also released a refresh of our original Magento extension for Magento 1.x. This refresh includes v3.6 scripts and minor fixes so you can now enjoy the full power of 2 years worth of the core viewer development (see product history).

A new dedicated page for all our recent Magento releases with detailed installation instructions and release history is now available on our website in the following link:

http://www.webrotate360.com/products/cms-and-e-commerce-plugins/plugin-for-magento.aspx

Another Free Template to Launch Your WebRotate Inside a Lightbox

2017-02-09T18:53:00+00:00

It's true, SpotEditor still lacks a lightbox (popup) template and we will get to this soon... For now, if you need a quick "out of the box" solution to launch your 360 or 3D product views inside a lightbox popup (and you don't rely on WebRotate's CMS plugins that have it already integrated), use this template. It's simple!

Download

Here's how to get it up and running:

Create a new project in SpotEditor or use an existing one.
Publish it as usual.
Navigate to the "published" folder of your SpotEditor project.
Copy the contents of the template zip to the published folder except for 360_assets and imagerotator folders which you already have.
Open page.html and update the config parameter in the hyperlink to point to your published xml, i.e ...?config=360_assets/YourProject/YourProject.xml
Change popup dimensions as needed by updating height and width parameters accordingly.
If you need to change the viewer skin, open viewloader_basic.html and change basic.css to one of these: thin.css, empty.css, retina.css, round.css.
Open page.html in your browser and click "Test thumbnail" to see it in action. Simple!

PS: if you use Chrome or Opera, remember about this security issue when testing the template locally.

The template is based on the prettyPhoto library that has served us well over the years although we customized it slightly for a more responsive behavior on small mobile screens, etc. Also note that you can use it as a gallery of 360 or 3D product views which you can test by uncommenting the inactive section in page.html in the attached zip.

Just ping us here if you have any issues.

Just in: WebRotate 360 Product Viewer for WordPress v3.1

2017-01-09T21:03:00+00:00

If you haven't noticed, we just quietly released a new version of our popular WordPress plugin.

The announcement was postponed a bit as we were worried it could bring a lot of unexpected customer support during the holidays in case something was overlooked during the release. Now that the holidays are over and we saw a few successful upgrades and new installations, we can finally announce this exciting new release. Why is it exciting?

First off, we have never really released or advertised v3.0 of the plugin. It has been a constant beta for almost a year. And while it packed the new WooCommerce integration and some of the original features of our core 3D product viewer, we never felt it was complete enough to call it a release..

So now with the battle-hardened 3d product viewing function, our brand new SVG skins and the long list of other major core improvements released in the past 12 months (as part of v3.6 core), it is finally a good time to get the new plugin out of the door.

Some of the notable plugin enhancements include:

API integration in wr360embed and wr360expand shortcodes.
wr360expand shortcode now allows full browser window mode instead of our usual full-screen.
Minimum viewer height property in shortcodes and global settings.
Viewer background color in shortcodes and global settings.
Full-screen support inside the popup shortcodes.
Custom path for your hotpot indicators (if you have them customized).
And a long long list of the core improvements and fixes.

We also consolidated our WordPress downloads and installation instructions as well as the plugin history on a new page that is solely dedicated to the WordPress plugin. We encourage all our users to review the Installation notes that have the most comprehensive up-to-date details on the shortcode config and other related notes.

Take it away!

Free Template With Custom Progress And Spinning Rollovers

2016-12-02T16:44:00+00:00

Ever since we launched our new website featuring the revised 3D product view of a Reebok shoe with a custom progress indicator and spinning rollovers, we have been receiving questions on how these customizations were accomplished. Today we would like to share some details as well as the working example!

Click on this image to see it in action:

SpotEditor project that was used to create this template is available here.

The actual template file with the customizations is located under the published folder in the linked archieve and it's called SiteCustomizationsDemo.html such that it's not overwritten should you re-publish the project. Note that the project requires WebRotate 360 Product Viewer v3.6 RC (free version can be downloaded here).

Let's start with the spinning progress indicator which is based on SVG Circle Progress by Jon Christensen.

The core of the customization is a new viewer initialization parameter in WebRotate 360 Product Viewer v3.6 RC called progressCallback. Now you can pass this callback upon the initialization so you can be notified on loading progress. This includes the loading of the 360 product images as well as the hotspot rollover images (if they are configured under Image Content on the Hotspot form in SpotEditor). When you supply the callback, we automatically turn off the built-in progress indicator, and it becomes your responsibility to present the progress information to your visitors.

So if you are using jQuery, here's how this callback can be setup:

    jQuery('#wr360PlayerId').rotator( {
        configFileURL: '360_assets/SiteCustomizations/SiteCustomizations.xml',
        ....
        progressCallback: function(isFullScreen, percentLoaded, isZoomLoading) {
        // your custom progress logic
        }
    });

percentLoaded is a numeric parameter, representing the current state of the loader in percent.

isZoomLoading is a boolean parameter which is only passed to the callback on zoom-in when your 3d product view is configured to use high-resolution images for image zooming. High-res zooming triggers the same progressCallback twice to give you a chance to show (and then hide) some sort of a progress status while the high-res image is being loaded. This means that isZoomLoading is first set to true followed by false in the second call when the high-res image is finally loaded.

With this in mind, we simply center the SVG circle (as per the codepen example) by absolutely positioning it inside our viewer container via div.customprogress. We then update the offset of the animated stroke in incrementProgress upon every call to progressCallback and according to the value of percentLoaded.

Next up is the spinning hotspot rollover...

We started by creating a hotspot in SpotEditor with the Text Content tab set to the following html markup (on the Hotspot form):

<div class="spinningSpot"><span>Text Hotspot</span></div>

"Use custom styles" was also checked on the same tab to give us full control over the hotspot presentation. The rest was done in CSS by styling div.spinningSpot and the embedded span element accordingly.

You can see the CSS styling inline in SiteCustomizationsDemo.html located under the published folder of the supplied SpotEditor project. In short, we have the parent container div.spinningSpot with two absolutely positioned elements: 1) div.spinningSpot:before for the spinning background and 2) div.spinningSpot span for the text. The demo SVG image that we used as a spinning background is also located in the linked zip archieve next to SiteCustomizationsDemo.html.

To test this template with your own (published) 360 views, copy SiteCustomizationsDemo.html to your published folder and update configFileURL on line 165 to link to your xml config file which you can find under 360_assets/your-project-name. Remember that you would need to publish your project using the latest SpotEditor v3.6 RC (build 1367) to test these customizations with your own 360 or 3D product images.

Interactive 3D Product Visualizations at Venues, Conferences and Trade Shows

2016-11-08T19:31:00+00:00

It's true, WebRotate 360 Product Viewer is primarily designed for the online world. This has been our objective from the start!

But the technology was developed to be flexible so you could test your work locally on your computer or take it to your customer and still be able to demo it while being offline. More so, we worked with several software companies to make sure their webrotate 3D product views could be incorporated into native mobile applications without relying on the Internet connection (using native web browser controls both iPhone and Android offer).

Now, in the advent of huge touch screen displays, these efforts proved to be even more valuable as some of our clients started using these displays at various venues by incorporating WebRotate 360 Product Viewer for super interactive digital presentations of their products. These interactive product tours range from simple 360 product photography to highly detailed 3D product visualizations sprinkled with interactive call-outs, animations and other cool effects.

Today we are showcasing one such example expertly developed by SINCITYMADMEN for Telsmith and BTI. These companies manufacture mining equipment and their machines are so large and complex, it's hard to imagine a better technology than the oversized touch-screen displays you can see in the video and the photos below (courtesy and copyright by SINCITYMADMEN):

These interactive kiosks make it easy to create the wow factor you need by taking the wealth of your product information and the sales pitch and compressing it into a sophisticated high-tech digital presentation.

Mike Hopper, the CEO of SINCITYMADMEN whose team has developed the kiosk presentations was very kind to say this:

"Our client represents large mining equipment. Not only it's physically difficult to display in a live setting - but it's even more challenging to demonstrate the features inside. Our 3D development skills paired with WebRotate 360's software turned out to be the perfect combination. Allowing us to virtually show the heavy equipment from all sides on 55" giant touch screens."

PS: we haven't tested any of the large touch-screen panels ourselves so far, so can't recommend a particular brand yet. It seems that there're a lot of choices though from companies such as 3M, Planar, Elo, Ideum, Nec, Samsung, etc.

Below you can see some of the related links we found while researching the subject. We strongly recommend to test the webrotate viewer on a selected platform before purchasing the expensive equipment to ensure that the multi-touch capability some of these displays offer will work with your 3D product views and hotspot design, or simply contact SINCITYMADMEN and they will make it work for you!

http://www.touchwindow.com/c/60inchLCDTouchscreenMonitors.html
http://ideum.com/touch-tables/
http://www.planar.com/products/large-format-displays/ps/ps5561t/

WebRotate 360 Product Viewer Integration for OpenCart 2.2.x and 2.3.x

2016-09-22T22:28:00+00:00

Announcing the release of v1.6 of our OpenCart integration. This one took some time as OpenCart had some major changes starting with version 2.2.0.0. We also wanted to incorporate all of the latest features that we have been releasing this year as part of v3.6 (version history).

So now you can enjoy multi-row 3D product views, Google Analytics integration, new styling with svg skins, new hotspot modes and various other improvements and fixes. This also allowed us to take some time to polish up our admin dashboard to look good and consistent with the rest of the OpenCart admin eco-system.

Folder structure of the module was re-worked to comply with the new OpenCart guidelines, so if you are on OpenCart 2.2.0.0 or 2.3.x and upgrading from the previous version of the webrotate plugin, it's best to remove the old plugin files first and then re-install using the new download links.

To remove old plugin files, please delete these files and folders fist:

admin\controller\module\wr360
admin\controller\module\webrotate360.php
admin\model\catalog\webrotate360.php
admin\view\template\module\webrotate360.tpl
admin\language\english\module\webrotate360.php
catalog\controller\module\wr360

You will also have to delete this webrotate vQmod file as it has changed as well:

vqmod_webrotate360_header.xml

Good news is that the database structure hasn't changed, so all your existing 360 product view configurations will remain intact and will still work with the latest version of the core 360 product viewer.

We now also have a dedicated page for the OpenCart plugin where you can find the latest downloads and instructions as well as the version history:

WebRotate 360 Product Viewer Integration for OpenCart

If you have any issues with the installation or upgrade, please let us know.

Shopify Integration for WebRotate 360 Product Viewer Released

2016-09-01T18:07:00+00:00

Happy to announce that the first version of WebRotate 360 Product Viewer for Shopify has been released.

This time it's a full blown web application that neatly hooks into your Shopify dashboard while providing all latest features we released so far in v3.6. It's quite flexible too and should work with pretty much any Shopify theme or fine-tuned further by a Shopfiy theme developer as needed. And it's free!

Note that Shopify doesn't allow uploading folders to their file hosting yet which is required for WebRotate 360 and 3D product views to operate, so a separate hosting account is necessary. You may use any existing FTP account, setup an Amazon S3 account, etc.

Read more and install the app

Version 3.6 Release Candidate Is Available For Download (Build 1367)

2016-07-27T18:17:00+00:00

v3.6 Release Candidate is now available for download! It includes a long list of improvements, new features and fixes that you can review here. These changes and updates were mostly driven by the work we have done on our new website in the last 6 months.

It could have been the final v3.6 release, but we still have to update the user guide and the info tooltips inside SpotEditor and it takes somes time.. Otherwise, it's a solid release that we recommend to all our users.

There're two major additions that most users will notice:

1. Vector SVG images are now used across all of viewer resources (no more raster graphics!). This ensures that your viewer skins and hotspots look sharp on any device. We also completely restyled two existing skins (thin and round) to look modern and usable with a greater variety of website designs out there. Also, all of the skins finally have the row navigation buttons for your multi-row 3D product views.

2. There's a new "shortcode" integration mode and publishing template which removes the viewer script snippets from your pages completely. This can drammatically simplify your website integration with various CMS platforms, especially when there're multiple 360 product views on the same page. Documentation is still in the works but you can simply select Shortcode template on the Publish form in SpotEditor and see it in action.

If you are a developer, this release adds a good number of API improvements, giving you more options for major viewer customizations. All new APIs are listed in the JavaScript template that you can select on publish in SpotEditor (and then explore the source html for additional bits and pieces as needed). Not to mentioned the long awaited support for jQuery 3.0!

DOWNLOAD v3.6 RC

Previously released features and fixes in v3.6:

PRO & Enterprise customers can request the commercial version of v3.6 RC via support. If you received v3.6 beta download URL from us before, it still works! And if you already have a previous build of v3.6 beta installed, you can simply download the new update via Check Updates on the About form in SpotEditor.

If you need any help applying this update to any of WebRotate 360's plugins (i.e, WordPress, Joomla, PrestaShop, Magento, OpenCart, BigCommerce), just let us know and we would be happy to assist.