make webui looks better

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
     "C_Cpp.errorSquiggles": "enabled",
     "files.associations": {
+        "*.cps": "javascript",
         "string": "cpp",
         "optional": "cpp",
         "istream": "cpp",
@@ -11,6 +12,7 @@
         "tuple": "cpp",
         "type_traits": "cpp",
         "utility": "cpp",
-        "*.d": "cpp"
+        "*.d": "cpp",
+        "*.html": "cpp"
     }
 }

src/espmega_iot_core.cpp

@@ -2,6 +2,7 @@
 
 // OS Configuration
 // #define FASTBOOT
+#define ESPMEGA_REV "ESPMega PRO R3.3b"
 
 // Network Connectivity
 char HOSTNAME[15];
@@ -149,7 +150,6 @@ void setup()
   Serial.println("Jumping to User Code.");
   user_init();
   lcd_send_command("page dashboard");
-
 }
 
 void loop()
@@ -242,30 +242,50 @@ void eeprom_retrieve_init()
   strcat(INPUTS_TOPIC, "/input/00");
 }
 
-void ota_begin() {
+void ota_begin()
-    otaserver.on("/", HTTP_GET, []() {
+{
+  otaserver.on("/", HTTP_GET, []()
+               {
     otaserver.sendHeader("Connection", "close");
-    otaserver.send(200, "text/html", ota_upload_page);
+    String otabuffer = ota_part1+HOSTNAME+ota_part2+IP.toString()+ota_part3+ESPMEGA_REV+ota_part4+MQTT_SERVER.toString()+ota_part5+String(MQTT_BASE_TOPIC)+ota_part6;
-  });
+    if(standalone)
-  otaserver.on("/update", HTTP_POST, []() {
+    otabuffer+=String("No");
+    else
+    otabuffer+=String("Yes");
+    otabuffer+=ota_part7;
+    otaserver.send(200, "text/html", otabuffer); });
+  otaserver.on(
+      "/update", HTTP_POST, []()
+      {
     otaserver.sendHeader("Connection", "close");
     otaserver.send(200, "text/plain", (Update.hasError()) ? "FAIL" : "OK");
-    ESP.restart();
+    ESP.restart(); },
-  }, []() {
+      []()
+      {
         HTTPUpload &upload = otaserver.upload();
-    if (upload.status == UPLOAD_FILE_START) {
+        if (upload.status == UPLOAD_FILE_START)
+        {
           Serial.printf("Update: %s\n", upload.filename.c_str());
-      if (!Update.begin(UPDATE_SIZE_UNKNOWN)) {
+          if (!Update.begin(UPDATE_SIZE_UNKNOWN))
+          {
             Update.printError(Serial);
           }
-    } else if (upload.status == UPLOAD_FILE_WRITE) {
+        }
-      if (Update.write(upload.buf, upload.currentSize) != upload.currentSize) {
+        else if (upload.status == UPLOAD_FILE_WRITE)
+        {
+          if (Update.write(upload.buf, upload.currentSize) != upload.currentSize)
+          {
             Update.printError(Serial);
           }
-    } else if (upload.status == UPLOAD_FILE_END) {
+        }
-      if (Update.end(true)) {
+        else if (upload.status == UPLOAD_FILE_END)
+        {
+          if (Update.end(true))
+          {
             Serial.printf("Update Success: %u\nRebooting...\n", upload.totalSize);
-      } else {
+          }
+          else
+          {
             Update.printError(Serial);
           }
         }
@@ -993,24 +1013,30 @@ void eeprom_mqtt_port_retrieve()
   memcpy(&MQTT_PORT, port_arr, 2);
 }
 
-boolean pwm_get_state(int id) {
+boolean pwm_get_state(int id)
+{
   return pwm_states[id];
 }
 
-uint16_t pwm_get_value(int id) {
+uint16_t pwm_get_value(int id)
+{
   return pwm_values[id];
 }
 
-boolean input_get_state(int id) {
+boolean input_get_state(int id)
+{
   return virtual_interupt_state[id];
 }
 
-uint8_t ac_get_temperature() {
+uint8_t ac_get_temperature()
+{
   return ac_temperature;
 }
-uint8_t ac_get_mode() {
+uint8_t ac_get_mode()
+{
   return ac_mode;
 }
-uint8_t ac_get_fan_speed() {
+uint8_t ac_get_fan_speed()
+{
   return ac_fan_speed;
 }

src/espmega_iot_ota.cpp

@@ -1,56 +1,23 @@
 #include "espmega_iot_ota.hpp"
-/* Style */
-String ota_style =
-"<style>#file-input,input{width:100%;height:44px;border-radius:4px;margin:10px auto;font-size:15px}"
-"input{background:#f1f1f1;border:0;padding:0 15px}body{background:#3498db;font-family:sans-serif;font-size:14px;color:#777}"
-"#file-input{padding:0;border:1px solid #ddd;line-height:44px;text-align:left;display:block;cursor:pointer}"
-"#bar,#prgbar{background-color:#f1f1f1;border-radius:10px}#bar{background-color:#3498db;width:0%;height:10px}"
-"form{background:#fff;max-width:258px;margin:75px auto;padding:30px;border-radius:5px;text-align:center}"
-".btn{background:#3498db;color:#fff;cursor:pointer}</style>";
 
-/* Server Index Page */
+const String ota_part1 = {
-String ota_upload_page = 
+#include "ota_html/ota-part1.html"
-"<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
+};
-"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
+const String ota_part2 = {
-"<h1>ESPMega PRO</h1>"
+#include "ota_html/ota-part2.html"
-"<h3>Programming Tool</h3>"
+};
-"<input type='file' name='update' id='file' onchange='sub(this)' style=display:none>"
+const String ota_part3 = {
-"<label id='file-input' for='file'>   Choose file...</label>"
+#include "ota_html/ota-part3.html"
-"<input type='submit' class=btn value='Program'>"
+};
-"<br><br>"
+const String ota_part4 = {
-"<div id='prg'></div>"
+#include "ota_html/ota-part4.html"
-"<br><div id='prgbar'><div id='bar'></div></div><br></form>"
+};
-"<script>"
+const String ota_part5 = {
-"function sub(obj){"
+#include "ota_html/ota-part5.html"
-"var fileName = obj.value.split('\\\\');"
+};
-"document.getElementById('file-input').innerHTML = '   '+ fileName[fileName.length-1];"
+const String ota_part6 = {
-"};"
+#include "ota_html/ota-part6.html"
-"$('form').submit(function(e){"
+};
-"e.preventDefault();"
+const String ota_part7 = {
-"var form = $('#upload_form')[0];"
+#include "ota_html/ota-part7.html"
-"var data = new FormData(form);"
+};
-"$.ajax({"
-"url: '/update',"
-"type: 'POST',"
-"data: data,"
-"contentType: false,"
-"processData:false,"
-"xhr: function() {"
-"var xhr = new window.XMLHttpRequest();"
-"xhr.upload.addEventListener('progress', function(evt) {"
-"if (evt.lengthComputable) {"
-"var per = evt.loaded / evt.total;"
-"$('#prg').html('progress: ' + Math.round(per*100) + '%');"
-"$('#bar').css('width',Math.round(per*100) + '%');"
-"}"
-"}, false);"
-"return xhr;"
-"},"
-"success:function(d, s) {"
-"console.log('success!') "
-"},"
-"error: function (a, b, c) {"
-"}"
-"});"
-"});"
-"</script>" + ota_style;

src/espmega_iot_ota.hpp

@@ -1,4 +1,9 @@
 #pragma once
 #include <ESPMegaPRO.h>
-extern String ota_upload_page;
+extern const String ota_part1;
-extern String ota_style;
+extern const String ota_part2;
+extern const String ota_part3;
+extern const String ota_part4;
+extern const String ota_part5;
+extern const String ota_part6;
+extern const String ota_part7;

src/ota_html/ota-part1.html

@@ -0,0 +1,8 @@
+R"=====(<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
+  <h1>ESPMega PRO</h1>
+  <h3>Programming Tool</h3>
+
+  <p style="text-align: left">
+    Hostname
+    <span style="float: right">)====="

src/ota_html/ota-part2.html

@@ -0,0 +1,5 @@
+R"=====(</span>
+</p>
+<p style="text-align: left">
+  IP Address
+  <span style="float: right">)====="

src/ota_html/ota-part3.html

@@ -0,0 +1,5 @@
+R"=====(</span>
+</p>
+<p style="text-align: left">
+  Device
+  <span style="float: right">)====="

src/ota_html/ota-part4.html

@@ -0,0 +1,5 @@
+R"=====(</span>
+</p>
+<p style="text-align: left">
+  API Server
+  <span style="float: right">)====="

src/ota_html/ota-part5.html

@@ -0,0 +1,5 @@
+R"=====(</span>
+</p>
+<p style="text-align: left">
+  API Endpoint
+  <span style="float: right">)====="

src/ota_html/ota-part6.html

@@ -0,0 +1,5 @@
+R"=====(</span>
+</p>
+<p style="text-align: left">
+  Centrally Managed
+  <span style="float: right">)====="

src/ota_html/ota-part7.html

@@ -0,0 +1,120 @@
+R"=====(</span>
+</p>
+
+<input
+  type="file"
+  name="update"
+  id="file"
+  onchange="sub(this)"
+  style="display: none"
+/>
+<label id="file-input" for="file">Choose file...</label>
+<input type="submit" class="btn" value="Program" /><br /><br />
+<div id="prg"></div>
+<br />
+<div id="prgbar">
+  <div id="bar"></div>
+</div>
+<br />
+<b>SIWAT SYSTEM 2023</b>
+</form>
+<script>
+function sub(obj) {
+  var fileName = obj.value.split("\\");
+  document.getElementById("file-input").innerHTML =
+    "   " + fileName[fileName.length - 1];
+}
+$("form").submit(function (e) {
+  e.preventDefault();
+  var form = $("#upload_form")[0];
+  var data = new FormData(form);
+  $.ajax({
+    url: "/update",
+    type: "POST",
+    data: data,
+    contentType: false,
+    processData: false,
+    xhr: function () {
+      var xhr = new window.XMLHttpRequest();
+      xhr.upload.addEventListener(
+        "progress",
+        function (evt) {
+          if (evt.lengthComputable) {
+            var per = evt.loaded / evt.total;
+            $("#prg").html("progress: " + Math.round(per * 100) + "%");
+            $("#bar").css("width", Math.round(per * 100) + "%");
+          }
+        },
+        false
+      );
+      return xhr;
+    },
+    success: function (d, s) {
+      console.log("success!");
+    },
+    error: function (a, b, c) {},
+  });
+});
+</script>
+<style>
+#file-input,
+input {
+  width: 100%;
+  height: 44px;
+  border-radius: 4px;
+  margin: 10px auto;
+  font-size: 15px;
+}
+
+input {
+  background: #f1f1f1;
+  border: 0;
+  padding: 0 15px;
+}
+
+body {
+  background-image: url("https://siwatinc.com/wp-content/uploads/2023/07/lockscreen.jpg");
+  background-size: cover;
+  font-family: sans-serif;
+  font-size: 14px;
+  color: #777;
+}
+
+#file-input {
+  background-color: #CCCCCC;
+  color: #5E5E5E;
+  padding: 0;
+  border: 1px solid #ddd;
+  line-height: 44px;
+  text-align: center;
+  display: block;
+  cursor: pointer;
+}
+
+#bar,
+#prgbar {
+  background-color: #D9D9D9;
+  border-radius: 10px;
+}
+
+#bar {
+  background-color: #29CD1F;
+  width: 0%;
+  height: 10px;
+}
+
+form {
+  background: rgba(255,255,255,0.95);
+  max-width: 258px;
+  margin: 75px auto;
+  padding: 30px;
+  border-radius: 15px;
+  text-align: center;
+}
+
+.btn {
+  background: #CA3D3D;
+  color: #fff;
+  cursor: pointer;
+}
+</style>)====="