Jersey Mobile Application using HTML5, JQuery Mobile and Javascript

Make Your jersey Application with HTML5, CSS3 and Javascript

In this application the technology stack which we will be using is HTML5, CSS3 and Javascript, all of which are very easy to learn and understand with a minimum of brain efforts. This application allows the user to customize the given t-shirts and allows him to create his jersey with his own name and number. Also we can save the same and can utilize it say for example, use the customized jersey image as a desktop wallpaper or a mobile wallpaper.

The basic idea behind development of the application in HTML5 is to explore the features of a new framework and to make a habit of coping up ourselves with the changing technology and latest trends in the market.

Creating  application in HTML5, CSS3 and Javascript

This is a single Webpage application developed using HTML5 canvas tag and other basic HTML5 tags with the javascript code.

There is a discrete set of operations (or things we want to achieve) that fall within the scope of this article, they are (in the order that we will tackle them):

•   Select Your Favorite T-shirt.
•   Enter your name and number which you to display on the T-shirt.
•  Save the customized image and use it as per your interest.

1. After the user enters the URL, he is redirected to the application itself.

2.   T-shirt of your choice and it will appear into the editable canvas.

3.   Enter name and number of your choice which you want to display on the T-shirt and click on submit button. Now the image will appear as below.

4.   Right click on the customized image and save it at your specified location.

Code snippet:

Index.html file

◦     Code for canvas tag:

<table align="center" cellspacing="4" cellpadding="4">

<tr>

          <td>

                    <div id="div1" style="width:390px;height:380px;border:1px solid #ddd;" align="center">

                   <canvas id="mycanvas" style="border: 5px solid;"         width="390"           height="380">

                   Sorry! Your browser doesn't support Canvas.

                   </canvas>

                   </div>

                   </div>

          </td>

</table>

◦     Code for form tag:

            <form>

                   Enter Your Name:<input id="textin" type="text" />

                             <br/>

                   Enter Number:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                   <input id="numin" type="text" />

                             <br/>

                   <input type="button" value="Submit" onClick="entertxt();" />

          </form>

◦     Code for Selecting T-shirt:

◦

</table>

          <tr>

                   <td>

                   <a onClick="loadcanvas('./images/white.JPG');" >

                             <img src="./images/white.JPG" width="50" heigth="50"/>

                   </a>

                   </td>

         

                   <td>

                   <a  onClick="loadcanvas('./images/a.JPG');">

                             <img src="./images/a.JPG" width="50" heigth="50"/>

                   </a>

                   </td>

                   <td>

                   <a onClick="loadcanvas('./images/b.JPG');">

                   <img src="./images/b.JPG" width="50" heigth="50"/></a>

                   </td>

          </tr>

</table>

Javascript code

function loadcanvas(x){

 canvas = document.getElementById("mycanvas");

 context = canvas.getContext("2d");

 draw(x);

}

  function draw(x) {

            var ctx = document.getElementById('mycanvas').getContext('2d');

            var img = new Image();

            

            //image object is onload

            img.onload = function(){

                ctx.drawImage(img,0,0);

            };

            img.src = x;

            }

function entertxt() {

            var userenter = document.getElementById("textin").value;

            context.font="18px sans-serif";

            context.fillText(userenter, 160, 140);

           var userenter1 = document.getElementById("numin").value;

            context.font="80px sans-serif";

            context.fillText(userenter1, 140, 260);

          }

   You can also use the application in your mobile browser. The application recognizes your  mobile browser and provides you the appropriate mobile view of the application.

   This application is an effort from Pragmatic Techsoft still in the advanced development stage and still many features to will be added to this to make it a full fledged application with high quality graphics and improvised user interface.