mirror of
https://github.com/cesanta/mongoose.git
synced 2026-10-30 12:50:58 +00:00
move MicroPython and dashboards -> tutorials
This commit is contained in:
Sergio R. Caprile committed
1 parent
1078ba0a92
commit
b3f5d11275
97 files changed
+22
-20
No files matched your search
@@ -0,0 +1,4 @@
|
||||
# for internal testing purposes
|
||||
|
||||
all clean example:
|
||||
$(MAKE) -C device $@ CFLAGS_EXTRA=$(CFLAGS_EXTRA)
|
||||
@@ -0,0 +1,14 @@
|
||||
all:
|
||||
make -C ../../../http/http-server ARGS="-d $(CURDIR)"
|
||||
|
||||
# Bundle JS libraries (preact, preact-router, ...) into a single file
|
||||
bundle.js:
|
||||
curl -s https://npm.reversehttp.com/preact,preact/hooks,htm/preact,preact-router -o $@
|
||||
|
||||
# Create optimised CSS. Prerequisite: npm -g i tailwindcss tailwindcss-font-inter
|
||||
NPX ?= npx
|
||||
main.css: index.html $(wildcard *.js)
|
||||
$(NPX) tailwindcss -o $@ --minify
|
||||
|
||||
clean:
|
||||
true
|
||||
@@ -0,0 +1 @@
|
||||
../../../http/device-dashboard/web_root/bundle.js
|
||||
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full bg-white">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'> <path stroke-linecap='round' stroke-linejoin='round' d='M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0' /> </svg>" />
|
||||
<link href="main.css" rel="stylesheet" />
|
||||
<link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
|
||||
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
|
||||
</head>
|
||||
<body class="h-full"></body>
|
||||
<script type="module" src="main.js"></script>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
/*! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter var,Helvetica,sans-serif;font-feature-settings:"cv11","ss01";font-variation-settings:"opsz" 32}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.right-4{right:1rem}.top-0{top:0}.top-4{top:1rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-auto{margin-top:auto;margin-bottom:auto}.mb-4{margin-bottom:1rem}.mt-3{margin-top:.75rem}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-11{width:2.75rem}.w-24{width:6rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-60{width:15rem}.w-64{width:16rem}.w-96{width:24rem}.w-full{width:100%}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x:1.25rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-widtLine truncated
|
||||
@@ -0,0 +1,618 @@
|
||||
'use strict';
|
||||
import {h, html, render, useEffect, useRef, useState} from './bundle.js';
|
||||
|
||||
const Logo = props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.87 12.85"><defs><style>.ll-cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="ll-cls-1" d="M12.62,1.82V8.91A1.58,1.58,0,0,1,11,10.48H4a1.44,1.44,0,0,1-1-.37A.69.69,0,0,1,2.84,10l-.1-.12a.81.81,0,0,1-.15-.48V5.57a.87.87,0,0,1,.86-.86H4.73V7.28a.86.86,0,0,0,.86.85H9.42a.85.85,0,0,0,.85-.85V3.45A.86.86,0,0,0,10.13,3,.76.76,0,0,0,10,2.84a.29.29,0,0,0-.12-.1,1.49,1.49,0,0,0-1-.37H2.39V1.82A1.57,1.57,0,0,1,4,.25H11A1.57,1.57,0,0,1,12.62,1.82Z"/><path class="ll-cls-1" d="M10.48,10.48V11A1.58,1.58,0,0,1,8.9,12.6H1.82A1.57,1.57,0,0,1,.25,11V3.94A1.57,1.57,0,0,1,1.82,2.37H8.9a1.49,1.49,0,0,1,1,.37l.12.1a.76.76,0,0,1,.11.14.86.86,0,0,1,.14.47V7.28a.85.85,0,0,1-.85.85H8.13V5.57a.86.86,0,0,0-.85-.86H3.45a.87.87,0,0,0-.86.86V9.4a.81.81,0,0,0,.15.48l.1.12a.69.69,0,0,0,.13.11,1.44,1.44,0,0,0,1,.37Z"/></g></g></svg>`;
|
||||
const DefaultTopic = 'mg_mqtt_dashboard';
|
||||
const DefaultUrl = location.protocol == 'https:'
|
||||
? 'wss://broker.hivemq.com:8884/mqtt'
|
||||
: 'ws://broker.hivemq.com:8000/mqtt';
|
||||
const DefaultDeviceConfig = {pin_map: [], pin_state: [], log_level: 0, pin_count: 0};
|
||||
const Delay = (ms, val) => new Promise(resolve => setTimeout(resolve, ms, val));
|
||||
const handleFetchError = r => r.ok || alert(`Error: ${r.statusText}`);
|
||||
const LabelClass = 'text-sm truncate text-gray-500 font-medium my-auto whitespace-nowrap';
|
||||
const BadgeClass = 'flex-inline text-sm rounded-md rounded px-2 py-0.5 ring-1 ring-inset';
|
||||
const InputClass = 'font-normal text-sm rounded w-full flex-1 py-0.5 px-2 text-gray-700 placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500 rounded border';
|
||||
const TitleClass = 'font-semibold xuppercase xtext-gray-600';
|
||||
const Colors = {
|
||||
green: 'bg-green-100 text-green-900 ring-green-300',
|
||||
yellow: 'bg-yellow-100 text-yellow-900 ring-yellow-300',
|
||||
info: 'bg-zinc-100 text-zinc-900 ring-zinc-300',
|
||||
red: 'bg-red-100 text-red-900 ring-red-300',
|
||||
};
|
||||
|
||||
let MqttClient;
|
||||
|
||||
const Icons = {
|
||||
logo: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="59.1" height="75.7" viewBox="0 0 1514 1182"> <path style="fill: #2f409a;" d="m52.8 572h345.1v346.5h-345.1zm-10.9-434.2c-12.6 6.4-32.2 20.9-35.5 37.9 0 0-6.1 35.9-6.1 36.8-2.1 13.1 10.5 10 15.8 6.7 53.9-31.8 113.9-60.7 168.7-77.5 258.2-78.2 585.9-80.2 643.1 88.8 40.3 117.1-123.6 214.8-216.1 258.4-35.7 16.8-47.6 32.8-50 49.8-2 15.3 3.2 37.8 23.8 68.3 129.7 194.8 515 474 893.1 571.7 15.7 4.2 23.5 2.8 29.9-1.1 3.5-2 7.9-4.8 1.1-8.2-251.1-132.2-490.9-353.9-610.9-525.1-27.4-39.5-34.5-65.9-32.7-87.2 1.7-18.4 18.7-34.5 54.8-51.4 134.1-62.3 270.9-157.1 230-314.9-59.5-226.9-700.5-260.1-1109-53z"/></svg>`,
|
||||
activity: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>`,
|
||||
refresh: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
|
||||
info: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`,
|
||||
login: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>`,
|
||||
logout: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>`,
|
||||
menu: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>`,
|
||||
upload: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>`,
|
||||
monitor: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>`,
|
||||
settings: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>`,
|
||||
download: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`,
|
||||
file: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>`,
|
||||
check: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
|
||||
rollback: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>`,
|
||||
save: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>`,
|
||||
bolt: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>`,
|
||||
delete: props => html`<svg class=${props.class} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
|
||||
};
|
||||
|
||||
export function Button({title, onclick, disabled, extraClass, icon, ref, colors, hovercolor, disabledcolor}) {
|
||||
const [spin, setSpin] = useState(false);
|
||||
const cb = function(ev) {
|
||||
const res = onclick ? onclick() : null;
|
||||
if (res && typeof (res.catch) === 'function') {
|
||||
setSpin(true);
|
||||
res.catch(() => false).then(() => setSpin(false));
|
||||
}
|
||||
};
|
||||
if (!colors) colors = 'bg-blue-600 hover:bg-blue-500 disabled:bg-blue-400';
|
||||
return html`
|
||||
<button type="button" class="inline-flex justify-center items-center gap-2 rounded px-2.5 py-0.5 text-sm font-semibold text-white shadow-sm ${colors} ${extraClass}"
|
||||
ref=${ref} onclick=${cb} disabled=${disabled || spin} >
|
||||
${title}
|
||||
<${spin ? Icons.refresh : icon} class="w-4 ${spin ? 'animate-spin' : ''}" />
|
||||
<//>`
|
||||
};
|
||||
|
||||
function UploadFileButton({oncomplete, onprogress, onfileselect, url, title, colors, accept, extraClass}) {
|
||||
const btn = useRef(null);
|
||||
const input = useRef(null);
|
||||
|
||||
// Send a large file chunk by chunk
|
||||
const sendFileData = function(url, fileName, fileData, chunkSize) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
const finish = ok => {
|
||||
input.fn = null;
|
||||
const res = oncomplete ? oncomplete(ok, fileName, fileData.length) : null;
|
||||
if (res && typeof (res.catch) === 'function') {
|
||||
res.catch(() => false).then(() => ok ? resolve() : reject());
|
||||
} else {
|
||||
ok ? resolve() : reject();
|
||||
}
|
||||
};
|
||||
const sendChunk = function(offset) {
|
||||
var chunk = fileData.subarray(offset, offset + chunkSize) || '';
|
||||
var opts = {method: 'POST', body: chunk};
|
||||
var fullUrl = url + '?offset=' + offset +
|
||||
'&total=' + fileData.length +
|
||||
'&file=' + encodeURIComponent(fileName);
|
||||
onprogress && onprogress(offset, fileData.length, fileName);
|
||||
fetch(fullUrl, opts)
|
||||
.then(function(res) {
|
||||
if (!res.ok) {
|
||||
finish(false);
|
||||
} else if (offset >= fileData.length) {
|
||||
finish(true);
|
||||
} else {
|
||||
sendChunk(offset + chunk.length);
|
||||
}
|
||||
});
|
||||
};
|
||||
sendChunk(0);
|
||||
});
|
||||
};
|
||||
|
||||
const onchange = function(ev) {
|
||||
if (!ev.target.files[0]) return;
|
||||
let r = new FileReader(), f = ev.target.files[0];
|
||||
if (onfileselect && !onfileselect(f.name)) {
|
||||
ev.target.value = '';
|
||||
return;
|
||||
}
|
||||
r.readAsArrayBuffer(f);
|
||||
r.onload = function() {
|
||||
input.fn = sendFileData(url, f.name, new Uint8Array(r.result), 2048);
|
||||
ev.target.value = '';
|
||||
ev.preventDefault();
|
||||
btn.current && btn.current.base.click();
|
||||
};
|
||||
};
|
||||
|
||||
const onclick = function(ev) {
|
||||
//if (!input.fn) input.current.click(); // No upload in progress, show file dialog
|
||||
};
|
||||
|
||||
return html`
|
||||
<div class="inline-flex flex-col ${extraClass}">
|
||||
<input class="hidden" type="file" ref=${input} onchange=${onchange} accept=${accept} />
|
||||
<${Button} title=${title} icon=${Icons.download} onclick=${onclick} ref=${btn} colors=${colors} />
|
||||
<//>`;
|
||||
};
|
||||
|
||||
function Toggle({value, onclick, disabled}) {
|
||||
const bg = !!value ? 'bg-blue-600' : 'bg-gray-200';
|
||||
const tr = !!value ? 'translate-x-5' : 'translate-x-0';
|
||||
return html`
|
||||
<button type="button" onclick=${onclick} disabled=${disabled}
|
||||
class="${bg} inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0 ring-0"
|
||||
role="switch" aria-checked=${!!value}>
|
||||
<span aria-hidden="true" class="${tr} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 focus:ring-0 transition duration-200 ease-in-out"></span>
|
||||
</button>`;
|
||||
};
|
||||
|
||||
function Header({topic, setTopic, url, setUrl, connected}) {
|
||||
const forbiddenChars = ['$', '*', '+', '#', '/'];
|
||||
const onClick = () => {
|
||||
const isValidTopic = val => !forbiddenChars.some(char => val.includes(char));
|
||||
if (isValidTopic(topic)) {
|
||||
localStorage.setItem('topic', topic)
|
||||
setTopic(topic);
|
||||
window.location.reload();
|
||||
} else {
|
||||
setSaveResult('Error: The topic cannot contain these characters: ' + forbiddenChars);
|
||||
}
|
||||
};
|
||||
|
||||
return html`
|
||||
<div class="top-0 py-2 border-b-2 bg-stone-100">
|
||||
<div class="flex px-4">
|
||||
<div class="flex grow gap-4">
|
||||
<h1 class="text-2xl font-semibold">IoT Fleet Management Dashboard</h1>
|
||||
<//>
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="flex w-96 align-center justify-between gap-2">
|
||||
<span class=${LabelClass}>MQTT Server<//>
|
||||
<input disabled=${!connected} value=${url}
|
||||
onchange=${ev => setUrl(ev.target.value)} class=${InputClass} />
|
||||
<//>
|
||||
<div class="flex w-64 align-center justify-between gap-2">
|
||||
<span class=${LabelClass}>Root Topic<//>
|
||||
<input disabled=${!connected} value=${topic}
|
||||
onchange=${ev => setTopic(ev.target.value)} class=${InputClass} />
|
||||
<//>
|
||||
<${Button} icon=${Icons.bolt} onclick=${onClick} title=${connected ? 'Disconnect' : 'Connect'} />
|
||||
<//>
|
||||
<//>
|
||||
<//>`;
|
||||
};
|
||||
|
||||
function Sidebar({devices, onclick}) {
|
||||
const Td = props => html`
|
||||
<td class="whitespace-nowrap border-b border-slate-200 py-2 px-4 pr-3 text-sm text-slate-900">${
|
||||
props.text}</td>`;
|
||||
|
||||
const Device = ({d}) => html`
|
||||
<div class="hover:bg-stone-100 cursor-pointer flex gap-3 px-4 py-2 justify-between"
|
||||
onclick=${ev => onclick(d.id)}>
|
||||
<span>${d.id}</span>
|
||||
<span class="${BadgeClass} ${d.online ? Colors.green : Colors.red}"> ${d.online ? 'online' : 'offline'} <//>
|
||||
<//>`;
|
||||
|
||||
return html`
|
||||
<div class="overflow-auto divide-y">
|
||||
<div class="${TitleClass} flex items-center px-4 py-2 bg-stone-100">
|
||||
Device List
|
||||
<//>
|
||||
${(devices ? devices : []).map(d => h(Device, {d}))}
|
||||
<//>`;
|
||||
};
|
||||
|
||||
function FirmwareStatus({title, info, children}) {
|
||||
const state =
|
||||
['UNAVAILABLE', 'FIRST_BOOT', 'NOT_COMMITTED',
|
||||
'COMMITTED'][(info.status || 0) % 4];
|
||||
const valid = info.status > 0;
|
||||
return html`
|
||||
<div class="bg-white divide-y border rounded">
|
||||
<div class="${TitleClass} bg-white flex items-center px-4 py-2">
|
||||
${title}
|
||||
<//>
|
||||
<div class="px-4 py-2 relative">
|
||||
<div class="my-1">Status: ${state}<//>
|
||||
<div class="my-1">CRC32: ${valid ? info.crc32.toString(16) : 'n/a'}<//>
|
||||
<div class="my-1">Size: ${valid ? info.size : 'n/a'}<//>
|
||||
<div class="my-1">Flashed at: ${
|
||||
valid ? new Date(info.timestamp * 1000).toLocaleString() : 'n/a'}<//>
|
||||
${children}
|
||||
<//>
|
||||
<//>`;
|
||||
};
|
||||
|
||||
function FirmwareUpdatePanel({no, name, current, previous, updated_at, refresh}) {
|
||||
const [color, setColor] = useState(Colors.green);
|
||||
const [otaStatus, setOtaStatus] = useState('up-to-date');
|
||||
const Descr = ({label, value}) => html`
|
||||
<div class="flex items-center justify-between">
|
||||
<span class=${LabelClass}>${label}<//>
|
||||
<span class="text-sm">${value}<//>
|
||||
<//>`;
|
||||
const onprogress = (len, total) => {
|
||||
setColor(Colors.info);
|
||||
setOtaStatus(`uploading, ${parseInt(len * 100 /total)}% done...`);
|
||||
}
|
||||
const setparam = (key, val) => fetch('api/settings/set', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({key, val}),
|
||||
}).then(handleFetchError);
|
||||
const onupload = function(ok, fileName, fileLength) {
|
||||
if (ok) {
|
||||
return setparam(`ecu.${no}.new`, fileName).then(refresh);
|
||||
} else {
|
||||
setColor(Colors.red), setOtaStatus('upload failed');
|
||||
}
|
||||
};
|
||||
const onfileselect = function(fileName, fileLength) {
|
||||
const ok = fileName.startsWith(name);
|
||||
if (!ok) alert(`Firmware file name must be ${name}.VERSION.BIN_OR_HEX`);
|
||||
return ok;
|
||||
}
|
||||
const update = rollback => new Promise(function(resolve, reject) {
|
||||
const opts = {method: 'POST', body: JSON.stringify({no, rollback})};
|
||||
const fail = () => (reject(), setOtaStatus('update error'), setColor(Colors.red));
|
||||
const finish = () => fetch('api/ecu/update/end', opts)
|
||||
.then(r => r.ok ? resolve() : reject())
|
||||
.then(refresh);
|
||||
const write = () => fetch('api/ecu/update/write', opts).then(r => {
|
||||
if (!r.ok) fail();
|
||||
//if (r.ok) r.json().then(r => console.log('Goo', r));
|
||||
if (r.ok) r.json().then(r => r == 1 ? write() : finish());
|
||||
});
|
||||
fetch('api/ecu/update/begin', opts).then(r => r.ok ? write() : fail());
|
||||
});
|
||||
const onflash = ev => update(false);
|
||||
const onrollback = ev => update(true);
|
||||
|
||||
useEffect(function() {
|
||||
//setOtaStatus(anew ? 'update pending' : 'up-to-date');
|
||||
//setColor(anew ? Colors.yellow : Colors.green);
|
||||
}, []);
|
||||
|
||||
return html`
|
||||
<div class="divide-y border rounded bg-white">
|
||||
<div class="px-4 py-2 flex justify-between items-center rounded">
|
||||
<span class="${TitleClass}">Firmware Update<//>
|
||||
<div class="flex gap-2"><span class=${LabelClass}>Status:</span><span class="${BadgeClass} ${color}">${otaStatus}<//><//>
|
||||
<//>
|
||||
<div class="p-4 flex flex-col gap-1">
|
||||
<${Descr} label="Current firmware:" value=${current || 'n/a'} />
|
||||
<${Descr} label="Updated at:" value=${updated_at || 'n/a'} />
|
||||
<div class="flex items-center justify-between whitespace-nowrap">
|
||||
<span class=${LabelClass}>Previous firmware:<//>
|
||||
<span class="flex gap-1 items-center">
|
||||
<span class="text-sm">${previous}<//>
|
||||
<${Button} title="rollback" icon=${Icons.bolt} onclick=${onrollback}
|
||||
extraClass="w-24" disabled=${!previous} />
|
||||
<//>
|
||||
<//>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class=${LabelClass}>New firmware:<//>
|
||||
<span class="flex gap-1 align-center justify-between">
|
||||
<${UploadFileButton} title="upload" url="api/fw/upload"
|
||||
onfileselect=${onfileselect}
|
||||
onprogress=${onprogress} oncomplete=${onupload} />
|
||||
<${Button} title="flash" icon=${Icons.bolt} onclick=${onflash}
|
||||
extraClass="w-24" disabled=${!previous} />
|
||||
<//>
|
||||
<//>
|
||||
<//>
|
||||
<//>`;
|
||||
};
|
||||
|
||||
function DeviceSettingsPanel({device, publishFn, connected}) {
|
||||
const [config, setConfig] = useState({});
|
||||
const logOptions = [[0, 'Disable'], [1, 'Error'], [2, 'Info'], [3, 'Debug']];
|
||||
|
||||
const onSave = ev => publishFn('config.set', config).then(r => {
|
||||
//setDeviceConfig(device.id, config);
|
||||
}).catch(e => alert('Failure!'));
|
||||
|
||||
// To delete device, set an empty retained message
|
||||
const onforget = function(ev) {
|
||||
MqttClient.publish(device.topic, '', {retain: true});
|
||||
location.reload();
|
||||
};
|
||||
const onloglevelchange = ev => setConfig(x => Object.assign({}, x, {log_level: parseInt(ev.target.value)}));
|
||||
const onpinschange = ev => {
|
||||
const pin_map = ev.target.value.split(/\s*,\s*/).map(x => parseInt(x));
|
||||
setConfig(x => Object.assign({}, x, {
|
||||
pin_map, // Send an updated pin map
|
||||
pin_count: pin_map.length, // And pin count
|
||||
pin_state:[] // Remove pin_state from the request, as pin_map change can invalidate it
|
||||
}));
|
||||
}
|
||||
//console.log('sp', device, config);
|
||||
|
||||
useEffect(() => setConfig(device.config) , [device]);
|
||||
|
||||
return html`
|
||||
<div class="divide-y border rounded bg-white">
|
||||
<div class="px-4 py-2 flex justify-between items-center rounded ${TitleClass}">
|
||||
<div class="flex gap-2 items-center"> Settings <//>
|
||||
<//>
|
||||
<div class="p-4 gap-3">
|
||||
<div class="flex justify-between my-1">
|
||||
<span class=${LabelClass}>Status<//>
|
||||
<span class="${BadgeClass} ${device.online ? Colors.green : Colors.red}"> ${connected ? 'online' : 'offline'} <//>
|
||||
<//>
|
||||
<div class="flex justify-between my-1">
|
||||
<span class=${LabelClass}>Device ID<//>
|
||||
<span class="${LabelClass}">${device.id}<//>
|
||||
<//>
|
||||
<div class="grid grid-cols-2 my-1">
|
||||
<span class="${LabelClass}">Log Level<//>
|
||||
<select onchange=${onloglevelchange} class="w-full rounded font-normal border py-0.5 px-1 text-gray-600 focus:outline-none text-sm disabled:cursor-not-allowed" disabled=${!connected}>
|
||||
${logOptions.map(v => html`<option value=${v[0]} selected=${v[0] == config.log_level}>${v[1]}<//>`) }
|
||||
<//>
|
||||
<//>
|
||||
<div class="grid grid-cols-2 my-1">
|
||||
<span class="${LabelClass}">Show Pins<//>
|
||||
<div class="flex w-full items-center">
|
||||
<input disabled=${!connected} value=${config.pin_map}
|
||||
onchange=${onpinschange} class=${InputClass}
|
||||
placeholder="comma-separated pin numbers" />
|
||||
<//>
|
||||
<//>
|
||||
|
||||
<div class="mt-3 flex justify-between gap-2">
|
||||
<${Button} title="Forget this device"
|
||||
disabled=${device.online || !connected} icon=${Icons.delete}
|
||||
onclick=${onforget}/>
|
||||
<${Button} icon=${Icons.save} onclick=${onSave} title="Save Settings" disabled=${!device.online} />
|
||||
<//>
|
||||
<//>
|
||||
<//> `;
|
||||
};
|
||||
|
||||
function DeviceControlPanel({device, config, setConfig, publishFn, connected}) {
|
||||
const onclick = function(i) { // Send request to toggle pin i
|
||||
let configCopy = Object.assign({}, config);
|
||||
configCopy.pin_state[i] = !!configCopy.pin_state[i] ? 0 : 1;
|
||||
return publishFn('config.set', configCopy).catch(e => alert('Failure!'));
|
||||
};
|
||||
|
||||
const Pin = i => html`
|
||||
<div class="inline-block my-1 bg-gray-100 rounded px-1 py-1">
|
||||
<div class="flex align-center justify-between">
|
||||
<span class="${LabelClass}">Pin ${config.pin_map[i]}<//>
|
||||
<${Toggle} onclick=${ev => onclick(i)}
|
||||
disabled=${!device.online || !connected}
|
||||
value=${config.pin_state[i]} />
|
||||
<//>
|
||||
<//>`;
|
||||
|
||||
return html`
|
||||
<div class="divide-y border rounded bg-white xbg-slate-100 my-y">
|
||||
<div class="px-4 py-2 flex justify-between items-center rounded ${TitleClass}">
|
||||
<div class="flex gap-2 items-center">Pin Control Panel<//>
|
||||
<//>
|
||||
<div class="p-4 grid grid-cols-2 lg:grid-cols-3 gap-2">
|
||||
${(config.pin_map || []).map((_, i) => Pin(i))}
|
||||
<div><//>
|
||||
<//>
|
||||
<//> `;
|
||||
};
|
||||
|
||||
function DeviceDashboard({device, setDeviceConfig, publishFn, connected}) {
|
||||
const cfg = device && device.config ? device.config : DefaultDeviceConfig;
|
||||
const [localConfig, setLocalConfig] = useState(cfg);
|
||||
useEffect(() => setLocalConfig(cfg), [device]);
|
||||
|
||||
if (!device || !localConfig) {
|
||||
return html`
|
||||
<div class="flex grow text-gray-400 justify-center items-center text-xl">
|
||||
No device selected. Click on a device on a sidebar
|
||||
<//>`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="p-3 grid grid-cols-3 gap-2">
|
||||
<${DeviceSettingsPanel} device=${device} config=${localConfig} setConfig=${setLocalConfig} publishFn=${publishFn} connected=${connected} />
|
||||
<${DeviceControlPanel} device=${device} config=${localConfig} setConfig=${setLocalConfig} publishFn=${publishFn} connected=${connected} />
|
||||
<${FirmwareUpdatePanel} deviceID=${device.id} publishFn=${publishFn}
|
||||
disabled=${!device.online}
|
||||
info=${[localConfig.crnt_fw, localConfig.prev_fw]} />
|
||||
</div>`;
|
||||
}
|
||||
|
||||
const App = function() {
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [currentDevID, setCurrentDevID] = useState(localStorage.getItem('currentDevID') || '');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [url, setUrl] = useState(localStorage.getItem('url') || DefaultUrl);
|
||||
const [topic, setTopic] = useState(localStorage.getItem('topic') || DefaultTopic);
|
||||
const [error, setError] = useState(null);
|
||||
const [connected, setConnected] = useState(false);
|
||||
const responseHandlers = useRef({});
|
||||
|
||||
function addResponseHandler(correlationId, handler) {
|
||||
responseHandlers[correlationId] = handler;
|
||||
}
|
||||
|
||||
function removeResponseHandler(correlationId) {
|
||||
delete responseHandlers[correlationId];
|
||||
}
|
||||
|
||||
const onRefresh = ev => window.location.reload();
|
||||
|
||||
const initConn = () => {
|
||||
MqttClient = mqtt.connect(url, {connectTimeout: 5000, reconnectPeriod: 0});
|
||||
|
||||
MqttClient.on('connect', () => {
|
||||
//console.log('Connected to the broker');
|
||||
setLoading(false);
|
||||
setError(null); // Reset error state upon successful connection
|
||||
setConnected(true);
|
||||
|
||||
const statusTopic = topic + '/+/status'
|
||||
const txTopic = topic + '/+/tx'
|
||||
|
||||
const subscribe = (topic) => {
|
||||
MqttClient.subscribe(topic, (err) => {
|
||||
if (err) {
|
||||
console.error('Error subscribing to topic:', err);
|
||||
setError('Error subscribing to topic');
|
||||
} else {
|
||||
//console.log('Successfully subscribed to ', topic);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
subscribe(statusTopic);
|
||||
subscribe(txTopic);
|
||||
});
|
||||
|
||||
MqttClient.on('message', (topic, message) => {
|
||||
// console.log(`Received message from ${topic}: ${message.toString()}`);
|
||||
if (message.length == 0) return;
|
||||
let response;
|
||||
try {
|
||||
response = JSON.parse(message.toString());
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
|
||||
if (topic.endsWith('/status')) {
|
||||
let device = {topic: topic, id: topic.split('/')[1], config: DefaultDeviceConfig};
|
||||
const params = response.params;
|
||||
if (!params) {
|
||||
console.error('Invalid response');
|
||||
return;
|
||||
}
|
||||
device.online = params.status === 'online';
|
||||
//setConnected(device.online);
|
||||
if (device.online) {
|
||||
device.config = params;
|
||||
if (!device.config.pins) device.config.pins = [];
|
||||
}
|
||||
setDevice(device)
|
||||
} else if (topic.endsWith('/tx')) {
|
||||
if (!response.id) {
|
||||
console.error('Invalid response');
|
||||
return;
|
||||
}
|
||||
const handler = responseHandlers[response.id];
|
||||
if (handler) {
|
||||
handler(response);
|
||||
removeResponseHandler(response.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
MqttClient.on('error', (err) => {
|
||||
console.error('Connection error:', err);
|
||||
setError('Connection cannot be established.');
|
||||
});
|
||||
|
||||
MqttClient.on('close', () => {
|
||||
if (!connected) {
|
||||
console.error('Failed to connect to the broker.');
|
||||
setError('Connection cannot be established.');
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => initConn(), []);
|
||||
|
||||
const handlePublish = (methodName, parameters, timeout = 5000) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const randomIdGenerator = function(length) {
|
||||
return Math.random().toString(36).substring(2, length + 2);
|
||||
};
|
||||
const randomID = randomIdGenerator(40);
|
||||
const timeoutID = setTimeout(() => {
|
||||
removeResponseHandler(randomID);
|
||||
reject(new Error('Request timed out'));
|
||||
}, timeout);
|
||||
|
||||
addResponseHandler(randomID, (messageData) => {
|
||||
clearTimeout(timeoutID);
|
||||
resolve(messageData);
|
||||
});
|
||||
|
||||
if (currentDevID) {
|
||||
const rxTopic = topic + `/${currentDevID}/rx`;
|
||||
const rpcPayload = {method: methodName, id: randomID};
|
||||
if (parameters) {
|
||||
rpcPayload.params = parameters;
|
||||
}
|
||||
MqttClient.publish(rxTopic, JSON.stringify(rpcPayload));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getDeviceByID = (deviceID) => devices.find(d => d.id === deviceID);
|
||||
|
||||
const setDevice = (devData) => {
|
||||
setDevices(prevDevices => {
|
||||
const devIndex =
|
||||
prevDevices.findIndex(device => device.id === devData.id);
|
||||
if (devIndex !== -1) {
|
||||
if (!devData.online && !devData.config) {
|
||||
const updatedDevices = [...prevDevices];
|
||||
updatedDevices[devIndex].online = false;
|
||||
return updatedDevices;
|
||||
} else {
|
||||
return prevDevices.map(device => device.id === devData.id ? devData : device);
|
||||
}
|
||||
} else {
|
||||
return [...prevDevices, devData];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const setDeviceConfig = (deviceID, config) => {
|
||||
setDevices(prevDevices => {
|
||||
return prevDevices.map(device => {
|
||||
if (device.id === deviceID) {
|
||||
return {...device, config: config};
|
||||
}
|
||||
return device;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onDeviceClick = (deviceID) => {
|
||||
const device = getDeviceByID(deviceID);
|
||||
if (device) {
|
||||
setCurrentDevID(device.id);
|
||||
localStorage.setItem('currentDevID', device.id);
|
||||
}
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return html`
|
||||
<div class="min-h-screen bg-slate-100 flex flex-col">
|
||||
<${Header}/>
|
||||
<div class="flex-grow flex items-center justify-center">
|
||||
<div class="bg-slate-300 p-8 rounded-lg shadow-md w-full max-w-md">
|
||||
<h1 class="text-2xl font-bold text-gray-700 mb-4 text-center">Connection Error</h1>
|
||||
<p class="text-gray-600 text-center mb-4">
|
||||
Unable to connect to the MQTT broker.
|
||||
</p>
|
||||
<div class="text-center relative">
|
||||
<${Button} title="Retry" onclick=${onRefresh}
|
||||
icon=${Icons.refresh} class="absolute top-4 right-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="h-full flex flex-col">
|
||||
<${Header}
|
||||
topic=${topic} setTopic=${setTopic} url=${url}
|
||||
setUrl=${setUrl} connected=${connected}
|
||||
/>
|
||||
<div class="flex grow overflow-auto">
|
||||
<div class="w-60 overflow-auto">
|
||||
<${Sidebar} devices=${devices} onclick=${onDeviceClick} />
|
||||
<//>
|
||||
<div class="grow bg-gray-200">
|
||||
<${DeviceDashboard}
|
||||
device=${getDeviceByID(currentDevID)} connected=${connected}
|
||||
setDeviceConfig=${setDeviceConfig} publishFn=${handlePublish} />
|
||||
<//>
|
||||
<//>
|
||||
<//>`;
|
||||
};
|
||||
|
||||
window.onload = () => render(h(App), document.body);
|
||||
@@ -0,0 +1,17 @@
|
||||
module.exports = {
|
||||
content: ['./*.{html,js}'],
|
||||
xplugins: [ 'tailwindcss', 'xautoprefixer' ],
|
||||
corePlugins: {outline: false},
|
||||
theme: {
|
||||
extend: {},
|
||||
fontFamily: {
|
||||
sans:
|
||||
[
|
||||
"Inter var, Helvetica, sans-serif", {
|
||||
fontFeatureSettings: '"cv11", "ss01"',
|
||||
fontVariationSettings: '"opsz" 32',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
PROG ?= ./example # Program we are building
|
||||
DELETE ?= rm -rf # Command to remove files
|
||||
OUT ?= -o $(PROG) # Compiler argument for output file
|
||||
SOURCES = main.c net.c hal.c mongoose.c # Source code files
|
||||
CFLAGS ?= -W -Wall -Wextra -g -I. # Build options
|
||||
|
||||
# Mongoose build options. See https://mongoose.ws/documentation/#build-options
|
||||
CFLAGS_MONGOOSE += -DMG_ENABLE_LINES=1
|
||||
|
||||
ifeq ($(OS),Windows_NT) # Windows settings for MinGW compiler. To use VC: make CC=cl CFLAGS=/MD OUT=/Feexample.exe
|
||||
PROG = example.exe # Use .exe suffix for the binary
|
||||
CC = gcc # Use MinGW gcc compiler
|
||||
CFLAGS += -lws2_32 # Link against the Winsock library
|
||||
DELETE = cmd /C del /Q /F /S # Command prompt command to delete files
|
||||
endif
|
||||
|
||||
all: $(PROG)
|
||||
$(RUN) $(PROG) $(ARGS)
|
||||
|
||||
$(PROG): $(SOURCES)
|
||||
$(CC) $(SOURCES) $(CFLAGS) $(CFLAGS_MONGOOSE) $(CFLAGS_EXTRA) $(OUT)
|
||||
|
||||
clean:
|
||||
$(DELETE) $(PROG) *.o *.obj *.exe *.dSYM
|
||||
Whitespace-only changes.
@@ -0,0 +1,19 @@
|
||||
#include "hal.h"
|
||||
|
||||
#define MAX_PIN_NO 144
|
||||
|
||||
// Mocked device pins
|
||||
static bool s_pins[MAX_PIN_NO];
|
||||
|
||||
bool gpio_write(uint16_t pin, bool status) {
|
||||
bool ok = false;
|
||||
if (pin >= 0 && pin < MAX_PIN_NO) {
|
||||
s_pins[pin] = status;
|
||||
ok = true;
|
||||
}
|
||||
return ok;
|
||||
}
|
||||
|
||||
bool gpio_read(uint16_t pin) {
|
||||
return (pin >= 0 && pin < MAX_PIN_NO) ? s_pins[pin] : false;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
#pragma once
|
||||
|
||||
#include "mongoose.h"
|
||||
|
||||
bool gpio_write(uint16_t pin, bool status);
|
||||
bool gpio_read(uint16_t pin);
|
||||
@@ -0,0 +1,53 @@
|
||||
// Copyright (c) 2023 Cesanta Software Limited
|
||||
// All rights reserved
|
||||
|
||||
#include "net.h"
|
||||
#include "hal.h"
|
||||
|
||||
// Handle interrupts, like Ctrl-C
|
||||
static int s_signo;
|
||||
static void signal_handler(int signo) {
|
||||
s_signo = signo;
|
||||
}
|
||||
|
||||
int main(int argc, char *argv[]) {
|
||||
struct mg_mgr mgr;
|
||||
int i;
|
||||
|
||||
// Parse command-line flags
|
||||
for (i = 1; i < argc; i++) {
|
||||
if (strcmp(argv[i], "-u") == 0 && argv[i + 1] != NULL) {
|
||||
g_mqtt_server_url = argv[++i];
|
||||
} else if (strcmp(argv[i], "-i") == 0 && argv[i + 1] != NULL) {
|
||||
g_device_id = strdup(argv[++i]);
|
||||
} else if (strcmp(argv[i], "-t") == 0 && argv[i + 1] != NULL) {
|
||||
g_root_topic = argv[++i];
|
||||
} else if (strcmp(argv[i], "-v") == 0 && argv[i + 1] != NULL) {
|
||||
mg_log_set(atoi(argv[++i]));
|
||||
} else {
|
||||
MG_ERROR(("Unknown option: %s. Usage:", argv[i]));
|
||||
MG_ERROR(
|
||||
("%s [-u mqtt://SERVER:PORT] [-i DEVICE_ID] [-t TOPIC_NAME] [-v "
|
||||
"DEBUG_LEVEL]",
|
||||
argv[0], argv[i]));
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
signal(SIGINT, signal_handler); // Setup signal handlers - exist event
|
||||
signal(SIGTERM, signal_handler); // manager loop on SIGINT and SIGTERM
|
||||
|
||||
mg_log_set(MG_LL_DEBUG); // Set debug log level
|
||||
mg_mgr_init(&mgr);
|
||||
|
||||
web_init(&mgr);
|
||||
while (s_signo == 0) {
|
||||
mg_mgr_poll(&mgr, 50);
|
||||
}
|
||||
|
||||
web_free();
|
||||
mg_mgr_free(&mgr);
|
||||
MG_INFO(("Exiting on signal %d", s_signo));
|
||||
|
||||
return 0;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
../../../../mongoose.c
|
||||
@@ -0,0 +1 @@
|
||||
../../../../mongoose.h
|
||||
@@ -0,0 +1,275 @@
|
||||
// Copyright (c) 2023 Cesanta Software Limited
|
||||
// All rights reserved
|
||||
|
||||
#include "net.h"
|
||||
|
||||
char *g_mqtt_server_url = MQTT_SERVER_URL;
|
||||
char *g_root_topic = MQTT_ROOT_TOPIC;
|
||||
char *g_device_id;
|
||||
|
||||
static uint8_t s_qos = 1; // MQTT QoS
|
||||
static struct mg_connection *s_conn; // MQTT Client connection
|
||||
static struct mg_rpc *s_rpc = NULL; // List of registered RPC methods
|
||||
|
||||
#define MAX_PINS 20
|
||||
struct device_config {
|
||||
int log_level; // Device logging level, 0-4
|
||||
int pin_count; // Number of pins to handle
|
||||
uint16_t pin_map[MAX_PINS]; // Pins to handle
|
||||
bool pin_state[MAX_PINS]; // State of the GPIO pins
|
||||
};
|
||||
|
||||
static struct device_config s_device_config;
|
||||
|
||||
// Device ID generation function. Create an ID that is unique
|
||||
// for a given device, and does not change between device restarts.
|
||||
static void set_device_id(void) {
|
||||
char buf[15] = "";
|
||||
|
||||
#ifdef _WIN32
|
||||
unsigned long serial = 0;
|
||||
if (GetVolumeInformationA("c:\\", NULL, 0, &serial, NULL, NULL, NULL, 0)) {
|
||||
mg_snprintf(buf, sizeof(buf), "%lx", serial);
|
||||
}
|
||||
#elif defined(__APPLE__)
|
||||
FILE *fp = popen(
|
||||
"ioreg -l | grep IOPlatformSerialNumber | cut -d'\"' -f4 | tr -d $'\n'",
|
||||
"r");
|
||||
if (fp != NULL) {
|
||||
fread(buf, 1, sizeof(buf), fp);
|
||||
fclose(fp);
|
||||
}
|
||||
#elif defined(__linux__)
|
||||
struct mg_str id = mg_file_read(&mg_fs_posix, "/etc/machine-id");
|
||||
if (id.buf != NULL) {
|
||||
mg_snprintf(buf, sizeof(buf), "%s", id.buf);
|
||||
free((void *) id.buf);
|
||||
}
|
||||
#endif
|
||||
|
||||
if (buf[0] == '\0') mg_snprintf(buf, sizeof(buf), "%s", "MyDeviceID");
|
||||
|
||||
buf[sizeof(buf) - 1] = '\0';
|
||||
g_device_id = strdup(buf);
|
||||
}
|
||||
|
||||
static size_t print_shorts(void (*out)(char, void *), void *ptr, va_list *ap) {
|
||||
uint16_t *array = va_arg(*ap, uint16_t *);
|
||||
int i, len = 0, num_elems = va_arg(*ap, int);
|
||||
for (i = 0; i < num_elems; i++) {
|
||||
len += mg_xprintf(out, ptr, "%s%hu", i ? "," : "", array[i]);
|
||||
}
|
||||
return len;
|
||||
}
|
||||
|
||||
static size_t print_bools(void (*out)(char, void *), void *ptr, va_list *ap) {
|
||||
bool *array = va_arg(*ap, bool *);
|
||||
int i, len = 0, num_elems = va_arg(*ap, int);
|
||||
for (i = 0; i < num_elems; i++) {
|
||||
len += mg_xprintf(out, ptr, "%s%d", i ? "," : "", array[i]);
|
||||
}
|
||||
return len;
|
||||
}
|
||||
|
||||
static void publish_status(struct mg_connection *c) {
|
||||
char topic[100];
|
||||
struct mg_mqtt_opts pub_opts;
|
||||
struct mg_iobuf io = {0, 0, 0, 512};
|
||||
|
||||
// Print JSON notification into the io buffer
|
||||
mg_xprintf(mg_pfn_iobuf, &io,
|
||||
"{%m:%m,%m:{%m:%m,%m:%d,%m:%d,%m:[%M],%m:[%M]}}", //
|
||||
MG_ESC("method"), MG_ESC("status.notify"), MG_ESC("params"), //
|
||||
MG_ESC("status"), MG_ESC("online"), //
|
||||
MG_ESC(("log_level")), s_device_config.log_level, //
|
||||
MG_ESC(("pin_count")), s_device_config.pin_count, //
|
||||
MG_ESC(("pin_map")), print_shorts, s_device_config.pin_map,
|
||||
s_device_config.pin_count, //
|
||||
MG_ESC(("pin_state")), print_bools, s_device_config.pin_state,
|
||||
s_device_config.pin_count);
|
||||
|
||||
memset(&pub_opts, 0, sizeof(pub_opts));
|
||||
mg_snprintf(topic, sizeof(topic), "%s/%s/status", g_root_topic, g_device_id);
|
||||
pub_opts.topic = mg_str(topic);
|
||||
pub_opts.message = mg_str_n((char *) io.buf, io.len);
|
||||
pub_opts.qos = s_qos;
|
||||
pub_opts.retain = true;
|
||||
mg_mqtt_pub(c, &pub_opts);
|
||||
mg_iobuf_free(&io);
|
||||
}
|
||||
|
||||
static void publish_response(struct mg_connection *c, char *buf, size_t len) {
|
||||
struct mg_mqtt_opts pub_opts;
|
||||
char topic[100];
|
||||
mg_snprintf(topic, sizeof(topic), "%s/%s/tx", g_root_topic, g_device_id);
|
||||
memset(&pub_opts, 0, sizeof(pub_opts));
|
||||
pub_opts.topic = mg_str(topic);
|
||||
pub_opts.message = mg_str_n(buf, len);
|
||||
pub_opts.qos = s_qos;
|
||||
mg_mqtt_pub(c, &pub_opts);
|
||||
}
|
||||
|
||||
static void subscribe(struct mg_connection *c) {
|
||||
char *rx_topic = mg_mprintf("%s/%s/rx", g_root_topic, g_device_id);
|
||||
struct mg_str subt = mg_str(rx_topic);
|
||||
struct mg_mqtt_opts sub_opts;
|
||||
memset(&sub_opts, 0, sizeof(sub_opts));
|
||||
sub_opts.topic = subt;
|
||||
sub_opts.qos = s_qos;
|
||||
mg_mqtt_sub(c, &sub_opts);
|
||||
MG_INFO(("%lu SUBSCRIBED to %.*s", c->id, (int) subt.len, subt.buf));
|
||||
free(rx_topic);
|
||||
}
|
||||
|
||||
static void rpc_config_set(struct mg_rpc_req *r) {
|
||||
struct device_config dc = s_device_config;
|
||||
dc.pin_count = (int) mg_json_get_long(r->frame, "$.params.pin_count", -1);
|
||||
dc.log_level = (int) mg_json_get_long(r->frame, "$.params.log_level", -1);
|
||||
|
||||
if (dc.log_level < 0 || dc.log_level > MG_LL_VERBOSE) {
|
||||
mg_rpc_err(r, -32602, "Log level must be from 0 to 4");
|
||||
} else if (dc.pin_count <= 0 || dc.pin_count > MAX_PINS) {
|
||||
mg_rpc_err(r, -32602, "Pin count must be from 1 to %d", MAX_PINS);
|
||||
} else {
|
||||
int i, val;
|
||||
for (i = 0; i < dc.pin_count; i++) {
|
||||
char path[50];
|
||||
mg_snprintf(path, sizeof(path), "$.params.pin_map[%d]", i);
|
||||
dc.pin_map[i] = (uint16_t) mg_json_get_long(r->frame, path, 0);
|
||||
mg_snprintf(path, sizeof(path), "$.params.pin_state[%d]", i);
|
||||
if ((val = (int) mg_json_get_long(r->frame, path, -1)) >= 0) {
|
||||
gpio_write(dc.pin_map[i], val);
|
||||
}
|
||||
dc.pin_state[i] = gpio_read(dc.pin_map[i]);
|
||||
// MG_INFO(("%d %d %d", i, dc.pin_map[i], dc.pin_state[i]));
|
||||
}
|
||||
mg_log_set(dc.log_level);
|
||||
s_device_config = dc;
|
||||
mg_rpc_ok(r, "true");
|
||||
}
|
||||
}
|
||||
|
||||
static void rpc_ota_upload(struct mg_rpc_req *r) {
|
||||
long ofs = mg_json_get_long(r->frame, "$.params.offset", -1);
|
||||
long tot = mg_json_get_long(r->frame, "$.params.total", -1);
|
||||
int len = 0;
|
||||
char *buf = mg_json_get_b64(r->frame, "$.params.chunk", &len);
|
||||
if (buf == NULL) {
|
||||
mg_rpc_err(r, 1, "Error processing the binary chunk.");
|
||||
} else {
|
||||
if (ofs < 0 || tot < 0) {
|
||||
mg_rpc_err(r, 1, "offset and total not set");
|
||||
} else if (ofs == 0 && mg_ota_begin((size_t) tot) == false) {
|
||||
mg_rpc_err(r, 1, "mg_ota_begin(%ld) failed\n", tot);
|
||||
} else if (len > 0 && mg_ota_write(buf, len) == false) {
|
||||
mg_rpc_err(r, 1, "mg_ota_write(%lu) @%ld failed\n", len, ofs);
|
||||
mg_ota_end();
|
||||
} else if (len == 0 && mg_ota_end() == false) {
|
||||
mg_rpc_err(r, 1, "mg_ota_end() failed\n", tot);
|
||||
} else {
|
||||
mg_rpc_ok(r, "%m", MG_ESC("ok"));
|
||||
}
|
||||
free(buf);
|
||||
}
|
||||
}
|
||||
|
||||
static void fn(struct mg_connection *c, int ev, void *ev_data) {
|
||||
if (ev == MG_EV_OPEN) {
|
||||
MG_INFO(("%lu CREATED", c->id));
|
||||
// c->is_hexdumping = 1;
|
||||
} else if (ev == MG_EV_CONNECT) {
|
||||
MG_INFO(("Device %s is connected", g_device_id));
|
||||
} else if (ev == MG_EV_ERROR) {
|
||||
// On error, log error message
|
||||
MG_ERROR(("%lu ERROR %s", c->id, (char *) ev_data));
|
||||
} else if (ev == MG_EV_MQTT_OPEN) {
|
||||
// MQTT connect is successful
|
||||
MG_INFO(("%lu CONNECTED to %s", c->id, g_mqtt_server_url));
|
||||
subscribe(c);
|
||||
publish_status(c);
|
||||
} else if (ev == MG_EV_MQTT_MSG) {
|
||||
// When we get echo response, print it
|
||||
struct mg_mqtt_message *mm = (struct mg_mqtt_message *) ev_data;
|
||||
struct mg_iobuf io = {0, 0, 0, 512};
|
||||
struct mg_rpc_req r = {&s_rpc, NULL, mg_pfn_iobuf,
|
||||
&io, NULL, {mm->data.buf, mm->data.len}};
|
||||
size_t clipped_len = mm->data.len > 512 ? 512 : mm->data.len;
|
||||
MG_INFO(("%lu RECEIVED %.*s <- %.*s", c->id, clipped_len, mm->data.buf,
|
||||
mm->topic.len, mm->topic.buf));
|
||||
mg_rpc_process(&r);
|
||||
if (io.buf) {
|
||||
publish_response(c, (char *) io.buf, io.len);
|
||||
publish_status(c);
|
||||
}
|
||||
mg_iobuf_free(&io);
|
||||
} else if (ev == MG_EV_CLOSE) {
|
||||
MG_INFO(("%lu CLOSED", c->id));
|
||||
s_conn = NULL; // Mark that we're closed
|
||||
}
|
||||
}
|
||||
|
||||
// Timer function - recreate client connection if it is closed
|
||||
static void timer_reconnect(void *arg) {
|
||||
struct mg_mgr *mgr = (struct mg_mgr *) arg;
|
||||
if (s_conn == NULL) {
|
||||
struct mg_mqtt_opts opts;
|
||||
char topic[100], message[100];
|
||||
mg_snprintf(topic, sizeof(topic), "%s/%s/status", g_root_topic,
|
||||
g_device_id);
|
||||
mg_snprintf(message, sizeof(message), "{%m:%m,%m:{%m:%m}}",
|
||||
MG_ESC("method"), MG_ESC("status.notify"), MG_ESC("params"),
|
||||
MG_ESC("status"), MG_ESC("offline"));
|
||||
memset(&opts, 0, sizeof(opts));
|
||||
opts.clean = true;
|
||||
opts.qos = s_qos;
|
||||
opts.topic = mg_str(topic);
|
||||
opts.version = 4;
|
||||
opts.keepalive = MQTT_KEEPALIVE_SEC;
|
||||
opts.retain = true;
|
||||
opts.message = mg_str(message);
|
||||
s_conn = mg_mqtt_connect(mgr, g_mqtt_server_url, &opts, fn, NULL);
|
||||
}
|
||||
}
|
||||
|
||||
static void timer_ping(void *arg) {
|
||||
mg_mqtt_send_header(s_conn, MQTT_CMD_PINGREQ, 0, 0);
|
||||
(void) arg;
|
||||
}
|
||||
|
||||
static void timer_sntp(void *param) { // SNTP timer function. Sync up time
|
||||
static uint64_t hourly_timer = 0;
|
||||
uint64_t t1 = mg_now(), t2 = mg_millis();
|
||||
if (t1 < t2 + 3600 || mg_timer_expired(&hourly_timer, 3600000, t2)) {
|
||||
mg_sntp_connect(param, "udp://time.google.com:123", NULL, NULL);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
void web_init(struct mg_mgr *mgr) {
|
||||
int i, ping_interval_ms = MQTT_KEEPALIVE_SEC * 1000 - 500;
|
||||
set_device_id();
|
||||
s_device_config.log_level = (int) mg_log_level;
|
||||
s_device_config.pin_count = 5;
|
||||
s_device_config.pin_map[0] = 10;
|
||||
s_device_config.pin_map[1] = 11;
|
||||
s_device_config.pin_map[2] = 12;
|
||||
s_device_config.pin_map[3] = 13;
|
||||
s_device_config.pin_map[4] = 25;
|
||||
for (i = 0; i < s_device_config.pin_count; i++) {
|
||||
s_device_config.pin_state[i] = gpio_read(s_device_config.pin_map[i]);
|
||||
}
|
||||
|
||||
// Configure JSON-RPC functions we're going to handle
|
||||
mg_rpc_add(&s_rpc, mg_str("config.set"), rpc_config_set, NULL);
|
||||
mg_rpc_add(&s_rpc, mg_str("ota.upload"), rpc_ota_upload, NULL);
|
||||
|
||||
mg_timer_add(mgr, 3000, MG_TIMER_REPEAT | MG_TIMER_RUN_NOW, timer_reconnect,
|
||||
mgr);
|
||||
mg_timer_add(mgr, ping_interval_ms, MG_TIMER_REPEAT, timer_ping, mgr);
|
||||
mg_timer_add(mgr, 2000, MG_TIMER_REPEAT, timer_sntp, mgr);
|
||||
}
|
||||
|
||||
void web_free(void) {
|
||||
mg_rpc_del(&s_rpc, NULL); // Deallocate RPC handlers
|
||||
free(g_device_id);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
// Copyright (c) 2023 Cesanta Software Limited
|
||||
// All rights reserved
|
||||
#pragma once
|
||||
|
||||
#include "mongoose.h"
|
||||
#include "hal.h"
|
||||
|
||||
#ifdef __cplusplus
|
||||
extern "C" {
|
||||
#endif
|
||||
|
||||
#define MQTT_DASHBOARD 1
|
||||
#define MQTT_KEEPALIVE_SEC 60
|
||||
#define MQTT_SERVER_URL "mqtt://broker.hivemq.com:1883"
|
||||
#define MQTT_ROOT_TOPIC "mg_mqtt_dashboard"
|
||||
|
||||
extern char *g_mqtt_server_url;
|
||||
extern char *g_device_id;
|
||||
extern char *g_root_topic;
|
||||
|
||||
void web_init(struct mg_mgr *mgr);
|
||||
void web_free(void);
|
||||
|
||||
#ifdef __cplusplus
|
||||
}
|
||||
#endif
|
||||
Reference in new issue
Block a user