Code Example‎ > ‎Drawing‎ > ‎

More

Line

  • Create new project using Droidget wizards

          choose, File --> new project --> project
          From wizards ,  choose Droidget wizards --> project
          and Fill the name field for the project and click finish.
          Droidget project with the given name will be created and displayed in the project explorer.
          And  folder structure will looks like following:
 
 



  • Edit the index.html

          with in the <head> in  index.html, add the following code:
          <script type="text/javascript">
window.addEventListener('load',DrawLine,false);
function DrawLine() {
  var elem = document.getElementById('Line');
  if (!elem || !elem.getContext) {
  return;
  }
  var context = elem.getContext('2d');
  if (!context) {
  return;
  }
  context.strokeStyle = 'red';
  context.lineWidth   = 1;
  context.beginPath();
  context.moveTo(50, 50);
  context.lineTo(200, 200);
  context.stroke();
  context.closePath();
  }
  </script>
              with in the <body> in  index.html, add the following code:
              <p><canvas id="Line" width="300" height="300"></canvas></p>
              final index.html code looks like :
    <!DOCTYPE html>
   <html>
   <head>
   <meta charset="utf-8">
   <title>DrawLine</title>
        <script type="text/javascript">
            window.addEventListener('load',drawLine,false)
                        function drawLine () {
            var elem = document.getElementById('Line');
            if (!elem || !elem.getContext) {
            return;
            }
            var context = elem.getContext('2d');
            if (!context) {
            return;
            }
            context.strokeStyle = 'red';
            context.lineWidth   = 1;
            context.beginPath();
            context.moveTo(50, 50);
            context.lineTo(200, 200);
            context.stroke();
            context.closePath();
            }
         </script>
    </head>
    <body>

    <canvas id="Line" width="300" height="300"></canvas>

    </body>
    </html>

  • Edit config.xml

          change the width and height properties of the widget to appropriate sizes and change  
          other properties such as name , etc,,, as required.Save config.xml file. Final code is
          similler to:
               <?xml version="1.0" encoding="utf-8"?>
        <widget id="HelloDroidget" version="1.2" width="300" height="300">
              <content src="index.html" type="text/html"/>
              <name>HelloCalendar</name>
              <description>HelloCalendar</description>
              <author url="http://yourserver/example/widgets">gclue</author>
              <icon src="icon.png"/>
              <access network="true"/>
        </widget>

  • Deploy the project

          now save and deploy the project.
          1. from the eclipse meny select
Droidget --> packaging
          2. then
Droidget-->install packaging

  • Out put

          finally , the Line will appear in the Droidget screen as follows:







Square

  • Create new project using Droidget wizards

          choose, File --> new project --> project
          From wizards ,  choose
Droidget wizards --> project
          and Fill the name field for the project and click
finish.
          Droidget project with the given name will be created and displayed in the project explorer.
          And  folder structure will looks like following:


  • Edit the index.html


          with in the <head> in  index.html, add the following code:
          <script type="text/javascript">
window.addEventListener('load',DrawSquare,false);
function DrawSquare () {
  var elem = document.getElementById('DrawSquare');
  if (!elem || !elem.getContext) {
  return;
  }
  var context = elem.getContext('2d');
  if (!context) {
  return;
  }
  context.fillStyle = 'red';
  context.fillRect(100, 100, 100, 100);
}
    </script>

           with in the <body> in  index.html, add the following code:
           <p><canvas id="DrawSquare" width="300" height="300"></canvas></p>
           final index.html code looks like :
          <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>DrawSquare</title>
    <script type="text/javascript">
    window.addEventListener('load',DrawSquare,false);
    function DrawSquare () {
  var elem = document.getElementById('DrawSquare');
  if (!elem || !elem.getContext) {
  return;
  }
  var context = elem.getContext('2d');
  if (!context) {
  return;
  }
  context.fillStyle = 'red';
  context.fillRect(100, 100, 100, 100);
   }
    </script>
  </head>
  <body>
    <p><canvas id="DrawSquare" width="300" height="300"></canvas></p>
  </body>
</html>


  • Edit config.xml

          change the width and height properties of the widget to appropriate sizes and change  
          other properties such as name , etc,,, as required.Save config.xml file. Final code is
          similler to:
     <?xml version="1.0" encoding="utf-8"?>
    <widget id="HelloDroidget" version="1.2" width="300" height="300">
     <content src="index.html" type="text/html"/>
     <name>HelloDroidget</name>
     <description>HelloDroidget</description>
     <author url="http://yourserver/example/widgets">gclue</author>
     <icon src="icon.png"/>
     <access network="true"/>
    </widget>

  • Deploy the project

          now save and deploy the project.
          1. from the eclipse meny select
Droidget --> packaging
          2. then
Droidget-->install packaging

  • Out put

          finally , the Square will appear in the Droidget screen as follows:





Circle

  • Create new project using Droidget wizards

          choose, File --> new project --> project
          From wizards ,  choose
Droidget wizards --> project
          and Fill the name field for the project and click
finish.
          Droidget project with the given name will be created and displayed in the project explorer.
          And  folder structure will looks like following:


  • Edit the index.html

          with in the <head> in  index.html, add the following code:
         <script type="text/javascript">
window.addEventListener('load',DrawCircle, false);
function DrawCircle() {
  var elem = document.getElementById('DrawCircle');
  if (!elem || !elem.getContext) {
  return;
  }
  var context = elem.getContext('2d');
  if (!context) {
  return;
  }
  context.strokeStyle = 'red';
  context.lineWidth   = 2;
  context.beginPath();
  context.arc(150, 120, 50, 0, 360, false);
  context.stroke();
  context.closePath();
}
    </script>


          with in the <body> in  index.html, add the following code:
          <p><canvas id="DrawCircle" width="300" height="300"></canvas></p>
          final index.html code looks like :
          <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DrawCircle</title>
    <script type="text/javascript">
   window.addEventListener('load',DrawCircle, false);
   function DrawCircle() {
  var elem = document.getElementById('DrawCircle');
  if (!elem || !elem.getContext) {
  return;
  }
  var context = elem.getContext('2d');
  if (!context) {
  return;
  }
  context.strokeStyle = 'red';
  context.lineWidth   = 2;
  context.beginPath();
  context.arc(150, 120, 50, 0, 360, false);
  context.stroke();
  context.closePath();
}
    </script>
  </head>
  <body>
    <p><canvas id="DrawCircle" width="300" height="300"></canvas></p>
  </body>
</html>

  • Edit config.xml

          change the width and height properties of the widget to appropriate sizes and change  
          other properties such as name , etc,,, as required.Save config.xml file. Final code is
          similler to:
         <?xml version="1.0" encoding="utf-8"?>
     <widget id="HelloDroidget" version="1.2" width="300" height="300">
     <content src="index.html" type="text/html"/>
     <name>HelloDroidget</name>
     <description>HelloDroidget</description>
     <author url="http://yourserver/example/widgets">gclue</author>
     <icon src="icon.png"/>
     <access network="true"/>
     </widget>

  • Deploy the project

       now save and deploy the project.

       1. from the eclipse meny select Droidget --> packaging

       2. then Droidget-->install packaging


  • Out put

       finally , the Circle will appear in the Droidget screen as follows:




Image and Line


Image and Circle

Comments