Skip to main content

How to Draw & Show Raster-Graphics in Internet Explorer via Pure HTML

Have you ever thought that if it is possible to draw raster-graphics, i.e., pixel based graphics in HTML? Isn’t it interesting if it could be possible?

So be ready to be amazed, because with the method that I’m going to describe, it’ll become possible.

Let’s start with the number of ways we can show graphics in our web-page. As we know, the standard ways are by using image tag, i.e., <img src="img_name.jpg"> and by using flash file, i.e., *.swf file (advanced way).

There is two more ways of doing this; one of them is by using CSS. But it is not supported by most of the web browsers. And I’m not going to describe that, as you could get many articles related to this on internet. Anyways let’s come to the point.

The fourth, most interesting way is by using pure html. This is the least known method, in fact nobody else has ever written about it.

So technically, the credit of its invention/discovery goes to me. ;)

The Technique!

We can create an image purely in HTML format by making a table similar to the size of the image, say 100 x 100; and defining the size of the cell equal to the size of a pixel, i.e., 1.

For example,
 <table cellspacing=0 cellpadding=0>  
   <tr>  
     <td bgcolor=#FF0000 width=1></td>  
   </tr>  
 </table>
The above code will show a single pixel of red colour on IE (Internet Explorer).

So if we can create on pixel, then we can also create a matrix of pixels. That means we can create an image which is in fact a matrix of pixels.

The technique is to define a colour for each & every cell, i.e., , of the table.

How this has become possible?

By defining the width of the cell equal to 1 and making cellspacing & cellpadding equal to 0.

Is the technique to lengthy? No problem!

To ease this job, I’ve created few functions in PHP.

Required Functions:
 // This function converts the given 2-D array of colours into HTML table of coloured cell.
 function MatrixToPixel($Matrix)  
 {  
   $output = "<table cellspacing=\"0\" cellpadding=\"0\">";  
   for($i=0; $i<count($Matrix); $i++)  
   {  
     $output .= "<tr>";  
     for($j=0; $j<count($Matrix[$i]); $j++)  
     {  
       $output .= "<td bgcolor=\"".$Matrix[$i][$j]."\" width=\"1\"></td>";  
     }  
   $output .= "</tr>";  
   }  
   $output .= "</table>";  
   return $output;  
 }

 // This function formats the given 2-D array by changing null value into the given value.  
 function FormatMatrix($Matrix,$bgcolor)  
 {  
   for($i=0; $i<count($Matrix); $i++)  
   {  
     for($j=0; $j<count($Matrix[$i]); $j++)  
     {  
       $Matrix[$i][$j] = ($Matrix[$i][$j] == null)?$bgcolor:$Matrix[$i][$j];  
     }  
   }  
   return $Matrix;  
 }  
Now, you have to use this function for conversion purpose. See below.

Sample1:
 function setPixel($val,$x,$y,$arr)  
 {  
   $arr[$x][$y] = $val;  
   return $arr;  
 }  

 function circlePoints($cx, $cy, $x, $y, $pix,$arr)  
 {  
   $act = $pix; //"#FF0000";  
   if ($x == 0)  
   {  
     $arr = setPixel($act, $cx, $cy + $y,$arr);  
     $arr = setPixel($pix, $cx, $cy - $y,$arr);  
     $arr = setPixel($pix, $cx + $y, $cy,$arr);  
     $arr = setPixel($pix, $cx - $y, $cy,$arr);  
   }  
   else if ($x == $y)  
   {  
     $arr = setPixel($act, $cx + $x, $cy + $y,$arr);  
     $arr = setPixel($pix, $cx - $x, $cy + $y,$arr);  
     $arr = setPixel($pix, $cx + $x, $cy - $y,$arr);  
     $arr = setPixel($pix, $cx - $x, $cy - $y,$arr);  
   }  
   else if ($x < $y)  
   {  
     $arr = setPixel($act, $cx + $x, $cy + $y,$arr);  
     $arr = setPixel($pix, $cx - $x, $cy + $y,$arr);  
     $arr = setPixel($pix, $cx + $x, $cy - $y,$arr);  
     $arr = setPixel($pix, $cx - $x, $cy - $y,$arr);  
     $arr = setPixel($pix, $cx + $y, $cy + $x,$arr);  
     $arr = setPixel($pix, $cx - $y, $cy + $x,$arr);  
     $arr = setPixel($pix, $cx + $y, $cy - $x,$arr);  
     $arr = setPixel($pix, $cx - $y, $cy - $x,$arr);  
   }  
   return $arr;  
 }  

 function circleMidpoint($xCenter, $yCenter, $radius, $c)  
 {  
   $Matrix = array();  
   $pix = $c;  
   $x = 0;  
   $y = $radius;  
   $p = (5 - $radius*4)/4;  
   $Matrix = circlePoints($xCenter, $yCenter, $x, $y, $pix, $Matrix);  
   while ($x < $y)  
   {  
     $x++;  
     if ($p < 0)  
     {  
       $p += 2*$x+1;  
     }  
     else  
     {  
       $y--;  
       $p += 2*($x-$y)+1;  
     }  
     $Matrix = circlePoints($xCenter, $yCenter, $x, $y, $pix, $Matrix);  
   }  
   return $Matrix;  
 }  

 echo MatrixToPixel(FormatMatrix(circleMidpoint(50, 50, 50,"#FF0066"),"#FFFFFF"));  
This will draw a circle of pinkish-red colour.

Sample2:
 function lineSimple($x0, $y0, $x1, $y1, $pix)  
 {  
   $Matrix = array();  
   $dx = $x1 - $x0;  
   $dy = $y1 - $y0;  
   $Matrix[$x0][$y0] = $pix;  
   if ($dx != 0)  
   {  
     $m = $dy / $dx;  
     $b = $y0 - $m*$x0;  
     $dx = ($x1 > $x0) ? 1 : -1;  
     while ($x0 != $x1)  
     {  
       $x0 += $dx;  
       $y0 = round($m*$x0 + $b);  
       $Matrix[$x0][$y0] = $pix;  
     }  
   }  
   return $Matrix;  
 }  
 echo MatrixToPixel(FormatMatrix(lineSimple(10,10,100,100,"#FF0066"),"#FFFFFF"));  
This will draw a slant line of pinkish-red colour.

So you see we can draw graphics on Internet Explorer with pure HTML.

Fig: The screen-shot of the result generated by above code.

Fig: The screen-shot of the result generated by above code.

The only thing to keep in mind is this …

Drawbacks: Bigger the image, bigger will be its file size & longer will the processing time therefore longer would be loading time.

Limitations: It is supported by Internet Explorer only.

Usefulness: But it is useful in case of small images, say for about 10 x 10. As it could become highly dynamic with little more coding.

Comments

Popular posts from this blog

Unlock protected blocks in Siemens SIMATIC Step 7

Recently I'd been called by Hindalco's Fabrication Plant division to unlock the protected blocks in Siemens SIMATIC Step 7. They were in need to unlock those blocks since an year because of 1 million Rupees of loss per month. They want to re-program those blocks but it was locked by the man who'd done the setup. From the people working in that department, I came to know that they were trying to call that man (someone from Italy) right here but he's not coming. Actually, what he'd done was that he'd locked some of the blocks and deleted the source file. And Siemens didn't provide any feature to unlock. Department people also told me that even the people working in Siemens don't know how to do it. Being a software engineer I know that any thing can be reverse engineered. So I took up the challenge. How did I unlocked the blocks? The first thing I'd done was searched about this software at Google and read about what is this software all about. Aft

App: Calculate your job experience or age in years

Usually, all of those who works have to put years of experience on their resume or curriculum vitae. But 90% people put it wrong when they convert their experience in years only. Although they know the exact number of months and years but the conversion, they do is wrong. This happens because there are 12 months while the digit after decimal would be 0-9, i.e., 10 digits. Which means that we have to represent the number of months in terms of year. So here I have provided a small gadget to calculate it. Just put the date when you had started working in the From Date field and put current date in the To Date field. You can also calculate your age as well with this tool by putting your date of birth in the From Date field and put current date in the To Date field. As an alternative, you can use the hassle-free and simple to use  Date Differentiator  micro webapp. Bookmark it so you may easily access it later.

How to convert JIRA story into sub-task or defect?

Many times we entangled in the situation where we have made a  story  in JIRA but later on realised that it should have to be  defect  or in other case,  sub-task  of another  story . Story → Sub-task So the workaround for converting the story into defect is given below: Open your  story Click on  more  option Click on the  Convert to sub-task  option in the dropdown You would be asked to choose  Parent  story, so chose relevant story After submit, your  story  gets converted into  sub-task Story → Defect Now if you want the story to be converted into defect, then you should first convert it into sub-task. Thereafter, you can convert that sub-task into defect as given below: Open the  sub-task Click on  more  option Click on the  Convert to issue  option in the dropdown You would be asked to fill up relevant fields required for raising a  defect , fill them up as required After submit, your  sub-task  gets converted into  defect .