fix motor numbers and parameter order

README.md

@@ -1,7 +1,7 @@
 # Esp8266-Laser
 Wifi Host for the Arduino-Laser-Spirograph
 
-#usage:	
+HTTP GET endpoints:  
   /motor/{motorNr}/{value}  
   /laser/{value}  
   /ssid/{ssidname}  
@@ -12,7 +12,7 @@ Wifi Host for the Arduino-Laser-Spirograph
   /readwifi -> returns wifi settings  
   /readvalues -> return laser and motor values (all 0 at startup, ram only)  
 
-#install
+# Install
 - install arduino ide (1.8.5)  
 
 - follow this instruction
@@ -32,5 +32,13 @@ You may also need to:
 - get and install driver for nodemcu
   https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers
 
-
+# Development  
-  
+Frontend
+--------
+Frontend development requires NodeJS / NPM.  
+  
+Run development server:  
+npm run dev  
+  
+Build distribution source:  
+npm run build

data/index.html

@@ -96,11 +96,11 @@
 			<label>L</label>
 			<input type="range" class="laser slider" value="0" max="128">
 			<label>M1</label>
-			<input type="range" class="motor slider" value="0" max="128" data-motor-nr="0">
-			<label>M2</label>
 			<input type="range" class="motor slider" value="0" max="128" data-motor-nr="1">
-			<label>M3</label>
+			<label>M2</label>
 			<input type="range" class="motor slider" value="0" max="128" data-motor-nr="2">
+			<label>M3</label>
+			<input type="range" class="motor slider" value="0" max="128" data-motor-nr="3">
 		</div>	
 		<div id="prototypControls">		
             <text class="sectionDesc">last uri:</text>

data/scripts.js

@@ -99,15 +99,13 @@ var $ = function(selector){
                 let update = function(endpoint, method, props) {
                     Sui.http.ajax({
                         method: method,
-                        endpoint: node.api[endpoint] + props.join('/'),
+                        endpoint: node.api[endpoint] + (props ? props.join('/') : ''),
                         cache: false
                     }, actuator.onResponse || null);
                 };
                 Sui.select(actuator.selector).forEach( (domEl) =>{
                     let handle = function(event) {
-                        data = [this.value];
+                        update.call(this, actuator.api, 'GET', actuator.data ? actuator.data.call(this) : undefined );
-                        actuator.data ? data.push(actuator.data.call(this)) : undefined;
-                        update.call(this, actuator.api, 'GET', data);
                     }
                     $(domEl).on(actuator.event, handle) 
                 });
@@ -167,7 +165,7 @@ var $ = function(selector){
         selector: '.motor.slider',
         event: 'change',
         data: function(){
-            return this.getAttribute('data-motor-nr');
+            return [this.getAttribute('data-motor-nr'), this.value];
         },
         onResponse: debugResponse
     }, {
@@ -175,6 +173,9 @@ var $ = function(selector){
         method: 'GET',
         selector: '.laser.slider',
         event: 'change',
+        data: function(){
+            return [this.value];
+        },
         onResponse: debugResponse
     }].forEach(Sui.link({
         api: {

frontend/pages/index.html

@@ -96,11 +96,11 @@
 			<label>L</label>
 			<input type="range" class="laser slider" value="0" max="128">
 			<label>M1</label>
-			<input type="range" class="motor slider" value="0" max="128" data-motor-nr="0">
-			<label>M2</label>
 			<input type="range" class="motor slider" value="0" max="128" data-motor-nr="1">
-			<label>M3</label>
+			<label>M2</label>
 			<input type="range" class="motor slider" value="0" max="128" data-motor-nr="2">
+			<label>M3</label>
+			<input type="range" class="motor slider" value="0" max="128" data-motor-nr="3">
 		</div>	
 		<div id="prototypControls">		
             <text class="sectionDesc">last uri:</text>

frontend/scripts/sui.js

@@ -12,15 +12,13 @@ var Sui = {
                 let update = function(endpoint, method, props) {
                     Sui.http.ajax({
                         method: method,
-                        endpoint: node.api[endpoint] + props.join('/'),
+                        endpoint: node.api[endpoint] + (props ? props.join('/') : ''),
                         cache: false
                     }, actuator.onResponse || null);
                 };
                 Sui.select(actuator.selector).forEach( (domEl) =>{
                     let handle = function(event) {
-                        data = [this.value];
+                        update.call(this, actuator.api, 'GET', actuator.data ? actuator.data.call(this) : undefined );
-                        actuator.data ? data.push(actuator.data.call(this)) : undefined;
-                        update.call(this, actuator.api, 'GET', data);
                     }
                     $(domEl).on(actuator.event, handle) 
                 });

frontend/scripts/zMain.js

@@ -8,7 +8,7 @@ Sui.ready(() => {
         selector: '.motor.slider',
         event: 'change',
         data: function(){
-            return this.getAttribute('data-motor-nr');
+            return [this.getAttribute('data-motor-nr'), this.value];
         },
         onResponse: debugResponse
     }, {
@@ -16,6 +16,9 @@ Sui.ready(() => {
         method: 'GET',
         selector: '.laser.slider',
         event: 'change',
+        data: function(){
+            return [this.value];
+        },
         onResponse: debugResponse
     }].forEach(Sui.link({
         api: {