mqtt panel
1.0.0
Panneau d'applications Web auto-hébergé pour MQTT
Ce projet fournit un service auto-hébertable qui se connecte à un courtier MQTT et sert un panneau d'application Web progressif entièrement configurable via YAML. Il vise à être un panneau simple qui donne une interactivité des utilisateurs avec les sujets MQTT. Convient aux déploiements de microservice autonomes ou MQTT et peut être déployé aux côtés des solutions domestiques. Il n'offre pas de capacités de niveau supérieur telles que les automatisations, les intégrations ou la planification.
Courir
docker run -it --rm -p 8080:8080 sourcesimian/mqtt-panel:latest
et parcourir http: // localhost: 8080 qui apparaîtra comme:
Des images de conteneurs prédéfinies sont disponibles sur Docker Hub.
Courir
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
Configurez votre déploiement pour suffire à la configuration Docker ci-dessus. De plus, vous pouvez ajouter un point de terminaison vivante à /api/health sur le port HTTP configuré. Pour effectuer une terminaison de point de terminaison SSL, vous pouvez ajouter un contrôleur d'entrée tel que Trafik qui est livré standard avec K3S.
Un déploiement typique peut inclure:
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 permet de fournir le fichier de configuration de différentes manières. Utilisation d'une configmap Les commandes suivantes sont un moyen convoyant de fournir et de mettre à jour directement à partir de votre YAML:
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
Une installation de MQTT-Panel aura besoin d'un courtier MQTT pour se connecter. Il existe de nombreuses possibilités disponibles. Dans la démonstration EMQ X, un courtier libre d'ouverture-source natif, est utilisé. Vous pouvez vous abonner à sourcesimian/mqtt-panel/demo/# avec votre visionneuse MQTT préférée. Eclipse Mosquitto est une excellente option auto-hébergée avec de nombreuses façons d'installation, y compris des conteneurs pré-construits sur Docker Hub.
Pour compléter votre infrastructure MQTT, vous pouvez considérer les autres microservices suivants:
| Service | Description |
|---|---|
| MQTT-GPIO | Connecte les sujets MQTT aux broches GPIO. |
| mqtt-iical | Publie des valeurs aux sujets MQTT basés sur des événements dans un calendrier ical. |
| MQTT-KUBE | Carte les valeurs d'objets Kubernetes vers et depuis des sujets sur MQTT. |
| Navire | Un outil de programmation visuelle basée sur le flux pour le câblage ensemble, avec l'intégration MQTT intégrée et bien d'autres disponibles. Peut facilement être utilisé pour ajouter des comportements de niveau plus élevé. |
mqtt-panel consomme un seul fichier YAML. Pour commencer, vous pouvez copier config-basic.yaml
Voici les conventions utilisées dans la configuration YAML:
| Article | Description |
|---|---|
<string> | Toute chaîne de caractères, de préférence "citée" pour éviter que YAML n'ait interprété d'une manière différente. |
<icon> | Ce sont material-icons de la bibliothèque Google Fonts. |
<color> | Est n'importe quelle couleur de style HTML, par exemple red , "#F04040" , rgb(240, 64, 64) , etc. Utilisez des "citations" pour vous assurer que le # n'est pas interprété comme un commentaire. |
<topic> | Un sujet MQTT, par exemple fizz/buzz/status . Les abonnements peuvent également accepter les wildcards * et # . Utilisez des «citations» pour vous assurer que le # n'est pas interprété comme un commentaire. |
<identifier> | Une chaîne de caractères alpha-numes, et _ |
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 est divisé en panneaux, un panneau est affiché à la fois, chaque panneau est une collection de groupes.
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)
Un groupe est une collection en boîte de widgets. Ils peuvent être réutilisés sur plusieurs panneaux.
groups:
- title: <string> # Title text
name: <identifier> # Identifier, e.g. "group_one"
widgets: # List of widgets in ths group
... (widgets)
... (repeat)
Un widget est un élément fonctionnel, qui est utilisé pour publier et / ou s'abonner aux sujets MQTT, et afficher et / ou saisir une charge utile.
Tous les widgets ont les attributs communs suivants::
- 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 est un drapeau défini lors de la publication d'une charge utile à MQTT. Si la définition du message persiste dans le courtier, les clients réintermineront cette charge utile lors de la reconnexion. Cela ne donne pas toujours le comportement souhaité.
Vous noterez qu'au démarrage, certains widgets affichent "inconnu" jusqu'à ce qu'une charge utile sur le sujet MQTT abonné soit reçue. Pour améliorer l'expérience utilisateur du cache: True conservera la dernière charge utile vue pour un widget. Cela permet au serveur d'afficher immédiatement le dernier état connu après un redémarrage, même avec un sujet MQTT en utilisant retain: False .
Pour réutiliser un widget, ajoutez l'attribut ref , puis ajoutez le widget à d'autres groupes comme:
- ref: <widget reference> # Identifier of widget to reuse
Affichez simplement la charge utile du sujet MQTT souscrit.
- title: <string> # Title text
type: text # Widget type
subscribe: <topic> # MQTT topic to listen on
color: <color> # optional: Color of the text
Exemple:
- title: My Text
type: text
subscribe: text/content
color: "#123456"
Affichez du texte, une icône et une couleur lorsque les charges utiles définies sont reçues du sujet souscrit.
- 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)
Exemple:
- 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
Publiez une valeur constante sur un sujet 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
Exemple:
- title: My Button
type: button
text: Push Me
publish: button/command
payload: PRESSED
Publiez la prochaine charge utile dans la liste des valeurs sur un sujet. Mettez à jour l'affichage avec du texte, de l'icône et de la couleur lorsque la charge utile revient sur le sujet souscrit.
- 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)
Exemple:
- title: My Switch
type: switch
publish: widget/switch/command
subscribe: widget/switch/state
values:
- text: "Off"
payload: "false"
- text: "On"
payload: "true"
Afficher la valeur reçue et une jauge de barre verticale où le texte, l'icône et la couleur changent en fonction de la valeur de la charge utile souscrite.
- 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
Exemple:
- 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"
Afficher la valeur reçue et une jauge de barre verticale où le texte, l'icône et la couleur changent en fonction de la valeur de la charge utile souscrite. De plus, lorsqu'il est taraudé, montrez un curseur qui peut être utilisé pour saisir et publier une valeur entre la valeur max et min.
- title: <string> # Title text
type: slider # Widget type
live: [False | True] # optional: Realtime publishing. Default: False
... (same as gauge)
Définition live: True La valeur actuelle du curseur sera publiée au fur et à mesure qu'elle change. Le comportement par défaut consiste à publier uniquement la valeur sélectionnée finale lorsque le curseur est publié.
Affichez du texte, une icône et une couleur lorsque les charges utiles définies sont reçues du sujet souscrit. Lorsqu'il est taraudé, affiche une liste des autres valeurs qui peuvent être publiées.
- 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)
Exemple:
- 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
Affichez le contenu dans un <iframe> . L'attribut src peut être lié à un sujet 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
Exemple:
- 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:
Oui bien sûr! Et s'il vous plaît. J'ai construit MQTT-Panel parce que je n'ai pas pu trouver de solution "Je ne suis pas prêt à m'engager à la solution HA à part entière" qui était hébergée et configurable du serveur. Je ne sais pas grand-chose sur le HTML contemporain, le CSS et le dactylographie, donc j'accepterai volontiers les conseils de ceux qui en savent plus. Je veux que ce soit un projet qui est rapide et facile à être opérationnel, et aide à ouvrir MQTT à n'importe qui. ChangeLog.md
Avant de pousser un PR, envisagez d'ajouter des tests unitaires et assurez-vous que make check et make test sont propres.
Configurer le virtualenv:
python3 -m venv virtualenv
. ./virtualenv/bin/activate
python3 ./setup.py develop
Exécutez le serveur:
mqtt-panel ./config-demo.yaml
Dans l'esprit des pirates du Tech Model Railroad Club du Massachusetts Institute of Technology, qui nous a tous donné beaucoup de choses avec lesquelles jouer. La licence est MIT.
