boolean-minify/logicCircuitRenderer_example.html at main · Simewu/boolean-minify · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <title>Logic Gate Visualizer</title>
</head>

<body>
  <h1>Logic Gate Renderer</h1>
  <input id='expr' value='(A & B) | (!C & (D | E))' style='width:500px;'>
  <canvas id='draw' width='500' height='500' style='width: 500px; border: 1px solid black;'></canvas>

  <script src='logicCircuitRenderer.js' type='text/javascript'></script>
  <script>
    const input = document.getElementById('expr');
    const canvas = document.getElementById('draw');

    const options = {
      lineWidth: 2,
      gateHeight: 40,
      gateWidth: 40,    // Width of each logic gate
      hGap: 60,         // Horizontal gap between gate centers
      vGap: 50,         // Vertical gap between input variables
      inputStub: 3,     // Length of input wire before gate
      labelOffsetX: 15, // X offset for variable label
      labelPad: 5,      // Space between label and input wire
      outputStub: 25,   // Length of output wire after gate
      wireJog: 18,      // Horizontal jog for wire routing
      marginY: 20,      // Vertical margin around circuit
      minFlat: 10,      // Minimum flat segment for gate drawing
      font: '30px monospace',
      errorFont: '30px monospace',
      color: '#000000'
    };

    input.addEventListener('input', () => {
      LogicCircuitRenderer.render(input.value, canvas, options);
    });

    LogicCircuitRenderer.render(input.value, canvas, options);
  </script>
</body>

</html>