IOT123 - HUB ASSIMILÁTNEHO SENZORA: WEBCOMPONENTY ICOS10 CORS: 8 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-31 10:24

ASSIMILATE SENSOR/ACTOR Slaves integrujú metadáta, ktoré sa používajú na definovanie vizualizácií v programe Crouton. Táto zostava sa mierne líši od predchádzajúcich; nedochádza k žiadnym hardvérovým zmenám. Firmvér teraz podporuje hosťovanie vlastných (bohatších) editorov, ktoré je možné integrovať do najnovšej verzie AssimilateCrouton. V tomto článku bude väčšia pozornosť venovaná vysvetleniu firmvéru a panela MQTT.

Jednou z výhod obsluhy webových komponentov zo zariadenia, ktoré ovládajú, je to, že pokročilejšie ovládanie zariadenia je obmedzené na sieť, ku ktorej je zariadenie pripojené: váš prístupový bod WiFi. Napriek tomu, že keď raz použijete server MQTT s autentifikáciou, existuje podobná ochrana, vo verejných sieťach, ak na chvíľu opustíte prehliadač (webová stránka AssimilateCrouton), môže niekto zaskočiť a ovládať vaše automatizačné zariadenia. Táto funkcia CORS WebComponent umožňuje, aby boli verejne zobrazené iba hodnoty (teplota, úroveň svetla, vlhkosť) a príkazové funkcie (zapnutie/vypnutie, plánovanie) boli k dispozícii iba zo siete zariadení.

V zariadení sú stále podporované všetky funkcie webového servera s autentifikáciou a hostením v SPIFFS, ale špeciálne sa zameral na podporu CORS (Cross Origin Resource Sharing) pre Polymer WebComponents (Crouton používa Polymer 1.4.0).

V AssimilateCrouton (vidlica spoločnosti Crouton používaná pre sieť IOT Assimilate) zmeny zahŕňajú

• podpora karty zariadenia (assim-device), ktorá okrem iného zobrazuje a skrýva pre používateľa jednotlivé karty pre zariadenie
• informačná vlastnosť na všetkých kartách, ktorá ukazuje prípitok užitočných kontextových informácií o karte
• podpora webových komponentov CORS, v tomto prípade hosťovaných na webovom serveri v zariadení (ESP8266).

Krok 1: CROUTON

Crouton je ovládací panel, ktorý vám umožní vizualizovať a ovládať vaše zariadenia IOT s minimálnym nastavením. V zásade je to najľahší informačný panel, ktorý je možné nastaviť pre všetkých hardvérových nadšencov IOT pomocou iba MQTT a JSON.

ASSIMILATE SLAVES (senzory a herci) majú vložené metadáta a vlastnosti, ktoré kapitán používa na zostavenie paketu zariadenia json json, ktorý Crouton používa na zostavenie palubnej dosky. Sprostredkovateľ medzi ASSIMILATE NODES a Crouton je broker MQTT, ktorý je priateľský k webovým zásuvkám: Na ukážku sa používa Mosquito.

Pretože ASSIMILATE MASTER požaduje vlastnosti, formátuje hodnoty odpovedí v požadovanom formáte pre aktualizácie Crouton. Vidlica AssimilateCrouton pridáva niektoré funkcie, ktoré vám umožňujú decentralizovať obchodné pravidlá, na ktorých je vaše zariadenie spustené, tj. Zariadenie IOT nepotrebuje žiadne vstavané obchodné pravidlá, je to len kanál na komunikáciu MQTT/I2C k inteligentnejším (ATTINY kontrolovaným) otrokárskym hercom a senzorom.

Krok 2: ASIMILUJTE KROUTÓN

ZMENY NA KROUTON

Zmeny oproti vidlicovej verzii zahŕňajú:

• ak má koncový bod definovanú vlastnosť cesty, WebComponent pre kartu urobí HTMLImport pre zdroj CORS (webový server na ESP8266 v tejto zostave).
• na akékoľvek zdroje, ktoré sú pred (v závislosti od) webového komponentu CORS, sa odkazuje, ako keby boli obsluhované z webovej stránky Crouton; keď sa im nepodarí načítať obslužný program výnimiek, cesty a načítava sa, ak sú z webovej stránky.
• vpravo hore sa zobrazuje aktuálny miestny čas, ktorý je užitočný pri overovaní plánovania.

POLYMEROVÉ ZÁVISLOSTI A KORY

Listy stromu závislosti od polyméru môžu byť hostené v CORS. Pretože koreňové závislosti je možné v aplikácii použiť viackrát, nemožno na ne odkazovať z dvoch miest (webová stránka a zariadenie), pretože nástroj Polymer Module Loader s nimi zaobchádza ako s 2 samostatnými zdrojmi a viacerými chybami registrácie rýchlo padá na aplikáciu.

Z tohto dôvodu sú WebComponent pre kartu (súbor HTML v 1.4.0) a súvisiaci súbor CSS jedinými súbormi hostenými v zariadení. Na ostatné závislosti sa odkazuje, ako keby bol webový komponent hostený v priečinku „html“na pôvodnom webe, čo uľahčuje vývoj webových komponentov z tohto priečinka, kým nie sú pripravené na odoslanie do SPIFFS na serveri ESP8266. AssimilateCrouton zistí, ako získať správne súbory.

ZAMESTNANIE

edfungus tvorca pôvodného Croutonu napísal zdroj v Pug/Less a mal reťazec nástrojov NPM/Grunt. Vykreslil som Pug/Less ako HTML/css a len upravil/distribuoval vykreslené súbory. To zlomilo reťazec nástrojov NPM/Grunt. Oprava je popísaná v sekcii BUDÚCNOSŤ.

Palubný panel môžete otestovať lokálne na zariadení DEV:

• Z príkazového riadka v koreňovom priečinku
• npm začiatok
• lite server sa roztočí pre https:// localhost: 10001

Nasadiť na statický webový server:

• skopírujte všetky priečinky okrem node_modules
• skopírujte index.html (a prípadne web.config)

BUDÚCNOSŤ

Jedným z hlavných cieľov je aktualizácia na Polymer3 a práca z Polymer CLI. Pridanie pokročilých editorov a rámca pre vývojárov IOT na vývoj vlastných je vysokou prioritou. Nakoniec pokročilý automatizovaný systém pobeží úplne od oddelených klientov MQTT, ako je AssimilateCrouton.

Príklad paketu deviceInfo použitého pre AssimilateCrouton:

{

"deviceInfo": {

"endPoints": {

"CC_device": {

"device_name": "ash_mezz_A3",

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

"ssid": "Corelines_2",

"ip_addr": "192.168.8.104",

"koncové body": [

{

"title": "Rastú svetlá",

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

"endpoint": "prepnúť"

},

{

"title": "Osvetľovače kvetináčov",

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

"endpoint": "CC_switch"

}

]

},

"CC_switch": {

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

"info": "Zapnite alebo vypnite svetlá v 15 -minútových časových intervaloch",

"cesta": "https://192.168.8.104/cors",

"title": "Osvetľovače kvetináčov",

"interval_mins": 15,

"hodnoty": {

"value": ""

}

},

"prepnúť": {

"title": "Rastú svetlá",

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

"info": "Zapínanie alebo vypínanie svetiel ad hoc",

"štítky": {

"false": "VYPNUTÉ",

"true": "ON"

},

"ikony": {

"false": "slnko-o",

"true": "slnko-o"

},

"hodnoty": {

"hodnota": 0

}

}

},

"status": "dobrý",

"name": "ash_mezz_A3",

"description": "Kancelária v Ashmore, Mezanín, oblasť A2",

"color": "#4D90FE"

}

}

zobraziť rawdeviceInfo.json hostené s ❤ od GitHub

Krok 3: MONTÁŽ ZARIADENIA

Pretože nedochádza k žiadnym hardvérovým zmenám, uvádzame odkazy na príslušné informácie:

• Zostava škrupiny
• Materiály a nástroje
• Príprava MCU
• Príprava bývania MCU
• Budovanie vedľajšej dosky prepínača/RESETu Slaves
• Zostavenie hlavných komponentov

Krok 4: FIRMWARE

HLAVNÉ ZMENY TÚTO BUDOVU

Aby mohla aplikácia AssimilateCrouton využívať prostriedky CORS zo zariadenia, bolo potrebné konfigurovať hlavičky odpovedí konkrétnym spôsobom. Toto bolo implementované v tomto vydaní firmvéru (static_server.ino => server_file_read ()).

Tiež hlavný graf závislosti pre polymér musel byť z jedného pôvodu. Bola použitá stratégia na pridanie obslužného programu onerror (corsLinkOnError) do súborov SPIFFS CORS na opätovné načítanie zdrojov z webovej stránky AssimilateCrouton, ak sa nenachádzajú v zariadení.

Do súborového systému SPIFFS boli pridané 2 nové konvencie na prispôsobenie koncových bodov vytvorených v deviceInfo - ktoré AssimilateCrouton používa na vytváranie kariet palubnej dosky:

• /config/user_card_base.json Definícia koncového bodu, pričom najskôr sa vymenia premenné za behu:,,. Toto je zvyčajne miesto, kde bude pridaná karta asim-zariadenia. To nekomunikuje so zariadením.
• /config/user_card_#.json Definícia koncového bodu, pričom najskôr sa vymenia premenné za behu:,,. Toto je typicky miesto, kde budú bohatí redaktori, ako napríklad karta prehľadu týždňa, pripojení k zariadeniu I2C slave (herec/senzor), ktoré sa vzťahuje na #.

SKETCH/KNIŽNICE

V tejto fáze bol projekt zabalený ako príklad pre knižnicu AssimilateBus Arduino. Ide predovšetkým o to, aby bol k všetkým potrebným súborom ľahký prístup z IDE Arduino. Hlavné artefakty kódu sú:

• mqtt_crouton_esp8266_cors_webcomponents.ino - hlavný vstupný bod.
• assimilate_bus.h/assimilate_bus.cpp - knižnica, ktorá spracováva komunikáciu I2C so Slave senzorom/aktérmi
• VizJson.h/VizJson.cpp - knižnica, ktorá formátuje/vytvára akýkoľvek JSON publikovaný prostredníctvom MQTT
• config.h/config.cpp - knižnica, ktorá číta/boxuje/zapisuje konfiguračné súbory na SPIFFS
• static_i2c_callbacks.ino - spätné volania I2C pre prijímanú vlastnosť a dokončenie cyklu požiadaviek na podriadené zariadenia static_mqtt.ino - funkcie MQTT
• static_server.ino - funkcie webového servera
• static_utility.ino - pomocné funkcie

Statické funkcie INO boli použité (namiesto knižníc) z rôznych dôvodov, ale hlavne preto, aby funkcie Webserver a MQTT mohli dobre hrať spoločne.

ZDROJE RÝCHLE

Podrobné vysvetlenie súborov SPIFFS nájdete tu.

• favicon.ico - zdroj používaný editorom Ace

• konfigur

  • device.json - konfigurácia zariadenia (Wifi, MQTT …)
  • slave_metas _#. json - generované za behu pre každé číslo adresy slave (#)
  • user_card _#. json - vlastný koncový bod, ktorý sa má integrovať do DeviceInfo pre každé číslo adresy slave (#)
  • user_card_base.json - vlastný koncový bod, ktorý sa má integrovať do zariadeniaInfo pre zariadenie
  • user_meta _#. json - vlastné metadáta prepíšu metadáta podriadených pre každé číslo adresy slave (#)
  • user_props.json - názvy vlastných vlastností, ktoré prepíšu tie v metadátach otrokov

• cors

  • card -webcomponent.css - šablóna štýlov pre rôzne vlastné karty
  • card -webcomponent.html - webový komponent pre rôzne vlastné karty

• editor

  • assimilate -logo-p.webp" />
  • edit.htm.gz - gzip programu Ace Editor HTML
  • edit.htm.src - pôvodný HTML editora esa
  • favicon -32x32-p.webp" />

NAHRÁVANIE FIRMWARU

• Úložisko kódov nájdete tu (snímka).
• ZIP knižnicu nájdete tu (snímka).
• Tu nájdete pokyny pre „Import knižnice ZIP“.
• Keď je knižnica nainštalovaná, môžete otvoriť príklad „mqtt_crouton_esp8266_cors_webcomponents“.
• Pokyny na nastavenie Arduina pre Wemos D1 Mini nájdete tu.
• Závislosti: ArduinoJson, TimeLib, PubSubClient, NeoTimer (pozrite si prílohy, ak dôjde k narušeniu zmien v úložiskách).

NAHRAŤ DO RÝCH

Po načítaní kódu do Arduino IDE otvorte zariadenie.json v priečinku data/config:

• Upravte hodnotu wifi_ssid pomocou svojho SSID WiFi.
• Upravte hodnotu wifi_key pomocou svojho WiFi kľúča.
• Upravte hodnotu mqtt_device_name pomocou preferovanej identifikácie zariadenia (nie je potrebné pripojenie).
• Upravte hodnotu mqtt_device_description pomocou vami preferovaného popisu zariadenia (v Crouton).
• Uložiť zariadenie.json.
• Nahrajte dátové súbory na SPIFFS.

Hlavný vstupný bod pre príklad AssimilateBus:

/*

*

*PODMIENKY PODNIKANIA PRE VAŠE ZARIADENIE SA OČAKÁVAJÚ, ŽE JE MÔŽETE OVLÁDAŤ MIA

*

* Iné ako nastavenie a slučka v tomto súbore

* dôležité pohyblivé časti sú

* On_bus_received a on_bus_complete v static_i2c_callbacks.ino

* a

* mqtt_publish a mqtt_callback v static_mqtt.ino

*

*/

#include "types.h"

#include "VizJson.h"

#include "assimilate_bus.h"

#include "debug.h"

#include "config.h"

#zahrnúť

#zahrnúť // nastavte MQTT_MAX_PACKET_SIZE na ~ 3000 (alebo vaše potreby pre deviceInfo json)

#zahrnúť

#zahrnúť

#zahrnúť

#zahrnúť

#zahrnúť

// --------------------------------- VYHLÁSENIA O PAMÄTI

// ------------------------------------------------ - definuje

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

#define_mqtt_pub_topic "na odoslanie" // KONVENCIE O KROUTOCH

#define_mqtt_sub_topic „doručená pošta“

// ------------------------------------------------ - triedne objekty

Debug _debug (DBG_OUTPUT_FLAG);

AssimilateBus _assimilate_bus;

VizJson _viz_json;

Konfigurácia _config_data;

WiFiClient _esp_client;

PubSubClient _client (_esp_client);

WiFiUDP Udp;

ESP8266WebServer _server (80);

Neotimer _timer_property_request = Neotimer (5 000);

// ------------------------------------------------ - dátové štruktúry / premenná

RuntimeDeviceData _runtime_device_data;

PropertyDto _dto_props [50]; // max 10 otrokov x max 5 vlastností

// ------------------------------------------------ - riadiaci tok

volatilebool _sent_device_info = false;

byte _dto_props_index = 0;

bool _fatal_error = false;

// --------------------------------- VYHLÁSENIA ROZSAHU FUNKCIE

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

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

voidon_bus_complete ();

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

voidmqtt_callback (char* topic, byte* užitočné zaťaženie, dĺžka bez znamienka);

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 bytu, kód bytu, constchar *param);

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

Reťazec server_content_type_get (názov súboru reťazca);

boolserver_path_in_auth_exclusion (cesta k reťazcu);

boolserver_auth_read (cesta k reťazcu);

boolserver_file_read (cesta k reťazcu);

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 (IP adresa a adresa);

char *time_stamp_get ();

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

Reťazec spiffs_file_list_build (Cesta reťazca);

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

//---------------------------------HLAVNÁ

voidsetup () {

DBG_OUTPUT_PORT.begin (115200);

SetupDeviceData device_data;

Serial.println (); Serial.println (); // okraj pre odpad z konzoly

oneskorenie (5 000);

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

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

// získajte požadovanú konfiguráciu

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

návrat;

}

} else {

report_spiffs_error ();

návrat;

}

// použite hodnotu časovača nastavenú v zariadení.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 ();

// spustenie zbierky metadát

_assimilate_bus.get_metadata ();

_assimilate_bus.print_metadata_details ();

mqtt_ensure_connect ();

// na dokončenie zberu metadát potrebuje vlastnosť senzora (názvy)

_assimilate_bus.get_properties (on_bus_received, on_bus_complete);

_timer_property_request.reset (); // môže do tohto bodu uplynúť znateľný čas, začnite preto znova

}

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

}

}

zobraziť rawmqtt_crouton_esp8266_cors_webcomponents.ino hostiteľom ❤ od GitHub

Krok 5: KARTA ZARIADENIA

Karta zariadenia (typ karty: assim-device) je umiestnená na webovej stránke a nie je potrebné ju podávať zo zariadenia (CORS).

Jeho predvolená stránka obsahuje tieto zoznamy:

• Témy MQTT na čítanie a zápis do zariadenia
• Prístupový bod, ku ktorému je zariadenie pripojené
• Odkaz na editor súborov SPIFFS hostený v zariadení pomocou ACE EDITOR
• Ikona oka, ktorá odhaľuje stránku Zobraziť/skryť kartu.

Stránka Zobraziť/skryť kartu uvádza:

• Každá karta ako samostatná položka
• Pri zobrazení je odvážne modré písmo
• Skryté normálne normálne písmo
• Ikona zobrazujúca typ karty.

Kartu je možné skryť kliknutím na tlačidlo skryť na kartách alebo kliknutím na položku s modrým tučným písmom v zozname. Karty sa dajú zobraziť kliknutím na položku čierneho normálneho písma v zozname.

S touto funkciou voľne súvisia informačné toasty. Ak má niektorý z koncových bodov v zariadení DeviceInfo priradenú informačnú vlastnosť, vedľa tlačidla Skryť na karte sa zobrazí informačné tlačidlo. Po kliknutí sa kontextové informácie definované v koncovom bode „opečú“do okna.

Ak karta zariadenia nie je definovaná, tlačidlá skryť sa na kartách nezobrazia. Dôvodom je, že akonáhle sú skryté, neexistuje spôsob, ako ich znova ukázať.

V časti PRISPÔSOBENIE ENDPOINT nájdete podrobné informácie o tom, ako je možné pridať kartu zariadenia assim prostredníctvom súborov SPIFFS na ESP8266.

AssimilateCrouton WebComponent

železné signály>

div>

ZOBRAZIŤ SKRYŤ IKONU

i> span>

FORMA ZARIADENIA

TÉMY MQTT Div

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

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

WIFI SSIDdiv>

{{endPointJson.ssid}} div>

IP ADDRESSdiv>

{{endPointJson.ip_addr}} a> div>

div>

ZOBRAZIŤ SKRYŤ ZOZNAM

element>paper-item>

šablóna>

list-listbox>

div>

krutónová karta>

šablóna>

dom-modul>

zobraziť rawassim-device.html hostený s ❤ od GitHub

Krok 6: KARTA TÝŽDŇA

Karta Weekview (typ karty: assim-weekview) je umiestnená na zariadení (priečinok cors). Vstrekne sa do paketu deviceInfo publikovaného pre AssimilateCrouton pridaním súboru config/user_card _#. Json do SPIFFS (v tomto prípade user_card_9.json).

PREHĽAD

Pracovné dni sú prezentované ako zoznamy časových intervalov. Granularita časového úseku je nastavená pomocou vlastnosti „interval_mins“v súbore config/user_card _#. Json. Musí to byť zlomok hodiny alebo násobky hodiny, napr. 10, 15, 20, 30, 60, 120, 360. Kliknutím na časový úsek zaistíte, aby bol v tom čase pre priradené zariadenie povelný stav zapnutia. Ak je časový úsek teraz, pre zariadenie sa ihneď odošle (zverejní) príkaz. Normálne sa stav kontroluje/zverejňuje každú minútu. Výbery sa ukladajú do LocalStorage, takže časy sa znova načítajú s obnovením prehliadača.

PRÍPADY POUŽITIA

V aktuálnom stave je zobrazenie týždňa vhodné pre zariadenia, ktoré môžu pomocou prepínača zobrazovať svoj stav, tj. Sú zapnuté alebo vypnuté a po nastavení zostanú v tomto stave. Svetlá, ventilátory a ohrievače vody sú dobrými kandidátmi.

OBMEDZENIA/JASKYNY

• Interval_mins musí byť jednou z hodnôt uvedených vyššie
• Týždenný prehľad nepodporuje naplánované krátkodobé akcie, ako napríklad krátke klepnutie (5 sekúnd) dvakrát denne.

BUDÚCNOSŤ

• Očakáva sa, že budú podporené okamžité akcie.
• Uvažuje sa o synchronizovanom úložisku medzi zariadeniami pre výber plánu.

Krok 7: PRISPÔSOBENIE ENDPOINT

Ako je už uvedené vo FIRMWARE, do súborového systému SPIFFS boli pridané 2 nové konvencie na prispôsobenie koncových bodov. Súbory JSON sú fragmenty, ktoré sa pridávajú do vlastnosti koncových bodov v pakete deviceInfo odoslanom maklérovi MQTT, ktorý sa stáva definíciou palubnej dosky.

Kľúče koncových bodov sú generované vo firmvéri:

• CC_device (vlastná karta) pre user_card_base.json
• CC_SLAVE_ENDPOINT NAME pre user_card _#. Json (# je adresa slave)

Ako už bolo spomenuté, existujú premenné, ktoré sa dajú nahradiť hodnotami za behu:

• mqtt_device_name
• wifi_ssid
• local_ip

user_card_base.json

Príklad:

user_card _#. json

Príklad:

Krok 8: VIDEÁ