Mobile UI by StormPie added

wled00/htmls01.h

@@ -139,6 +139,13 @@ const char PAGE_settings_ui1[] PROGMEM = R"=====(
 <div class="helpB"><button type="button" onclick="H()">?</button></div>
 <button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
 <h2>Web Setup</h2>
+User Interface Mode:
+<select name="UI">
+<option value="0" selected>Auto</option>
+<option value="1">Classic</option>
+<option value="2">Mobile</option>
+</select><br><br>
+<i>The following options are for the classic UI!</i><br>
 Server description: <input name="DS" maxlength="32"><br>
 Use HSB sliders instead of RGB by default: <input type="checkbox" name="MD"><br>
 Color Theme:
@@ -338,10 +345,12 @@ HTTP traffic is unencrypted. An attacker in the same network can intercept form
 <button type="button" onclick="U()">Manual OTA Update</button><br>
 Enable ArduinoOTA: <input type="checkbox" name="AO"><br>
 <h3>About</h3>
-<a href="https://github.com/Aircoookie/WLED">WLED</a> version 0.6.5<br>
+<a href="https://github.com/Aircoookie/WLED">WLED</a> version 0.6.5<br><br>
+<b>Contributors:</b><br>
+StormPie <i>(Mobile HTML UI)</i><br><br>
 (c) 2016-2018 Christian Schwinne <br>
 <i>Licensed under the MIT license</i><br><br>
-<i>Uses libraries:</i><br>
+<b>Uses libraries:</b><br>
 <i>ESP8266/ESP32 Arduino Core</i><br>
 <i>(ESP32) <a href="https://github.com/bbx10/WebServer_tng">WebServer_tng</a> by bbx10</i><br>
 <i><a href="https://github.com/kitesurfer1404/WS2812FX">WS2812FX</a> by kitesurfer1404 (modified)</i><br>

wled00/wled00.ino

@@ -33,7 +33,7 @@
 #include "WS2812FX.h"
 
 //version in format yymmddb (b = daily build)
-#define VERSION 1805181
+#define VERSION 1805222
 const String versionString = "0.6.5";
 
 //AP and OTA default passwords (change them!)
@@ -56,6 +56,7 @@ byte auxTriggeredState = 0; //0: input 1: high 2: low
 //Default CONFIG
 String serverDescription = "WLED Light";
 byte currentTheme = 0;
+byte uiConfiguration = 0; //0: auto 1: classic 2: mobile
 String clientSSID = "Your_Network";
 String clientPass = "";
 String cmDNS = "led";

wled00/wled01_eeprom.ino

@@ -212,6 +212,7 @@ void saveSettingsToEEPROM()
 
   EEPROM.write(2200,!receiveDirect);
   EEPROM.write(2201,enableRealtimeUI);
+  EEPROM.write(2202,uiConfiguration);
   
   EEPROM.commit();
 }
@@ -422,6 +423,7 @@ void loadSettingsFromEEPROM(bool first)
   }
   receiveDirect = !EEPROM.read(2200);
   enableRealtimeUI = EEPROM.read(2201);
+  uiConfiguration = EEPROM.read(2202);
   
   bootPreset = EEPROM.read(389);
   wifiLock = EEPROM.read(393);

wled00/wled02_xml.ino

@@ -170,6 +170,7 @@ String getSettings(byte subPage)
 
   if (subPage == 3)
   { 
+    resp += ds + "UI" + si + String(uiConfiguration) + ";";
     resp += ds + "DS" + v + "\"" + serverDescription + "\";";
     resp += ds + "MD" + c + useHSBDefault + ";";
     resp += ds + "TH" + si + String(currentTheme) + ";";

wled00/wled03_set.ino

@@ -240,6 +240,7 @@ void handleSettingsSet(byte subPage)
   //UI
   if (subPage == 3)
   {
+    if (server.hasArg("UI")) uiConfiguration = server.arg("UI").toInt();
     if (server.hasArg("DS")) serverDescription = server.arg("DS");
     useHSBDefault = server.hasArg("MD");
     useHSB = useHSBDefault;

wled00/wled05_init.ino

@@ -231,6 +231,9 @@ void wledInit()
       server.send(404, "text/plain", "Not Found");
     }
   });
+  const char * headerkeys[] = {"User-Agent"};
+  server.collectHeaders(headerkeys,sizeof(char*));
+  
   if (!initLedsLast) strip.service();
   //init Alexa hue emulation
   if (alexaEnabled) alexaInit();
@@ -399,15 +402,27 @@ void serveIndexOrWelcome()
 
 void serveIndex()
 {
+  bool serveMobile = false;
+  if (uiConfiguration == 0) serveMobile = checkClientIsMobile(server.header("User-Agent"));
+  else if (uiConfiguration == 2) serveMobile = true;
+
   if (!arlsTimeout || enableRealtimeUI) //do not serve while receiving realtime
   {
-    server.setContentLength(strlen_P(PAGE_index0) + cssColorString.length() + strlen_P(PAGE_index1) + strlen_P(PAGE_index2) + strlen_P(PAGE_index3));
+    if (serveMobile)
-    server.send(200, "text/html", "");
+    {
-    server.sendContent_P(PAGE_index0);
+      server.setContentLength(strlen_P(PAGE_indexM));
-    server.sendContent(cssColorString); 
+      server.send(200, "text/html", "");
-    server.sendContent_P(PAGE_index1); 
+      server.sendContent_P(PAGE_indexM);
-    server.sendContent_P(PAGE_index2);
+    } else
-    server.sendContent_P(PAGE_index3);
+    {
+      server.setContentLength(strlen_P(PAGE_index0) + cssColorString.length() + strlen_P(PAGE_index1) + strlen_P(PAGE_index2) + strlen_P(PAGE_index3));
+      server.send(200, "text/html", "");
+      server.sendContent_P(PAGE_index0);
+      server.sendContent(cssColorString); 
+      server.sendContent_P(PAGE_index1); 
+      server.sendContent_P(PAGE_index2);
+      server.sendContent_P(PAGE_index3);
+    }
   } else {
     server.send(200, "text/plain", "The WLED UI is not available while receiving real-time data.");
   }
@@ -529,5 +544,14 @@ String getBuildInfo()
   return info;
 }
 
+bool checkClientIsMobile(String useragent)
+{
+  //to save complexity this function is not comprehensive
+  if (useragent.indexOf("Android") >= 0) return true;
+  if (useragent.indexOf("iPhone") >= 0) return true;
+  if (useragent.indexOf("iPod") >= 0) return true;
+  return false;
+}
+