digital_logic_simulator.html

   1 <html>
   2 <title>Digital Logic Simulator</title>
   3 <script>
   4
   5 var grid_status = 1;    /* boolean status of stage grid lines   */
   6 var grid_size = 20;             /* this is stored here for reference    */
   7 var canvas;                             /* object id of canvas tag                              */
   8 var ctx;                                /* context of canvas                                    */
   9 var item_selected = "gate_and" /* only one type of object can be drawn at a time */
  10
  11 /* intial setup of page - must be called on page load */
  12 function init_form()
  13 {
  14         /* initalize canvas element for use */
  15         canvas = document.getElementById("stage");
  16         ctx = canvas.getContext("2d");
  17         /* get width and height of window and set stage (canvas) with it. */
  18         canvas.height = window.innerHeight-125;
  19         canvas.width = window.innerWidth - 45;
  20         if(grid_status) {draw_grid(); }
  21
  22         /* temporary */
  23         draw_and_gate(0,0);
  24 }
  25 /* draw faint gridlines on stage - used as a guide for the user */
  26 function draw_grid()
  27 {
  28         var x, y;
  29         for(x = 0; x < window.innerWidth; x++)
  30         {
  31
  32         }
  33 }
  34
  35 function draw_and_gate(x,y)
  36 {
  37         //if(!x || !y) { alert("Coordinates Not Sent to Function"); return; }
  38         ctx.beginPath();
  39         //ctx.moveTo(75,50);
  40         //ctx.lineTo(100,75);
  41         //ctx.lineTo(100,25);
  42         ctx.arc(75,75,35,0,Math.PI,false);
  43         ctx.stroke();
  44 }
  45
  46 /* user changes what type of gate will be drawn next */
  47 function change_selection(sel)
  48 {
  49         var button = document.getElementById(sel);
  50         if(!button) { alert("Cannot Find Selected Button"); return; }
  51         /* enable old button */
  52         document.getElementById(item_selected).disabled = false;
  53         /* disable new button */
  54         button.disabled = true;
  55         /* set variable */
  56         item_selected = sel;
  57 }
  58
  59 </script>
  60
  61 <style type="text/css">
  62
  63 #stage {
  64         border: solid 1px #000;
  65 }
  66
  67 </style>
  68 <body onLoad="init_form();">
  69
  70 <center><h2>Digital Logic Simulator</h2></center>
  71 <center>
  72 <button id="gate_and" onClick='change_selection("gate_and");' disabled >AND</button>
  73 &nbsp;&nbsp;
  74 <button id="gate_or"  onClick='change_selection("gate_or");'>OR</button>
  75 &nbsp;&nbsp;
  76 <button id="gate_not"  onClick='change_selection("gate_not");'>NOT</button>
  77 &nbsp;&nbsp;
  78 <button id="gate_nor"  onClick='change_selection("gate_nor");'>NOR</button>
  79 &nbsp;&nbsp;
  80 <button id="gate_xor"  onClick='change_selection("gate_xor");'>XOR</button>
  81 &nbsp;&nbsp;
  82 <button id="gate_connect"  onClick='change_selection("gate_connect");'>Connect</button>
  83 &nbsp;&nbsp;
  84 </center>
  85
  86 <canvas id="stage" width="200" height="200">
  87 Your browser does not support HTML5 Canvas.
  88 </canvas>
  89
  90
  91 </body>
  92 </html>