HTML5 Tutorial - Canvas Element Lines Part - 1

Hi , I am going to explain you how to use or work with html5 new canvas element.In part one i am going to explain you about how to draw lines in canvas. Canvas Element : The canvas element is the actual DOM node that's embedded in the HTML page. Canvas Context : The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element.It may be 2D or webgl(3D). Each canvas element can only have one context. If we use the getContext() method multiple times, it will return a reference to the same context object. Template of HTML5 Canvas Element.

To draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods. First, we can use the beginPath() method to declare that we are about to draw a new path. Next, we can use the moveTo() method to position the context point (i.e. drawing cursor), and then use the lineTo() method to draw a straight line from the starting position to a new position. Finally, to make the line visible, we can apply a stroke to the line using stroke(). Unless otherwise specified, the stroke color is defaulted to black.

Line

Code for Above Image :

To Change the width of the line or increase the width of the line in the canvas , Please use the following code :

Changing canvas line color in html5 :

Html5 Line Cap Tutorial

HTML5 Tutorial - Drag and Drop

Title: HTML5 Tutorial - Drag and Drop example.

Description : I am going to explain how to drag an item and drop the item at required position.

In The above image i am going to move all right side boxes to trash i.e to left side dust bin. CSS Code for above App

JavaScript and html5 Code

    
HTML5 demos/@rem built this/view source
 

HTML5 Code

    

      
Drag and drop
    



  
Drag the list items over the dustbin, and drop them to have the bin eat the item
  

  

    
one
    
two
    
three
    
four
    
five
  

Original Source

PhoneGap Tutorial - Parsing xml file using javascipt and displaying the data on the android and ios mobile screens

Title : I am going to explain u how to parse xml file and display data on your mobile screen.

Description : In today's world every business application need to contact webservices or xml services or xml files in the server and parse the files and need to display some results on the screen.for example take a live cricket score card : in the server we write a program where the score will be updated ball by ball,run by run in the web service , and the xml file also get updated with the live score and now the our application screen should also contact the webservice every 5 seconds and parse xml file and will update the live score for us , I will explain this with source code latter , for now i will explain you a simple example.

Here is the xml file which we are going to parse.

    
    
        MakeMyTrip.com
        MakeMyTrip.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/makemytrip-logo.jpg
    
    
        GoIbibo.com
        GoIbibo.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/goibibo_logo.png
    
    
        Abhibus.com
        Abhibus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/abhibus-logo.png
    
    
        Travelyaari.com
        Travelyaari.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/travelyaari-com-logo-w240.png
    
    
        Redbus.in
        Redbus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/logo_bc9228d_163.jpg
    
    
        Expedia.co.in
        Expedia.co.in is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/expedia-logo.png
    
    
        Other websites
        We Provide more websites that offer good Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.
        travellogos/travel-agency-logos.jpg
    

Now we have to parse the above file using java script and display the results using html5. Here is the html and javascript code to parse this xml file.

Javascript file

function travel(){	
	if (window.XMLHttpRequest)
	 {	// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	 }
	else
	 {	// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	 }
		xmlhttp.open("GET","Travel.xml",false);
		xmlhttp.send();
		xmlDoc=xmlhttp.responseXML;		
		travels = xmlDoc.getElementsByTagName("website");
		alert("travels:"+travels.length);
		var websites = [];
		var description = [];
		var logos = [];		
		for(var travel=0;travel

Html File

  
    
    
    


	  
	    

 
  
  
 
  
  
  
 Coupons Shop
    




	
	

Converting MySql table data to xml file or xml web service - a part of phonegap tutorial for mobile web developers

Title : Converting mysql table data to xml file. Description : All mobile developers know how to parse xml data and display the data in the blocks of mobile screen.and it is also easy to parse xml data rather then fetching data directly from database every time going and hitting database and requesting to open connection and retriving data and closing connection.so i am going to explain you how to convert database data to xml file, and also in my previous tutorial i have explained you how to store form data to mysql database table. Now create a database, and create a table and store some data inthe table or open PhpMyAdmin panel and click on create table tab. now create some columns with some variables, and insert some data into the fields.so that you can able to create some usefull table to use it as webservices. Here is the following code to convert your table data to xml file.

";
$root_element = $config['table_name']."s"; //fruits
$xml         .= "<$root_element>";

//select all items in table
$sql = "SELECT * FROM ".$config['table_name'];
 
$result = mysql_query($sql);
if (!$result) {
    die('Invalid query: ' . mysql_error());
}
 
if(mysql_num_rows($result)>0)
{
   while($result_array = mysql_fetch_assoc($result))
   {
      $xml .= "<".$config['table_name'].">";
 
      //loop through each key,value pair in row
      foreach($result_array as $key => $value)
      {
         //$key holds the table column name
         $xml .= "<$key>";
 
         //embed the SQL data in a CDATA element to avoid XML entity issues
         $xml .= "";
 
         //and close the element
         $xml .= "";
      }
 
      $xml.="";
   }
}
//close the root element
$xml .= "";
 
//send the xml header to the browser
header ("Content-Type:text/xml");
 
//output the XML data
echo $xml;
?>

Here is the out put file i got with the above code.

MakeMyTrip.comMakeMyTrip.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/makemytrip-logo.jpgGoIbibo.comGoIbibo.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/goibibo_logo.pngAbhibus.comAbhibus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/abhibus-logo.pngTravelyaari.comTravelyaari.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/travelyaari-com-logo-w240.pngRedbus.inRedbus.com is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/logo_bc9228d_163.jpgExpedia.co.inExpedia.co.in is one of the good website providing Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/expedia-logo.pngOther websitesWe Provide more websites that offer good Travel services to book oonline Flight,Hotel,Train and Bus tickets with guranteed lowest prices and provides new deals , offers and discount coupons every week and help you save money upto 20% while you travel.travellogos/travel-agency-logos.jpg

In next tutorial I will explain you how to parse this xml file and display data on mobile screen using phonegap.

PhoneGap Accelerometer Tutorial with example

PhoneGap Accelerometer tutorial with example



Title :