basic config manager

cgmckeever · Jun 7, 2022 · fc4a9d0 · fc4a9d0
1 parent 6856f94
commit fc4a9d0
Show file tree

Hide file tree

Showing 8 changed files with 401 additions and 2 deletions.
diff --git a/esp-alexa-relay/relay-a/v3/main/main.ino b/esp-alexa-relay/relay-a/v3/main/main.ino
@@ -31,7 +31,7 @@ const byte relOFF[] = {0xA0, 0x01, 0x00, 0xA1};
 template<typename T>
 void debug(T &msg, bool newline = false) {
   DEBUG_MODE = true;
-  Serial.begin(112500);
+  Serial.begin(115200);
   DebugPrint(msg);
   if (newline) DebugPrintln(F(""));
   Serial.flush();
@@ -42,7 +42,7 @@ void debug(T &msg, bool newline = false) {
 //
 void configSetup() {
   DEBUG_MODE = true;
-  Serial.begin(112500);
+  Serial.begin(115200);
 
   // randomSeed(*(volatile uint32_t *)0x3FF20E44);
   // String sApName = "ESPRELAY-" + String(random(111, 999));

diff --git a/esp-rf/cc1101/multistation/v1/data/index.html b/esp-rf/cc1101/multistation/v1/data/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="stylesheet" href="styles.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>ConfigManager</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1 style="text-align: center;">Wifi Details</h1>
+            <form method="post" action="/">
+                <div class="field-group">
+                    <label>SSID</label>
+                    <input name="ssid" type="text" size="32">
+                </div>
+                <div class="field-group">
+                    <label>Password</label>
+                    <input name="password" type="text" size="64">
+                </div>
+                <div class="button-container">
+                    <button type="submit">Save</button>
+                </div>
+            </form>
+        </div>
+    </body>
+</html>
diff --git a/esp-rf/cc1101/multistation/v1/data/main.js b/esp-rf/cc1101/multistation/v1/data/main.js
@@ -0,0 +1,89 @@
+$( document ).ready(function() {
+
+  // get the config store
+  $.ajax({
+         url: '/settings',
+         success: function(data) {
+           $.each(data, function(key, value, data) {
+             var selector = '[name="' + key + '"]';
+             var target = $(selector);
+             if (target) {
+              console.log(selector);
+               if ( target.is("input") ) {
+                target.val(value);
+               } else {
+                if (key == "isTriggered") {
+                  if (value) {
+                    value = "On";
+                    var button = $('button[value="on"]')
+                  } else {
+                    value = "Off"
+                    var button = $('button[value="off"]')
+                  }
+                  button.css("color", "grey");
+                }
+                target.html(value);
+               }
+             }
+           });
+         }
+  });
+
+  var validationSettings = {
+    rules: {
+      deviceName: {
+        required: true
+      },
+      inchingDelay: {
+        required: true
+      },
+      ledPin: {
+        required: true
+      }
+    }
+  };
+
+  $.fn.serializeObject = function() {
+    var o = {};
+    var a = this.serializeArray();
+    $.each(a, function() {
+      var input = $("[name='" + this.name + "']");
+      var value = this.value;
+      var dataType = input[0].getAttribute("data-type");
+      if (dataType == "number") value = parseFloat(value);
+
+      if (o[this.name]) {
+        if (!o[this.name].push) {
+          o[this.name] = [o[this.name]];
+        }
+        o[this.name].push(value || '');
+      } else {
+        o[this.name] = value || '';
+      }
+    });
+    return o;
+  };
+
+  var settingForm = '[name="settingsForm"]';
+  $(settingForm).validate(validationSettings);
+  $(settingForm).on('submit', function(e) {
+    document.getElementById("status").innerHTML = ""
+    if($(this).valid()) {
+      e.preventDefault();
+      var formData = $(this).serializeObject();
+
+      $.ajax({
+             url: '/settings',
+             type: 'PUT',
+             data: JSON.stringify(formData),
+             contentType: 'application/json',
+             success: function(data) {
+               console.log(formData);
+               document.getElementById("status").innerHTML = "Settings Updated"
+             }
+      });
+
+      return false;
+    }
+  });
+});  
diff --git a/esp-rf/cc1101/multistation/v1/data/relay.html b/esp-rf/cc1101/multistation/v1/data/relay.html
@@ -0,0 +1,22 @@
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
+        <script src="main.js"></script>
+        <title>ESP8266 Relay</title>
+    </head>
+    <body bgcolor="#1F1F1F" >
+        <div style='text-align:center; height:96%; border:10px groove blue; border-radius: 5px;'>
+            <h1 style=color:#00CCCC;font-weight:bold; name="relayName">ESP Relay</h1>
+            <br><br><br><br>
+
+            <form action="?state">
+                <button name="state" value="on" style="color:yellow; background-color:black; font-size:130%; width:80px; margin-right:20px;" onclick='this.form.submit();'>ON</button>
+                <button name="state" value="off" style="color:yellow; background-color:black; font-size:130%; width:80px; margin-left:20px;" onclick='this.form.submit();'>OFF</button>
+            </form>
+            <br><br><br><br>
+            <font size=+2><span style=color:#FFFDD2;>Relay State:</span>&nbsp;<i><span style=color:#FF0E0E name="isTriggered">---</span>
+        </div>
+    </body>
+</html>
diff --git a/esp-rf/cc1101/multistation/v1/data/reset.html b/esp-rf/cc1101/multistation/v1/data/reset.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="stylesheet" href="styles.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Reset</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1 style="text-align: center;">Reset</h1>
+        </div>
+    </body>
+</html>
diff --git a/esp-rf/cc1101/multistation/v1/data/settings.html b/esp-rf/cc1101/multistation/v1/data/settings.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
+    <script src="main.js"></script>
+    <title>ConfigManager</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1 style="text-align: center;">Settings</h1>
+      <form method="post" action="/settings" name="settingsForm">
+        <div class="field-group">
+          <label>Device Name (Discovered by Alexa)</label>
+          <input name="deviceName" type="text" size="32" data-type="text">
+        </div>
+        <div class="field-group">
+          <label>Inching Delay (milliseconds)</label>
+          <input name="inchingDelay" type="text" size="5" data-type="number">
+        </div>
+        <div class="field-group">
+          <label>Device LED Pin Number</label>
+          <input name="ledPin" type="text" size="5" data-type="number">
+        </div>
+        <div class="button-container">
+          <h2 style="" id="status"></h2>
+          <button type="submit">Save</button>
+        </div>
+      </form>
+    </div>
+  </body>
+</html>
diff --git a/esp-rf/cc1101/multistation/v1/data/styles.css b/esp-rf/cc1101/multistation/v1/data/styles.css
@@ -0,0 +1,90 @@
+body {
+    color: #434343;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 14px;
+    line-height: 1.42857142857143;
+    padding: 20px;
+}
+.container {
+    margin: 0 auto;
+    max-width: 400px;
+}
+form .error {
+    color: #8A1F11 !important;
+    border-color: #8A1F11;
+}
+label.error {
+    text-transform: none
+}
+p.error {
+    margin-bottom: 10px
+}
+p.inline-errors, p.error {
+    background: none
+      border-color: none
+    border: none
+    clear: both
+    font-size: 12px
+}
+form .field-group {
+    box-sizing: border-box;
+    clear: both;
+    padding: 4px 0;
+    position: relative;
+    margin: 1px 0;
+    width: 100%;
+}
+form .field-group > label {
+    color: #757575;
+    display: block;
+    margin: 0 0 5px 0;
+    padding: 5px 0 0;
+    position: relative;
+    word-wrap: break-word;
+}
+input[type=text] {
+    background: #fff;
+    border: 1px solid #d0d0d0;
+    border-radius: 2px;
+    box-sizing: border-box;
+    color: #434343;
+    font-family: inherit;
+    font-size: inherit;
+    height: 2.14285714em;
+    line-height: 1.4285714285714;
+    padding: 4px 5px;
+    margin: 0;
+    width: 100%;
+}
+input[type=text]:focus {
+    border-color: #4C669F;
+    outline: 0;
+}
+.button-container {
+    box-sizing: border-box;
+    clear: both;
+    margin: 1px 0 0;
+    padding: 4px 0;
+    position: relative;
+    width: 100%;
+}
+button[type=submit] {
+    box-sizing: border-box;
+    background: #f5f5f5;
+    border: 1px solid #bdbdbd;
+    border-radius: 2px;
+    color: #434343;
+    cursor: pointer;
+    display: inline-block;
+    font-family: inherit;
+    font-size: 14px;
+    font-variant: normal;
+    font-weight: 400;
+    height: 2.14285714em;
+    line-height: 1.42857143;
+    margin: 0;
+    padding: 4px 10px;
+    text-decoration: none;
+    vertical-align: baseline;
+    white-space: nowrap;
+}