Previewing JSBin output in mobile devices using Adobe Edge Inspect

When Adobe renamed Shadow to Edge Inspect, one of the major changes that happened was the integration of JSBin into Edge Inspect. What this means is that whatever proof of concepts (also called Bins as per JSBin terminology) you have created with JSBin, you can remotely preview it directly in your mobile devices without any additional set up required.

If you haven’t tried JSBin yet, then let me introduce it to you. JSBin is a free online tool with which you can create HTML based small POC’s, test examples or I should say small mockup kind of applications. You can edit the HTML, CSS, Javascript and see the changes real time in your browser itself. JSBin is kind of a development environment wherein it has the HTML, CSS and JS editors where you write code for your example app. It also has the console panel for viewing javascript console logs and the the Output panel for previewing the result of your code. All these panels are integrated into one place and as you make changes to your code you can see the result in real time. Very handy. I found it useful for my mobile web apps. But then it is a tool which is on the small scale development side. So it doesn’t have all the fancy features of a typical IDE. Once you create your POC’s or Bins you can even share them. So in case JSBin sounds interesting to you, go ahead and start using it. Create your account at http://jsbin.com/ and start making some apps. The interface looks like the image shown below, (all the help can be found online at jsbin.com)

Replicating the iPhone Swipe Gesture – auto scrolling feature

This is an update to the Replicating touch swipe gesture javascript implementation series that I have been writing for some time now and this time I have tried out the auto scrolling feature. Sometimes users may want a auto scrolling along with the normal swipe gesture feature. This post will talk about it and the changes to code that were made to make it auto scroll. First let’s check out the demo, the demo runs in both computer webkit browsers and mobile webkit browsers.

Demo link: http://rialab.jbk404.site50.net/swipegesture/auto_scrolling/

Now, let’s talk on the implementation,
First the features of this demo-

• Auto scrolling – the gallery slides change automatically at periodical times. Based on the requirement specify whether auto scroll stops on user interaction or continues.
• Looping – the gallery loops and is circular.
• Direction – supports two direction – left or right. Specify which direction the gallery should auto scroll.
• Click/Tap to URL – click or tap to open URL’s.
• Swipe gesture – and then the touch based swipe gesture for mobiles is available as well.

Circular swipe gesture gallery – looping through images

This is another update to the regular swipe gesture gallery that I created in two of my earlier post – post1, post2. This time I have implemented the looping feature for the images. The gallery never ends, instead you swipe it in a circular motion. So, whenever you reach the end of the list, swipe again from right to left across your device’s screen to see the first image and also when you reach the beginning of the list you swipe from left to right of your device’s screen to see the last image again. Try out the demo first and you will get a feel of it. Check out the demo in a webkit desktop browser (Chrome, Safari) or an iOS/Android device’s browser. Click on any image to open a URL as well. So, click/tap to open URL is included.

Demo link: http://rialab.jbk404.site50.net/swipegesture/circular/

An instance of the demo application – with reduced opacity and exposed images, the darker one being the one currently displayed and is inside the wrapper div.

CSS3 Coverflow animation for iOS – Adding Touch gestures

Here’s a sneak peak at the touch version of the Coverflow animation. The app is fully touch enabled, you can swipe across the screen to move the images or tap on any image individually to move it. The app works fine in iPhones, iPod touch and iPad’s. Have not tested it in Android 4.0 or greater. Since iOS browsers supports CSS3 3D transformations so it runs very smooth. In Androids < 4.0  it gives a horrible  look n feel.

Here’s the link to the demo. Check in an iOS device (open up in mobile safari),

Link: http://rialab.jbk404.site50.net/coverflowtouch/

and if you are looking for a desktop version of the Coverflow, you can check my previous post.

This is how it looks on an iPod touch

360 degree car rotation – common code for mobiles and computer browsers

I had been updating my examples and tutorials off  lately and trying to create a more general approach to application development – Write a single app that runs in mobile browsers as well as computer browsers. Following the same approach, this time I am updating one of my previous tutorials – 360 Degree Car/Product rotation for iPhones. So, I worked on a 36o degree car rotation code that runs in both mobile and desktop browsers.

This tutorial is an update to my previous one, I also present a new demo. I will not go into the details, which I have talked about in my previous tutorial. Have a look at the demo, open it in either an iOS browser or a computer web-kit browser.

Link: http://jbk404.site50.net/360DegreeView/mobile/common.html

360 degree car rotation in mobile safari

What are the changes?

All the changes are in the javascript code. I have introduced a device detection mechanism and then automatically assign either touch events (for mobiles) or mouse events (for computer browsers). These are the same changes that I have recently talked of in my last post – Replicating the iPhone Swipe Gesture — common code for mobiles and computer browsers. That should help you out.

Other than that just try the example link in a computer web-kit browser – Chrome/Safari or an iOS device browser which is also a web-kit browser. Android devices need some changes and the same code might not work. I have talked on this in my previous post.

For the code, right click to view the source.

Replicating the iPhone Swipe Gesture – common code for mobiles and computer browsers.

This is another update for the iPhone Swipe Gesture that I have created. This is the third update to the series – Part 1 and Part 2. In case you have missed out of the earlier tutorials and detailed explanation then you can have a look at them first, before proceeding with this tutorial. What I have been able to achieve is that, I have replicated the native iPhone swipe gesture for the iPhone web-kit browser. So, throughout the series I have been able to create a HTML/JavaScript/CSS3 version of the swipe gesture. If in case, again you are not sure of the swipe gesture and swiping, I would recommend to go through my previous tutorials – Part1 and Part2.

Now, the update and the agenda of this tutorial is that – I have developed a common universal code for mobile browsers and computer browsers. Note that when I am saying browsers I mean web-kit browsers – Chrome & Safari in computers, and then the default web browsers in iOS and Android mobiles. The major changes are in the javascript code, where I have automated the user event handling process. What this means is that for mobile devices touch based events are registered and listened to and then for computer browsers mouse based events are registered and handled by the script automatically. This way there is no need to hard code touch events for mobiles and mouse events for computers. The same code works everywhere.

But, still to support different device screen sizes you will need to make changes to the CSS or the asset (images) sizes. The demo that I have worked on, I have considered the iPhone resolution – 320 x 416.

Check out the demo (same link works in mobiles and computers): http://rialab.jbk404.site50.net/swipegesture/common/

Common implementation for mobiles and computers

JavaScript Touch event or Mouse event – detect and handle according to device

You might have faced this issue before or even might have wondered – How to write a single piece of code that establishes correct event in the device i.e touch events for mobile web browsers and mouse events for desktop browsers. You need not hard code the events for your app code. Once you detect and handle those events, you can run your app everywhere – mobiles and computer browsers. Normally when we develop an app for mobile browsers we test it in a desktop browser, so if you have touch events hard-coded into your script then it is a pain to change the script and make it work for computer browsers(replacing touch events with mouse events) and then change it back again to touch for mobiles. So, here is a small script/trick to universally handle the event and need not worry about devices,

var isTouchSupported = 'ontouchstart' in window;
var startEvent = isTouchSupported ? 'touchstart' : 'mousedown';
var moveEvent = isTouchSupported ? 'touchmove' : 'mousemove';
var endEvent = isTouchSupported ? 'touchend' : 'mouseup';

If you see the first line of the script, it detects if ontouchstart property is available in the global window object. It it is available or it is a part of the window object, then it returns true else it returns false. Note that ontouchstart is a standard javascript touch event attribute. Now, if you are making this check in a computer browser (for e.g FF, Chrome or IE) then ontouchstart is not a property of the window object. So isTouchSupported will be set to false. Had it been a mobile browser (e.g iOS, Android) then ontouchstart would have been automatically a part of the window object and correspondingly isTouchSupported variable will set to true. This is all we need to detect. The next three lines establish a common platform for the touch vs mouse events i.e I am mapping the touch events to its corresponding mouse events.

Now, all you need is to register the event listener to your element so that some action is performed when the event is triggered on the element. Here is an example, (where myButton is the ID of my imaginary button)

document.getElementById("myButton").addEventListener(startEvent,function(){},false);

The startEvent variable acts as a placeholder. It will be replaced by mousedown for computer browsers and touchstart for mobile browsers. Similarly the other two events can be used. This way a single app can run everywhere.

Here is a good example with the usage (make sure you look at the javascript script code) - http://jbkflex.wordpress.com/2012/07/21/replicating-the-iphone-swipe-gesture-common-code-for-mobiles-and-desktop-browsers/

Here is another one - http://jbkflex.wordpress.com/2012/07/25/360-degree-car-rotation-common-code-for-mobiles-and-computer-browsers/

Please do suggest me if there are any better methods of mapping touch v/s mouse events.

Creating a simple List in Sencha Touch 2.0

Creating a simple data list in Sencha Touch 2.0 has changed over the way we used to create data lists in Sencha 1.0.  Changes have been made in the way a data Model is created and the data fields are defined, but the overall concept remains the same.  Here is a quick tutorial along with a demo,

Demo Link : http://jbk404.site50.net/sencha/datahandling/ (might take some time to load, my server is horribly running slow)

Debugging mobile web applications remotely with WEINRE

I started mobile web development around eight months back and at times found it very difficult to debug my apps. Normally everybody would start off with a desktop browser, look up the app in a desktop web inspector and then try to debug it and finally make it ready for the mobile browser. Even I used to do the same. I used to check my mobile app in Chrome’s/Safari’s developer tools. There I used to inspect HTML elements, change DOM style properties and check the result out and also see the java script console log messages in the console tab. This would normally serve my purpose but I had to adjust a lot due to resolution differences. Still there was a frustration and a feeling of had there been a tool to directly debug the app in the mobile device itself. And after a little head scratching and Googling I discovered an open source package called Weinre – Web Inspector Remote. With Weinre I could debug my mobile web app remotely – the app would run on the mobile browser and I could modify the DOM remotely, see log messages of it on the Weinre inspector that runs on my computer. And I must tell you, it has helped me immensely. It’s a wonderful tool to have and in this tutorial I will share my experiences of debugging with Weinre. First I will start off with How to configure Weinre and then talk on debugging a mobile web app, but before that let’s see some basics – Weinre and its components.

The Basics
Weinre is a remote debugger for web pages and if you are familiar with Firefox’s Firebug or Google Chrome’s Web Inspector, then you will find Weinre very similar. What it means is that you can debug a web app that is running on your mobile device remotely i.e on your computer. So, in your computer you can select any DOM node, make changes to style properties of the mobile web app and it will reflect in the mobile device on the fly. You will get more familiar with the things once I talk in details later in the article. First let’s see what Weinre is composed of.
Weinre consists of three basic components/programs – Debug Server, Debug Client and Debug Target interacting with each other. Let’s see what each of them means,

1. Debug Server: This is the HTTP server that you run from the weinre.jar file. It’s the HTTP server that’s used by the Debug Client and Debug Target. I configured the server on a Windows machine so all the steps I will talk about are in reference to Windows. For Mac users details of configuration can be found in the Weinre site.

2. Debug Client: This is the Web Inspector user interface; the web page which displays the Elements and Console panels, for instance.

3. Debug Target: This is your web page that you want to debug running on the mobile device – iPhone, Android phone or iPads.

Both the Debug Client and the Debug Target communicate to the Debug Server via HTTP using XMLHttpRequest (XHR). Typically, you run both the Debug Client and the Debug Server on your desktop/laptop, and the Debug Target on your mobile device. The image below should help you.

Weinre components

Sliding touch photo gallery for iPhone – HTML5, CSS3

This tutorial speaks about a simple sliding touch photo gallery for iPhone. The app is meant to run on the mobile safari web browser. We start off by looking at a demo first and then talk about the code in details. Note that the same logic and implementation will work even on Android devices, you just need to correct the dimensions/positions and place the elements according to screen resolution.

Demo Link: http://jbk404.site50.net/css3/slidinggallery/ (open in your iPhone/iPod or Android device’s web browser)

Gallery with the thumbnail images

The images used in the demo are not of great quality or appeal as I am not a Photoshop expert. Once you have cool assets you are good to go.

The demo is all about having two panels, one with the thumbnail images and the other panel with the corresponding bigger image of the thumbnail selected in the first panel. The two panels have been placed side by side – horizontally and they slide in and out of the viewport to give a sliding effect. The sliding of panels uses the same concept (using CSS3 transitions and transformations) that I discussed in one of my earlier post. Here in this tutorial I will not go into the details of how to create sliding touch panels. You can refer my previous post.