IOT123 - HUB SENSOR ASSIMILATE: ICOS10 CORS WEBCOMPONENTS: 8 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-31 10:23

Hamba ASSIMILATE SENSOR / ACTOR menanamkan metadata yang digunakan untuk menggambarkan visualisasi di Crouton. Binaan ini sedikit berbeza dengan yang sebelumnya; tidak ada perubahan perkakasan. Firmware kini menyokong hosting penyunting khusus (lebih kaya) yang dapat disatukan ke dalam binaan terbaru AssimilateCrouton. Lebih banyak perhatian akan diberikan untuk menjelaskan firmware dan papan pemuka MQTT dalam artikel ini.

Salah satu kelebihan melayani Komponen Web dari peranti yang mereka kendalikan, ialah kawalan peranti yang lebih maju dibatasi ke rangkaian yang disambungkan oleh peranti: Titik Akses WiFi anda. Walaupun setelah anda menggunakan pelayan MQTT dengan pengesahan, terdapat kemiripan perlindungan, di rangkaian awam jika anda meninggalkan Penyemak Imbas anda sesaat (laman web AssimilateCrouton) seseorang dapat masuk dan mengawal peranti automasi anda. Ciri CORS WebComponent ini memungkinkan hanya pembacaan (suhu, tahap cahaya, kelembapan) yang ditampilkan di depan umum dan fungsi perintah (hidup / mati, penjadualan) hanya tersedia dari rangkaian peranti.

Pada peranti, semua ciri pelayan web dengan Pengesahan dan Pengehosan dalam SPIFFS masih disokong, tetapi tumpuan khusus telah dibuat untuk sokongan CORS (Cross Origin Resource Sharing) untuk Polimer WebComponents (Crouton menggunakan Polimer 1.4.0).

Dalam AssimilateCrouton (garpu Crouton yang digunakan untuk Rangkaian IOT Assimilate) perubahannya merangkumi

• sokongan untuk kad Peranti (assim-device) yang antara lain menunjukkan dan menyembunyikan, untuk pengguna, kad individu untuk peranti
• maklumat harta pada semua kad yang menunjukkan roti maklumat kontekstual yang berguna untuk kad
• sokongan untuk komponen web CORS, dalam hal ini dihoskan di pelayan web pada peranti (ESP8266).

Langkah 1: CROUTON

Croutonis adalah papan pemuka yang membolehkan anda memvisualisasikan dan mengawal peranti IOT anda dengan persediaan minimum. Pada asasnya, ia adalah papan pemuka paling mudah untuk disiapkan bagi mana-mana peminat perkakasan IOT yang hanya menggunakan MQTT dan JSON.

ASSIMILATE SLAVES (sensor dan pelakon) telah menyertakan metadata dan sifat yang digunakan oleh master untuk membina paket json deviceInfo yang digunakan Crouton untuk membina papan pemuka. Perantara antara ASSIMILATE NODES dan Crouton adalah broker MQTT yang mesra websockets: Nyamuk digunakan untuk demo.

Oleh kerana ASSIMILATE MASTER meminta sifat, ia membentuk nilai tindak balas dalam format yang diperlukan untuk kemas kini Crouton. Garpu AssimilateCrouton menambah beberapa ciri yang membolehkan anda mendesentralisasi peraturan perniagaan yang menjalankan peranti anda iaitu peranti IOT tidak memerlukan peraturan perniagaan yang tertanam, ini hanyalah saluran komunikasi komunikasi MQTT / I2C kepada pelakon dan sensor hamba (ATTINY terkawal) yang lebih pintar.

Langkah 2: ASSIMILASI CROUTON

PERUBAHAN KEPADA CROUTON

Perubahan dari versi bercabang merangkumi:

• jika titik akhir mempunyai sifat jalan yang ditentukan, Komponen Web untuk kad akan melakukan HTMLImport untuk sumber CORS (pelayan web pada ESP8266 dalam binaan ini).
• sebarang sumber di hulu dari (dependensi) Komponen Web CORS dirujuk seolah-olah dilayan dari laman web Crouton; apabila mereka gagal memuat pengecualian pengendali menukar jalan dan memuatkan jika dari laman web.
• waktu tempatan semasa dipaparkan di sebelah kanan atas, berguna untuk pengesahan penjadualan.

DEPENDENSI POLYMER DAN KOR

Daun pokok pergantungan Polimer boleh dihoskan di CORS. Kerana ketergantungan root dapat digunakan beberapa kali dalam aplikasi, mereka tidak dapat dirujuk dari 2 lokasi (laman web dan peranti) kerana Pemuat Modul Polimer memperlakukan mereka sebagai 2 sumber yang terpisah dan banyak kesalahan pendaftaran dengan cepat menjatuhkan aplikasi.

Atas sebab ini, Komponen Web untuk kad (fail HTML di 1.4.0) dan fail CSS yang berkaitan adalah satu-satunya fail yang dihoskan di peranti. Ketergantungan lain dirujuk seolah-olah WebComponent dihoskan dalam folder "html" di laman web asal, yang memudahkan pengembangan WebComponents dari folder itu sehingga siap dimuat naik ke SPIFFS pada ESP8266. AssimilateCrouton akan mengetahui cara mendapatkan fail yang betul.

PENGERTIAN

pencipta edfungus Crouton yang asli menulis sumber dalam Pug / Less dan mempunyai alatan alat NPM / Grunt. Saya memberikan Pug / Less sebagai HTML / css dan hanya mengedit / menyebarkan fail yang diberikan. Ini memecahkan rantai alat NPM / Grunt. Memperbaiki ini diliputi di bahagian MASA DEPAN.

Anda boleh menguji papan pemuka secara tempatan pada kotak DEV anda:

• Dari baris arahan di folder root
• npm bermula
• pelayan lite diputar untuk https:// localhost: 10001

Terapkan ke pelayan web statik:

• salin semua folder kecuali node_modules
• salin index.html (dan mungkin web.config)

MASA DEPAN

Salah satu tujuan utama adalah menaik taraf ke Polymer3 dan bekerja dari Polymer CLI. Menambah editor dan rangka kerja lanjutan untuk pembangun IOT untuk mengembangkannya sendiri adalah keutamaan. Akhirnya sistem automatik yang maju akan dijalankan sepenuhnya dari klien MQTT yang terpisah seperti AssimilateCrouton.

Contoh paket deviceInfo yang digunakan untuk AssimilateCrouton:

{

"deviceInfo": {

"titik akhir": {

"CC_device": {

"device_name": "ash_mezz_A3",

"jenis kad": "assim-device",

"ssid": "Corelines_2",

"ip_addr": "192.168.8.104",

"titik akhir": [

{

"title": "Tumbuh Lampu",

"kad-jenis": "crouton-simple-toggle",

"endpoint": "tukar"

},

{

"title": "Planter Lights",

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

"endpoint": "CC_switch"

}

]

},

"CC_switch": {

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

"info": "Nyalakan atau matikan lampu dalam slot masa 15 minit",

"jalan": "https://192.168.8.104/cors",

"title": "Planter Lights",

"interval_mins": 15,

"nilai": {

"nilai": ""

}

},

"tukar": {

"title": "Tumbuh Lampu",

"kad-jenis": "crouton-simple-toggle",

"info": "Hidupkan atau matikan lampu secara ad hoc",

"label": {

"false": "MATI",

"benar": "AKTIF"

},

"ikon": {

"false": "sun-o",

"benar": "sun-o"

},

"nilai": {

"nilai": 0

}

}

},

"status": "bagus",

"nama": "ash_mezz_A3",

"description": "Pejabat di Ashmore, Mezzanine, Area A2",

"warna": "# 4D90FE"

}

}

lihat rawdeviceInfo.json dihoskan dengan ❤ oleh GitHub

Langkah 3: PERATURAN PERANTI

Oleh kerana tidak ada perubahan perkakasan, berikut adalah pautan ke maklumat yang berkaitan:

• Pemasangan Shell
• Bahan dan Alat
• Persediaan MCU
• Persiapan Perumahan MCU
• Membina Papan Anak-Anak Beralih / RESET sisi rendah
• Menyusun Komponen Utama

Langkah 4: PERISIAN

PERUBAHAN UTAMA BANGUNAN INI

Agar aplikasi AssimilateCrouton dapat menggunakan sumber CORS dari peranti, tajuk respons perlu dikonfigurasi dengan cara tertentu. Ini dilaksanakan dalam pelepasan firmware ini (static_server.ino => server_file_read ()).

Graf kebergantungan utama untuk Polimer juga mesti berasal dari satu asal. Strategi digunakan untuk menambahkan pengendali onerror (corsLinkOnError) ke fail SPIFFS CORS untuk memuatkan semula sumber dari laman web AssimilateCrouton apabila mereka tidak dijumpai di peranti.

Terdapat 2 konvensyen baru yang ditambahkan ke sistem fail SPIFFS untuk menyesuaikan titik akhir yang dibuat di deviceInfo - yang digunakan oleh AssimilateCrouton untuk membuat kad papan pemuka:

• /config/user_card_base.json Definisi titik akhir dengan pemboleh ubah runtime ditukar terlebih dahulu:,,. Ini biasanya di mana kad peranti asim akan ditambahkan. Ini tidak berkomunikasi semula dengan peranti.
• /config/user_card_#.json Definisi titik akhir dengan pemboleh ubah runtime ditukar terlebih dahulu:,,. Ini biasanya di mana penyunting yang kaya seperti kad assim-weekview akan ditambahkan bersambung dengan hamba I2C (pelakon / sensor) yang berkaitan dengan #.

SKETCH / PERPUSTAKAAN

Pada tahap ini projek telah dikemas sebagai contoh untuk perpustakaan AssimilateBus Arduino. Ini adalah untuk menjadikan semua fail yang diperlukan mudah diakses dari Arduino IDE. Artefak kod utama adalah:

• mqtt_crouton_esp8266_cors_webcomponents.ino - titik masuk utama.
• assimilate_bus.h / assimilate_bus.cpp - perpustakaan yang mengendalikan komunikasi I2C dengan Slave Sensor / Actors
• VizJson.h / VizJson.cpp - perpustakaan yang memformat / membina mana-mana JSON yang diterbitkan melalui MQTT
• config.h / config.cpp - perpustakaan yang membaca / kotak / menulis fail konfigurasi pada SPIFFS
• static_i2c_callbacks.ino - panggilan balik I2C untuk harta yang diterima dan kitaran permintaan hamba menjadi lengkap static_mqtt.ino - fungsi MQTT
• static_server.ino - fungsi pelayan laman web
• static_utility.ino - fungsi penolong

Fungsi INO statik digunakan (bukan perpustakaan) untuk pelbagai alasan, tetapi terutamanya agar fungsi Webserver dan MQTT dapat dimainkan bersama.

SUMBER SPIFFS

Penjelasan terperinci mengenai fail SPIFFS boleh didapati di sini.

• favicon.ico - sumber yang digunakan oleh Ace Editor

• konfigurasi

  • device.json - konfigurasi untuk peranti (Wifi, MQTT…)
  • slave_metas _ #. json - dihasilkan pada waktu runtime untuk setiap nombor alamat hamba (#)
  • user_card _ #. json - titik akhir khusus untuk diintegrasikan ke dalam deviceInfo untuk setiap nombor alamat hamba (#)
  • user_card_base.json - titik akhir khusus untuk diintegrasikan ke dalam deviceInfo untuk peranti
  • user_meta _ #. json - metadata kustom menggantikan hamba untuk setiap nombor alamat hamba (#)
  • user_props.json - nama harta tanah khusus untuk menggantikan yang ada dalam metadata hamba

• cors

  • card-webcomponent.css - helaian gaya untuk pelbagai kad tersuai
  • kad-webcomponent.html - komponen web untuk pelbagai kad tersuai

• penyunting

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

MENGGUNAKAN FIRMWARE

• Repositori kod boleh didapati di sini (gambar).
• ZIP perpustakaan boleh didapati di sini (gambar).
• Arahan untuk "Mengimport Perpustakaan ZIP" di sini.
• Setelah perpustakaan dipasang, anda boleh membuka contoh "mqtt_crouton_esp8266_cors_webcomponents".
• Arahan untuk menyediakan Arduino untuk Wemos D1 Mini di sini.
• Ketergantungan: ArduinoJson, TimeLib, PubSubClient, NeoTimer (lihat lampiran jika melanggar perubahan di repositori).

MENGGUNAKAN SPIFFS

Setelah kod dimasukkan ke Arduino IDE, buka device.json dalam folder data / config:

• Ubah nilai wifi_ssid dengan SSID WiFi anda.
• Ubah nilai wifi_key dengan Kunci WiFi anda.
• Ubahsuai nilai mqtt_device_name dengan Pengenalan Peranti pilihan anda (tidak perlu bergabung).
• Ubah nilai mqtt_device_description dengan Perihalan Peranti pilihan anda (dalam Crouton).
• Simpan peranti.json.
• Muat naik fail data ke SPIFFS.

Titik kemasukan utama untuk contoh AssimilateBus:

/*

*

* PERATURAN PERNIAGAAN UNTUK PERANGKAT ANDA DIPERTIMBANGKAN UNTUK DIKENDALIKAN VIA MQTT - TIDAK SEDANG DIBUAT KE DALAM FIRMWARE INI

*

* Selain persediaan dan gelung dalam fail ini

* bahagian bergerak yang penting adalah

* on_bus_received dan on_bus_complete di static_i2c_callbacks.ino

* dan

* mqtt_publish dan mqtt_callback dalam static_mqtt.ino

*

*/

#masuk "types.h"

#sertakan "VizJson.h"

#sertakan "assimilate_bus.h"

#sertakan "debug.h"

#sertakan "config.h"

#sertakan

#sertakan // tetapkan MQTT_MAX_PACKET_SIZE ke ~ 3000 (atau keperluan anda untuk deviceInfo json)

#sertakan

#sertakan

#sertakan

#sertakan

#sertakan

// --------------------------------- PENGAKUAN MEMORI

// ------------------------------------------------ - mentakrifkan

# defineDBG_OUTPUT_FLAG2 // 0, 1, 2 MINIMUM, SIARAN, PENUH

#define_mqtt_pub_topic "kotak keluar" // KONVENSI CROUTON

#define_mqtt_sub_topic "peti masuk"

// ------------------------------------------------ - objek kelas

Debug _debug (DBG_OUTPUT_FLAG);

AssimilateBus _assimilate_bus;

VizJson _viz_json;

Konfigurasi _config_data;

WiFiClient _esp_client;

PubSubClient _client (_esp_client);

WiFiUDP Udp;

ESP8266WebServer _server (80);

Neotimer _timer_property_request = Neotimer (5000);

// ------------------------------------------------ - struktur data / pemboleh ubah

RuntimeDeviceData _runtime_device_data;

PropertyDto _dto_props [50]; // maksimum 10 hamba x maksimum 5 sifat

// ------------------------------------------------ - mengawal aliran

volatilebool _sent_device_info = salah;

bait _dto_props_index = 0;

bool _fatal_error = salah;

// --------------------------------- PENGAKUAN SKOP FUNGSI

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

voidon_bus_received (byte slave_address, byte prop_index, Peranan peranan, nama char [16], nilai char [16]);

voidon_bus_complete ();

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

voidmqtt_callback (topik char *, byte * payload, panjang tidak ditandatangani);

voidmqtt_loop ();

int8_tmqtt_get_topic_index (char * topik);

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 (alamat bait, kod bait, constchar * param);

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

String server_content_type_get (String nama fail);

boolserver_path_in_auth_exclusion (Jalur rentetan);

boolserver_auth_read (Jalur rentetan);

boolserver_file_read (Jalur rentetan);

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 (Alamat IP & alamat);

char * time_stamp_get ();

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

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

// --------------------------------- UTAMA

kekosongan () {

DBG_OUTPUT_PORT.begin (115200);

SetupDeviceData device_data;

Bersiri.println (); Bersiri.println (); // margin untuk sampah konsol

kelewatan (5000);

jika (DBG_OUTPUT_FLAG == 2) DBG_OUTPUT_PORT.setDebugOutput (benar);

_debug.out_fla (F ("persediaan"), benar, 2);

// dapatkan konfigurasi yang diperlukan

jika (SPIFFS.begin ()) {

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

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

report_deserialize_error ();

kembali;

}

} lain {

report_spiffs_error ();

kembali;

}

// gunakan nilai pemasa yang ditetapkan di 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);

pelayan_init ();

// mulakan koleksi metadata

_assimilate_bus.get_metadata ();

_assimilate_bus.print_metadata_details ();

mqtt_ensure_connect ();

// memerlukan harta sensor (nama) untuk menyelesaikan pengumpulan metadata

_assimilate_bus.get_properties (on_bus_received, on_bus_complete);

_timer_property_request.reset (); // boleh melupakan masa yang ketara hingga saat ini jadi mulakannya lagi

}

kekosongan () {

jika (! check_fatal_error ()) kembali;

mqtt_loop ();

_server.handleClient ();

jika (_timer_property_request.repeat ()) {

_assimilate_bus.get_properties (on_bus_received, on_bus_complete);

}

}

lihat rawmqtt_crouton_esp8266_cors_webcomponents.ino dihoskan dengan ❤ oleh GitHub

Langkah 5: KAD PERANGKAT

Kad peranti (jenis kad: assim-device) dihoskan di laman web dan tidak diperlukan untuk menyerahkannya dari peranti (CORS).

Halaman lalai menyenaraikan:

• Topik MQTT untuk membaca dan menulis ke peranti
• Titik Akses yang disambungkan oleh peranti
• Pautan ke editor fail SPIFFS yang dihoskan pada peranti menggunakan ACE EDITOR
• Ikon mata yang menampakkan halaman Tunjuk / Sembunyikan kad.

Senarai halaman Papar / Sembunyikan kad:

• Setiap kad sebagai item yang berasingan
• Fon biru tebal semasa menunjukkan
• Fon biasa hitam apabila disembunyikan
• Ikon yang menggambarkan jenis kad.

Kad boleh disembunyikan dengan mengklik butang sembunyikan pada kad, atau mengklik item font tebal-biru dalam senarai. Kad-kad tersebut dapat ditunjukkan dengan mengklik item hitam-normal-font dalam senarai.

Terkait dengan ciri ini adalah maklumat mengenai maklumat. Sekiranya salah satu titik akhir di deviceInfo mempunyai sifat maklumat yang ditetapkan, butang maklumat akan ditunjukkan di sebelah butang sembunyikan pada kad. Apabila diklik, maklumat kontekstual yang ditentukan di titik akhir akan "dipanggang" ke tingkap.

Sekiranya kad peranti tidak ditentukan, butang sembunyikan tidak akan ditunjukkan pada kad. Ini kerana setelah tersembunyi tidak ada cara untuk menunjukkannya lagi.

Lihat ENDPOINT CUSTOMIZATION untuk memperincikan bagaimana kad peranti asim dapat ditambahkan melalui fail SPIFFS pada ESP8266.

Komponen Web AssimilateCrouton

isyarat besi>

div>

TUNJUKKAN IKON

i> span>

BORANG PERANTI

TOPIK MQTTdiv>

/ kotak keluar / {{endPointJson.device_name}} / * div>

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

WIFI SSIDdiv>

{{endPointJson.ssid}} div>

ALAMAT IPdiv>

{{endPointJson.ip_addr}} a> div>

div>

TUNJUKKAN SENARAI SEMBILAN

elemen>item-kertas>

templat>

kotak senarai kertas>

div>

kad crouton>

templat>

dom-modul>

lihat rawassim-device.html dihoskan dengan ❤ oleh GitHub

Langkah 6: KAD SEMINGGU

Kad weekview (jenis kad: assim-weekview) dihoskan pada peranti (folder cors). Ia disuntikkan ke dalam paket deviceInfo yang diterbitkan untuk AssimilateCrouton, dengan menambahkan file config / user_card _ #. Json ke SPIFFS (dalam hal ini user_card_9.json).

TINJAUAN KESELURUHAN

Hari bekerja disajikan sebagai senarai slot masa. Perincian slot masa ditetapkan dengan sifat "interval_mins" di config / user_card _ #. Json. Ia perlu pecahan satu jam atau gandaan satu jam mis. 10, 15, 20, 30, 60, 120, 360. Mengklik pada slot waktu memastikan keadaan hidup diperintahkan untuk peranti yang berkaitan pada masa itu. Sekiranya slot waktu sekarang, arahan akan dihantar (diterbitkan) segera untuk peranti. Biasanya keadaan disemak / diterbitkan setiap minit. Pilihan disimpan di LocalStorage, jadi waktu akan dimuat semula dengan penyegaran penyemak imbas.

KES PENGGUNAAN

Dalam keadaannya sekarang, tontonan minggu sesuai untuk peranti yang dapat menggunakan suis Toggle untuk menggambarkan keadaannya iaitu ia hidup atau mati dan setelah ditetapkan ia tetap dalam keadaan tersebut. Lampu, kipas, dan pemanas air adalah calon yang baik.

BATASAN / CAVEATS

• Interval_mins mestilah salah satu nilai yang disebutkan di atas
• Tinjauan minggu tidak menyokong tindakan sesaat yang juga dijadwalkan, seperti menghidupkan sebentar (5 saat) dua kali sehari.

MASA DEPAN

• Diharapkan tindakan seketika akan disokong.
• Penyimpanan yang disegerakkan di seluruh peranti, kerana pemilihan jadual sedang dipertimbangkan.

Langkah 7: PENGESAHAN ENDPOINT

Seperti yang disebutkan di dalam FIRMWARE, ada 2 konvensi baru yang ditambahkan ke sistem fail SPIFFS untuk menyesuaikan titik akhir. Fail JSON adalah fragmen yang ditambahkan ke harta benda akhir dalam paket deviceInfo yang diposkan ke broker MQTT yang menjadi definisi papan pemuka.

Kunci titik akhir dihasilkan dalam firmware:

• CC_device (Custom Card) untuk user_card_base.json
• CC_SLAVE_ENDPOINT NAME untuk user_card _ #. Json (# menjadi alamat hamba)

Seperti yang telah disebutkan sebelumnya, ada pemboleh ubah yang menggantikan nilai pada waktu runtime:

• mqtt_device_name
• wifi_ssid
• local_ip

user_card_base.json

Satu contoh:

kad_pengguna _ #. json

Satu contoh:

Langkah 8: VIDEO