Merge pull request #4 from seanmtracey/reset-btn

Add reset button to bitio image node.
seanmtracey · Jun 10, 2018 · 10183cf · 10183cf
2 parents d2925a5 + 5c0dea0
commit 10183cf
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git 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
@@ -1,6 +1,6 @@
 {
   "name": "node-red-contrib-bitio-wrapper",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "",
   "main": "index.js",
   "scripts": {