upd

Author: GyverLibs

library.properties

@@ -1,5 +1,5 @@
 name=Settings
-version=1.0.10
+version=1.0.11
 author=AlexGyver <[email protected]>
 maintainer=AlexGyver <[email protected]>
 sentence=Simple UI webface builder for esp8266/esp32

src/web/settings.h

@@ -1,6 +1,6 @@
 {
   "name": "settings",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "index.js",
   "scripts": {
     "build": "webpack --config ./webpack.single.js & webpack --config ./webpack.index.js",

web/package.json

@@ -107,7 +107,14 @@ export default function decodeBson(b, codes = []) {
                 for (let j = 0; j < 4; j++) {
                     v |= b[++i] << (j * 8);
                 }
-                s += ieee32ToFloat(v).toFixed(data);
+                let f = ieee32ToFloat(v);
+                if (isNaN(f)) {
+                    s += '"NaN"';
+                } else if (!isFinite(f)) {
+                    s += '"Infinity"';
+                } else {
+                    s += f.toFixed(data);
+                }
                 s += ',';
             } break;
 

web/src/script/bson.js

@@ -516,7 +516,7 @@ export default class Settings {
         this.restartPing();
     }
     makeUrl(cmd, params = {}) {
-        // const base_url = 'http://192.168.1.95';
+        // const base_url = 'http://192.168.1.54';
         const base_url = window.location.origin;
 
         if (this.auth) params.auth = this.auth.toString(16);

web/src/script/settings.js

@@ -2,5 +2,6 @@
     display: inline-block;
     width: 21px;
     /* transform: rotate(45deg); */
-    transform: translateY(-5px);
+    /* transform: translateY(-5px); */
+    transform: translateX(-2px) translateY(-10px) rotate(45deg);
 }

web/src/script/ui/rssi.css

@@ -1,26 +1,30 @@
 import './rssi.css';
 
 export function makeRSSI() {
-    return `<svg viewBox="0 0 365.9 365.9" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-        <path name="3" d="M361 112a247 247 0 0 0-356 0 18 18 0 0 0 27 26 211 211 0 0 1 302 0 18 18 0 0 0 27-26z" style="fill:var(--font);fill-opacity:1"/>
-        <path name="2" d="M183 107c-51 0-100 22-134 60a18 18 0 0 0 28 24 143 143 0 0 1 212 0 18 18 0 0 0 28-24c-34-38-83-60-134-60z" style="fill:var(--font);fill-opacity:1"/>
-        <path name="1" d="M183 176c-36 0-69 17-90 46a18 18 0 0 0 30 22 74 74 0 0 1 120 0 18 18 0 0 0 30-22c-21-29-54-46-90-46z" style="fill:var(--font);fill-opacity:1"/>
-        <circle name="0" cx="182.9" cy="286.7" r="41.5" style="fill:var(--font);fill-opacity:1"/>
-        <path name="x" d="M273 127a19 19 0 0 0-27-27l-63 63-63-63a19 19 0 0 0-28 27l64 64-64 63a19 19 0 0 0 28 27l63-63 63 63a19 19 0 0 0 27-27l-63-63z" style="fill:var(--error);fill-opacity:0"/>
+    return `<svg xml:space="preserve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 366.5 256">
+        <path name="3" d="M361 91A247 247 0 0 0 5 91a19 19 0 0 0 27 26 211 211 0 0 1 302 0 19 19 0 0 0 27-26z" style="fill:var(--font)"/>
+        <path name="2" d="M183 86c-51 0-100 22-134 60a18 18 0 0 0 28 24 143 143 0 0 1 212 0 18 18 0 0 0 28-24c-34-38-83-60-134-60z" style="fill:var(--font)"/>
+        <path name="1" d="M183 155c-36 0-69 17-90 46a19 19 0 0 0 30 22 74 74 0 0 1 120 0 19 19 0 0 0 30-22c-21-29-54-46-90-46z" style="fill:var(--font)"/>
+        <path name="x" d="M292 147a19 19 0 0 0 0-38h-89V20a19 19 0 0 0-39-1v91l-90-1a19 19 0 0 0 1 39h89v89a19 19 0 0 0 38 0v-89z" style="fill:var(--error);fill-opacity:0"/>
     </svg>`;
 }
 
 export function changeRSSI(cont, rssi) {
+    let apply = (path, state) => {
+        path.style.fillOpacity = state ? 0.8 : 0.2;
+    }
+    let error = (path, rssi) => {
+        path.style.fillOpacity = rssi ? 0 : 1.0;
+    }
+
     cont.title = rssi + '%';
     let svg = cont.firstElementChild;
-    const min = 0.2, max = 0.7;
     for (let p of svg.children) {
         switch (p.getAttribute('name')) {
-            case '3': p.style.fillOpacity = rssi > 75 ? max : min; break;
-            case '2': p.style.fillOpacity = rssi > 50 ? max : min; break;
-            case '1': p.style.fillOpacity = rssi > 25 ? max : min; break;
-            case '0': p.style.fillOpacity = rssi > 0 ? max : min; break;
-            case 'x': p.style.fillOpacity = rssi == 0 ? 1 : 0; break;
+            case '3': apply(p, rssi > 66); break;
+            case '2': apply(p, rssi > 33); break;
+            case '1': apply(p, rssi > 0); break;
+            case 'x': error(p, rssi); break;
         }
     }
 }

web/src/script/ui/rssi.js

@@ -42,7 +42,7 @@ export default class SliderWidget extends WidgetBase {
     }
 
     update(value) {
-        this.$slider.value = (value ?? 0) + '';
+        this.$slider.value = Number(value ?? 0) + '';
         this.move();
     }
 }