mqtt panel
1.0.0
Panel Aplikasi Web Self Hosted untuk MQTT
Proyek ini menyediakan layanan yang dapat dihosting sendiri yang terhubung ke broker MQTT dan melayani panel aplikasi web progresif yang sepenuhnya dapat dikonfigurasi melalui YAML. Ini bertujuan untuk menjadi panel sederhana yang memberikan interaktivitas pengguna dengan topik MQTT. Cocok untuk penyebaran layanan mikro mandiri atau MQTT, dan dapat digunakan di samping solusi otomatisasi rumah. Itu tidak menawarkan kemampuan tingkat yang lebih tinggi seperti otomatisasi, integrasi atau penjadwalan.
Berlari
docker run -it --rm -p 8080:8080 sourcesimian/mqtt-panel:latest
dan telusuri http: // localhost: 8080 yang akan muncul sebagai:
Gambar kontainer prebuilt tersedia di Docker Hub.
Berlari
mkdir -p $HOME/.cache/mqtt-panel
docker run -n mqtt-panel -d -it --rm -p 8080:8080
--volume my-config.yaml:/config.yaml:ro
--volume $HOME/.cache/mqtt-panel:/data/cache:rw
sourcesimian/mqtt-panel:latest
Konfigurasikan penyebaran Anda untuk mencukupi konfigurasi Docker di atas. Selain itu, Anda dapat menambahkan titik akhir AT /api/health pada port HTTP yang dikonfigurasi. Untuk melakukan penghentian titik akhir SSL, Anda dapat menambahkan pengontrol masuk seperti Traefik yang datang standar dengan K3S.
Penyebaran yang khas mungkin termasuk:
volumes:
- name: config
configMap:
name: mqtt-panel-config
- name: data
hostPath:
path: /mnt/mqtt-panel/data
type: DirectoryOrCreate
containers:
- name: mqtt-panel
image: sourcesimian/mqtt-panel:latest
ports:
- containerPort: 8080
volumeMounts:
- name: config
mountPath: /config.yaml
subPath: config.yaml
- name: data
mountPath: /data
livenessProbe:
initialDelaySeconds: 30
periodSeconds: 30
httpGet:
path: /api/health
port: 8080
Kubernetes memungkinkan file konfigurasi disediakan dengan berbagai cara. Menggunakan ConfigMap Perintah berikut adalah cara yang konvensient untuk memasok dan memperbarui langsung dari YAML Anda:
kubectl -n "$NAMESPACE" delete configmap mqtt-panel-config &>/dev/null || true
kubectl -n "$NAMESPACE" create configmap mqtt-panel-config
--from-file=config.yaml=./config-my.yaml
kubectl -n "$NAMESPACE" rollout restart deploy mqtt-panel
Instalasi MQTT-Panel akan membutuhkan broker MQTT untuk terhubung. Ada banyak kemungkinan yang tersedia. Dalam demo EMQ X, broker open-source, cloud-asli, digunakan. Anda dapat berlangganan sourcesimian/mqtt-panel/demo/# dengan pemirsa MQTT favorit Anda. Eclipse Mosquitto adalah pilihan yang diselenggarakan dengan swadaya dengan banyak cara pemasangan termasuk wadah pra-dibangun di Docker Hub.
Untuk memuji infrastruktur MQTT Anda, Anda dapat mempertimbangkan layanan microser berikut:
| Melayani | Keterangan |
|---|---|
| MQTT-GPIO | Menghubungkan topik MQTT ke pin GPIO. |
| mqtt-ical | Menerbitkan nilai -nilai ke topik MQTT berdasarkan peristiwa dalam kalender ical. |
| MQTT-KUBE | Peta nilai objek Kubernetes ke dan dari topik pada MQTT. |
| Nodered | Alat pemrograman visual berbasis aliran untuk kabel bersama-sama perangkat, dengan integrasi MQTT bawaan dan banyak lainnya tersedia. Dapat dengan mudah digunakan untuk menambahkan perilaku tingkat yang lebih tinggi. |
mqtt-panel mengkonsumsi satu file YAML. Untuk memulai, Anda dapat menyalin config-basic.yaml
Berikut ini adalah konvensi yang digunakan dalam konfigurasi YAML:
| Barang | Keterangan |
|---|---|
<string> | Setiap serangkaian karakter, lebih disukai "dikutip" untuk menghindari YAML dari menafsirkan dengan cara yang berbeda. |
<icon> | Ini adalah material-icons dari perpustakaan Google Fonts. |
<color> | Apakah warna gaya HTML, misalnya red , "#F04040" , rgb(240, 64, 64) , dll. Gunakan "kutipan" untuk memastikan bahwa # tidak ditafsirkan sebagai komentar. |
<topic> | Topik MQTT, misalnya fizz/buzz/status . Langganan juga dapat menerima wildcard * dan # . Gunakan "kutipan" untuk memastikan bahwa # tidak ditafsirkan sebagai komentar. |
<identifier> | Serangkaian karakter alfa-numerik, dan _ |
mqtt:
host: <host> # optional: MQTT broker host, default: 127.0.0.1
port: <port> # optional: MQTT broker port, default 1883
client-id: mqtt-panel # MQTT client identifier, often brokers require this to be unique
topic-prefix: <topic prefix> # optional: Scopes the MQTT topic prefix
auth: # optional: Defines the authentication used to connect to the MQTT broker
type: <type> # Auth type: none|basic|mtls, default: none
... (<type> specific options)
type: basic
username: <string> # MQTT broker username
password: <string> # MQTT broker password
type: mtls
cafile: <file> # CA file used to verify the server
certfile: <file> # Certificate presented by this client
keyfile: <file> # Private key presented by this client
keyfile_password: <string> # optional: Password used to decrypt the `keyfile`
protocols:
- <string> # optional: list of ALPN protocols to add to the SSL connection
http:
bind: <bind> # optional: Interface on which web server will listen, default 0.0.0.0
port: <port> # Port on which web server will listen, default 8080
max-connections: <integer> # optional: Limit the number of concurrent connections, default 100
logging-level: <level> # optional: Select logging level of HTTP requests, default: INFO
auth: # User Auth
users: # optional: User/password auth
- username: <string>
password: <string>
cache: # Configure cache
root: <path> # optional root path, default ./cache
logging: # Logging settings
level: INFO # optional: Logging level, default DEBUG
mqtt-panel dibagi menjadi panel, satu panel ditampilkan pada satu waktu, setiap panel adalah kumpulan grup.
panels:
- title: <string> # Panel title text
icon: <icon> # Icon shown on the menu bar
groups: # list of group identifiers
- <identifier> # e.g. "group_one"
... (repeat)
Grup adalah koleksi kotak widget. Mereka dapat digunakan kembali pada beberapa panel.
groups:
- title: <string> # Title text
name: <identifier> # Identifier, e.g. "group_one"
widgets: # List of widgets in ths group
... (widgets)
... (repeat)
Widget adalah elemen fungsional, yang digunakan untuk menerbitkan dan/atau berlangganan topik MQTT, dan menampilkan dan/atau memasukkan beberapa muatan.
Semua widget memiliki atribut umum berikut.:
- title: <string> # Title text
type: <type> # Widget type
qos: [0 | 1 | 2] # optional: MQTT QoS to use, default: 1
retain: [False | True] # optional: Publish with MQTT retain flag, default: False
cache: [False | True] # optional: Cache last seen payloads, default: False
ref: <widget reference> # optional: Identifier string for widget reuse.
retain adalah bendera yang ditetapkan saat menerbitkan muatan ke MQTT. Jika atur pesan akan bertahan di dalam broker, klien akan menerima kembali muatan itu saat terhubung kembali. Ini tidak selalu memberikan perilaku yang diinginkan.
Anda akan mencatat bahwa pada saat startup beberapa widget menunjukkan "tidak diketahui" sampai muatan pada topik MQTT yang berlangganan diterima. Untuk meningkatkan pengalaman pengguna cache: True akan mempertahankan muatan yang terlihat terakhir untuk sebuah widget. Ini memungkinkan server untuk segera menampilkan status terakhir yang diketahui setelah restart, bahkan dengan topik MQTT menggunakan retain: False .
Untuk menggunakan kembali widget, tambahkan atribut ref , lalu tambahkan widget ke grup lain sebagai:
- ref: <widget reference> # Identifier of widget to reuse
Cukup tampilkan muatan topik MQTT yang berlangganan.
- title: <string> # Title text
type: text # Widget type
subscribe: <topic> # MQTT topic to listen on
color: <color> # optional: Color of the text
Contoh:
- title: My Text
type: text
subscribe: text/content
color: "#123456"
Tampilkan beberapa teks, ikon dan warna ketika muatan yang ditentukan diterima dari topik yang berlangganan.
- title: <string> # Title text
type: light # Widget type
subscribe: <topic> # MQTT topic to listen on
values:
- payload: <string> # Payload to match for this value
text: <string> # optional: Text shown
icon: <icon> # optional: Icon shown
color: <color> # optional: Color of icon and text
... (repeat)
Contoh:
- title: My Light
type: light
subscribe: light/state
values:
- payload: "false"
text: OFF
color: black
icon: light
- payload: "true"
text: ON
color: yellow
icon: light
Publikasikan nilai konstan untuk topik MQTT.
- title: <string> # Title text
type: button # Widget type
text: <string> # optional: Text to show on widget
publish: <topic> # MQTT topic to write to
payload: <string> # MQTT payload to publish
Contoh:
- title: My Button
type: button
text: Push Me
publish: button/command
payload: PRESSED
Publikasikan muatan berikutnya dalam daftar nilai ke suatu topik. Perbarui tampilan dengan teks, ikon, dan warna saat muatan kembali pada topik yang berlangganan.
- title: <string> # Title text
type: switch # Widget type
publish: <topic> # MQTT topic to write to
subscribe: <topic> # MQTT topic to listen on
values:
- payload: <string> # Payload to match for this value
text: <string> # optional: Text shown
icon: <icon> # optional: Icon shown
color: <color> # optional: Color of icon and text
... (repeat)
Contoh:
- title: My Switch
type: switch
publish: widget/switch/command
subscribe: widget/switch/state
values:
- text: "Off"
payload: "false"
- text: "On"
payload: "true"
Tunjukkan nilai yang diterima dan pengukur batang vertikal di mana teks, ikon, dan warna akan berubah berdasarkan nilai muatan yang berlangganan.
- title: <string> # Title text
type: gauge # Widget type
subscribe: <topic> # MQTT topic to listen on
text: <string> # optional: The default text when not given with range
color: <color> # optional: The default color when not given with range
icon: <icon> # optional: The default icon when not given with range
ranges:
- range: [<int>, <int>] # Value for start and end of range
text: <string> # optional: Text shown when value in range
color: <color> # optional: Color shown when value in range
icon: <icon> # optional: Icon shown when value in range
... (repeat)
# max and min value will be determined from starts and ends
Contoh:
- title: Sound
type: gauge
subscribe: example/volume
ranges:
- range: [0, 10]
text: "Quiet"
icon: volume_off
color: "#00c000"
- range: [10, 30]
text: "Gentle"
icon: volume_mute
color: "#02b002"
- range: [30, 70]
text: "Medium"
icon: volume_down
color: "#82b002"
- range: [70, 90]
text: "Noisy"
icon: volume_up
color: "#b08a02"
- range: [90, 100]
text: "Loud"
icon: volume_up
color: "#b03c02"
Tunjukkan nilai yang diterima dan pengukur batang vertikal di mana teks, ikon, dan warna akan berubah berdasarkan nilai muatan yang berlangganan. Selain itu ketika disadap, tunjukkan slider yang dapat digunakan untuk memasukkan dan menerbitkan nilai antara nilai maks dan min.
- title: <string> # Title text
type: slider # Widget type
live: [False | True] # optional: Realtime publishing. Default: False
... (same as gauge)
Pengaturan live: True Nilai slider saat ini akan diterbitkan saat berubah. Perilaku default adalah untuk mempublikasikan hanya nilai akhir yang dipilih ketika slider dirilis.
Tampilkan beberapa teks, ikon dan warna ketika muatan yang ditentukan diterima dari topik yang berlangganan. Saat disadap, menunjukkan daftar nilai -nilai lain yang dapat dipublikasikan.
- title: <string> # Title text
type: select # Widget type
publish: <topic> # MQTT topic to write to
subscribe: <topic> # optional: MQTT topic to listen on
values:
- payload: <string> # Payload to send and match
text: <string> # optional: Text shown
icon: <icon> # optional: Icon shown
color: <color> # optional: Color of icon and text
... (repeat)
Contoh:
- title: My Select
type: select
publish: widget/select/command
subscribe: widget/select/state
values:
- text: "Venice"
payload: "Gondola"
icon: rowing
color: cyan
- text: "Cape Town"
payload: "Mountain"
icon: landscape
color: green
Tampilkan konten di <iframe> . Atribut src dapat terikat pada topik MQTT.
- title: <string> # Title text
type: iframe # Widget type
subscribe: <topic> # optional: MQTT topic to listen on, bound to iframe 'src'
refresh: <seconds> # optional: Interval at which to refresh the iframe
attr: # Attributes to be set on the iframe
src: <url> # optional: Can be set as a default vaule for 'src'
... # additional attributes
Contoh:
- title: Iframe
type: iframe
subscribe: iframe/src
attr:
src: https://www.youtube.com/embed/dQw4w9WgXcQ
width: 480px
height: 315px
title: YouTube video player
allow: accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture
allowfullscreen:
Ya Tentu! Dan tolong. Saya membangun MQTT-panel karena saya tidak dapat menemukan solusi "Saya tidak siap untuk berkomitmen untuk ha ha yang penuh" yang diselenggarakan sendiri dan sisi server dapat dikonfigurasi. Saya tidak tahu banyak tentang HTML kontemporer, CSS dan naskah jadi saya dengan senang hati akan menerima saran dari mereka yang tahu lebih banyak. Saya ingin itu menjadi proyek yang cepat dan mudah dibangun dan dijalankan, dan membantu membuka MQTT kepada siapa pun. Changelog.md
Sebelum mendorong PR, harap pertimbangkan untuk menambahkan tes unit dan pastikan bahwa make check dan make test bersih.
Siapkan VirtualEnv:
python3 -m venv virtualenv
. ./virtualenv/bin/activate
python3 ./setup.py develop
Jalankan server:
mqtt-panel ./config-demo.yaml
Dalam semangat para peretas Tech Model Railroad Club dari Massachusetts Institute of Technology, yang memberi kita semua yang sangat banyak untuk dimainkan. Lisensi adalah MIT.
