Is Good Stuff » javascript

HTML5 : FREE Cloud Carousel

Alex T. — Thu, 09 Feb 2012 12:57:37 +0000

Previously I’ve wrote before about an article about flash based carousel here. Today I’m gonna share and write about carousel again, but not the flash version this is html5 canvas combo with jquery version. Check out the beautiful carousel picture below, click to run the demo. It runs smoothly on all major browser and has a cool fallback support in case javascript is turned off. Such a beautiful expression of art written in latest cutting edge tech…all good!

The carousel above is called Cloud Carousel written by Prof Cloud. Below are some example on how to implement this carousel.


 Cloud Carousel
 
 
 
 

 

 
 
 
        
        
	
	
	
	
 
    <
    >

Well that’s it for today. If you want to take a look on my demo in source file.

Download Here

HTML5: Keyboard Controls & Update Loop (enterFramer)

Alex T. — Mon, 30 Jan 2012 01:28:18 +0000

Hiya folks, I’m back for more html5 goodies. Today i’m gonna focus more on how to script a simple keyboard control and how we make our update loop (for those coming from AS3 background, this is how we do our enterFrame). Let’s move on.

Before we start, I would like to emphasize again scripting in html5 has always been with data and render done separately. Meaning, you write objects to contain it’s x and y value and compute it’s movement every updateCycle before rendering it into canvas. Check out the demo here.

Below is my enterFrame Util js (this is a update loop js). You can use it for all your project. In fact, it also comes with a cool fps counter for benchmarking; all you need to do is to pass in the div id parameter for it’s output. We use update loop cycle to check in runtime, changes that happen to the objects in canvas, for example, update of movement and etc.

Enterframe.js

var enterFrame = function(){
	// To Use this enterFrame Utility just include into script src.
	// Then, use enterFrame.init( callBackFunction );
	// where callbackFunction is the function that will cycle update.
	// e.g.
 
	// enterFrame.init(60, handleEnterFrame);
	// function handleEnterFrame(){
	//      // This function runs at default 60 FrameRate
	//      // You can also use getFPS here since, it requires
	//      // an constant update cycle.
	// }
    return {};
}
 
enterFrame = function(){
	var myFrameRate = 60;
	var intervalTime = 1000/myFrameRate;
	var lastTime = new Date();
	var frameCount = 0;
	var intervalTimer;
	var myCallbackFunc;
 
	function ENTERFRAME(){
		return myCallbackFunc.call();
	}
 
	function calcFPS(){
		var nowTime = new Date();
		var diffTime = Math.ceil((nowTime.getTime() - lastTime.getTime()));
		var fps = myFrameRate;
 
		if (diffTime &gt;= 1000) {
			fps = frameCount;
			frameCount = 0.0;
			lastTime = nowTime;
		}
 
		return frameCount++;
	}
 
	return {
		init:function(arg1, arg2) {
			if(arguments.length === 2){
				//Arguements checker:if pass in two, use arg1 as framerate override 
				// and arg2 as callback function
				this.setFrameRate( arg1 );
				myCallbackFunc = arg2;
			} else {
				//Arguements checker:if pass in only one, use arg1 as callback function
				this.setFrameRate( 60 );
				myCallbackFunc = arg1;
			}
 
			intervalTimer = setInterval(ENTERFRAME, intervalTime );
 
		},
 
		clear:function(){
			clearInterval( intervalTimer );
		},
 
		setFrameRate:function(value){
			myFrameRate = value;
		},
 
		getFPS:function(divName){
			// Must be used within callback function of EnterFrame.
			return divName.innerHTML = "FPS Counter : " + calcFPS();
		}
 
	}
}();

And let’s look at the main html and how we intend to use it today alongside with key controls. Always try to located the middle registration point of the object you are about to draw in canvas. It is useful for positioning and animation wise. You also will need to clear the canvas content every update cycle loop (in other words every enterFrame). See codes below.

index.html




	
	Sample App HTML5 One - Using Canvas and Filters
	
	
	
	
	
	


	
		Canvas Update Cycle

Here are the default.css for the html.

default.css

/**************************** HTML 5 RESET **************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
/**************************** HTML 5 RESET **************************/
.label15Arial {
	font-family:Arial;
	color:#fff;
	font-size:16pt;
	font-weight:bolder;
	text-shadow: #333 0 0 0;
	padding-top:10px;
	text-align:center;
}
 
.titleBar {
	background-image: linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -o-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	width:100%;
	height:45px;
}
 
.borderContainer {
	border:1px solid #c0c0c0;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	width:480px;
	height:320px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
 
.controlsContainer {
	border:1px solid #c0c0c0;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	width:480px;
	height:50px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
 
.label1 {
	font-family:Arial;
	color:#000;
	font-size:14px;
	margin-top:15px;
	margin-left:15px;
	width:255px;
	font-weight:bolder;
	text-shadow: #333 0 0 0;
	float:left;
}
 
.buttons {
	-moz-border-radius: 6px;
	border-radius: 6px;
	width:300px;
	background:#fff;
	height:30px;
	margin-top:15px;
	color:#000;
}
 
#canvas {
	-moz-border-radius: 6px;
	border-radius: 6px;
	background:#990000;
}

Hope you enjoy this code samples. Don’t forget to try out the demo here.
For today’s source code.

Download Here

HTML5 : Canvas Image Manipulation Tutorial

Alex T. — Thu, 05 Jan 2012 10:53:20 +0000

Today, I’m sharing with you a little on Image manipulation using Canvas. Since it’s already 2012, I figured it’s time to write more on my HTML5 stuff. As you already know by now, one of the most powerful and interactive element in html5 is none other than the Canvas. Rather, than blogging about theory of what html5 is and what’s the new tag blah blah…I’m just gonna make a simple project out of it – a straight forward implementation. So today’s tutorial, I will be covering the followings :-

Loading an image into the canvas
Image blurring effect – using an External Library (StackBlur.js)
Image rotation – pure html5 canvas programming
Little on CSS3 - a little on the border radius stuff, gradient stuff.
Slider element of HTML5. – pure html5 usage of input type=”range” (yes, No more JQueryUI and loading lots of js files – just for one slider)

First of you might wanna have a look at the demo I’ve prepared in advance here. You may also download the entire tutorial below.

Download Here

Ok, first let’s look html code itself. Like all standard html5 page, the standard doctype must be declared prior to anything. Click on the button to load an image into the canvas which is the white box with rounded borders in the center of the html page. Try playing around with the sliders. Apply blur effect and the rotation.




	
	Sample App HTML5 One - Using Canvas and Filters
	
	
	
	
	
	


	
		Sample App With Canvas

	
 
	
	
		Blur Range
		
 
		Rotation

Take a look how the canvas is implemented, just a simple and clean tag isn’t it sweet ? Notice, in canvas programming, you must always remember, to “represent” an object e.g. image in our case, everything must be done in data abstraction in the memory – then render to display. Like the case of rotation (see line 48).

The canvas content is cleared,
New angle is calculated,
The coordinates is translated
Image object is rotated in memory
Image object is redrawn into the canvas

Every time a rotation slider value is changed. Well, the rest you can read up and experiment more by tweaking my codes in the source to find out more. We now take a look at the CSS file. By the way, I generate my gradient here

/**************************** HTML 5 RESET **************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
/**************************** HTML 5 RESET **************************/
.label15Arial {
	font-family:Arial;
	color:#fff;
	font-size:16pt;
	font-weight:bolder;
	text-shadow: #333 0 0 0;
	padding-top:10px;
	text-align:center;
}
 
.titleBar {
        // Here is the cool gradient stuff - use generator http://gradients.glrzad.com/
	background-image: linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -o-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 58%, rgb(184,184,184) 80%, rgb(39,46,46) 94%);
	width:100%;
	height:45px;
}
 
.borderContainer {
	border:1px solid #c0c0c0;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	width:480px;
	height:320px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
 
.controlsContainer {
	border:1px solid #c0c0c0;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	width:480px;
	height:120px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
 
.range1 {
	margin-top:15px;
	width:280px;
	float:left;
}
 
.range1label {
	font-family:Arial;
	color:#000;
	font-size:14px;
	margin-top:15px;
	margin-left:15px;
	width:105px;
	font-weight:bolder;
	text-shadow: #333 0 0 0;
	float:left;
}
 
.range2 {
	margin-top:15px;
	width:280px;
	float:left;
}
 
.range2label {
	font-family:Arial;
	color:#000;
	font-size:14px;
	margin-top:15px;
	margin-left:15px;
	width:105px;
	font-weight:bolder;
	text-shadow: #333 0 0 0;
	float:left;
}
 
.buttons {
	-moz-border-radius: 6px;
	border-radius: 6px;
	width:300px;
	background:#fff;
	height:30px;
	margin-top:15px;
	color:#000;
}
 
#canvas {
        // Just two lines for cool border radius, no more IE hack or using Image, then abusing of divs 
	-moz-border-radius: 6px;
	border-radius: 6px;
}

Note of warning :Things you should know about canvas. For some apparent reason, try not to style / css width and height of the canvas element. Instead using the attribute of width and height on to the tag itself. Reason being, some browsers will render the content scale weirdly. This information is accurate to date of the post. This issue might be fix in near future.

That’s it for today sharing. Oh yeah and Happy New Year 2012.

Mobile Development – Titanium Appcelerator

Alex T. — Thu, 17 Nov 2011 05:56:51 +0000

Today, I’m gonna talk a bit about native smartphone app development. As you may know by now, there’s a lot of third party cross compiling mobile development out there. Titanium Appcelerator is a third party development tool that allows user to develop smartphone/mobile apps using javascript and then cross compile into native language. It is also the development technology I used to make all the apps you see in Watch, Learn and Know.

Since, everyone is hyped up about using html5 and mobile web app, the question remains…

Why bother making native compiled app using Titanium Appcelerator?

Firstly, we have to know there are 3 types of approach when it comes to smartphone content / app development (using the non pure-native way).

Mobile phone enabled website / A Pure WebApp – This means when the server detects the client is using a smartphone immediately it switches(battery saving, fast loading, simple) design template for the entire site. This approach is not a native app, but all you need is just a mobile browser and internet connection. Skips all the “hassle” of registering developer license and getting the app on appStore to be downloaded and installed. This is useful for specific training content e.g. Enterprise learning/training sites.
Native mobile app, built using html5 and mobile framework – This means the app is made using 100% mobile js frameworks and html5 stuff, then later using sdk like phonegap, we compile it into an app. This approach is useful if you have all the stuff running in web form and you only need some limited hardware controls like geo-location and camera input.
Native mobile app, built using third party cross compiler – Runs exactly using native ui made for the phone. Full hardware control and useful if internet connection is not mandatory to view the content. Good native apps normally useful for user for references, simple editing and social sharing. Very fast performance.

So, when do I really need what and when?

Decide for mobile phone enabled website or a pure WebApp, if you have thoughts like below…

I already have a high traffic website and is well designed. People are coming for my site for news and updates. I do not have any complex tools/services for my readers. Just pure good content and I want as minimal and cost effort possible. – in this case, making mobile enabled version of the site is more feasible.

Native mobile app, html5 and framework approach, if you have thoughts like below…

Almost everything I already have web tools/ services all ready for use online. I just need a mobile client with minimal effort and cost. Design and theme must retain as much as possible and I have only web programmers that can do html stuff at hand.

Native mobile app, built using third party cross compiler, if you have thoughts like below…

Got all contents and ideas for the app. I do not want user to connect to internet all the time. I may not have servers/website. I also do not want user to have different UI experience other than the native user interface provided by the smartphone itself. Performance and hardware controls is a big deal.

I hope that covers why Titanium still have the advantage of others, plus is also an open source and free tool to use. To know more about Titanium Appcelerator read more here.

WTH is Encapsulating Javascript?

Alex T. — Sun, 16 Oct 2011 00:16:27 +0000

Over the weekend, I’ve been doing javascripting and some one messaged me on how to write an encapsulating javascript functions which is a common practice in web development nowadays. Especially when we involved in mobile where memory and processor is critical

I remember around 8 years ago when, javascript was just a simple procedural language used for web development then it evolved into DHTML which we can use to make cool effects. Later, comes AJAX and wonderful js frameworks we had today.

Today this script language evolved into some kind of magical development language of wonders – you can even write a full mobile to desktop app using this scripting language with the help of cross compilers.

Because of that, developing a javascript application can lead to complex scripting due to huge number of variables and objects you control.

Therefore for best practice sake,

You need to keep your javascript functions in main webpage as minimal as possible and js files must be as human readable as possible. e.g. should at least have calculate related functions in it like ”calculate.sum( myNumberList );” so that, is easy to use calculate.js like an util file.
Don’t pollute the global scope! – A complex javascript script will have alot of variable flowing everywhere thus polluting the global scope and making it easier to read. (this means, we don’t overuse var VariableName everywhere in our js file – put in an encapsulated js instead) To control that, we use encapsulated function. An Encapsulated function are more than a function, less than a traditional OOP class but better than nothing .
There’s several ways I found can achieve this but, I’m gonna list this one first because is one of my favorites.

Method one, encapsulating js using namespace and self-triggering function.

What is a self-triggering function?, Self -triggering function is a function construct which fires straightaway. We normally use that for “container” – to contain variables, and related functions.

Here is how to write a self triggering function,

(function(){
	alert('fired immediately');
})();

Let’s write a chained self triggering function. Follow the code below.

var trigger = function(){
       alert('chained function');
}();
 
//try calling it using
trigger();
// and compare with
trigger;

Noticed, the behaviour of trigger, is no longer regarded as function in browser. In-fact, if you use trigger(); you will get an error in firebug. Notice also that, when you just call trigger without brackets, and yet it fires the function. This is how we do our namespace in encapsulating js.

Let’s work on other namespace – this time with proper function, namespace are used to clearly define and separate our javascript so that, same function names and variables don’t get mixed up. It’s like writing a class with methods all encapsulated within.

var calc = function(){
    return {};
}

The code above simply creates a function that returns nothing. We normally use this as our namespace starter/definer. Then, we proceed further with writing a specific function / method like construct e.g. calc.sum.

Note calc.sum is undefined, if you do not declare a namespace starter/definer which is a chained self-triggering function in memory that returns nothing.

//Secondary Namespace calc.sum - wrapped using self triggering function
calc.sum = function(){
	/* private variables only to calc.sum see how variables are kept within */
	var value1 = 0;
	var value2 = 0;  
 
	// private method to calc.sum
	function calc(){
	var sum = parseInt(value1) + parseInt(value2);
	    return sum;
	}
 
	// public functions
	return {
	    init: function(external_value1, external_value2){
	         this.setValue1(external_value1);
	         this.setValue2(external_value2);
	    },
 
	    setValue1: function(val){
	        value1 = val;
	    },
 
	    setValue2: function(val){
	        value2 = val;
	    },
 
	    getSum: function(){
	       // calling an internal private function
               // (requires no "this.")
		return calc();
	    }
	}
}();

Now, we have a “class util” like javascript, and everything is kept within…isn’t that neat?

To use, we simply need to init it.

//init calc.sum which requires two integer,
calc.sum.init(10,30);
alert(calc.sum.getSum());
// should return you 40

Today’s tutorial in HTML :

Download Here

Cross Mobile Development Findings

Alex T. — Mon, 08 Aug 2011 14:16:48 +0000

It’s been almost 2 years since, I stepped out from the R&D world – into “the narrow path of the production work cycle”. You won’t believe me when you compared my current mundane everyday task vs the days I used to do in my previous company – gosh “facepalm”.

Now, I’m back for good (I hope hahahaha) – back in R&D into mobile development using HTML5, CSS and Javascript technology. It feels so go to be able to contribute back again!! Super!

Heads up, before I indulge myself into reporting of my findings – I wanna make things clear to you that, one of my core believe in using these technology as opposed to native language is because, of the concept below :-

Write once, Runs everywhere – Get it?

I know, is kinda risky and a unknown area to venture myself into – but,then again isn’t the “unknown” is sometimes worth discovering – where is the fun when everything is all set and hardcoded?!!!

Okay nuff said, let’s get into action! Over the past 3 weeks, I’ve been doing some groundwork on which type of technology should I use to develop apps on the smartphones (mainly the iPhone and the Android).

Here are some of the few path I took :-

Of the 3 path, the one that favors me the most is the 2nd one. Development of html5 technology using jQueryMobile and compiled into an App using PhoneGap.

I like jQueryMobile mainly because, it’s doesn’t involved hundreds of css lines to code, I really like the DOM controls and its (header, content and footer) framework design – AWESOMELICIOUS!!

However, there are hiccups here and there, like for example, javascript isn’t that fast to render on slower devices mainly if you were to develop js apps – do avoid from catering hardware specification below.

iPod Touch 1st Generation (firmware is stucked on version 3, device is slow ; bad performance but functional).
Android phones using version 1.5 and 1.6 (sluggish). Minimum suggested version 2.2 and 2.3
Low spec processor mainly those below 700 Mhz will suffer in performance. You can still develop on it but you basically have to minimize all the transition effects. Even, google’s recommended hardware phone (Nexus One has a 1 Ghz processor)

To start with the path I choose. (and no you don’t need to have a tatoo behind your neck like above).

These are the prerequisites (for Windows to Android Development ~ I’ll write on the Mac Environment once, I get my Mac Mini) :-

You need to have at least a basic knowledge of DOM and how jQuery function on Web. A little bit of html 5 knowledge and css as well.
Eclipse JS Edition installed
Setup Android Development Environment (with JAVA SDK 6) – If you developing using Windows 7 you need manual zip extract Android SDK installation, then set environment Path yourself.
XAMPP server (for inHouse web development)
Latest Chrome and Safari Browser (Web Kit Variant)
Knowledge on how to debug js using console.log and how to access Chrome’s Developer Inspector Tool (CTRL + SHIFT + I)
In Device Remote JS Mobile Apps debug using jsconsole.com

Use the links above, to guide you to specific reading material and follow them as I did because, eventually you will be able to setup a descent development environment as I did.

I’ve divided the development of JS mobile into 4 stages.

Stage 1 – Local Web Server (xampp) and Browser (it is good to place your source code htdocs pointed to dropbox that way you your development files backup for you…jolly good aint it)
Stage 2 – Web Server hosted somewhere and your Browser (to test the response of a remote calls e.g. for example, feeds coming from another domain your app is reading or remote database query)
Stage 3 – Web Server hosted somewhere and your mobile Browser (this is where you start using jsconsole.com because, the mobile browser do not have tools like firebug and etc). This is also the time you make optimization on certain stuff so that, they will look better when compiled to native.
Stage 4 – Localized all resource, js and css. Place em into www of phoneGap, push to device and test !!! – This is also where, the hardware control to device are done (camera, get GPS and etc). REMEMBER IN HEART : These Sacred 4 steps/warning everytime you compile into device

Make sure you copy all your files (include folder names case sensitivity e.g. JQuery/lib different from jQuery/lib – refresh the folders
CLEAN before you build!!! Is under Project > Clean
Make sure you. Uninstall the app from your device!
jQueryMobile IS SLOW in those 600 – 700mhz processor, just turn off the transitions to make the app useable – emphasize more on loading ajax circles if you are receiving data from hardware e.g. photo

If you experiencing form input text scrolling or bouncing up and down as if it loses it focus during keyboard input in Android is probably related to this css hack (see below) to counter flickering for slow processor device running jQueryMobile. (to remove all your suffering and headache just remove all the transition for slower devices and live with it for now) – this is referring to the latest @JQM 1.0 beta 2 tested on a CSL Spice MI300 DroidPhone

.ui-page {
    -webkit-backface-visibility: hidden;
}

Well I hope this article proof useful to all the html5 mobile technology adopters. Best of luck to you all!