IOT123 - ASIMILAȚI CUBUL SENZORULUI: ICOS10 CORS WEBCOMPONENTS: 8 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-31 10:24

ASSIMILATE SENSOR / ACTOR Slaves încorporează metadate care sunt utilizate pentru vizualizările definitorii în Crouton. Această construcție este ușor diferită de cele anterioare; nu există modificări hardware. Firmware-ul acceptă acum găzduirea unor editoare personalizate (mai bogate) care pot fi integrate în cea mai recentă versiune a AssimilateCrouton. În acest articol se va acorda mai multă atenție explicării firmware-ului și a tabloului de bord MQTT.

Unul dintre avantajele servirii WebComponents de pe dispozitivul pe care îl controlează este că controlul mai avansat al dispozitivului este limitat la rețeaua la care este conectat dispozitivul: punctul dvs. de acces WiFi. Deși, odată ce utilizați un server MQTT cu autentificare, există o asemănare de protecție, pe rețelele publice, dacă părăsiți Browser-ul dvs. momentan (site-ul AssimilateCrouton), cineva ar putea intra și controla dispozitivele dvs. de automatizare. Această caracteristică CORS WebComponent face posibilă afișarea publică a citirilor (temp, niveluri de lumină, umiditate) și funcții de comandă (pornire / oprire, programare) disponibile numai din rețeaua dispozitivului.

Pe dispozitiv, toate caracteristicile serverului web cu autentificare și găzduire în SPIFFS sunt încă acceptate, dar s-a acordat o atenție specială suportului CORS (Cross Origin Resource Sharing) pentru Polymer WebComponents (Crouton folosește Polymer 1.4.0).

În AssimilateCrouton (furculița Crouton utilizată pentru Rețeaua IOT Assimilate) modificările includ

• suport pentru un card de dispozitiv (assim-device) care, printre altele, afișează și ascunde, pentru un utilizator, carduri individuale pentru un dispozitiv
• proprietate info pe toate cardurile care arată un pâine de informații contextuale utile pentru un card
• suport pentru componentele web CORS, în acest caz găzduit pe serverul web de pe dispozitiv (ESP8266).

Pasul 1: CROUTON

Croutonis este un tablou de bord care vă permite să vizualizați și să controlați dispozitivele IOT cu o configurare minimă. În esență, este cel mai ușor tablou de bord de configurat pentru orice entuziast hardware IOT care utilizează doar MQTT și JSON.

ASSIMILATE SLAVES (senzori și actori) au încorporate metadate și proprietăți pe care masterul le folosește pentru a construi pachetul json deviceInfo pe care Crouton îl folosește pentru a construi tabloul de bord. Intermediarul între ASSIMILATE NODES și Crouton este un broker MQTT care este prietenos cu websockets-urile: Mosquito este folosit pentru demo.

Pe măsură ce ASSIMILATE MASTER solicită proprietăți, acesta formată valorile răspunsului în formatul necesar pentru actualizările Crouton. Furca AssimilateCrouton adaugă câteva caracteristici care vă permit să descentralizați regulile de afaceri care vă rulează dispozitivul, adică dispozitivul IOT nu are nevoie de reguli de afaceri încorporate, este doar o conductă pentru comunicarea MQTT / I2C către actorii și senzorii mai inteligenți (controlați ATTINY).

Pasul 2: ASIMILAȚI CROUTON

MODIFICĂRI LA CROUTON

Modificările de la versiunea cu furcă includ:

• dacă un punct final are o proprietate de cale definită, WebComponent pentru card va face un HTMLImport pentru o resursă CORS (serverul web de pe ESP8266 în această construcție).
• orice resurse din amonte de (dependențe de) o componentă Web CORS sunt menționate ca și cum ar fi servite de pe site-ul web Crouton; atunci când nu reușesc să încarce un handler de excepție, reorientează căile și se încarcă de pe site.
• o oră locală curentă este afișată în partea dreaptă sus, utilă pentru programarea verificării.

DEPENDENȚE POLIMERICE ȘI CORS

Frunzele unui arbore de dependență de polimeri pot fi găzduite în CORS. Deoarece dependențele rădăcină pot fi utilizate de mai multe ori într-o aplicație, acestea nu pot fi referite din 2 locații (site-ul web și dispozitivul), deoarece modulul de încărcare a polimerului le tratează ca 2 resurse separate și erori de înregistrare multiple aruncă rapid o aplicație.

Din acest motiv, WebComponent pentru un card (fișier HTML în 1.4.0) și fișierul CSS asociat sunt singurele fișiere găzduite pe dispozitiv. Celelalte dependențe sunt menționate ca și cum WebComponent este găzduit în folderul „html” de pe site-ul de origine, ceea ce face mai ușoară dezvoltarea WebComponents din acel folder până când este gata pentru încărcare în SPIFFS pe ESP8266. AssimilateCrouton va afla cum să obțineți fișierele corecte.

IMPLEMENTARE

edfungus creatorul originalului Crouton a scris sursa în Pug / Less și a avut un lanț de instrumente NPM / Grunt. Am redat Pug / Less ca HTML / css și tocmai am editat / distribuit fișierele redate. Acest lucru a rupt lanțul de instrumente NPM / Grunt. Remedierea acestui lucru este acoperită în secțiunea VIITOR.

Puteți testa tabloul de bord local pe caseta DEV:

• Din linia de comandă din folderul rădăcină
• npm start
• serverul lite este creat pentru https:// localhost: 10001

Implementați pe un server web static:

• copiați toate folderele, cu excepția node_modules
• copiați index.html (și, eventual, web.config)

VIITOR

Unul dintre principalele obiective este de a face upgrade la Polymer3 și de a lucra din Polymer CLI. Adăugarea de editori avansați și cadru pentru dezvoltatorii IOT pentru a-și dezvolta propriile lor este o prioritate ridicată. În cele din urmă, sistemul automat avansat va fi rulat în totalitate de la clienți MQTT detașați, cum ar fi AssimilateCrouton.

Un exemplu al pachetului DeviceInfo utilizat pentru AssimilateCrouton:

{

„deviceInfo”: {

„Puncte finale”: {

„CC_device”: {

"device_name": "ash_mezz_A3",

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

"ssid": "Corelines_2",

"ip_addr": "192.168.8.104",

„puncte finale”: [

{

"title": "Crește lumini",

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

"endpoint": "comutare"

},

{

"title": "Lumini de plantat",

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

"endpoint": "CC_switch"

}

]

},

„CC_switch”: {

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

"info": "Setați luminile aprinse sau stinse în intervale de timp de 15 minute",

„cale”: „https://192.168.8.104/cors”,

"title": "Lumini de plantat",

"interval_min": 15,

„valori”: {

"valoare": ""

}

},

"intrerupator": {

"title": "Crește lumini",

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

"info": "Aprindeți sau opriți luminile ad hoc",

„etichete”: {

"false": "OFF",

„adevărat”: „ACTIVAT”

},

„pictograme”: {

"false": "sun-o",

„adevărat”: „sun-o”

},

„valori”: {

„valoare”: 0

}

}

},

"status": "bun",

"nume": "ash_mezz_A3",

"description": "Birou la Ashmore, Mezanin, Zona A2",

„culoare”: „# 4D90FE”

}

}

vizualizați rawdeviceInfo.json găzduit cu ❤ de GitHub

Pasul 3: ASAMBLAREA DISPOZITIVULUI

Deoarece nu există modificări hardware, aici sunt linkurile către informațiile relevante:

• Ansamblu Shell
• Materiale și instrumente
• Pregătirea MCU
• Pregătirea locuinței MCU
• Construirea sclavilor Comutator lateral / RESET Placă filială
• Asamblarea componentelor majore

Pasul 4: FIRMWARE

PRINCIPALELE SCHIMBĂRI ACEASTA CONSTRUITĂ

Pentru ca aplicația AssimilateCrouton să poată utiliza resursele CORS de pe dispozitiv, anteturile de răspuns trebuiau configurate într-un mod special. Acest lucru a fost implementat în această versiune a firmware-ului (static_server.ino => server_file_read ()).

De asemenea, graficul de dependență principal pentru Polymer trebuia să provină dintr-o singură origine. A fost utilizată o strategie pentru a adăuga un handerror (corsLinkOnError) la fișierele SPIFFS CORS pentru a reîncărca resursele de pe site-ul AssimilateCrouton atunci când acestea nu sunt găsite pe dispozitiv.

Există 2 noi convenții adăugate la sistemul de fișiere SPIFFS pentru personalizarea punctelor finale create în deviceInfo - pe care AssimilateCrouton le folosește pentru a crea cardurile de bord:

• /config/user_card_base.json Definiția punctului final cu variabilele de runtime fiind schimbate mai întâi:,,. Aici se va adăuga în mod obișnuit cardul asim-device. Acest lucru nu comunică înapoi cu dispozitivul.
• /config/user_card_#.json Definiția punctului final cu variabilele de execuție fiind schimbate mai întâi:,,. Acesta este, de obicei, editorii bogați, cum ar fi cardul assim-weekview, vor fi adăugați conectați la sclavul I2C (actor / senzor) care se referă la #.

Schița / bibliotecile

În această etapă, proiectul a fost ambalat ca exemplu pentru biblioteca AssimilateBus Arduino. Aceasta este în principal pentru a face toate fișierele necesare ușor de accesat din IDE Arduino. Principalele artefacte ale codului sunt:

• mqtt_crouton_esp8266_cors_webcomponents.ino - punctul principal de intrare.
• assimilate_bus.h / assimilate_bus.cpp - biblioteca care gestionează comunicarea I2C cu senzorul / actorii sclavi
• VizJson.h / VizJson.cpp - biblioteca care formează / construiește orice JSON publicat prin MQTT
• config.h / config.cpp - biblioteca care citește / casete / scrie fișiere de configurare pe SPIFFS
• static_i2c_callbacks.ino - apelurile I2C pentru o proprietate primită și ciclul cererilor de sclavi fiind complet static_mqtt.ino - funcțiile MQTT
• static_server.ino - funcțiile serverului web
• static_utility.ino - funcții de ajutor

Funcțiile statice INO au fost utilizate (în locul bibliotecilor) din mai multe motive, dar în principal pentru ca funcțiile Webserver și MQTT să poată juca bine împreună.

RESURSELE SPIFFS

Explicații detaliate ale fișierelor SPIFFS pot fi găsite aici.

• favicon.ico - resursă utilizată de Ace Editor

• config

  • device.json - configurația dispozitivului (Wifi, MQTT …)
  • slave_metas _ #. json - generat la runtime pentru fiecare număr de adresă slave (#)
  • user_card _ #. json - punctul final personalizat care urmează să fie integrat în DeviceInfo pentru fiecare număr de adresă slave (#)
  • user_card_base.json - punct final personalizat care trebuie integrat în DeviceInfo pentru dispozitiv
  • user_meta _ #. json - metadatele personalizate le înlocuiesc pe cele ale sclavilor pentru fiecare număr de adresă a sclavului (#)
  • user_props.json - nume de proprietăți personalizate pentru a le suprascrie pe cele din metadatele sclavilor

• cors

  • card-webcomponent.css - foaie de stil pentru diferite carduri personalizate
  • card-webcomponent.html - webcomponent pentru diferite carduri personalizate

• editor

  • assimilate-logo-p.webp" />
  • edit.htm.gz - gzip al Ace Editor HTML
  • edit.htm.src - HTML original al Editorului Ace
  • favicon-32x32-p.webp" />

ÎNCĂRCAREA FIRMWARE-ULUI

• Depozitul de coduri poate fi găsit aici (instantaneu).
• Un ZIP al bibliotecii poate fi găsit aici (instantaneu).
• Instrucțiuni pentru „Importarea unei biblioteci ZIP” aici.
• Odată instalată biblioteca, puteți deschide exemplul „mqtt_crouton_esp8266_cors_webcomponents”.
• Instrucțiuni pentru configurarea Arduino pentru Wemos D1 Mini aici.
• Dependențe: ArduinoJson, TimeLib, PubSubClient, NeoTimer (consultați atașamentele dacă se modifică modificările din depozite).

ÎNCĂRCAȚI LA SPIFFS

După ce codul a fost încărcat în IDE-ul Arduino, deschideți device.json în folderul de date / config:

• Modificați valoarea wifi_ssid cu SSID-ul dvs. WiFi.
• Modificați valoarea wifi_key cu cheia WiFi.
• Modificați valoarea mqtt_device_name cu identificarea dispozitivului dvs. preferată (nu este necesară asocierea).
• Modificați valoarea mqtt_device_description cu Descrierea dispozitivului dvs. preferată (în Crouton).
• Salvați device.json.
• Încărcați fișierele de date în SPIFFS.

Principalul punct de intrare pentru exemplul AssimilateBus:

/*

*

* REGULILE DE AFACERI PENTRU DISPOZITIVUL DUMNEAVOASTRĂ SE AȘTEPTĂ SĂ FIE CONTROLATE CU MQTT - NU SUNT CONFIGURATE ÎN ACEST FIRMWARE

*

* În afară de configurare și buclă în acest fișier

* părțile mobile importante sunt

* on_bus_received și on_bus_complete în static_i2c_callbacks.ino

* și

* mqtt_publish și mqtt_callback în static_mqtt.ino

*

*/

#include "types.h"

#include "VizJson.h"

#include "assimilate_bus.h"

#include "debug.h"

#include "config.h"

#include

#include // setați MQTT_MAX_PACKET_SIZE la ~ 3000 (sau nevoile dvs. pentru dispozitivInfo json)

#include

#include

#include

#include

#include

// --------------------------------- DECLARAȚII DE MEMORIE

// ------------------------------------------------ - definește

# defineDBG_OUTPUT_FLAG2 // 0, 1, 2 MINIM, RELEASE, FULL

#define_mqtt_pub_topic "outbox" // CONVENȚII CROUTON

#define_mqtt_sub_topic "căsuța de e-mail"

// ------------------------------------------------ - obiecte de clasă

Depanare _depanare (DBG_OUTPUT_FLAG);

AssimilateBus _assimilate_bus;

VizJson _viz_json;

Config _config_data;

WiFiClient _esp_client;

PubSubClient _client (_esp_client);

WiFiUDP Udp;

ESP8266WebServer _server (80);

Neotimer _timer_property_request = Neotimer (5000);

// ------------------------------------------------ - structuri de date / variabilă

RuntimeDeviceData _runtime_device_data;

PropertyDto _dto_props [50]; // maxim 10 sclavi x maxim 5 proprietăți

// ------------------------------------------------ - controlul fluxului

volatilebool _sent_device_info = false;

octet _dto_props_index = 0;

bool _fatal_error = false;

// --------------------------------- DECLARAȚII DOMENIUL DE APLICARE A FUNCȚIEI

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

voidon_bus_received (byte slave_address, byte prop_index, Rol rol, nume char [16], valoare char [16]);

voidon_bus_complete ();

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

voidmqtt_callback (char * topic, octet * sarcină utilă, lungime unsignedint);

voidmqtt_loop ();

int8_tmqtt_get_topic_index (char * topic);

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 (adresa octet, cod octet, constchar * param);

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

String server_content_type_get (String nume fișier);

boolserver_path_in_auth_exclusion (Calea șirului);

boolserver_auth_read (Calea șirului);

boolserver_file_read (Calea șirului);

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 (IPAdress & address);

char * time_stamp_get ();

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

String spiffs_file_list_build (String path);

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);

//---------------------------------PRINCIPAL

voidsetup () {

DBG_OUTPUT_PORT.begin (115200);

SetupDeviceData device_data;

Serial.println (); Serial.println (); // marja pentru gunoiul consolelor

întârziere (5000);

if (DBG_OUTPUT_FLAG == 2) DBG_OUTPUT_PORT.setDebugOutput (adevărat);

_debug.out_fla (F ("setup"), adevărat, 2);

// obțineți config

if (SPIFFS.begin ()) {

_debug.out_str (spiffs_file_list_build ("/"), adevărat, 2);

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

report_deserialize_error ();

întoarcere;

}

} altceva {

report_spiffs_error ();

întoarcere;

}

// utilizați valoarea temporizatorului setată în dispozitiv.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 ();

// lansează colecția de metadate

_assimilate_bus.get_metadata ();

_assimilate_bus.print_metadata_details ();

mqtt_ensure_connect ();

// are nevoie de proprietatea senzorului (nume) pentru a finaliza colectarea metadatelor

_assimilate_bus.get_properties (on_bus_received, on_bus_complete);

_timer_property_request.reset (); // poate renunța la un timp vizibil până la acest punct, așa că porniți-l din nou

}

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);

}

}

vizualizați rawmqtt_crouton_esp8266_cors_webcomponents.ino găzduit cu ❤ de GitHub

Pasul 5: CARD DE DISPOZITIV

Cardul dispozitivului (tip card: assim-device) este găzduit pe site-ul web și nu este necesar să îl difuzați de pe dispozitiv (CORS).

Lista paginilor sale implicite:

• Subiectele MQTT pentru citire și scriere pe dispozitiv
• Punctul de acces la care este conectat dispozitivul
• Un link către editorul de fișiere SPIFFS găzduit pe dispozitiv utilizând ACE EDITOR
• O pictogramă ochi care dezvăluie pagina Afișare / Ascundere a cardului.

Pagina Afișare / Ascundere card afișează:

• Fiecare carte ca articol separat
• Font albastru îndrăzneț la afișare
• Font normal negru când este ascuns
• O pictogramă care descrie tipul de carte.

Cardul poate fi ascuns făcând clic pe butonul ascunde de pe cărți sau făcând clic pe un element cu font albastru-aldin din listă. Cardurile pot fi afișate făcând clic pe un element de font negru-normal din listă.

Strâns legat de această caracteristică sunt toastele de informații. Dacă oricare dintre punctele finale din deviceInfo are atribuită o proprietate de informații, un buton de informații va fi afișat lângă butonul de ascundere de pe card. Când faceți clic, informațiile contextuale definite în punctul final vor fi „prăjite” la fereastră.

Dacă cardul dispozitivului nu este definit, butoanele de ascundere nu vor fi afișate pe carduri. Acest lucru se datorează faptului că, odată ascuns, nu există nicio modalitate de a le arăta, din nou.

Consultați PERSONALIZAREA ENDPOINT pentru a detalia cum poate fi adăugată cardul dispozitiv-dispozitiv prin fișierele SPIFFS de pe ESP8266.

AssimilateCrouton WebComponent

semnal-fier>

div>

AFIȘAȚI ASCUNGERE ICONĂ

i> span>

FORMULAR DE DISPOZITIV

MQTT TOPICSdiv>

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

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

WIFI SSIDdiv>

{{endPointJson.ssid}} div>

ADRESA IP div>

{{endPointJson.ip_addr}} a> div>

div>

AFIȘAȚI LISTA ASCUNDERE

element>hârtie-articol>

șablon>

hârtie-listă>

div>

crouton-card>

șablon>

dom-module>

vizualizați rawassim-device.html găzduit cu ❤ de GitHub

Pasul 6: CARTE DE VIZUALIZARE SĂPTĂMÂNĂ

Cardul weekview (tip card: assim-weekview) este găzduit pe dispozitiv (folder cors). Este injectat în pachetul deviceInfo publicat pentru AssimilateCrouton, prin adăugarea unui fișier config / user_card _ #. Json la SPIFFS (în acest caz user_card_9.json).

PREZENTARE GENERALĂ

Zilele săptămânii sunt prezentate ca liste de intervale de timp. Granularitatea intervalului de timp este setată cu proprietatea "interval_mins" în config / user_card _ #. Json. Trebuie să fie o fracțiune de oră sau multipli de oră de ex. 10, 15, 20, 30, 60, 120, 360. Dând clic pe un interval de timp, asigurați-vă că este comandată o stare de pornire pentru dispozitivul asociat în acel moment. Dacă intervalul de timp este acum, o comandă este trimisă (publicată) imediat pentru dispozitiv. În mod normal, starea este verificată / publicată în fiecare minut. Selecțiile sunt salvate în LocalStorage, astfel încât orele vor fi reîncărcate cu o reîmprospătare a browserului.

CASE DE UTILIZARE

În starea sa actuală, vizualizarea săptămânală este potrivită pentru dispozitivele care pot utiliza un comutator Toggle pentru a-și vizualiza starea, adică sunt fie activate, fie dezactivate și după ce sunt setate rămân în acea stare. Lumini, ventilatoare și încălzitoare de apă sunt candidați buni.

LIMITĂRI / PESTE

• Intervalul_min trebuie să fie una dintre valorile menționate mai sus
• Vizualizarea săptămânală nu acceptă acțiuni momentane care sunt, de asemenea, programate, cum ar fi activarea scurtă a unei atingeri (5 secunde) de două ori pe zi.

VIITOR

• Se așteaptă ca acțiunile de moment să fie sprijinite.
• Se ia în considerare stocarea sincronizată pe dispozitive, pentru selecțiile de programare.

Pasul 7: PERSONALIZARE ENDPOINT

Așa cum am menționat mai jos în FIRMWARE, există 2 noi convenții adăugate la sistemul de fișiere SPIFFS pentru personalizarea punctelor finale. Fișierele JSON sunt fragmente care se adaugă la proprietatea punctelor finale din pachetul deviceInfo postat în brokerul MQTT care devine definiția tabloului de bord.

Cheile punctelor finale sunt generate în firmware:

• CC_device (Card personalizat) pentru user_card_base.json
• CC_SLAVE_ENDPOINT NAME pentru user_card _ #. Json (# fiind adresa slave)

Așa cum am menționat anterior, există variabile care se substituie valorilor în timpul rulării:

• mqtt_device_name
• wifi_ssid
• local_ip

user_card_base.json

Un exemplu:

user_card _ #. json

Un exemplu:

Pasul 8: VIDEO