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.