IOT123 - ASSIMILAZIONE HUB SENSORE: COMPONENTI WEB ICOS10 CORS: 8 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-31 10:21

Gli slave ASSIMILA SENSOR/ACTOR incorporano i metadati utilizzati per le visualizzazioni di definizione in Crouton. Questa build è leggermente diversa dalle precedenti; non ci sono modifiche hardware. Il firmware ora supporta l'hosting di editor personalizzati (più ricchi) che possono essere integrati nell'ultima build di AssimilateCrouton. In questo articolo verrà data maggiore attenzione alla spiegazione del firmware e della dashboard MQTT.

Uno dei vantaggi di servire WebComponents dal dispositivo che controllano, è che il controllo più avanzato del dispositivo è limitato alla rete a cui è connesso il dispositivo: il tuo punto di accesso WiFi. Anche se una volta utilizzato un server MQTT con autenticazione c'è una somiglianza di protezione, sulle reti pubbliche se lasci momentaneamente il tuo browser (sito web AssimilateCrouton) qualcuno potrebbe entrare e controllare i tuoi dispositivi di automazione. Questa funzione CORS WebComponent consente di visualizzare pubblicamente solo le letture (temperatura, livelli di luce, umidità) e le funzioni di comando (accensione/spegnimento, programmazione) disponibili solo dalla rete del dispositivo.

Sul dispositivo, sono ancora supportate tutte le funzionalità del server web con autenticazione e hosting in SPIFFS, ma è stata prestata particolare attenzione al supporto CORS (Cross Origin Resource Sharing) per Polymer WebComponents (Crouton utilizza Polymer 1.4.0).

In AssimilateCrouton (il fork di Crouton utilizzato per Assimilate IOT Network) le modifiche includono

• supporto per una scheda Dispositivo (assim-device) che tra l'altro mostra e nasconde, per un utente, singole schede per un dispositivo
• proprietà info su tutte le carte che mostra un brindisi di informazioni contestuali utili per una carta
• supporto per i componenti web CORS, in questo caso ospitati sul server web del dispositivo (ESP8266).

Fase 1: CROSTINO

Croutoni è una dashboard che ti consente di visualizzare e controllare i tuoi dispositivi IOT con una configurazione minima. In sostanza, è la dashboard più semplice da configurare per qualsiasi appassionato di hardware IOT utilizzando solo MQTT e JSON.

Gli ASSIMILATE SLAVES (sensori e attori) hanno metadati e proprietà incorporati che il master usa per costruire il pacchetto json deviceInfo che Crouton usa per costruire il dashboard. L'intermediario tra ASSIMILATE NODES e Crouton è un broker MQTT compatibile con i websockets: Mosquito viene utilizzato per la demo.

Quando ASSIMILATE MASTER richiede proprietà, formatta i valori di risposta nel formato richiesto per gli aggiornamenti di Crostino. Il fork AssimilateCrouton aggiunge alcune funzionalità che ti consentono di decentralizzare le regole aziendali che eseguono il tuo dispositivo, ad esempio il dispositivo IOT non ha bisogno di regole aziendali integrate, è solo una pipeline per la comunicazione MQTT/I2C con gli attori e i sensori slave più intelligenti (controllati da ATTINY)..

Passaggio 2: ASSIMILA CROSTINO

MODIFICHE AL CROUTON

Le modifiche rispetto alla versione fork includono:

• se un endpoint ha una proprietà path definita, il WebComponent per la scheda eseguirà un HTMLImport per una risorsa CORS (il server web su ESP8266 in questa build).
• si fa riferimento a qualsiasi risorsa a monte da (dipendenze di) un WebComponent CORS come se fosse servita dal sito Web Crouton; quando non riescono a caricare un gestore di eccezioni, modifica i percorsi e carica se dal sito Web.
• in alto a destra viene visualizzata l'ora locale corrente, utile per la verifica della pianificazione.

DIPENDENZE DA POLIMERI E CORS

Le foglie di un albero delle dipendenze Polymer possono essere ospitate in CORS. Poiché le dipendenze root possono essere utilizzate più volte in un'app, non possono essere referenziate da 2 posizioni (il sito Web e il dispositivo) perché Polymer Module Loader le tratta come 2 risorse separate e più errori di registrazione si verificano rapidamente in un'applicazione.

Per questo motivo il WebComponent per una scheda (file HTML in 1.4.0) e il file CSS associato sono gli unici file ospitati sul dispositivo. Si fa riferimento alle altre dipendenze come se il WebComponent fosse ospitato nella cartella "html" sul sito Web di origine, il che semplifica lo sviluppo dei WebComponent da quella cartella fino al momento del caricamento su SPIFFS su ESP8266. AssimilateCrouton risolverà come ottenere i file corretti.

DISTRIBUZIONE

edfungus creatore del Crouton originale ha scritto la fonte in Pug/Less e aveva una toolchain NPM/Grunt. Ho reso il Pug/Less come HTML/css e ho appena modificato/distribuito i file renderizzati. Questo ha rotto la toolchain NPM/Grunt. La risoluzione di questo problema è trattata nella sezione FUTURO.

Puoi testare la dashboard localmente sul tuo DEV box:

• Dalla riga di comando nella cartella principale
• npm inizio
• il server lite viene attivato per

Distribuisci su un server web statico:

• copia tutte le cartelle tranne node_modules
• copia index.html (e possibilmente web.config)

FUTURO

Uno degli obiettivi principali è l'aggiornamento a Polymer3 e il lavoro dalla CLI Polymer. L'aggiunta di editor avanzati e framework per gli sviluppatori IOT per sviluppare i propri è una priorità assoluta. Alla fine il sistema automatizzato avanzato verrà eseguito totalmente da client MQTT indipendenti come AssimilateCrouton.

Un esempio del pacchetto deviceInfo utilizzato per AssimilateCrouton:

{

"Informazioni sul dispositivo": {

"endPoint": {

"CC_device": {

"device_name": "ash_mezz_A3",

"card-type": "assim-device",

"ssid": "Coreline_2",

"ip_addr": "192.168.8.104",

"endpoint": [

{

"titolo": "Fai crescere le luci",

"card-type": "crouton-simple-toggle",

"endpoint": "switch"

},

{

"title": "Luci per fioriera",

"card-type": "crouton-assim-weekview",

"endpoint": "CC_switch"

}

]

},

"CC_switch": {

"card-type": "assim-weekview",

"info": "Accendi o spegni le luci in fasce orarie di 15 minuti",

"percorso": "https://192.168.8.104/cors",

"title": "Luci per fioriera",

"interval_mins": 15,

"valori": {

"valore": ""

}

},

"interruttore": {

"titolo": "Fai crescere le luci",

"card-type": "crouton-simple-toggle",

"info": "Accendi o spegni le luci ad hoc",

"etichette": {

"falso": "OFF",

"vero": "ON"

},

"icone": {

"falso": "sole-o",

"vero": "sole-o"

},

"valori": {

"valore": 0

}

}

},

"stato": "buono",

"nome": "ash_mezz_A3",

"descrizione": "Ufficio presso Ashmore, Soppalco, Area A2",

"colore": "#4D90FE"

}

}

visualizza rawdeviceInfo.json ospitato con ❤ da GitHub

Passaggio 3: ASSEMBLAGGIO DEL DISPOSITIVO

Poiché non ci sono modifiche hardware, ecco i collegamenti alle informazioni pertinenti:

• Assemblaggio del guscio
• Materiali e strumenti
• Preparazione MCU
• Preparazione dell'alloggiamento MCU
• Costruire la scheda figlia dell'interruttore low-side/RESET degli slave
• Assemblaggio dei componenti principali

Passaggio 4: FIRMWARE

PRINCIPALI CAMBIAMENTI DI QUESTA COSTRUZIONE

Affinché l'applicazione AssimilateCrouton sia in grado di utilizzare le risorse CORS dal dispositivo, le intestazioni di risposta devono essere configurate in un modo particolare. Questo è stato implementato in questa versione del firmware (static_server.ino => server_file_read()).

Anche il grafico principale delle dipendenze per Polymer doveva essere da un'unica origine. È stata utilizzata una strategia per aggiungere un gestore di errori (corsLinkOnError) ai file SPIFFS CORS per ricaricare le risorse dal sito Web AssimilateCrouton quando non vengono trovate sul dispositivo.

Sono state aggiunte 2 nuove convenzioni al filesystem SPIFFS per la personalizzazione degli endpoint creati in deviceInfo, che AssimilateCrouton utilizza per creare le schede dashboard:

• /config/user_card_base.json Definizione dell'endpoint con le variabili di runtime scambiate per prime:,,. Questo è in genere il punto in cui verrà aggiunta la scheda del dispositivo asim. Questo non comunica con il dispositivo.
• /config/user_card_#.json Definizione dell'endpoint con le variabili di runtime scambiate per prime:,,. Questo è in genere il punto in cui i ricchi editor come la scheda asim-weekview verranno aggiunti collegati allo slave I2C (attore/sensore) che si riferisce a #.

IL DISEGNO/LE BIBLIOTECHE

In questa fase il progetto è stato impacchettato come esempio per la libreria Arduino AssimilateBus. Questo serve principalmente a rendere tutti i file necessari di facile accesso dall'IDE di Arduino. I principali artefatti del codice sono:

• mqtt_crouton_esp8266_cors_webcomponents.ino - il punto di ingresso principale.
• assimilate_bus.h/assimilate_bus.cpp - la libreria che gestisce la comunicazione I2C con gli Slave Sensor/Actors
• VizJson.h/VizJson.cpp: la libreria che formatta/crea qualsiasi JSON pubblicato tramite MQTT
• config.h/config.cpp - la libreria che legge/boxes/scrive file di configurazione su SPIFFS
• static_i2c_callbacks.ino - i callback I2C per una proprietà in fase di ricezione e il ciclo di richieste degli slave completato static_mqtt.ino - le funzioni MQTT
• static_server.ino - le funzioni del server web
• static_utility.ino - funzioni di supporto

Le funzioni INO statiche sono state utilizzate (invece delle librerie) per una serie di motivi, ma principalmente in modo che le funzioni Webserver e MQTT potessero funzionare bene insieme.

LE RISORSE SPIFFS

Spiegazioni dettagliate dei file SPIFFS possono essere trovate qui.

• favicon.ico - risorsa utilizzata da Ace Editor

• config

  • device.json - la configurazione per il dispositivo (Wifi, MQTT…)
  • slave_metas_#.json - generato in fase di runtime per ogni numero di indirizzo slave (#)
  • user_card_#.json - endpoint personalizzato da integrare in deviceInfo per ogni numero di indirizzo slave (#)
  • user_card_base.json - endpoint personalizzato da integrare in deviceInfo per il dispositivo
  • user_meta_#.json - i metadati personalizzati sovrascrivono quelli degli slave per ogni numero di indirizzo slave (#)
  • user_props.json - nomi di proprietà personalizzati per sovrascrivere quelli nei metadati degli slave

• corso

  • card-webcomponent.css - foglio di stile per varie carte personalizzate
  • card-webcomponent.html - componente web per varie carte personalizzate

• editore

  • assimilate-logo-p.webp" />
  • edit.htm.gz - gzip di Ace Editor HTML
  • edit.htm.src - HTML originale dell'Ace Editor
  • favicon-32x32-p.webp" />

CARICAMENTO DEL FIRMWARE

• Il repository del codice può essere trovato qui (istantanea).
• Uno ZIP della biblioteca può essere trovato qui (istantanea).
• Istruzioni per "Importare una libreria ZIP" qui.
• Una volta installata la libreria è possibile aprire l'esempio "mqtt_crouton_esp8266_cors_webcomponents".
• Istruzioni per configurare Arduino per Wemos D1 Mini qui.
• Dipendenze: ArduinoJson, TimeLib, PubSubClient, NeoTimer (vedere gli allegati se si verificano modifiche ai repository).

CARICA SU SPIFFS

Una volta che il codice è stato caricato nell'IDE Arduino, apri device.json nella cartella data/config:

• Modifica il valore di wifi_ssid con il tuo SSID WiFi.
• Modifica il valore di wifi_key con la tua chiave WiFi.
• Modifica il valore di mqtt_device_name con il tuo Device Identification preferito (nessuna unione necessaria).
• Modifica il valore di mqtt_device_description con la tua Device Description preferita (in Crostino).
• Salva device.json.
• Carica i file di dati su SPIFFS.

Il punto di ingresso principale per l'esempio AssimilateBus:

/*

*

*LE REGOLE COMMERCIALI PER IL TUO DISPOSITIVO DEVONO ESSERE CONTROLLATE TRAMITE MQTT, NON INTEGRALE IN QUESTO FIRMWARE

*

* Altro che setup e loop in questo file

* le parti mobili importanti sono

* on_bus_received e on_bus_complete in static_i2c_callbacks.ino

* e

* mqtt_publish e mqtt_callback in static_mqtt.ino

*

*/

#include"tipi.h"

#include"VizJson.h"

#include"assimilate_bus.h"

#include"debug.h"

#include"config.h"

#includere

#includere // imposta MQTT_MAX_PACKET_SIZE su ~3000 (o le tue esigenze per deviceInfo json)

#includere

#includere

#includere

#includere

#includere

//------------------------------------------------DICHIARAZIONI DI MEMORIA

//------------------------------------------------ -- definisce

#defineDBG_OUTPUT_FLAG2//0, 1, 2 MINIMO, RILASCIO, PIENO

#define_mqtt_pub_topic"outbox"// CONVENZIONI CROUTON

#define_mqtt_sub_topic"posta in arrivo"

//------------------------------------------------ -- oggetti di classe

Debug _debug(DBG_OUTPUT_FLAG);

AssimilateBus _assimilate_bus;

VizJson _viz_json;

Configurazione _config_data;

WiFiClient _esp_client;

PubSubClient _client(_esp_client);

WiFiUDP Udp;

ESP8266WebServer _server(80);

Neotimer _timer_property_request = Neotimer(5000);

//------------------------------------------------ -- strutture dati / variabile

RuntimeDeviceData _runtime_device_data;

PropertyDto _dto_props[50]; // max 10 slave x max 5 proprietà

//------------------------------------------------ -- flusso di controllo

volatilebool _sent_device_info = falso;

byte _dto_props_index = 0;

bool _fatal_error = falso;

//---------------------------------DICHIARAZIONI SULL'AMBITO DELLA FUNZIONE

//------------------------------------------------ -- static_i2c_callbacks.ino

voidon_bus_received(byte slave_address, byte prop_index, ruolo ruolo, char name[16], char value[16]);

voidon_bus_complete();

//------------------------------------------------ -- static_mqtt.ino

voidmqtt_callback(char* argomento, byte* payload, lunghezza unsignedint);

voidmqtt_loop();

int8_tmqtt_get_topic_index(char* argomento);

voidmqtt_init(constchar* wifi_ssid, constchar* wifi_password, constchar* mqtt_broker, int mqtt_port);

voidmqtt_create_subscriptions();

voidmqtt_publish(char *root_topic, char *deviceName, char *endpoint, constchar *payload);

boolmqtt_ensure_connect();

voidmqtt_subscribe(char *root_topic, char *deviceName, char *endpoint);

voidi2c_set_and_get(indirizzo byte, codice byte, constchar *param);

//------------------------------------------------ -- static_server.ino

String server_content_type_get (stringa nome file);

boolserver_path_in_auth_exclusion(Stringa percorso);

boolserver_auth_read(Stringa percorso);

boolserver_file_read(Stringa percorso);

voidserver_file_upload();

voidserver_file_delete();

voidserver_file_create();

voidserver_file_list();

voidserver_init();

voidtime_services_init(char *ntp_server_name, byte time_zone);

time_tget_ntp_time();

voidsend_ntp_packet(IPAddress &address);

char *time_stamp_get();

//------------------------------------------------ -- static_utility.ino

String spiffs_file_list_build(Stringa percorso);

voidreport_deserialize_error();

voidreport_spiffs_error();

boolcheck_fatal_error();

boolget_json_card_type(byte slave_address, byte prop_index, char *card_type);

boolget_struct_card_type(byte slave_address, byte prop_index, char *card_type);

boolget_json_is_series(byte slave_address, byte prop_index);

voidstr_replace(char *src, constchar *oldchars, char *newchars);

byte get_prop_dto_idx(byte slave_address, byte prop_index);

//---------------------------------PRINCIPALE

voidsetup(){

DBG_OUTPUT_PORT.begin(115200);

SetupDeviceData device_data;

Serial.println(); Serial.println(); // margine per la spazzatura della console

ritardo (5000);

if (DBG_OUTPUT_FLAG == 2)DBG_OUTPUT_PORT.setDebugOutput(true);

_debug.out_fla(F("setup"), true, 2);

// ottiene la configurazione richiesta

if (SPIFFS.begin()){

_debug.out_str(spiffs_file_list_build("/"), true, 2);

if (!_config_data.get_device_data(device_data, _runtime_device_data)){

report_deserialize_error();

Restituzione;

}

}altro{

report_spiffs_error();

Restituzione;

}

// usa il valore del timer impostato in device.json

_timer_property_request.set(device_data.sensor_interval);

mqtt_init(device_data.wifi_ssid, device_data.wifi_key, device_data.mqtt_broker, device_data.mqtt_port);

time_services_init(device_data.ntp_server_name, device_data.time_zone);

server_init();

// avvia la raccolta dei metadati

_assimilate_bus.get_metadata();

_assimilate_bus.print_metadata_details();

mqtt_ensure_connect();

// necessita della proprietà del sensore (nomi) per completare la raccolta dei metadati

_assimilate_bus.get_properties(on_bus_received, on_bus_complete);

_timer_property_request.reset(); // può trascorrere un tempo notevole fino a questo punto, quindi ricomincia da capo

}

voidloop(){

if (!check_fatal_error()) return;

mqtt_loop();

_server.handleClient();

if(_timer_property_request.repeat()){

_assimilate_bus.get_properties(on_bus_received, on_bus_complete);

}

}

visualizza rawmqtt_crouton_esp8266_cors_webcomponents.ino ospitato con ❤ da GitHub

Passaggio 5: SCHEDA DEL DISPOSITIVO

La scheda del dispositivo (card-type:asim-device) è ospitata sul sito Web e non è necessario servirla dal dispositivo (CORS).

La sua pagina predefinita elenca:

• Gli argomenti MQTT per leggere e scrivere sul dispositivo
• L'Access Point a cui è connesso il dispositivo
• Un collegamento all'editor di file SPIFFS ospitato sul dispositivo utilizzando ACE EDITOR
• Un'icona a forma di occhio che rivela la pagina Mostra/Nascondi carta.

La pagina Mostra/Nascondi scheda elenca:

• Ogni carta come elemento separato
• Carattere blu in grassetto durante la visualizzazione
• Carattere normale nero quando nascosto
• Un'icona raffigurante il tipo di carta.

La carta può essere nascosta facendo clic sul pulsante Nascondi sulle carte o facendo clic su un elemento con caratteri in grassetto blu nell'elenco. Le carte possono essere mostrate facendo clic su un elemento con carattere nero-normale nell'elenco.

Debolmente correlato a questa funzione sono i brindisi informativi. Se a uno qualsiasi degli endpoint in deviceInfo è assegnata una proprietà info, verrà mostrato un pulsante info accanto al pulsante nascondi sulla scheda. Quando si fa clic, le informazioni contestuali definite nell'endpoint verranno "tostate" nella finestra.

Se la scheda del dispositivo non è definita, i pulsanti nascondi non verranno visualizzati sulle schede. Questo perché una volta nascosti non c'è modo di mostrarli di nuovo.

Vedere PERSONALIZZAZIONE ENDPOINT per i dettagli su come è possibile aggiungere la scheda del dispositivo assim tramite i file SPIFFS su ESP8266.

AssimilateCrouton WebComponent

segnali-ferro>

div>

MOSTRA NASCONDI ICONA

io>span>

MODULO DISPOSITIVO

ARGOMENTI MQTTdiv>

/outbox/{{endPointJson.device_name}}/*div>

/inbox/{{endPointJson.device_name}}/*div>

WIFI SSIDdiv>

{{endPointJson.ssid}}div>

INDIRIZZO IPdiv>

{{endPointJson.ip_addr}}a>div>

div>

MOSTRA NASCONDI ELENCO

elemento> [item.title]paper-item>

modello>

paper-listbox>

div>

scheda-crostino>

modello>

modulo-dom>

visualizza rawassim-device.html ospitato con ❤ da GitHub

Passaggio 6: SCHEDA VISUALIZZAZIONE SETTIMANALE

La scheda Weekview (card-type:assim-weekview) è ospitata sul dispositivo (cartella cors). Viene iniettato nel pacchetto deviceInfo pubblicato per AssimilateCrouton, aggiungendo un file config/user_card_#.json a SPIFFS (in questo caso user_card_9.json).

PANORAMICA

I giorni della settimana sono presentati come elenchi di fasce orarie. La granularità dell'intervallo di tempo è impostata con la proprietà "interval_mins" in config/user_card_#.json. Deve essere una frazione di un'ora o multipli di un'ora, ad es. 10, 15, 20, 30, 60, 120, 360. Facendo clic su un intervallo di tempo assicurarsi che sia comandato uno stato di attivazione per il dispositivo associato in quel momento. Se la fascia oraria è adesso, un comando viene inviato (pubblicato) immediatamente per il dispositivo. Normalmente lo stato viene verificato/pubblicato ogni minuto. Le selezioni vengono salvate in LocalStorage, quindi i tempi verranno ricaricati con un aggiornamento del browser.

CASI D'USO

Nel suo stato attuale, la vista settimanale è adatta per i dispositivi che possono utilizzare un interruttore a levetta per visualizzare il loro stato, ovvero sono accesi o spenti e dopo essere stati impostati rimangono in quello stato. Luci, ventilatori e scaldabagni sono buoni candidati.

LIMITAZIONI/AVVERTENZE

• L'intervallo_min deve essere uno dei valori menzionati sopra
• La vista settimanale non supporta le azioni momentanee che sono anche pianificate, come l'attivazione breve di un tocco (5 secondi) due volte al giorno.

FUTURO

• Si prevede che saranno supportate azioni momentanee.
• È in corso l'archiviazione sincronizzata tra i dispositivi per le selezioni di pianificazione.

Passaggio 7: PERSONALIZZAZIONE DELL'ENDPOINT

Come menzionato brevemente in FIRMWARE, ci sono 2 nuove convenzioni aggiunte al filesystem SPIFFS per personalizzare gli endpoint. I file JSON sono frammenti che vengono aggiunti alla proprietà degli endpoint nel pacchetto deviceInfo pubblicato nel broker MQTT che diventa la definizione del dashboard.

Le chiavi degli endpoint sono generate nel firmware:

• CC_device (scheda personalizzata) per user_card_base.json
• CC_SLAVE_ENDPOINT NAME per la user_card_#.json (# è l'indirizzo dello slave)

Come accennato in precedenza, ci sono variabili che vengono sostituite ai valori in fase di esecuzione:

• mqtt_device_name
• wifi_ssid
• local_ip

user_card_base.json

Un esempio:

{ "device_name": "", "card-type": "assim-device", "ssid": "", "ip_addr": "", "endpoints": [{ "title": "Grow Lights", " card-type": "crouton-simple-toggle", "endpoint": "switch" }, { "title": "Luci della fioriera", "card-type": "crouton-assim-weekview", "endpoint": "CC_switch" }] }

user_card_#.json

Un esempio:

{ "card-type": "assim-weekview", "path": "https:///cors", "title": "Planter Lights", "info": "Accendi o spegni le luci in 15 minuti slot", "interval_mins": 15, "values": { "value": "" } }

Passaggio 8: VIDEO