From 5c0dea0ef8573faafb6ad157cb37ff9d26349ac1 Mon Sep 17 00:00:00 2001
From: Sean Tracey <seanmtracey@gmail.com>
Date: Sun, 10 Jun 2018 18:47:36 +0100
Subject: [PATCH] Add reset button to bitio image node.

---
 index.html   | 34 +++++++++++++++++++++++++++++++++-
 package.json |  2 +-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 86ae6ff..e80816c 100644
--- a/index.html
+++ b/index.html
@@ -92,6 +92,15 @@
 
 <!--bitio-image node for creating a custom image to display on the Microbit-->
 <script type="text/javascript">
+
+    function resetLEDs(){
+
+        Array.from( document.querySelectorAll('.microbit-image input[type="checkbox"]')).forEach( function( checkboxElement, idx ) {
+            checkboxElement.checked = false;
+        } );
+
+    }
+
     RED.nodes.registerType('bitio-image',{
         category: 'function',
         color: '#34b6ff',
@@ -120,7 +129,7 @@
                 var node = this;
 
                 $.ajax({
-                    url: "inject/"+this.id,
+                    url: "inject/" + this.id,
                     type:"POST",
                     success: function(resp) {
                         console.log('Injected. Resp:', resp);
@@ -142,6 +151,7 @@
             }
         },
         oneditprepare : function(){
+
             console.log(this);
             const LEDs = Array.from( document.querySelectorAll('.microbit-image input[type="checkbox"]'));
 
@@ -154,6 +164,11 @@
 
             });
 
+            Array.from(document.querySelectorAll('.bitio-image-reset')).forEach(function(el){
+                el.removeEventListener('click', resetLEDs);
+                el.addEventListener('click', resetLEDs);
+            });
+
         },
         oneditsave: function(){
 
@@ -183,6 +198,7 @@
             display: flex;
             flex-wrap: wrap;
             padding: 2em;
+            justify-content: center;
         }
 
         .microbit-image .led-wrapper{
@@ -215,6 +231,19 @@
             flex-basis: 100%;
         }
 
+        button.bitio-image-reset{
+            padding: 1em 2em;
+            background: #34b6ff;
+            border: 0 solid;
+            color: white;
+            margin-left: auto;
+            position: relative;
+            margin-right: auto;
+            font-weight: 800;
+            display: flex;
+            border-radius: 2px;
+        }
+
     </style>
 
     <div class="form-row">
@@ -278,8 +307,11 @@
 
         </div>
 
+        <button class="bitio-image-reset">Reset LEDs</button>
+
     </div>
 
+
 </script>
 
 <script type="text/x-red" data-help-name="bitio-image">
diff --git a/package.json b/package.json
index 2bcc14b..35a0b49 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "node-red-contrib-bitio-wrapper",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "",
   "main": "index.js",
   "scripts": {