HTML5 - Practical Example - Creating Clock and Data


We would like to present some real life example about how to produce a Clock and Data Diagram, to show the relationship of digital signals. This example has everything in a single file.

There is a simple for loop to create the clock. The code is self explanatory, however a few points can be mentioned:

1. A clock cycle is made by the horizontal on/off, and rise/fall, and the cycle is repeated in a for loop.
2. Two statements are used for mirroring and translation.
3. The mirro statement creates the mirror image of clock around the half width x axia, which together with the original clock makes the feeling of a random data.
4. The translation statement simply move the generated clock on y axis.


To learn this: Give different value to the clock on/off time, rise time (rt), fall time (ft), and translation, and see how the waves move in the canvass.

We have made this in a single file, and the learners should create a function for mirroring and translation, and modify the program. These basic functions can be used in making the data /clock relationship for an EDA simulation.

Let us take a look at the code below


<!DOCTYPE html5>
<html>

<body>

<canvas id ="canvas1" width="800" height="200" style="border:2px solid #FF0000;">
</canvas>

<script>
var c1=document.getElementById("canvas1");
var context1=c1.getContext("2d");


var height = -20;
var width = 50;
var rt = 10;
var ft = 5;
var startX = 10;
var startY = 100;
var barLen = 150;
var ymirror = 0;
var my1=0;
var my2=0;
var translation= 150;

ymirror = startY+ height/2;


for( var i = 0; i < 6 ; i++ ) 
{
// slant up
x1= startX +i*(rt+ft+2*width);
y1= startY;
x2=x1 +rt;
y2=y1 +height;
context1.moveTo(x1,y1);context1.lineTo(x2,y2);context1.stroke();

my1=2*ymirror-y1;  my2= 2*ymirror-y2;  context1.moveTo(x1,my1);context1.lineTo(x2,my2);context1.stroke();

ty1= my1 - translation;  ty2= my2 - translation;   context1.moveTo(x1,ty1);context1.lineTo(x2,ty2);context1.stroke();


// horizontal up
x1=x2;
y1=y2;
x2=x1+width;
y2=y1;
context1.moveTo(x1,y1);context1.lineTo(x2,y2);context1.stroke(); 

my1=2*ymirror-y1;  my2= 2*ymirror-y2;  context1.moveTo(x1,my1);context1.lineTo(x2,my2);context1.stroke();

ty1= my1 - translation;  ty2= my2 - translation;   context1.moveTo(x1,ty1);context1.lineTo(x2,ty2);context1.stroke();


//slant dn 
x1=x2;
y1=y2;
x2=x1+ft;
y2=startY;
context1.moveTo(x1,y1);context1.lineTo(x2,y2);context1.stroke(); 

my1=2*ymirror-y1;  my2= 2*ymirror-y2;  context1.moveTo(x1,my1);context1.lineTo(x2,my2);context1.stroke();

ty1= my1 - translation;  ty2= my2 - translation;   context1.moveTo(x1,ty1);context1.lineTo(x2,ty2);context1.stroke();

// horizontal dn
x1=x2;
y1=y2;
x2=x1+width;
y2=y1;
context1.moveTo(x1,y1);context1.lineTo(x2,y2);context1.stroke();  

my1=2*ymirror-y1;  my2= 2*ymirror-y2;  context1.moveTo(x1,my1);context1.lineTo(x2,my2);context1.stroke();

ty1= my1 - translation;  ty2= my2 - translation;   context1.moveTo(x1,ty1);context1.lineTo(x2,ty2);context1.stroke();

    
}

startX = 10+width/2;
var startY = 125;
context1.lineWidth = 1;
context1.strokeStyle = 'blue';

for( var i = 0; i < 6 ; i++ ) 
{
// slant up
x1= startX +i*(rt+ft+2*width);
y1= startY;
x2=x1 +rt;
y2=y1 +height;
context1.moveTo(x1,y1);context1.lineTo(x2,y2);context1.stroke();
 
// horizontal up
x1=x2;
y1=y2;
x2=x1+width;
y2=y1;
context1.moveTo(x1,y1);context1.lineTo(x2,y2);context1.stroke(); 

//Bar    
xBar=x2;	yBar=y2;
context1.moveTo(xBar,yBar + barLen);context1.lineTo(xBar,yBar - barLen);context1.stroke(); 

//slant dn 
x1=x2;
y1=y2;
x2=x1+ft;
y2=startY;
context1.moveTo(x1,y1);context1.lineTo(x2,y2);context1.stroke(); 
  

// horizontal dn
x1=x2;
y1=y2;
x2=x1+width;
y2=y1;
context1.moveTo(x1,y1);context1.lineTo(x2,y2);context1.stroke();  
 
 
//Bar    
xBar=x2;	yBar=y2;
context1.moveTo(xBar,yBar + barLen);context1.lineTo(xBar,yBar - barLen);context1.stroke(); 
  
}</script>

</body>
</html>



Try this example Online


Try this example online here. [ It opens in a new tab / windows, so you can come back ] and try to make some changes in the color of the start and end circles, to see how it looks like.