upd

Author: GyverLibs

library.properties

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

src/SettingsBase.h

@@ -137,6 +137,7 @@ class SettingsBase {
                     Updater upd(p);
                     p.beginObj();
                     p.addCode(Code::type, Code::update);
+                    p.addUint(Code::rssi, constrain(2 * (WiFi.RSSI() + 100), 0, 100));
                     p.beginArr(Code::content);
                     if (_db && _dbupdates) {
                         while (_db->updatesAvailable()) {
@@ -214,6 +215,7 @@ class SettingsBase {
             p.beginObj();
             p.addCode(Code::type, Code::build);
             p.addUint(Code::ping, _updPeriod);
+            p.addUint(Code::rssi, constrain(2 * (WiFi.RSSI() + 100), 0, 100));
             if (_title.length()) p.addText(Code::title, _title);
             if (_passh) p.addBool(Code::granted, granted);
 #ifdef ATOMIC_FS_UPDATE

src/core/codes.h

@@ -21,6 +21,7 @@ enum class Code : uint8_t {
     gzip,
     used,
     total,
+    rssi,
 
     label,
     title,

src/web/settings.h

@@ -16,6 +16,7 @@ export const codes = [
     'gzip',
     'used',
     'total',
+    'rssi',
 
     'label',
     'title',

web/src/script/codes.js

@@ -6,6 +6,7 @@ import decodeBson from './bson';
 import { codes } from './codes';
 import unMap from './unmap';
 import { AsyncConfirm, AsyncPrompt } from './ui/dialog';
+import { changeRSSI, makeRSSI } from './ui/rssi';
 
 const timeout = 2000;
 const anim_s = '.11s';
@@ -29,6 +30,7 @@ export default class Settings {
     transOut = null;
     authF = false;
     granted = false;
+    firstBuild = true;
     auth = 0;
     ping_prd = 2000;
 
@@ -62,10 +64,10 @@ export default class Settings {
                                     ]
                                 },
                                 {
-                                    tag: 'sup',
-                                    class: 'error_sup',
-                                    text: 'Offline!',
-                                    var: 'offline',
+                                    tag: 'div',
+                                    class: 'rssi',
+                                    var: 'rssi',
+                                    html: makeRSSI(),
                                 }
                             ]
                         },
@@ -275,8 +277,7 @@ export default class Settings {
         const res = await this.send('load');
         this.parse(res);
         if (!res) {
-            this.$offline.style.display = 'inline';
-            this.offline = true;
+            this.setOffline(true);
             this.restartPing();
         }
     }
@@ -334,19 +335,18 @@ export default class Settings {
         this.ping_int = setInterval(async () => {
             const res = await this.send(this.offline ? 'load' : 'ping');
             this.parse(res);
-            if (res) {
-                this.offline = false;
-            } else {
-                this.offline = true;
-                this.authF = false;
-            }
-            this.$offline.style.display = this.offline ? 'inline' : 'none';
+            if (!res) this.authF = false;
+            this.setOffline(!res);
         }, this.ping_prd);
     }
     stopPing() {
         if (this.ping_int) clearInterval(this.ping_int);
         this.ping_int = null;
     }
+    setOffline(offline) {
+        this.offline = offline;
+        if (offline) changeRSSI(this.$rssi, 0);
+    }
 
     parse(packet) {
         if (!packet) return;
@@ -365,13 +365,14 @@ export default class Settings {
                         this.$auth.style.backgroundColor = this.granted ? 'var(--accent)' : 'var(--error)';
                         this.$ota.style.display = this.granted ? 'inline-block' : 'none';
                         this.$upload.style.display = this.granted ? 'inline-block' : 'none';
-                        if (!this.granted) popup('Unauthorized');
+                        if (!this.granted && this.firstBuild) popup('Unauthorized');
                     } else {
                         this.$auth.style.backgroundColor = 'var(--font_tint)';
                         this.granted = true;
                     }
                 }
                 if (packet.gzip) this.$upload_ota.accept = '.gz';
+                this.firstBuild = false;
                 break;
 
             case 'update':
@@ -384,6 +385,7 @@ export default class Settings {
                 this.renderFS(packet);
                 break;
         }
+        if (packet.rssi) changeRSSI(this.$rssi, packet.rssi);
     }
 
     renderUI(json) {
@@ -514,7 +516,7 @@ export default class Settings {
         this.restartPing();
     }
     makeUrl(cmd, params = {}) {
-        // const base_url = 'http://192.168.1.54';
+        // const base_url = 'http://192.168.1.95';
         const base_url = window.location.origin;
 
         if (this.auth) params.auth = this.auth.toString(16);

web/src/script/settings.js

@@ -0,0 +1,6 @@
+.rssi {
+    display: inline-block;
+    width: 21px;
+    /* transform: rotate(45deg); */
+    transform: translateY(-5px);
+}

web/src/script/ui/rssi.css

@@ -0,0 +1,26 @@
+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"/>
+    </svg>`;
+}
+
+export function changeRSSI(cont, rssi) {
+    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;
+        }
+    }
+}