360 degree Car/Product view for mobile web – iPhone

I thought of writing this post due to increasing number of search queries that I found out on my site stats. A 360 degree product view for mobile web is important now as lot of manufacturers are starting to move towards mobile web apps for displaying their products.
In two of my earlier posts I have already talked about a 360 degree product view for desktop browsers with examples – post 1, post2. For the 360 degree to run on a mobile browser I had to make some adjustments – make the sprite much smaller in size, add touch gestures. The rest of the concept is same. So, in this post I will talk on how to make the 360 degree for iOS devices (iPhone,iPod and iPads).
I have already discussed about the core concept of changing the position of the background image (sprite image) with the movement of the mouse in my earlier posts. And how it detects the distance moved and the direction of movement and based on that the car is rotated. So I will not go into it once again. You can refer my earlier tutorial. I will just talk a little on the touch gestures and how to convert the already developed example (from my earlier post) so that now it listens to finger gestures on the mobile device.
Before moving further you deserve a demo, open the following link in your iOS device browser and drag your finger over the car.

Demo link: http://jbk404.site50.net/360DegreeView/mobile/

360 degree car rotation in mobile safari

Adding touch gestures
Let’s talk about this in details. For the desktop version of the example we had mouse events. So let’s add corresponding touch events now.

mousedown – touchstart
mousemove – touchmove
mouseup – touchend

The change looks like,

carObj.imageHolder.addEventListener("touchstart", carObj.handleMouseDown, false);
carObj.imageHolder.addEventListener("touchmove", carObj.handleMouseMove, false);
carObj.imageHolder.addEventListener("touchend", carObj.handleMouseUp, false);

You can see above that I have registered DOM touch events to the image holder instance. So now, it can listen to finger gestures. I have kept the names of the event listener functions same as the desktop demo so that you can make out which listener function is called upon the invocation of which particular event.
The logic inside the event listener functions is same as the desktop demo. Only thing new is the way that the current page co-ordinates are derived. For touch gestures this is how it looks,

event.changedTouches[0].pageX

Earlier I used only the pageX property of the event object – event.pageX to get the X co-ordinate. For touch gestures on mobile safari we can get the page co-ordinates from the changedTouches array object of the event object. Since our app is a single touch application so the 0th (changedTouches[0]) index gives the co-ordinate properties – pageX and pageY. The changedTouches array stores the data for every finger interacting with the touch device screen.
The touch event listener functions looks like this now,

handleMouseDown: function(event) {
  carObj.isMouseDown = true;
  carObj.initialX = event.changedTouches[0].pageX;
},
handleMouseMove: function(event) {
  if (carObj.isMouseDown) {
    carObj.presentX = event.changedTouches[0].pageX;
    carObj.distance = parseInt((carObj.presentX - carObj.initialX) / 10);
    //now check whether distance is +ve or -ve
    if (carObj.distance <= -1) {
      carObj.initialX = event.changedTouches[0].pageX;
      carObj.moveForward();
    }
    else if (carObj.distance >= 1) {
      carObj.initialX = event.changedTouches[0].pageX;
      carObj.moveBackward();
    }
    else {
    }
  }
},
handleMouseUp: function() {
  if (carObj.isMouseDown) {
  carObj.isMouseDown = false;
}
}

The syntax I am using to write the java script code is in JSON format and I have used self invoking function to write my entire script. You can check out the code by viewing the source of the demo and you will understand it.

Be careful on the Image sprite size – width x height
I had lot of manipulations to be done to the sprite image size, the width and height as I was facing issues of browser freeze, rough movement of car and even browser crashing when I ran the code in iOS 4 (iOS 5 was fine). While I am not sure on the threshold value of the size but I think that mobile safari has a size limit for sprite images. So here is what I did. The sprite image used for this tutorial is 4320 x 200. The height of the current sprite image is 200px. Here is the link to the image, you can download and view it. When I was using a sprite image of height 225px, 250px and higher, I was getting the freezing issue. Then, when I changed the height of the sprite to 200px (using Photoshop and the width changed accordingly by equal proportions) the freezing issue stopped. I repeated this procedure several times to double check that the problem is solved.

Android issue
In Android browsers there is a pixilation issue with the car image. When you drag/swipe your finger over the car, you will see that the car pixelates while moving. But once static it regains its composure. This is mainly due to image scaling in Android. So the solution is to use a bigger sized (width x height) sprite image and then scale it down in the code. Hopefully I will write on it with an example.

Conclusion
To do a 360 degree product view for mobile web browsers you have to keep a check on the asset sizes as mobile safari has limited capacity in handling bigger sized resources. For the desktop demo of the 360 degree product view I had 36 angles of the car in the sprite image. For the mobile web version I reduced the number of angles to 18 and also reduced the width and height. This also reduced the overall size (kB) of the sprite image making it mobile web ready.

Here is the link to the demo once again: http://jbk404.site50.net/360DegreeView/mobile/ (open in iPhone or any iOS device browser)

For the full code check out the source of the demo app.

Update
1) Based on my approach of creating a single application for mobiles and computer browsers – writing a common code for both type of devices, I have come up with an update to this post. The new example has script that automatically assigns touch events in mobiles and mouse events in computer browsers. So you do not have to hard code anything. The same code runs in mobiles as well as computer browsers.

Here is the new post: https://jbkflex.wordpress.com/2012/07/25/360-degree-car-rotation-common-code-for-mobiles-and-computer-browsers/

15 thoughts on “360 degree Car/Product view for mobile web – iPhone

  1. Definitely it is noble thought with developing of the iPhone to 360 degree product view for desktop browser is really very nice which makes easy and accuracy of picture quality.

    • Catalin,
      Here it is,
      In the HTML code block you define a image holder like this, which will have the sprited image,
      <div id=”wrapper”>
      <div id=”imageHolder”></div>
      </div>
      The wrapper performs the same action as it is now in the blog post demo. Now, the change is here,
      #imageHolder
      {
      width:279px;
      height:250px;
      border-style: none;
      background:url(images/sprite_android.jpg) 0 0 no-repeat;
      -webkit-background-size:auto 100%;
      }

      The sprited image will be a background-image of the image holder div element. You specify a width and height for the image holder. And then the background-size property ensures that the image is scaled accordingly. But you have to do a bit of manual style changes using your browser’s developer tool window till you finally get a frame of your sprited image inside the image holder.
      Hope this helps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s