From f0784b61c4486d0b07adc1acc5a017c8a3fa4913 Mon Sep 17 00:00:00 2001
From: ialokim <ialokim@mailbox.org>
Date: Tue, 25 Aug 2020 12:53:42 +0200
Subject: [PATCH] add start/stop buttons to examples

---
 examples/template.html | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
diff --git a/examples/template.html b/examples/template.html
index 79c3e6f..e52e913 100644
--- 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,6 +44,15 @@
             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) {
@@ -45,6 +60,8 @@
         });
         circuit.start();
       }
+      start.on('click', (e) => { circuit.start(); });
+      stop.on('click', (e) => { circuit.stop(); });
       $('button[name=json]').on('click', (e) => {
         monitorview.shutdown();
         iopanel.shutdown();
