Creating a simple stacked column chart – Flex

When I was working with Flex and Action Script 3.0 I used to do a lot of Dashboard and data visualization applications. One thing that I used to do often was a stacked column chart displaying multi dimensional data. So I thought of posting an example of creating a stacked chart out of the files deep within my Flex project folders. Let’s see the demo first and then move on to the explanation.

Demo: http://jbk404.site50.net/flex/playvideo/stackedchart.html

Stacked Column Chart
Stacked Column Chart - data visualization for three countries

Read More »

Advertisements

Cool modal Popup window with fade effect for mobile web – CSS3 and JavaScript

In this tutorial I will talk about creating a very cool modal popup window for iPhone and Android using CSS3 and Javascript. The modal popup window will display a message with fade-in and fade-out effect. It will also have drop shadows, rounded corners, gradient background which I will apply using the latest CSS3 techniques. I have a demo app already created. Click on the Launch PopUp button to open the modal window and then tap outside the modal window to close it.

Link to demo: http://jbk404.site50.net/css3/modalwindow/

The app is meant for mobile web and you can view it in iPhone/iPod or Android or even Blackberry mobile web browsers. But nevertheless you can check it out on Google Chrome and Safari which are web-kit based browsers, in your computer.

Modal PopUp window

Read More »

Play HTML5 Video or Flash video based on browser support

Now with the help of HTML5 we can play inline videos and rich multimedia using the <video> and the <audio> tags and do not require a flash plug-in or a flash player to play videos or audios anymore. The newer group of browsers (IE9, Safari 5+, Chrome 6+) have support for HTML5 <video> tag. But older browsers, browsers that do not have support for HTML5 features (eg. IE 7) still require a flash player and a third party flash plug-in to play multimedia. While developing a web app, as a developer you always want to support the entire range of users, so how do you ensure that your video plays for users even with older browsers. This tutorial will explain exactly how to do that. Check out the demo app first.

Demo:http://jbk404.site50.net/flex/playvideo/

Read More »

Pass parameters from HTML to Flex/Flash: Dynamic video player example

A quick example of passing parameters from HTML/Javascript dynamically to Flex/Action Script or Flash in some cases using flashvars. You can use it with any Flash based platform. Check out the demo first and then I will explain:

Demo Link: http://jbk404.site50.net/flex/htmlparameter/

What we have here is that there are two buttons in an HTML page. Each button when clicked plays a different video in the same Flex Video Player (which runs in a .swf file and uses the Flash plugin to render). So what I am doing is that on click of the button I call a javascript function wherein I pass the corresponding video URL as parameter to the Flex Video Player (which is a .swf file) using flashvars. This is how I am doing it,

<param name="flashvars" value="videoURL=videos/video' + target_obj.id + '.flv" />

target_obj.id is the id of the button clicked. The parameter is passed as a key-value pair. videoURL holds the dynamic URL of the video. There is one flash file (.swf) which reads the parameter passed in flashvars and then plays the video. This way multiple videos play in the same player.  I have named the videos as video1.flv and video2.flv which are inside videos folder under my root directory. Note that Flex/Flash video player runs a .flv format. When you look at the demo you might notice that a popup shows the video URL inside the player. That’s where it is getting the URL as parameter from HTML side. Also the video is auto played.Read More »

Android or iPhone or Blackberry – How to detect using JavaScript

Sometimes when you are writing a mobile web app it becomes important to detect the device type in which the app will run in the browser. After finding out the device type you may write specific code for each device. One example can be handling different screen resolutions for the different device types and then make changes to the UI accordingly. Here’s a rundown of a small example that will show you how to detect the device type.

Mainly you need to detect the browser’s user agent and this will give you the device type. Following are the browser’s user agent for different devices:

For Android: Mozilla/5.0 (Linux; U; Android 2.2.1; en-us; Nexus One Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1.

Currently, Android devices provide the following  in the User-Agent: “Android”, a version number, a device name, a specific build, Webkit version info, and “Mobile”. The above user agent string is for Android Froyo on a Nexus .

For iOS device (iPod/iPhone,iPad): Mozilla/5.0 (iPod; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5

This one is for the iPod that I am using. For iPhone and iPads the string format is similar, only it will be mentioned iPhone or iPad in place of iPod. The numbers may change depending on the format.

For Blackberry: Mozilla/5.0 (BlackBerry; U; BlackBerry AAAA; en-US) AppleWebKit/534.11+ (KHTML, like Gecko) Version/X.X.X.X Mobile Safari/534.11+

This one is for BlackBerry 6 and 7.

If you notice every user agent data has the device type name mentioned in it. That is what helps us to detect it. Let’s see how to do it.

Detecting user agent is very easy. Use the userAgent property of javascript’s navigator object. Below is the full java script code block,

var ua = navigator.userAgent;
var checker = {
iphone: ua.match(/(iPhone|iPod|iPad)/),
blackberry: ua.match(/BlackBerry/),
android: ua.match(/Android/)
};
if (checker.android) {
//code for Android
}
else if (checker.iphone) {
//code for iOS device
}
else if (checker. blackberry) {
//code for BlackBerry
}
else{}

Truncating longer page titles with an ellipsis – HTML5 Mobile Web app

Sometimes, while working on HTML5 mobile web apps the text in the page title gets longer than can fit in the page header bar. Normally in native iPhone apps when the page title gets longer they add an ellipsis to the end of the truncated text. Check out the image of the iPhone settings – Mail, Contacts, Calendar page below, see how the long text has been truncated with a trailing ellipsis. Therefore, while building mobile web apps I do the same to give it an iPhone look and feel. Let’s see how to do it using simple CSS techniques.

Mail, Contacts, Calendar
Mail, Contacts, Calendar page in iPhone settings

Read More »

Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 2

Updates

1)  Flickering issue in iPhone/iPod solved.
After the swipey demo was done I was observing a strange flickering issue of the images. If you see the demo link in an iPhone or iPod’s mobile safari browser you would notice it. Test case – swipe the images to the left and you would notice a black flicker on the right side of the browser for a brief moment. This is happening when you swipe all the image for the first time. Second time on wards it is not being seen. Finally I could solve the issue and made a small post on it with the new fixed demo. You can find it here.

2) Images linked to URL – Now you can click or tap on the images to go to a URL. I have made a new post which describes the changes made. This was requested by one of the reader. I felt the importance of having the ability to link the images to URL so came up with an extension of this post. You can fine the post here. There is a demo and also a download link.

3) Common code and example for mobiles and computer browsers – 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. Find the post here. There is a demo and also a download link.

4) Circular swipe gesture gallery – I have a new tutorial where I have talked about a circular swipeable gallery. So the images keep on looping. The tutorial also includes a new demo. Read it here.

5) Auto scrolling gesture gallery – Sometimes users may want a auto scrolling gallery along with the normal swipe gesture feature. I have a new post with a demo. Read it here.

6) Vertical swipe gesture – for a vertical swipe gesture gallery check out this post. It has a new demo and explanation on how to swipe the images in y-direction i.e up or down.

Now, back to the actual post – 

Gesture Interaction – The JavaScript code
By looking at the java scriptcode you might have a question in your mind that this time I have used a different way of writing my javascript code. What I have done is that I have created a self calling function and I have defined an object (swipey) inside the function and finally exposed the object to the window object (window.swipeyObj = swipey) so that I can call the properties and methods of the swipey object anywhere after including the javascript file to our library. Ofcourse there are several other ways to execute the same, but this way it maintains the scope of the properties and methods of the object.

Let’s go straight to the swipey object which follows a JSON pattern. Inside the swipey object we have defined a series of properties and the methods. Think of it as a Class, but there are slight differences between a JSON Object and a Class. We will not go into that at the moment. The basic structure of swipey object is shown below,

var swipey = {
                property1:value1,
               property2:value2,
               ……………
                method1:function(){},
                method2:function(){},
                ……………
};

To access a property we write swipey.property1 and to call a method swipey.method1().Ok, that’s quite a brief description of a JSON object.Also, at most places I have provided comments for understanding. Now, the initSwipey() method defines some basic operations which is simple enough to understand. window.scrollTo(0, 1); is for hiding the address bar of the browser to give the app a native look. I have already talked about it in details in my earlier post,  here. One thing to be noticed is the line below,

swipey.slideContainer.style.width = swipey.slides.length * swipey.preferredWidth + "px";

Read More »

Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 1

Updates

1)  Flickering issue in iPhone/iPod solved.
After the swipey demo was done I was observing a strange flickering issue of the images. If you see the demo link in an iPhone or iPod’s mobile safari browser you would notice it. Test case – swipe the images to the left and you would notice a black flicker on the right side of the browser for a brief moment. This is happening when you swipe all the image for the first time. Second time on wards it is not being seen. Finally I could solve the issue and made a small post on it with the new fixed demo. You can find it here.

2) Images linked to URL – Now you can click or tap on the images to go to a URL. I have made a new post which describes the changes made. This was requested by one of the reader. I felt the importance of having the ability to link the images to URL so came up with an extension of this post. You can fine the post here. There is a demo and also a download link.

3) Common code and example for mobiles and computer browsers – 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. Find the post here. There is a demo and also a download link.

4) Circular swipe gesture gallery – I have a new tutorial where I have talked about a circular swipeable gallery. So the images keep on looping. The tutorial also includes a new demo. Read it here.

5) Auto scrolling gesture gallery – Sometimes users may want a auto scrolling gallery along with the normal swipe gesture feature. I have a new post with a demo. Read it here.

6) Vertical swipe gesture – for a vertical swipe gesture gallery check out this post. It has a new demo and explanation on how to swipe the images in y-direction i.e up or down.

Now, back to the actual post – 

In this tutorial we will talk about building up a Swipe Gesture photo gallery for iPhone, iPod using web technologies – HTML5, CSS3 and JavaScript. To begin with, you might have viewed pictures in your iPhone or iPod photo library and may remember how you used to swipe your finger across the screen of your device to view the next or the previous image in the gallery. The same thing we are going to replicate and make a mobile web app. Our app will run full screen on the mobile safari browser so this gives it a native look n feel. The features of this mobile web app replicate the iPhone photo library’s default behaviors,

  1. Gently swipe across the screen left or right to view the neighboring images.
  2. Flickering of images. Swipe across quickly to view neighboring images. I say it harsh swipe across the screen.
  3. Current Image comes back if you do not swipe it enough across the screen.
  4. When the beginning or end of the list is reached, no matter how much you swipe the image always comes back.

First, view a desktop version of the demo to get a feel, drag your mouse over the picture left or right to view other images and try out the features that I have just talked about (View in web-kit browsers – Chrome or Safari): http://jbk404.site50.net/html5/mobile/swipey/

The same thing we are going to replicate for the mobile device. Now, our app is targeted for mobile web kit browsers so it will run even on Android browsers.  That’s the good thing about a mobile web app, write once run everywhere.

Below we have two images of the app running in my iPod Touch,

An image/slide showing up in portrait mode
An image/slide showing up in portrait mode
Changing of slides
Change of slides when swiping

Read More »

360 Degree Product View – another example

Just completed another example of a 360 Degree product view, this time of a car. The images have been extracted from a .swf flash file and attached together to make a sprite image. Unlike the previous example in my last post, this time the sprite image is horizontal. In the previous example it was a vertical sprite image. So, I had to  make small changes to the java script code so that each time the mouse is dragged either left or right the x-attribute of the backgroundPosition is changed, something like this,

document.getElementById("imageHolder").style.backgroundPosition = (-counter * 300) + "px 0px";

You can check out the demo and then the source. Rest of the things are same as my earlier post.

Here is the link to the sprite image (zoom in to see the actual size): http://jbk404.site50.net/360DegreeView/car/images/sprite.png

Link to the demo (View the source to get the code) : http://jbk404.site50.net/360DegreeView/car/

Update
1) I have come up with a mobile web version of the 360 degree product view for iPhone and it is touch gesture enabled. You can find it here: https://jbkflex.wordpress.com/2012/02/17/360-degree-carproduct-view-for-mobile-web-iphone/

2) 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/