IOT123 - ASSIMILATE SENSOR HUB : COMPOSANTS WEB ICOS10 CORS : 8 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-31 10:19

Les esclaves ASSIMILATE SENSOR/ACTOR intègrent des métadonnées qui sont utilisées pour définir les visualisations dans Crouton. Cette version est légèrement différente des précédentes; il n'y a pas de changements matériels. Le firmware prend désormais en charge l'hébergement d'éditeurs personnalisés (plus riches) qui peuvent être intégrés dans la dernière version d'AssimilateCrouton. Plus d'attention sera accordée à l'explication du firmware et du tableau de bord MQTT dans cet article.

L'un des avantages de servir des composants Web à partir de l'appareil qu'ils contrôlent est que le contrôle plus avancé de l'appareil est limité au réseau auquel l'appareil est connecté: votre point d'accès WiFi. Bien qu'une fois que vous utilisez un serveur MQTT avec authentification, il existe une ressemblance de protection, sur les réseaux publics, si vous quittez momentanément votre navigateur (site Web AssimilateCrouton), quelqu'un pourrait intervenir et contrôler vos appareils d'automatisation. Cette fonctionnalité de composant Web CORS permet d'afficher uniquement les lectures (température, niveaux de luminosité, humidité) et les fonctions de commande (marche/arrêt, programmation) uniquement disponibles à partir du réseau de l'appareil.

Sur l'appareil, toutes les fonctionnalités du serveur Web avec authentification et hébergement dans SPIFFS sont toujours prises en charge, mais une attention particulière a été accordée à la prise en charge de CORS (Cross Origin Resource Sharing) pour les composants Web Polymer (Crouton utilise Polymer 1.4.0).

Dans AssimilateCrouton (le fork de Crouton utilisé pour Assimilate IOT Network), les modifications incluent

• prise en charge d'une carte de périphérique (assim-device) qui, entre autres, affiche et masque, pour un utilisateur, des cartes individuelles pour un périphérique
• propriété info sur toutes les cartes qui affiche un toast d'informations contextuelles utiles pour une carte
• prise en charge des composants Web CORS, dans ce cas hébergés sur le serveur Web de l'appareil (ESP8266).

Étape 1: CROUTON

Crouton est un tableau de bord qui vous permet de visualiser et de contrôler vos appareils IOT avec une configuration minimale. Il s'agit essentiellement du tableau de bord le plus simple à configurer pour tout passionné de matériel IOT utilisant uniquement MQTT et JSON.

Les ESCLAVES ASSIMILÉS (capteurs et acteurs) ont des métadonnées et des propriétés intégrées que le maître utilise pour créer le paquet json deviceInfo que Crouton utilise pour créer le tableau de bord. L'intermédiaire entre ASSIMILATE NODES et Crouton est un broker MQTT qui est compatible avec les websockets: Mosquito est utilisé pour la démo.

Comme ASSIMILATE MASTER demande des propriétés, il formate les valeurs de réponse dans le format requis pour les mises à jour de Crouton. Le fork AssimilateCrouton ajoute quelques fonctionnalités qui vous permettent de décentraliser les règles commerciales qui exécutent votre appareil, c'est-à-dire que l'appareil IOT n'a pas besoin de règles commerciales intégrées, c'est juste un pipeline pour la communication MQTT/I2C vers les acteurs et capteurs esclaves plus intelligents (contrôlés par ATTINY)..

Étape 2: ASSIMILER LE CROUTON

CHANGEMENTS À CROUTON

Les changements par rapport à la version fork incluent:

• si un point de terminaison a une propriété de chemin définie, le composant Web de la carte effectuera un HTMLImport pour une ressource CORS (le serveur Web sur l'ESP8266 dans cette version).
• toutes les ressources en amont d'un (dépendance) d'un composant Web CORS sont référencées comme si elles étaient servies à partir du site Web de Crouton; lorsqu'ils ne parviennent pas à charger, un gestionnaire d'exceptions réorganise les chemins et se charge à partir du site Web.
• une heure locale actuelle est affichée en haut à droite, utile pour la vérification de la programmation.

DÉPENDANCES POLYMÈRES ET CORS

Les feuilles d'un arbre de dépendance Polymer peuvent être hébergées dans CORS. Étant donné que les dépendances racine peuvent être utilisées plusieurs fois dans une application, elles ne peuvent pas être référencées à partir de 2 emplacements (le site Web et l'appareil) car le chargeur de module polymère les traite comme 2 ressources distinctes et de multiples erreurs d'enregistrement font rapidement échouer une application.

Pour cette raison, le WebComponent d'une carte (fichier HTML en 1.4.0) et le fichier CSS associé sont les seuls fichiers hébergés sur l'appareil. Les autres dépendances sont référencées comme si le composant Web était hébergé dans le dossier "html" sur le site Web d'origine, ce qui facilite le développement des composants Web à partir de ce dossier jusqu'à ce qu'ils soient prêts à être téléchargés vers SPIFFS sur l'ESP8266. AssimilateCrouton déterminera comment obtenir les bons fichiers.

DÉPLOIEMENT

Le créateur d'edfungus du Crouton original a écrit la source en Pug/Less et avait une chaîne d'outils NPM/Grunt. J'ai rendu le Pug/Less en HTML/css et j'ai juste édité/distribué les fichiers rendus. Cela a brisé la chaîne d'outils NPM/Grunt. La résolution de ce problème est traitée dans la section FUTUR.

Vous pouvez tester le tableau de bord en local sur votre box DEV:

• Depuis la ligne de commande dans le dossier racine
• début npm
• le serveur lite est lancé pour

Déployez sur un serveur Web statique:

• copier tous les dossiers sauf node_modules
• copier index.html (et éventuellement web.config)

FUTUR

L'un des principaux objectifs est de passer à Polymer3 et de travailler à partir de la CLI Polymer. L'ajout d'éditeurs avancés et d'un cadre permettant aux développeurs IOT de développer les leurs est une priorité élevée. Finalement, le système automatisé avancé sera entièrement exécuté à partir de clients MQTT détachés comme AssimilateCrouton.

Un exemple du paquet deviceInfo utilisé pour AssimilateCrouton:

{

"Info appareil": {

"endPoints": {

"CC_device": {

"device_name": "ash_mezz_A3",

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

"ssid": "Corelines_2",

"ip_addr": "192.168.8.104",

"points finaux": [

{

"title": "Faire pousser les lumières",

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

"endpoint": "switch"

},

{

"title": "Lumières de jardinière",

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

"endpoint": "CC_switch"

}

]

},

"CC_switch": {

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

"info": "Allumer ou éteindre les lumières par tranches de 15 minutes",

"chemin": "https://192.168.8.104/cors",

"title": "Lumières de jardinière",

"interval_mins": 15,

"valeurs": {

"valeur": ""

}

},

"changer": {

"title": "Faire pousser les lumières",

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

"info": "Allumer ou éteindre les lumières de façon ponctuelle",

"Étiquettes": {

"faux": "OFF",

"true": "ON"

},

"Icônes": {

"false": "sun-o",

"true": "sun-o"

},

"valeurs": {

"valeur": 0

}

}

},

"statut": "bien",

"nom": "ash_mezz_A3",

"description": "Bureau à Ashmore, Mezzanine, Zone A2",

"couleur": "#4D90FE"

}

}

voir rawdeviceInfo.json hébergé avec ❤ par GitHub

Étape 3: ASSEMBLAGE DE L'APPAREIL

Comme il n'y a pas de changements matériels, voici les liens vers les informations pertinentes:

• Assemblage de la coque
• Matériaux et outils
• Préparation MCU
• Préparation du boîtier MCU
• Construction de l'interrupteur côté bas des esclaves/carte fille RESET
• Assemblage des principaux composants

Étape 4: FIRMWARE

PRINCIPAUX CHANGEMENTS DE CETTE CONSTRUCTION

Pour que l'application AssimilateCrouton puisse utiliser les ressources CORS de l'appareil, les en-têtes de réponse devaient être configurés d'une manière particulière. Cela a été implémenté dans cette version du firmware (static_server.ino => server_file_read()).

De plus, le graphique de dépendance principal pour Polymer devait provenir d'une seule origine. Une stratégie a été utilisée pour ajouter un gestionnaire d'erreur (corsLinkOnError) aux fichiers SPIFFS CORS pour recharger les ressources du site Web AssimilateCrouton lorsqu'elles ne sont pas trouvées sur l'appareil.

Il y a 2 nouvelles conventions ajoutées au système de fichiers SPIFFS pour personnaliser les points de terminaison qui sont créés dans deviceInfo - qu'AssimilateCrouton utilise pour créer les cartes de tableau de bord:

• /config/user_card_base.json Définition du point de terminaison avec les variables d'exécution échangées en premier:,,. C'est généralement là que la carte d'appareil assim sera ajoutée. Cela ne communique pas avec l'appareil.
• /config/user_card_#.json Définition du point de terminaison avec les variables d'exécution échangées en premier:,,. C'est généralement là que les éditeurs riches comme la carte assim-weekview seront ajoutés connectés à l'esclave I2C (acteur/capteur) qui se rapporte à #.

LES CROQUIS/BIBLIOTHÈQUES

À ce stade, le projet a été emballé à titre d'exemple pour la bibliothèque AssimilateBus Arduino. Il s'agit principalement de rendre tous les fichiers nécessaires faciles d'accès depuis l'IDE Arduino. Les principaux artefacts de code sont:

• mqtt_crouton_esp8266_cors_webcomponents.ino - le point d'entrée principal.
• assimilate_bus.h/assimilate_bus.cpp - la bibliothèque qui gère la communication I2C avec les capteurs/acteurs esclaves
• VizJson.h/VizJson.cpp - la bibliothèque qui formate/construit tout JSON publié via MQTT
• config.h/config.cpp - la bibliothèque qui lit/boîte/écrit les fichiers de configuration sur SPIFFS
• static_i2c_callbacks.ino - les rappels I2C pour une propriété en cours de réception et le cycle des demandes d'esclaves étant terminé static_mqtt.ino - les fonctions MQTT
• static_server.ino - les fonctions du serveur Web
• static_utility.ino - fonctions d'assistance

Les fonctions statiques de l'INO ont été utilisées (à la place des bibliothèques) pour diverses raisons, mais principalement pour que les fonctions Webserver et MQTT puissent bien fonctionner ensemble.

LES RESSOURCES SPIFFS

Des explications détaillées sur les fichiers SPIFFS peuvent être trouvées ici.

• favicon.ico - ressource utilisée par Ace Editor

• configuration

  • device.json - la configuration de l'appareil (Wifi, MQTT…)
  • slave_metas_#.json - généré à l'exécution pour chaque numéro d'adresse d'esclave (#)
  • user_card_#.json - point de terminaison personnalisé à intégrer dans deviceInfo pour chaque numéro d'adresse esclave (#)
  • user_card_base.json - point de terminaison personnalisé à intégrer dans deviceInfo pour l'appareil
  • user_meta_#.json - les métadonnées personnalisées remplacent celles des esclaves pour chaque numéro d'adresse d'esclave (#)
  • user_props.json - noms de propriétés personnalisés pour remplacer ceux des métadonnées des esclaves

• cors

  • card-webcomponent.css - feuille de style pour diverses cartes personnalisées
  • card-webcomponent.html - composant Web pour diverses cartes personnalisées

• éditeur

  • assimilate-logo-p.webp" />
  • edit.htm.gz - gzip d'Ace Editor HTML
  • edit.htm.src - HTML d'origine de l'éditeur Ace
  • favicon-32x32-p.webp" />

TÉLÉCHARGEMENT DU FIRMWARE

• Le référentiel de code peut être trouvé ici (instantané).
• Un ZIP de la bibliothèque peut être trouvé ici (instantané).
• Instructions pour "Importer une bibliothèque ZIP" ici.
• Une fois la librairie installée vous pouvez ouvrir l'exemple "mqtt_crouton_esp8266_cors_webcomponents".
• Instructions pour configurer Arduino pour le Wemos D1 Mini ici.
• Dépendances: ArduinoJson, TimeLib, PubSubClient, NeoTimer (voir les pièces jointes en cas de rupture des modifications dans les référentiels).

TÉLÉCHARGER SUR SPIFFS

Une fois le code chargé dans l'IDE Arduino, ouvrez device.json dans le dossier data/config:

• Modifiez la valeur de wifi_ssid avec votre SSID WiFi.
• Modifiez la valeur de wifi_key avec votre clé WiFi.
• Modifiez la valeur de mqtt_device_name avec votre identification de périphérique préférée (aucune connexion n'est nécessaire).
• Modifiez la valeur de mqtt_device_description avec votre description de périphérique préférée (dans Crouton).
• Enregistrez device.json.
• Téléchargez les fichiers de données dans SPIFFS.

Le point d'entrée principal pour l'exemple AssimilateBus:

/*

*

*LES RÈGLES COMMERCIALES POUR VOTRE APPAREIL DEVRAIENT ÊTRE CONTRLÉES VIA MQTT - PAS DUR DANS CE FIRMWARE

*

* Autre que setup et loop dans ce fichier

* les pièces mobiles importantes sont

* on_bus_received et on_bus_complete dans static_i2c_callbacks.ino

* et

* mqtt_publish et mqtt_callback dans static_mqtt.ino

*

*/

#include"types.h"

#include"VizJson.h"

#include"assimiler_bus.h"

#include"debug.h"

#include"config.h"

#comprendre

#comprendre // définissez MQTT_MAX_PACKET_SIZE sur ~ 3000 (ou vos besoins pour deviceInfo json)

#comprendre

#comprendre

#comprendre

#comprendre

#comprendre

//--------------------------------- DÉCLARATIONS DE MÉMOIRE

//------------------------------------------------ -- définit

#defineDBG_OUTPUT_FLAG2//0, 1, 2 MINIMUM, LIBÉRATION, COMPLET

#define_mqtt_pub_topic"outbox"// CONVENTIONS CROUTON

#define_mqtt_sub_topic"boîte de réception"

//------------------------------------------------ -- objets de classe

Déboguer _debug(DBG_OUTPUT_FLAG);

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

//------------------------------------------------ -- structs de données / variable

RuntimeDeviceData _runtime_device_data;

PropertyDto _dto_props[50]; // max 10 esclaves x max 5 propriétés

//------------------------------------------------ -- flux de contrôle

volatilebool _sent_device_info = false;

octet _dto_props_index = 0;

bool _fatal_error = false;

//---------------------------------DÉCLARATIONS DE PÉRIMÈTRE DE FONCTIONNEMENT

//------------------------------------------------ -- 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* payload, unsignedint length);

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 (adresse d'octet, code d'octet, constchar *param);

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

String server_content_type_get(String filename);

boolserver_path_in_auth_exclusion (chemin de chaîne);

boolserver_auth_read (chemin de chaîne);

boolserver_file_read (chemin de chaîne);

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

Chaîne spiffs_file_list_build (chemin de chaîne);

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 (octet slave_address, octet prop_index);

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

octet get_prop_dto_idx (octet slave_address, octet prop_index);

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

void setup(){

DBG_OUTPUT_PORT.begin(115200);

SetupDeviceData device_data;

Serial.println(); Serial.println(); // marge pour les déchets de la console

retard (5000);

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

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

// obtient la configuration requise

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

revenir;

}

}autre{

report_spiffs_error();

revenir;

}

// utilise la valeur de la minuterie définie dans 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();

// lance la collecte de métadonnées

_assimilate_bus.get_metadata();

_assimilate_bus.print_metadata_details();

mqtt_ensure_connect();

// a besoin de la propriété du capteur (noms) pour terminer la collecte des métadonnées

_assimilate_bus.get_properties(on_bus_received, on_bus_complete);

_timer_property_request.reset(); // peut s'écouler un temps notable jusqu'à ce point, alors recommencez

}

boucle vide(){

si (!check_fatal_error()) return;

mqtt_loop();

_server.handleClient();

if(_timer_property_request.repeat()){

_assimilate_bus.get_properties(on_bus_received, on_bus_complete);

}

}

voir rawmqtt_crouton_esp8266_cors_webcomponents.ino hébergé avec ❤ par GitHub

Étape 5: CARTE DE L'APPAREIL

La carte de l'appareil (type de carte:assim-device) est hébergée sur le site Web et il n'est pas nécessaire de la servir à partir de l'appareil (CORS).

Sa page par défaut répertorie:

• Les rubriques MQTT pour la lecture et l'écriture sur l'appareil
• Le point d'accès auquel l'appareil est connecté
• Un lien vers l'éditeur de fichiers SPIFFS hébergé sur l'appareil à l'aide de l'ACE EDITOR
• Une icône en forme d'œil qui révèle la page Afficher/Masquer la carte.

La page Afficher/Masquer la carte répertorie:

• Chaque carte comme élément séparé
• Police bleue en gras lors de l'affichage
• Police normale noire lorsqu'elle est masquée
• Une icône représentant le type de carte.

La carte peut être masquée en cliquant sur le bouton Masquer sur les cartes ou en cliquant sur un élément de police bleu-gras dans la liste. Les cartes peuvent être affichées en cliquant sur un élément de police noire-normale dans la liste.

Les informations toasts sont vaguement liées à cette fonctionnalité. Si l'un des points de terminaison de deviceInfo a une propriété d'information attribuée, un bouton d'information s'affichera à côté du bouton de masquage sur la carte. Lorsque vous cliquez dessus, les informations contextuelles définies dans le point de terminaison seront "grillées" dans la fenêtre.

Si la carte de l'appareil n'est pas définie, les boutons de masquage ne seront pas affichés sur les cartes. C'est parce qu'une fois cachés, il n'y a aucun moyen de les montrer à nouveau.

Voir ENDPOINT PERSONNALISATION pour détailler comment la carte d'appareil assim peut être ajoutée via les fichiers SPIFFS sur l'ESP8266.

Composant Web AssimilateCrouton

signaux-fer>

div>

AFFICHER MASQUER L'ICNE

je>span>

FORMULAIRE D'APPAREIL

SUJETS MQTTdiv>

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

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

WIFI SSIDdiv>

{{endPointJson.ssid}}div>

ADRESSE IPdiv>

{{endPointJson.ip_addr}}a>div>

div>

AFFICHER MASQUER LA LISTE

élément> [item.title]paper-item>

modèle>

liste-papier>

div>

carte-croutons>

modèle>

dom-module>

voir rawassim-device.html hébergé avec ❤ par GitHub

Étape 6: CARTE WEEKVIEW

La carte weekview (card-type:assim-weekview) est hébergée sur l'appareil (dossier cors). Il est injecté dans le paquet deviceInfo publié pour AssimilateCrouton, en ajoutant un fichier config/user_card_#.json à SPIFFS (dans ce cas user_card_9.json).

APERÇU

Les jours de la semaine sont présentés sous forme de listes de plages horaires. La granularité de la plage horaire est définie avec la propriété "interval_mins" dans config/user_card_#.json. Il doit s'agir d'une fraction d'heure ou de multiples d'une heure, par ex. 10, 15, 20, 30, 60, 120, 360. En cliquant sur un intervalle de temps, vous vous assurez qu'un état activé est commandé pour le périphérique associé pendant cette période. Si la plage horaire est maintenant, une commande est envoyée (publiée) immédiatement pour l'appareil. Normalement, l'état est vérifié/publié toutes les minutes. Les sélections sont enregistrées dans LocalStorage, les heures seront donc rechargées avec une actualisation du navigateur.

CAS D'UTILISATION

Dans son état actuel, la vue hebdomadaire convient aux appareils qui peuvent utiliser un interrupteur à bascule pour visualiser leur état, c'est-à-dire qu'ils sont allumés ou éteints et qu'après avoir été définis, ils restent dans cet état. Les lumières, les ventilateurs et les chauffe-eau sont de bons candidats.

LIMITATIONS/MISE EN GARDE

• Le interval_mins doit être l'une des valeurs mentionnées ci-dessus
• La vue hebdomadaire ne prend pas en charge les actions momentanées qui sont également programmées, telles que l'activation d'un robinet brièvement (5 secondes) deux fois par jour.

FUTUR

• On s'attend à ce que les actions momentanées soient soutenues.
• Le stockage synchronisé sur tous les appareils, pour les sélections de planification, est à l'étude.

Étape 7: PERSONNALISATION DES ENDPOINTS

Comme mentionné brièvement dans FIRMWARE, il y a 2 nouvelles conventions ajoutées au système de fichiers SPIFFS pour personnaliser les points de terminaison. Les fichiers JSON sont des fragments qui sont ajoutés à la propriété des points de terminaison dans le paquet deviceInfo publié sur le courtier MQTT qui devient la définition du tableau de bord.

Les clés des endpoints sont générées dans le firmware:

• CC_device (Custom Card) pour le user_card_base.json
• CC_SLAVE_ENDPOINT NAME pour le user_card_#.json (# étant l'adresse de l'esclave)

Comme mentionné précédemment, certaines variables se substituent aux valeurs lors de l'exécution:

• mqtt_device_name
• wifi_ssid
• ip_local

user_card_base.json

Un exemple:

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

user_card_#.json

Un exemple:

{ "card-type": "assim-weekview", "path": "https:///cors", "title": "Planter Lights", "info": " Allumer ou éteindre les lumières en 15 minutes slots", "interval_mins": 15, "values": { "value": "" } }

Étape 8: VIDÉOS