mqtt panel
1.0.0
Selbst gehostete Web -App -Panel für MQTT
Dieses Projekt bietet einen selbstgünstigen Dienst, der eine Verbindung zu einem MQTT -Broker herstellt und ein progressives Web -App -Panel bedient, das über YAML vollständig konfigurierbar ist. Ziel ist es, ein einfaches Panel zu sein, das Benutzer mit MQTT -Themen Interaktivität verleiht. Geeignet für Standalone- oder MQTT -Microservice -Bereitstellungen und können neben Home -Automatisierungslösungen bereitgestellt werden. Es bietet keine höheren Funktionen wie Automatisierung, Integrationen oder Planung.
Laufen
docker run -it --rm -p 8080:8080 sourcesimian/mqtt-panel:latest
und stöbern Sie zu http: // localhost: 8080, die als:
Vorgebaute Containerbilder sind auf Docker Hub verfügbar.
Laufen
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
Konfigurieren Sie Ihre Bereitstellung so, dass sie die obige Docker -Konfiguration genügt. Zusätzlich können Sie den konfigurierten HTTP -Port einen Endpoint AT /api/health hinzufügen. Um die SSL -Endpoint -Beendigung durchzuführen, können Sie einen Eingangsregler wie Traefik hinzufügen, der Standard mit K3S ausgestattet ist.
Eine typische Bereitstellung kann umfassen:
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
Mit Kubernetes kann die Konfigurationsdatei auf verschiedene Weise geliefert werden. Verwenden einer configMap Die folgenden Befehle sind eine überzeugende Möglichkeit, direkt von Ihrem YAML zu liefern und zu aktualisieren:
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
Eine Installation von MQTT-Panel benötigt einen MQTT-Broker, um eine Verbindung herzustellen. Es stehen viele Möglichkeiten zur Verfügung. In der Demo EMQ X wird ein kostenloser Open-Source-Cloud-nativer-Broker verwendet. Sie können sourcesimian/mqtt-panel/demo/# mit Ihrem bevorzugten MQTT-Viewer abonnieren. Eclipse Mosquitto ist eine großartige selbst gehostete Option mit vielen Installationsmöglichkeiten, einschließlich vorgefertigter Container auf Docker Hub.
Um Ihre MQTT -Infrastruktur zu ergänzen, können Sie die folgenden anderen Microservices berücksichtigen:
| Service | Beschreibung |
|---|---|
| MQTT-GPIO | Verbindet MQTT -Themen mit GPIO -Stiften. |
| mqtt -ical | Veröffentlicht Werte an MQTT -Themen, die auf Ereignissen in einem iCal -Kalender basieren. |
| Mqtt-kube | Kubernetes -Objektwerte zu und von Themen auf MQTT. |
| Namiert | Ein fließbasiertes visuelles Programmierwerkzeug zur Zusammenstellung von Geräten mit integriertem MQTT-Integration und vielen anderen verfügbar. Kann leicht verwendet werden, um Verhaltensweisen auf höherem Niveau hinzuzufügen. |
mqtt-panel verbraucht eine einzige YAML-Datei. Zum Start können Sie config-basic.yaml kopieren
Im Folgenden finden Sie Konventionen, die in der YAML -Konfiguration verwendet werden:
| Artikel | Beschreibung |
|---|---|
<string> | Jede Zeichenfolge, vorzugsweise "zitiert", um zu vermeiden, dass Yaml auf andere Weise interpretiert wird. |
<icon> | Dies sind material-icons aus der Google Fonts Library. |
<color> | Ist jede HTML -Farbe, z. B. red , "#F04040" , rgb(240, 64, 64) usw. Verwenden Sie "Zitate", um sicherzustellen, dass die # nicht als Kommentar interpretiert wird. |
<topic> | Ein MQTT -Thema, z. B. fizz/buzz/status . Abonnements können auch die Wildcards * und # annehmen. Verwenden Sie "Zitate", um sicherzustellen, dass die # nicht als Kommentar interpretiert wird. |
<identifier> | Eine Zeichenfolge von alpha-numerischen Zeichen und _ |
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 ist in Panels unterteilt, ein Panel wird jeweils angezeigt, jedes Panel ist eine Sammlung von Gruppen.
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)
Eine Gruppe ist eine Box -Sammlung von Widgets. Sie können auf mehreren Panels wiederverwendet werden.
groups:
- title: <string> # Title text
name: <identifier> # Identifier, e.g. "group_one"
widgets: # List of widgets in ths group
... (widgets)
... (repeat)
Ein Widget ist ein funktionales Element, mit dem MQTT -Themen veröffentlichen und/oder abonniert werden und eine Nutzlast angezeigt und/oder eingeben.
Alle Widgets haben die folgenden allgemeinen Attribute .:::
- 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 ist ein Flag, das beim Veröffentlichen einer Nutzlast an MQTT festgelegt wird. Wenn festgelegt wird, dass die Nachricht im Broker bestehen bleibt, werden die Kunden diese Nutzlast bei der Wiederverbindung neu reduzieren. Dies gibt nicht immer das gewünschte Verhalten.
Sie werden feststellen, dass einige Widgets beim Start "unbekannt" zeigen, bis eine Nutzlast des abonnierten MQTT -Themas erhalten wird. Verbesserung der Benutzererfahrung von MQTT-Panel cache: True erhalten die zuletzt gesehene Nutzlast für ein Widget. Dadurch kann der Server nach einem Neustart den letzten bekannten Status sofort angezeigt, auch wenn ein MQTT -Thema unter Verwendung von retain: False .
Um ein Widget wiederzuverwenden, fügen Sie das ref -Attribut hinzu und fügen Sie das Widget zu anderen Gruppen hinzu als:
- ref: <widget reference> # Identifier of widget to reuse
Zeigen Sie einfach die Nutzlast des abonnierten MQTT -Themas an.
- title: <string> # Title text
type: text # Widget type
subscribe: <topic> # MQTT topic to listen on
color: <color> # optional: Color of the text
Beispiel:
- title: My Text
type: text
subscribe: text/content
color: "#123456"
Zeigen Sie einen Text, ein Symbol und eine Farbe an, wenn die definierten Nutzlasten aus dem abonnierten Thema empfangen werden.
- 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)
Beispiel:
- 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
Veröffentlichen Sie einen konstanten Wert für ein MQTT -Thema.
- 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
Beispiel:
- title: My Button
type: button
text: Push Me
publish: button/command
payload: PRESSED
Veröffentlichen Sie die nächste Nutzlast in der Liste der Werte in ein Thema. Aktualisieren Sie die Anzeige mit Text, Symbol und Farbe, wenn die Nutzlast im abonnierten Thema zurückgibt.
- 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)
Beispiel:
- title: My Switch
type: switch
publish: widget/switch/command
subscribe: widget/switch/state
values:
- text: "Off"
payload: "false"
- text: "On"
payload: "true"
Zeigen Sie den empfangenen Wert und ein vertikales Balkenmessgerät an, bei dem sich der Text, das Symbol und die Farbe basierend auf dem Wert der abonnierten Nutzlast ändern.
- 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
Beispiel:
- 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"
Zeigen Sie den empfangenen Wert und ein vertikales Balkenmessgerät an, bei dem sich der Text, das Symbol und die Farbe basierend auf dem Wert der abonnierten Nutzlast ändern. Zeigen Sie beim Tapping einen Schieberegler an, mit dem ein Wert zwischen dem MAX- und MIN -Wert eingegeben und veröffentlicht werden kann.
- title: <string> # Title text
type: slider # Widget type
live: [False | True] # optional: Realtime publishing. Default: False
... (same as gauge)
live: True Der aktuelle Wert des Schiebereglers wird beim Ändern veröffentlicht. Das Standardverhalten besteht darin, nur den endgültigen ausgewählten Wert zu veröffentlichen, wenn der Schieberegler veröffentlicht wird.
Zeigen Sie einen Text, ein Symbol und eine Farbe an, wenn die definierten Nutzlasten aus dem abonnierten Thema empfangen werden. Zeigt beim Taken eine Liste der anderen Werte an, die veröffentlicht werden können.
- 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)
Beispiel:
- 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
Inhalte in einem <iframe> anzeigen. Das src -Attribut kann an ein MQTT -Thema gebunden werden.
- 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
Beispiel:
- 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:
Ja sicher! Und bitte. Ich habe MQTT-Panel erstellt, weil ich keine "Ich bin nicht bereit bin, mich für die vollständige HA-Lösung zu verpflichten", die selbst gehostet und serverseitig konfigurierbar war. Ich weiß nicht viel über zeitgenössische HTML, CSS und Typenkript, daher werde ich gerne Rat von denen akzeptieren, die mehr wissen. Ich möchte, dass es ein Projekt ist, das schnell und einfach zum Laufen stand und MQTT für jeden öffnet. ChangeLog.md
Bevor Sie eine PR drücken, sollten Sie in Betracht gezogen werden, um Unit -Tests hinzuzufügen, und stellen Sie sicher, dass make check und make test sauber machen.
Richten Sie den Virtualenv ein:
python3 -m venv virtualenv
. ./virtualenv/bin/activate
python3 ./setup.py develop
Führen Sie den Server aus:
mqtt-panel ./config-demo.yaml
Im Geiste der Hacker des Tech Model Railroad Club vom Massachusetts Institute of Technology, der uns alle so viel zum Spielen gab. Die Lizenz ist MIT.
