Leader Board with Barchart Using AngularJS

Here is LeaderBoad example using AngularJS- Realtime Score and Barchart update.
The following Example show a live-updating using AngularJS.
First Take a example:

Click on Red Heart and press button to add 5 pints.

You can view live example here :- http://178.79.147.154:3660/

package.json file:-

Screen2

Directory structure and how its works:-
With the app initialized, routes are defined:
• /list/[name]
A fallback from the previous route, in case the name provided was not found
• /
A default route used to access the application’s home page.
Here we can see app initialized with “/ “ routes in below screenshot, and items added in Index file for view.

Screen3

•MongoDB
MongoDB is a “Document Oriented Database”, which stores data in JSON format. It is a handy tool for smaller database requirements. For MongoDB need to Create database Server then Create database and last Open that database, for detail see below Screenshot.

Screen4

•socket.io
Socket.IO is a JavaScript library for realtime web applications. It has two parts: a client-side library that runs in the browser, and a server-side library for node.js. Both components have a nearly identical API. Like node.js, it is event-driven.
Now we see how Server Side Socket.Broadcast.Emit done and Client Side Socket.On, for that see below both screenshot.

Server Side Broadcast.Emit:-
Screen5

Client Side Socket.On:-
Screen6

Now AngularJS Code:-
In Index.ejs

Screen7

And last Scripts.js update barchar graph

You can view live example here :- http://178.79.147.154:3660/

Entire Package Found here :- LeaderBoard_AngularJS.zip
And You can also see Entire Package on GitHub :-https://github.com/snowflaxgit/leaderboard_angular

Posted in AngularJS, HTML5, node.js | Tagged , , | Leave a comment

Animate Catch Using CSS3 and Hammer.js

We build animation of a character using CSS3 and hammer.js.

I found usefull example of Css3 animation propertly here Simurai. I just extend a more usefullversion and add code here: http://github.com/snowflaxgit/Animate_Catch.git

First Take a look live example here:

You can view live example here :- http://snowflax.com/downloads/animate_catch/index.html

CSS keyframe animations have a property called animation-timing-function and one of the options is to use the steps() feature like in this example:


Hammer is comes into play to handle event :

var hammertime = Hammer(frame, {});
	hammertime.on("hold tap swipe doubletap transformstart transform transformend dragstart drag
                dragend release pinch pinchin pinchout", function (event) {
		if(event.type == "dragstart"){	// touch device slide drag Start call
				isSlideDragStart = true;
				slideDragStartEvent(event);
		}else if( (event.type == "drag")){//Drag Move
			if(isSlideDragStart == true){
				slideDragMoveEvent(event);
			}
		}else if( (event.type == "dragend")){ // Slide drag End here
			if(isSlideDragStart == true){
				slideDragEndEvent(event);
			}
		}
		else if( (event.type == "doubletap")){ // Slide drag End here
			ResetAnimate();
		}
	});

You can also view live example here :-http://snowflax.com/downloads/animate_catch/index.html

Entire Package Found here :- Animate_Catch.zip.

Posted in CSS3, Hammer, HTML5, js | Tagged , , , , | Leave a comment

CRUD Based Socket.io

Here is simple Cart example using node.js,socket.io and express with real push and CRUD (Create,Read,Update and Delete).

The following example show a live-updating using node.
First Take a example:
You can view live example here :- http://178.79.147.154:3560/

You can Create,Read,Update and Delete Field here:- (Take a look below:)

User Interface & Jade template:-
Templates allow you to split your presentation information out from your program code,
making it easier to arrange your project files and render out web pages with complicated structure.

To install the Jade templating engine, use the NPM command from your working
directory:
npm install jade
Important Part writes in package.json file:-

Package.json

To install all packages, use the NPM command from your woking directory.

npm install -g

Directory structure and how its works:-
With the app initialized, three routes are defined:
• /stooges/[name]

Expecting the name of one of the stooges as input
• /stooges/

A fallback from the previous route, in case the name provided was not found
• /

A default route used to access the application’s home page
Here we can see app initialized with “/ “ routes in below screenshot, and items added in Index file for view.

App Initialized

• MongoDB
MongoDB is a “Document Oriented Database”, which stores data in JSON format. It is a handy tool for smaller database requirements. For MongoDB need to Create database Server then Create database and last Open that database, for detail see below Screenshot.

MongoDB

• socket.io
Socket.IO is a JavaScript library for realtime web applications. It has two parts: a client-side library that runs in the browser, and a server-side library for node.js. Both components have a nearly identical API. Like node.js, it is event-driven.

Now we see how Server Side Socket.Broadcast.Emit done and Client Side Socket.On, for that see below both screenshot.

Server Side Broadcast.Emit:-

Client Side Socket.On:-

Now We see some Core Part of Code (Function):-

• Call Add Function on Client Side and Server Side.

Client Side Add:-
Client Side Add

Server Side Add:-

•Call Edit Function on Client Side and Server Side.
Client Side Edit:-

Server Side Edit:-

•Call Remove Function on Client Side and Server Side.
Client Side Remove:-
Client Side Remove
Client Side Remove

Server Side Remove:-

You can also view live example here :- http://178.79.147.154:3560/
Entire Package Found here :- CRUD based socket io.zip

And You can also see Entire Package on GitHub :-
https://github.com/snowflaxgit/CRUD_based_socket.io

Posted in js, node.js | Tagged , , , , , , , , , | Leave a comment

360 Rotating using CSS and Javascript

The following example show 360 angle images rotating Using Css and Javascript.

There are some 360 degree viewer available using third party libraries, I just tried much simple.

This example show how to rotate an image using HTML and CSS3 .CSS transformations allow us to rotate elements on a 360 degree.

Take a look at example here:

You can view live example here :- http://snowflax.com/downloads/360AngleRotating/car.html

Here is another simple example:

You can view live example here :- http://snowflax.com/downloads/360AngleRotatingCoke/360AngleRotating.html

Download Source code here :- 360AngleRotating.zip.

Posted in CSS3, HTML5, js | Tagged , , | Leave a comment

Meteor Backbone Book Sample using meteor

I found Shane O’Grady’ code at Github build really nice backbone and localstorage example here:

We use that backbone structure and plug amazing new meteor framework and make it server centric.

Here is Web app using meteor ( server –client):
You Can Crate and Manage field :- (Take a look below:)

You can view live example here :- http://66.175.213.221:3500/

On Add book, it plug to template of meteor instead of localstorate.You can enjoy live-updating here.

We added ‘add’, ‘remove’,’ removeAll’ and ‘update’ on Meteor.isServer.To load initial data from server , it need ‘get_all_books’ as a publish and need to subscribed to connected client.meteor methods integrated with backbone structure there.

Using LocalStorate( Client App):
You can View it here:

Entire Package Found here :- Meteor_Backbone_Book.zip

Posted in Meteor | Tagged , , , , , | Leave a comment

Css3 and HTML5 based sample weightscale example

The following example show weightscale based on Css3 and HTML5.

First Take a look on  Flash version here : WeightScale.

or you can view on Screenshot below:

We build same in HTML5 and Css3, take a look below:

You can also view live example here :- http://snowflax.com/downloads/weightscale/index.html

Entire  Package Found here :- weightscale.zip

Posted in HTML5, js | Tagged , , | Leave a comment

Meteor on Mobile Device using PhoneGap

Here is leaderboad example using meteor- Realtime score update on Mobile Device.

To run meteor app on mobile device using phonegap, First deploy on server, I use http://66.175.213.221:5000/ .I found bunch of files here, you need to change steam_client file to receive request from Phonegap mobile clients.

Step 1: Right click on page and see View page source, you can see lots of file there, If you want to make apk file at that time need to change “stream_clientbf90.js” file.

 

Change url to your serverURL. in “stream_clientbf90.js”file,apply change below:

 

The following example show a live-updating high score list.

First Take a look on Screenshot below:

Here is Web app:

Click on name and press button to add 5 pints.

You can also view live example here :- LeaderBoardDemo

Step 2: Build Apk File using Phonegap and deploy on Mobile device:
Code are same but just have URL change above from Step 1: leaderboard.zip

Download code and use dreamweaver or any Phonegap SDK enable IDE to make apk file.

(1)

(2)

(3)

Try that APK in Android enable Mobile Device, it works. :)
Take a look at mobile screenshot:

Entire  Package Found here :- leaderboard.zip
For apk file click here:- leaderboard.apk

Posted in js, Open Source | Tagged , , , | 1 Comment

Adobe AIR Native Extension – Read Phone Number From Device

The following example show phone number from  your Device .

First Take a look on Screenshot below:

(1)

(2)

(3)

You can Download ANE file from here.
If you want to know, how to create ANE file please refer old blog here.

Look at core part of Code :-

<fx:Script>
<![CDATA[
import m.candymanlab.nativeExtensions.phoneNumber.PhoneNumberANE;
private var phoneNumberExt : PhoneNumberANE;
protected function phonNoBtn_clickHandler(event:MouseEvent):void
{
phoneNumberExt = new PhoneNumberANE();
phonNoTXT.text = phoneNumberExt.phoneNumber;
}
]]>
</fx:Script>

 

  •  One Other things, we have to add ane file for access Native Extensions.  So look at below screen shot for how to add ane file.

(1)

 (2)

(3)

Entire  Package Found here (fxp and ane) getPhoneNumber.

 

We just copied ANE and methods from this blog: 

http://candymandesign.blogspot.com/2012/02/adobe-air-native-extension-read-phone.html

thanks to 
Posted in Flex, Open Source | Tagged , | Leave a comment