add start/stop buttons to examples

tilk · Aug 25, 2020 · f0784b6 · f0784b6
1 parent 4c9fce0
commit f0784b6
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/examples/template.html b/examples/template.html
@@ -5,6 +5,10 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
+    <div>
+        <button name="start" type="button">▶️</button>
+        <button name="stop" type="button">⏹️</button>
+    </div>
     <div id="paper">
     </div>
     <div>
@@ -21,6 +25,8 @@
     </div>
     <script>
       var circuit, monitor, monitorview, iopanel, paper;
+      var start = $('button[name=start]');
+      var stop = $('button[name=stop]');
       var papers = {};
       const fixed = function (fixed) {
         Object.values(papers).forEach(p => p.fixed(fixed));
@@ -38,13 +44,24 @@
             console.info('You can now access the doubly clicked gate as digitaljsCell in your WebBrowser console!');
           });
         });
+        circuit.on('changeRunning', () => {
+          if (circuit.running) {
+            start.prop('disabled', true);
+            stop.prop('disabled', false);
+          } else {
+            start.prop('disabled', false);
+            stop.prop('disabled', true);
+          }
+        });
         paper = circuit.displayOn($('#paper'));
         fixed($('input[name=fixed]').prop('checked'));
         circuit.on('remove:paper', function(paper) {
           delete papers[paper.cid];
         });
         circuit.start();
       }
+      start.on('click', (e) => { circuit.start(); });
+      stop.on('click', (e) => { circuit.stop(); });
       $('button[name=json]').on('click', (e) => {
         monitorview.shutdown();
         iopanel.shutdown();