frugal-iot-client 1.3.11

package/frugaliot.css

@@ -0,0 +1,271 @@
+/* NOTES
+ * Styling in webcomponents is tricky - to style something in the shadow-root i.e. built by "render"
+ * style the outside as e.g. class: "outer mqtt-xxx" and stylesheet has .mqtt-xxx .outer
+ * style children intended to be shown via a slot as e.g class: foo and stylesheet has mqtt-xxx .foo
+ * the slotted children don't see the html they are inside, and the shadow root doesnt know its inside a <mqtt-xxx>
+ */
+/* Do the generic styles for the CLOSED version, then override for the open */
+/* :host-context(details:not(open)) label { color: red; } /* or can use this */
+/* summary slot {display: inline-block;} */ /* WORKS but for all cos inside shadow root */
+
+
+/* Fix: xxx-large was too aggressive for actual phone widths */
+@media screen and (max-width: 480px) {
+    .dropdown {
+        font-size: large;
+    }
+}
+div.frugal_iot_name {
+    display: inline-block !important;
+    label {  display: none !important;} /* Dont display label for noide id */
+}
+:host-context(details[open]) {
+    /* This is working on the shadow_route of the mqtt_text inside the group's details/summary */
+    div {  display: block; } /*WORKS and overrides div.mqtt-text when open */
+    label {  display: inline-block; } /*WORKS and overrides div.mqtt-text when open */
+    /* summary label {  color: red; } /* FAILS */
+    /* :host-context(.name) label { color: blue; } /* Not clear if works or fails */
+}
+
+
+div.mqtt-text {
+    display: inline-block; /* display all on same line when closed */
+    /* Dont hide labels as mucks up dashboard_example.html */
+    /*label {  display: none; }*/ /* Hide labels inside the frugal_iot group  */
+}
+
+    /*details[open] summary slot {display: block; color: red} */
+    /*details:not(open) summary slot {display: inline-block;} */
+    /*details:not(open) summary slot mqtt-text { color: purple} */
+    /* .mqtt-text label {color: purple} /* Works as entirely within shadow_root */
+    /*:host-context(.frugal_iot) label {color: green} /* Works as mqtt-text is within .frugal-iot*/
+    /* :host-context:not(open) label {color: green} /* fails - none of the parents are open or closed */
+    /*mqtt-groupfrugaliot mqtt-text { display: inline-block; } */
+
+    /*.name mqtt-text { display: inline; }*/
+    /* Multiple places */
+    .outer {background-color: white;margin:5px; padding:5px;}
+    .icon { /* mqtt-toggle , mqtt-bar (graph) */
+        height:1em;width:1em;float:right;
+        @media (max-width:1001px){
+            height:1.5em;width:1.5em;
+        }
+    }
+    .language-picker, language-picker, .language-picker select {
+        float: right;
+        text-align: right;
+        border: 0px;
+        @media screen and (max-width: 1001px ) {
+            font-size: x-large;
+        }
+    }
+    /* In MqttClient */
+    details.mqtt-client {
+        margin-left: 1em; margin-right: 1em; float: right;
+        @media screen and (max-width: 1001px ) {
+            font-size: xx-large;
+        }
+    }
+    /* In MqttProject */
+    .mqtt-project {
+    { margin: 0.2em; }
+        .projectname {margin-right: 2em; }
+    }
+    /* In MqttNode */
+    .mqtt-node {
+    { border: 1px,black,solid;  margin: 0.2em; }
+        /*.name,.description,.nodeid,.projectname { margin-left: 1em; margin-right: 1em; }*/
+        /*.lastseen {margin-left: 1em; margin-right: 1em; float: right;} */
+        /*.batteryimg {height:17px;width:34px;float:right;}*/
+        @media (max-width: 1001px ) {
+            .name {
+                font-size: xxx-large;
+            }
+            .description, .nodeid, .projectname, .lastseen {
+                font-size: xx-large;
+            }
+        }
+    }
+    /* In the children of an mqtt-node */
+    mqtt-node {
+        details.group { border: 1px,black,solid; margin:1px }
+        @media (max-width:1001px){
+            details {font-size: x-large;}
+        }
+    }
+
+    .mqtt-group {
+        border: 1px, black, solid;
+        margin: 1px;
+        @media (max-width: 1001px) {
+            font-size: x-large;
+        }
+    }
+
+    div.offline {background-color: #888888;} /* Not INSIDE mqtt-node, it is the mqtt-node */
+    /* In MqttBar */
+    .mqtt-bar {
+        .bar {border: 1px,black,solid; background-color: white;margin: 0px;}
+        .left {display:inline-block; text-align: right;}
+        .right {background-color:white; display:inline-block;}
+        .val {margin:5px;}
+        @media (max-width:1001px){
+            .left, .right {height: 2em;}
+            .val {font-size: xx-large;}
+            label {font-size: x-large;}
+        }
+    }
+
+    /* In MqttChoosetopic */
+    .mqtt-choosetopic {
+        .outer { border: 0px,black,solid;  margin: 0.2em; }
+        @media (max-width:1001px){
+            .dropdown {font-size: x-large;}
+            select { font-size: x-large;}
+            label {font-size: x-large;}
+        }
+    }
+
+    .mqtt-gauge {
+        dial-gauge {--dg-title-font-size: 1em;--dg-numeric-font-size: 1.5em;}
+    }
+
+    .mqtt-graph {
+        .leftright{display:flex; align-items:center;}
+        @media (max-width:1001px) {
+            .graphnavleft, .graphnavright {font-size: xxx-large;}
+        }
+    }
+
+    /* In MqttSlider */
+    .mqtt-slider .pointbar {margin:0px; padding 0px;}
+    .mqtt-slider .val {margin:5px;}
+    .mqtt-slider .setpoint {position: relative;top: -5px;cursor: pointer;width: max-content;height: max-content;}
+
+    .mqtt-text {
+        /* --mqtt-val-width can be set on a mqtt-text host (or any ancestor) to constrain input width.
+           CSS custom properties inherit through shadow DOM boundaries, so setting it outside the
+           shadow root (e.g. in a dashboard layout rule) overrides the default here. */
+        .val {margin:5px; width: var(--mqtt-text-val-width, auto);}
+        .wired {margin:5px;}
+        @media (max-width:1001px){
+            .val {font-size: xx-large;}
+            label {font-size: x-large;}
+        }
+    }
+    .mqtt-toggle {
+        .val {margin:5px;}
+        .wired {margin:5px;}
+        @media (max-width:1001px){
+            .val {font-size: xx-large;}
+            label {font-size: x-large;}
+        }
+    }
+    /* In MqttGraph */
+    /* In MqttWrapper */
+    /*Not useful: .mqtt-wrapper {border: 1px,black,solid;  margin: 0.2em; } */
+    mqtt-wrapper,  .mqtt-admin {
+        .dropdown {
+            display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
+        }
+        .dropdown label { flex-shrink: 0; white-space: nowrap; }
+        .dropdown select {
+            flex: 1; padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px;
+            font-size: 0.92em; margin-left: 0;
+            /* Fix: select couldn't shrink below its (huge) text content, causing overflow */
+            min-width: 0;
+        }
+        select { margin-left: 2em; }
+        @media screen and (max-width: 1001px ) {
+            .dropdown { font-size: xxx-large; }
+            .dropdown select { font-size: inherit; }
+            .dropdownsadmin {
+                display: flex;
+                justify-content: left;
+                gap: 10px;
+            }
+            .dropdownsadmin > select {
+                flex: 0 0 auto;
+                margin-left: 0;
+            }
+            select { font-size: xx-large; }
+        }
+    }
+
+
+/* Related to authentication */
+    .mqtt-login, .mqtt-admin, .tabbed-display, tabbed-display {
+        .pseudolink {
+            color: blue;
+            text-decoration: underline;
+            cursor: pointer;
+        }
+        .tabs {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin-bottom: 0em;
+            padding-bottom: 0em;
+        }
+        .tab {
+            border: 2px, black, solid;
+            width: 50%;
+            font-size: x-large;
+            margin-bottom: 0.2em;
+            margin-bottom: 0em;
+            padding: 0.6em;
+            border-top-left-radius: 20px;
+            border-top-right-radius: 20px;
+        }
+        .tab.active {
+            background-color: #ffffff;
+            font-weight: bolder;
+            border-bottom: 0px;
+        }
+        .tab.inactive {
+            background-color: #888888;
+            font-weight: lighter;
+        }
+        .message {margin: 0.5em; font-weight: bold; font-size: x-large; }
+        .tabbed-section.inactive { display: none; }
+        tabbed-display.solo .tabbed-section.active {
+            padding: 0;
+            border: none;
+            border-radius: 0;
+        }
+        .tabbed-section.active {
+            padding: 10px;
+            border: black solid 2px;
+            /*border-top: 2px; */
+            border-bottom-left-radius: 20px;
+            border-bottom-right-radius: 20px;
+            h3 {
+                font-size: 2.3em;
+                font-weight: bold;
+                margin: 0.6em 0 0.4em 0;
+                border-bottom: 3px solid #444;
+                padding-bottom: 0.15em;
+            }
+            label {
+                font-size: xx-large;
+                display: block;
+            }
+            section {
+                margin: 0.5em;
+                input {
+                    font-size: xx-large;
+                    margin: 0.5em;
+                }
+            }
+            button { font-size: x-large; padding: 10px; border-radius: 10px; }
+        }
+    }
+}
+/* Claude suggested this not to impact the Login page - not sure if it does */
+/* Fix: was width:50% shared with the 2-tab login view, breaking the 5-tab dashboard bar */
+
+.tabbed-display .tab, tabbed-display .tab {
+    width: auto;
+    flex: 1 1 auto;
+}
+

package/images/icon_graph.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title/><g id="analysis"><path d="M22.29,6.29,15,13.59,9.71,8.29a1,1,0,0,0-1.42,0l-8,8a1,1,0,0,0,1.42,1.42L9,10.41l5.29,5.3a1,1,0,0,0,1.42,0l8-8A1,1,0,0,0,22.29,6.29Z"/></g></svg>

package/index-embedded.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Frugal IoT  Demo</title>
+    <link href="./frugaliot.css" rel="stylesheet" type="text/css">
+    <!-- this maps files that webcomponents uses, -->
+    <script type="importmap">
+        {
+        "imports": {
+            "@kurkle/color": "https://frugaliot.naturalinnovation.org/node_modules/@kurkle/color/dist/color.esm.js",
+            "chart.js": "https://frugaliot.naturalinnovation.org/node_modules/chart.js/dist/Chart.js",
+            "dial-gauge": "/node_modules/dial-gauge/dial-gauge.js",
+            "luxon": "https://frugaliot.naturalinnovation.org/node_modules/luxon/src/luxon.js",
+            "chartjs-adapter-luxon": "https://frugaliot.naturalinnovation.org/node_modules/chartjs-adapter-luxon/dist/chartjs-adapter-luxon.esm.js",
+            "csv-parse": "https://frugaliot.naturalinnovation.org/node_modules/csv-parse/dist/esm/index.js"
+            }
+        }
+    </script>
+    <!-- load webcomponents.js either from local server, or from frugaliot.naturalinnovation.org -->
+    <script src="./webcomponents.js" type="module"></script>
+    <!--<script src="./webcomponents.js" type="module"></script>-->
+</head>
+<body>
+<h1>This is an example of embedding a widget in a page</h1>
+<div style="display:none">
+    <!-- every embedded page needs a mqtt-client, it sets up the MQTT connection to the broker.
+         username is the organization whose topics this page displays, password its mqtt_password
+         from that organization's config file on the server - it will not connect without them. -->
+    <mqtt-client server="wss://frugaliot.naturalinnovation.org/wss" username="dev" password="public"></mqtt-client>
+</div>
+<div style="float:right;border:2px,solid,blue;width:50%">
+    <!-- this is a simple display widget - in this case a meter bar -->
+    <mqtt-bar max="45" min="0" topic="dev/lotus/esp8266-fb94bb/sht/temperature" label="Temperature" type="float" color="red"></mqtt-bar>
+    <!--<mqtt-bar max="45" min="0" topic="dev/lotus/esp32-70c376/soil" label="Soil" type="float" color="brown"></mqtt-bar>-->
+</div>
+<div style="float:left;border:2px,solid,blue;width:10%">
+    <!-- this is a simple control widget - in this case toggles an LED on a device at my office -->
+    <mqtt-toggle topic="dev/lotus/esp8266-fb94bb/ledbuiltin/on" label="LED" type="bool" color="blue"></mqtt-toggle>
+</div>
+<p>
+    This is a demo of a custom web page with a bar widget; a graph; and a control.
+    These all go to the same device which may or may not always be turned on!
+</p>
+<p>
+    <!-- And a pretty simple graph - in this case its displaying the same value from above, but it can
+    <!-- display any topic -->
+    <!-- Note - I think there is an issue with back button if loaded from a different server, will fix -->
+    <mqtt-graph>
+        <mqtt-graphdataset topic="dev/lotus/esp8266-fb94bb/sht/temperature" color="red" label="Office Temperature" min=0 max=50 type="float"></mqtt-graphdataset>
+        <mqtt-graphdataset topic="dev/lotus/esp8266-fb94bb/sht/humidity" color="blue" label="Office Humidity" min=0 max=100 type="float"></mqtt-graphdataset>
+        <mqtt-graphdataset topic="dev/lotus/esp8266-fb94bb/ledbuiltin/on" color="orange" label="LED" type="bool"></mqtt-graphdataset>
+    </mqtt-graph>
+</p>
+</body>
+</html>

package/index-project.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Frugal IoT  Demo</title>
+    <link href="./frugaliot.css" rel="stylesheet" type="text/css">
+    <script type="importmap">
+        {
+        "imports": {
+            "@kurkle/color": "/node_modules/@kurkle/color/dist/color.esm.js",
+            "chart.js": "/node_modules/chart.js/dist/Chart.js",
+            "dial-gauge": "/node_modules/dial-gauge/dial-gauge.js",
+            "luxon": "/node_modules/luxon/src/luxon.js",
+            "chartjs-adapter-luxon": "/node_modules/chartjs-adapter-luxon/dist/chartjs-adapter-luxon.esm.js",
+            "csv-parse": "/node_modules/csv-parse/dist/esm/index.js"
+            }
+        }
+    </script>
+    <script src="./webcomponents.js" type="module"></script>
+</head>
+<body>
+<!-- TODO maybe add mqtt-organization discover to discover projects - but maybe better to go to server for it -->
+<!-- <mqtt-project topic="dev/lotus/" name="Lotus Ponds" discover></mqtt-project> -->
+<mqtt-wrapper organization="dev" project="lotus"></mqtt-wrapper>
+</body>
+</html>

package/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#007bff">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Frugal IoT">
+    <!--suppress HtmlUnknownTarget -->
+    <link rel="apple-touch-icon" href="/images/icon-192x192.png">
+    <!--suppress HtmlUnknownTarget -->
+    <link rel="manifest" href="/manifest.json">
+    <title>Frugal IoT  Dashboard</title>
+    <link href="./frugaliot.css" rel="stylesheet" type="text/css">
+    <script type="importmap">
+        {
+        "imports": {
+            "@kurkle/color": "/node_modules/@kurkle/color/dist/color.esm.js",
+            "chart.js": "/node_modules/chart.js/dist/Chart.js",
+            "dial-gauge": "/node_modules/dial-gauge/dial-gauge.js",
+            "luxon": "/node_modules/luxon/src/luxon.js",
+            "chartjs-adapter-luxon": "/node_modules/chartjs-adapter-luxon/dist/chartjs-adapter-luxon.esm.js",
+            "csv-parse": "/node_modules/csv-parse/dist/esm/index.js"
+            }
+        }
+    </script>
+    <script src="./webcomponents.js" type="module"></script>
+</head>
+<body>
+<!-- TODO maybe add mqtt-organization discover to discover projects - but maybe better to go to server for it -->
+<!-- <mqtt-project topic="dev/lotus/" name="Lotus Ponds" discover></mqtt-project> -->
+<mqtt-admin></mqtt-admin>
+<!-- <mqtt-wrapper></mqtt-wrapper> -->
+</body>
+</html>

package/login.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Frugal IoT  Dashboard</title>
+    <link href="./frugaliot.css" rel="stylesheet" type="text/css">
+    <script type="importmap">
+        {
+        "imports": {
+            "@kurkle/color": "/node_modules/@kurkle/color/dist/color.esm.js",
+            "chart.js": "/node_modules/chart.js/dist/Chart.js",
+            "dial-gauge": "/node_modules/dial-gauge/dial-gauge.js",
+            "luxon": "/node_modules/luxon/src/luxon.js",
+            "chartjs-adapter-luxon": "/node_modules/chartjs-adapter-luxon/dist/chartjs-adapter-luxon.esm.js",
+            "csv-parse": "/node_modules/csv-parse/dist/esm/index.js"
+            }
+        }
+    </script>
+    <script src="./webcomponents.js" type="module"></script>
+</head>
+<body>
+<!-- TODO maybe add mqtt-organization discover to discover projects - but maybe better to go to server for it -->
+<!-- <mqtt-project topic="dev/lotus/" name="Lotus Ponds" discover></mqtt-project> -->
+<mqtt-login></mqtt-login>
+<!-- <mqtt-wrapper></mqtt-wrapper> -->
+</body>
+</html>

package/package.json

@@ -0,0 +1,34 @@
+{
+  "author": {
+    "name": "Mitra Ardron",
+    "email": "mitra@mitra.biz",
+    "url": "https://www.mitra.biz"
+  },
+  "browserslist": "> 20%, not dead",
+  "bugs": "https://github.com/mitra42/frugal-iot-logger/issues",
+  "dependencies": {
+    "async": "^3.2.6",
+    "chart.js": "^4.5.1",
+    "csv-parse": "^5.6.0",
+    "dial-gauge": "^0.1.5",
+    "html-element-extended": "^0.1.6",
+    "js-yaml": "^4.2.0",
+    "luxon": "^3.7.2",
+    "mqtt": "^5.15.1"
+  },
+  "description": "Frugal IoT client",
+  "homepage": "https://github.com/mitra42/frugal-iot-client",
+  "keywords": [
+    "mqtt",
+    "frugal-iot"
+  ],
+  "license": "MIT",
+  "main": "webcomponents.js",
+  "name": "frugal-iot-client",
+  "repository": "https://github.com/mitra42/frugal-iot-client",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "type": "module",
+  "version": "1.3.11"
+}