change slider height to relative values

improve firefox UI appearance

reverted last commit

TODO.txt

@@ -5,8 +5,6 @@ fade transition
 simple slide transition
 add toolbar conf in settings
 additional color picker field
-change slider height to relative values
-improve firefox UI appearance
 implement all settings setters
 implement OTA lock / security
 implement button
@@ -14,11 +12,8 @@ implement HSB slider option
 implement ranges
 implement discrete range color setter
 implement discrete single color setter
-change color submit from get to post, rewrite with args, requires no buffer
-change color submit from rgb to hex
 do not reboot after settings set -> add reboot button
 svg icons in html
-(get rid of spiffs, use progmem for html??)
 
 BUGS
 static ip disables mdns

wled00/data/index.htm

@@ -9,11 +9,12 @@
 		
 		function Startup()
 		{
-			setInterval('GetColor()', 5000);
+			setInterval('GetArduinoIO()', 5000);
-			GetColor();
+			GetArduinoIO();
 		}
-		function GetColor()
+		function GetArduinoIO()
 		{
+			nocache = "&nocache=" + Math.random() * 1000000;
 			var request = new XMLHttpRequest();
 			request.onreadystatechange = function()
 			{
@@ -30,13 +31,23 @@
 				}
 			}
 			// send HTTP request
-			request.open("GET", "/get", true);
+			request.open("GET", "ajax_in/" + strA + strR + strG + strB + nocache, true);
 			request.send(null);
+			strA = "";
+			strR = "";
+			strG = "";
+			strB = "";
 		}
 		function GetCheck()
 		{
+			
+			strA = "&A=" + Ctrl_form.SA.value;
+			strR = "&R=" + Ctrl_form.SR.value;
+			strG = "&G=" + Ctrl_form.SG.value;
+			strB = "&B=" + Ctrl_form.SB.value;
+			
 			UpdateVals();
-			post('/set', {'COL': rgb2hex(Ctrl_form.SR.value, Ctrl_form.SG.value, Ctrl_form.SB.value)});
+			GetArduinoIO();
 		}
 		function rgb2hex(red, green, blue) {
 			var rgb = blue | (green << 8) | (red << 16);
@@ -53,26 +64,6 @@
 		{
 			window.open("/settings","_self");
 		}
-		function post(path, params, method) { //http://stackoverflow.com/questions/133925/
-			method = method || "post"; // Set method to post by default.
-			
-			var form = document.createElement("form");
-			form.setAttribute("method", method);
-			form.setAttribute("action", path);
-
-			for(var key in params) {
-				if(params.hasOwnProperty(key)) {
-					var hiddenField = document.createElement("input");
-					hiddenField.setAttribute("type", "hidden");
-					hiddenField.setAttribute("name", key);
-					hiddenField.setAttribute("value", params[key]);
-
-					form.appendChild(hiddenField);
-				 }
-			}
-			document.body.appendChild(form);
-			form.submit();
-		}
 	</script>
 	<style>
 		.ctrl_box {
@@ -87,6 +78,7 @@
 		}
 		.sliders {
 			width: 100%;
+			height: 12vh;
 		}
 		.sliderA {
 			margin-left: auto;
@@ -142,36 +134,34 @@
 		}
 		input[type=range]::-webkit-slider-runnable-track {
 		  width: 100%;
-		  height: 102px;
+		  height: 12vh;
 		  cursor: pointer;
 		  background: #DDDDDD;
 		}
 		input[type=range]::-webkit-slider-thumb {
-		  height: 78px;
+		  height: 10vh;
-		  width: 78px;
+		  width: 10vh;
 		  background: #ffffff;
 		  cursor: pointer;
 		  -webkit-appearance: none;
-		  margin-top: 12px;
+		  margin-top: 1vh;
-		}
-		input[type=range]:focus::-webkit-slider-runnable-track {
-		  background: #DDDDDD;
 		}
 		input[type=range]::-moz-range-track {
 		  width: 100%;
-		  height: 102px;
+		  height: 12vh;
 		  cursor: pointer;
 		  background: #DDDDDD;
 		}
 		input[type=range]::-moz-range-thumb {
-		  height: 78px;
+		  height: 10vh;
-		  width: 78px;
+		  width: 10vh;
 		  background: #ffffff;
 		  cursor: pointer;
+		  margin-top: 1vh;
 		}
 		input[type=range]::-ms-track {
 		  width: 100%;
-		  height: 102px;
+		  height: 12vh;
 		  cursor: pointer;
 		  background: transparent;
 		  border-color: transparent;
@@ -184,16 +174,10 @@
 		  background: #DDDDDD;
 		}
 		input[type=range]::-ms-thumb {
-		  width: 78px;
+		  width: 10vh;
 		  background: #ffffff;
 		  cursor: pointer;
-		  height: 78px;
+		  height: 10vh;
-		}
-		input[type=range]:focus::-ms-fill-lower {
-		  background: #DDDDDD;
-		}
-		input[type=range]:focus::-ms-fill-upper {
-		  background: #DDDDDD;
 		}
 	</style>
 <style id="holderjs-style" type="text/css"></style></head>

wled00/wled00.ino

@@ -36,6 +36,8 @@ boolean only_ap = false;
 int led_amount = 16;
 int nopwrled = 1;
 
+char HTTP_req[150];
+
 ESP8266WebServer server(80);
 ESP8266HTTPUpdateServer httpUpdater;
 
@@ -296,6 +298,48 @@ void XML_response_settings()
   server.send(200, "text/xml", resp);
 }
 
+char StrContains(char *str, char *sfind)
+{
+    char found = 0;
+    char index = 0;
+    char len;
+
+    len = strlen(str);
+    
+    if (strlen(sfind) > len) {
+        return 0;
+    }
+    while (index < len) {
+        if (str[index] == sfind[found]) {
+            found++;
+            if (strlen(sfind) == found) {
+                return index;
+            }
+        }
+        else {
+            found = 0;
+        }
+        index++;
+    }
+
+    return 0;
+}
+uint8_t getNumberAfterStringPos(char str[], char spos)
+{
+   String op;
+   boolean no_n = false;
+   int i = 0;
+   while (!no_n) {
+    if (str[spos + i + 1] > 47 && str[spos + i + 1] < 58)
+    {
+      op += str[spos + i + 1];
+    }
+    else {no_n = true;}
+    i++;
+   }
+   return op.toInt();
+}
+
 void handleSettingsSet()
 {
   if (server.hasArg("CSSID")) clientssid = server.arg("CSSID");
@@ -394,19 +438,41 @@ void handleSettingsSet()
   saveSettingsToEEPROM();
 }
 
-void handleSet()
+boolean handleSet(String req)
 {
-  if (server.hasArg("COL"))
+   Serial.println("handleSet:");
-  {
+   Serial.println(req);
-    String in = server.arg("COL");
+   req.toCharArray(HTTP_req, 150, 0);
-    // Get rid of '#' and convert it to integer
+   if (!StrContains(HTTP_req, "ajax_in")) {
-    int num = (int) strtol( &in[1], NULL, 16);
+        if (StrContains(HTTP_req, "get-settings"))
-    col[0] = num >> 16;
+        {
-    col[1] = num >> 8 & 0xFF;
+          XML_response_settings();
-    col[2] = num & 0xFF;
+          return true;
-  }
+        }
-  server.send(204);
+        return false;
-  setLeds();
+   }
+   int pos = 0;
+   pos = StrContains(HTTP_req, "A=");
+   if (pos > 0) {
+        bri = getNumberAfterStringPos(HTTP_req, pos);
+    }
+   pos = StrContains(HTTP_req, "R=");
+   if (pos > 0) {
+        col[0] = getNumberAfterStringPos(HTTP_req, pos);
+    }
+   pos = StrContains(HTTP_req, "G=");
+   if (pos > 0) {
+        col[1] = getNumberAfterStringPos(HTTP_req, pos);
+    }
+   pos = StrContains(HTTP_req, "B=");
+   if (pos > 0) {
+        col[2] = getNumberAfterStringPos(HTTP_req, pos);
+    }
+
+   Serial.println(col[0]);
+   XML_response();
+   setLeds();
+   return true;
 }
 
 //format bytes
@@ -622,26 +688,31 @@ void setup() {
     server.send(200, "text/plain", "Settings saved. Please wait for light to turn back on, then go to main page...");
     reset();
   });
-  server.on("/set", HTTP_POST, handleSet);
-  server.on("/get-settings", HTTP_GET, XML_response_settings);
   if (!ota_lock){
+    //load editor
     server.on("/edit", HTTP_GET, [](){
     if(!handleFileRead("/edit.htm")) server.send(404, "text/plain", "FileNotFound");
     });
+    //create file
     server.on("/edit", HTTP_PUT, handleFileCreate);
+    //delete file
     server.on("/edit", HTTP_DELETE, handleFileDelete);
+    //first callback is called after the request has ended with all parsed arguments
+    //second callback handles file uploads at that location
     server.on("/edit", HTTP_POST, [](){ server.send(200, "text/plain", ""); }, handleFileUpload);
+    //list directory
     server.on("/list", HTTP_GET, handleFileList);
+    //kill module
     server.on("/down", HTTP_GET, down);
+    //clear eeprom
     server.on("/cleareeprom", HTTP_GET, clearEEPROM);
+    //init ota page
     httpUpdater.setup(&server);
   }
-  //called when the url is not defined
+  //called when the url is not defined here, ajax-in; get-settings
   server.onNotFound([](){
-    if(server.uri().indexOf("get")<0){
+    if(!handleSet(server.uri())){
       server.send(404, "text/plain", "FileNotFound");
-    } else {
-      XML_response();
     }
   });