mqtt panel
1.0.0
Painel de aplicativos da web auto -hospedado para MQTT
Este projeto fornece um serviço auto -hospedável que se conecta a um corretor MQTT e serve um painel de aplicativos da Web progressivo que é totalmente configurável via YAML. O objetivo é ser um painel simples que oferece à interatividade do usuário com os tópicos do MQTT. Adequado para implantações de microsserviço independente ou MQTT e pode ser implantado juntamente com soluções de automação residencial. Ele não oferece recursos de nível superior, como automações, integrações ou agendamento.
Correr
docker run -it --rm -p 8080:8080 sourcesimian/mqtt-panel:latest
e navegue para http: // localhost: 8080 que aparecerá como:
As imagens de contêiner pré -construído estão disponíveis no Docker Hub.
Correr
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
Configure sua implantação para bastar a configuração do Docker acima. Além disso, você pode adicionar um endpoint de LIVRE AT /api/health na porta HTTP configurada. Para executar a terminação do ponto de extremidade SSL, você pode adicionar um controlador de entrada como o Traefik, que vem padrão com o K3S.
Uma implantação típica pode incluir:
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
O Kubernetes permite que o arquivo de configuração seja fornecido de várias maneiras. Usando um configmap, os seguintes comandos são uma maneira convencional de fornecer e atualizar diretamente do seu 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
Uma instalação do MQTT-Panel precisará de um corretor MQTT para se conectar. Existem muitas possibilidades disponíveis. Na demonstração EMQ X, é usado um corretor de código aberto gratuito, nativo em nuvem, é usado. Você pode se inscrever no sourcesimian/mqtt-panel/demo/# com seu visualizador MQTT favorito. O Eclipse Mosquitto é uma ótima opção auto-hospedada, com muitas maneiras de instalação, incluindo recipientes pré-criados no Docker Hub.
Para elogiar sua infraestrutura MQTT, você pode considerar os seguintes outros microsserviços:
| Serviço | Descrição |
|---|---|
| MQTT-GPIO | Conecta tópicos MQTT aos pinos GPIO. |
| MQTT-TIC | Publica valores para tópicos MQTT baseados em eventos em um calendário iical. |
| MQTT-KUBE | Mapas os valores de objeto Kubernetes de e para os tópicos no MQTT. |
| Ondulado | Uma ferramenta de programação visual baseada em fluxo para a fiação de dispositivos juntos, com integração integrada no MQTT e muitos outros disponíveis. Pode ser facilmente usado para adicionar comportamentos de nível mais alto. |
mqtt-panel consome um único arquivo YAML. Para começar, você pode copiar o config-Basic.yaml
A seguir, são usadas convenções que são usadas na configuração da YAML:
| Item | Descrição |
|---|---|
<string> | Qualquer sequência de caracteres, de preferência "citada" para evitar que a YAML interprete de uma maneira diferente. |
<icon> | Estes são material-icons da biblioteca do Google Fontes. |
<color> | É qualquer cor do estilo HTML, por exemplo, red , "#F04040" , rgb(240, 64, 64) , etc. Use "citações" para garantir que o # não seja interpretado como um comentário. |
<topic> | Um tópico MQTT, por exemplo, fizz/buzz/status . As assinaturas também podem aceitar os curinga * e # . Use "Quotes" para garantir que o # não seja interpretado como um comentário. |
<identifier> | Uma série de caracteres alfa-numéricos e _ |
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 é dividido em painéis, um painel é exibido de cada vez, cada painel é uma coleção de grupos.
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)
Um grupo é uma coleção de widgets em caixa. Eles podem ser reutilizados em vários painéis.
groups:
- title: <string> # Title text
name: <identifier> # Identifier, e.g. "group_one"
widgets: # List of widgets in ths group
... (widgets)
... (repeat)
Um widget é um elemento funcional, usado para publicar e/ou assinar os tópicos do MQTT, e exibir e/ou inserir alguma carga útil.
Todos os widgets têm os seguintes atributos comuns.:
- 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 é um sinalizador definido ao publicar uma carga útil no MQTT. Se definir a mensagem persistir no corretor, os clientes re-receberão essa carga útil ao se reconectar. Isso nem sempre dá o comportamento desejado.
Você observará que, na startup, alguns widgets mostram "desconhecido" até que uma carga útil no tópico MQTT assinada seja recebida. Para melhorar a experiência do usuário do cache: True preservará a última carga útil vista para um widget. Isso permite que o servidor mostre imediatamente o último estado conhecido após uma reinicialização, mesmo com um tópico MQTT usando retain: False .
Para reutilizar um widget, adicione o atributo ref e adicione o widget a outros grupos como:
- ref: <widget reference> # Identifier of widget to reuse
Basta exibir a carga útil do tópico MQTT inscrito.
- title: <string> # Title text
type: text # Widget type
subscribe: <topic> # MQTT topic to listen on
color: <color> # optional: Color of the text
Exemplo:
- title: My Text
type: text
subscribe: text/content
color: "#123456"
Exiba algum texto, um ícone e cor quando as cargas úteis definidas forem recebidas do tópico inscrito.
- 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)
Exemplo:
- 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
Publique um valor constante em um tópico 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
Exemplo:
- title: My Button
type: button
text: Push Me
publish: button/command
payload: PRESSED
Publique a próxima carga útil na lista de valores em um tópico. Atualize o visor com texto, ícone e cor quando a carga útil retornar no tópico inscrito.
- 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)
Exemplo:
- title: My Switch
type: switch
publish: widget/switch/command
subscribe: widget/switch/state
values:
- text: "Off"
payload: "false"
- text: "On"
payload: "true"
Mostre o valor recebido e um medidor de barra vertical, onde o texto, o ícone e a cor mudarão com base no valor da carga útil subscrita.
- 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
Exemplo:
- 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"
Mostre o valor recebido e um medidor de barra vertical, onde o texto, o ícone e a cor mudarão com base no valor da carga útil subscrita. Além disso, quando tocado, mostre um controle deslizante que pode ser usado para inserir e publicar um valor entre o valor máximo e o min.
- title: <string> # Title text
type: slider # Widget type
live: [False | True] # optional: Realtime publishing. Default: False
... (same as gauge)
Configuração live: True O valor atual do controle deslizante será publicado à medida que muda. O comportamento padrão é publicar apenas o valor final selecionado quando o controle deslizante for lançado.
Exiba algum texto, um ícone e cor quando as cargas úteis definidas forem recebidas do tópico inscrito. Quando tocado, mostra uma lista dos outros valores que podem ser publicados.
- 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)
Exemplo:
- 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
Exiba o conteúdo em um <iframe> . O atributo src pode estar vinculado a um tópico 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
Exemplo:
- 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:
Sim, claro! E por favor. Eu construí MQTT-Panel porque não consegui encontrar uma solução "Não estou pronta para me comprometer com o HA ainda mais" que foi hospedado e configurável no lado do servidor. Não sei muito sobre HTML contemporâneo, CSS e TypeScript, por isso vou aceitar com prazer conselhos daqueles que sabem mais. Quero que seja um projeto rápido e fácil de funcionar e ajudar a abrir o MQTT para qualquer pessoa. Changelog.md
Antes de pressionar um PR, considere adicionar testes de unidade e verifique se make check e make test é limpo.
Configure o virtualenv:
python3 -m venv virtualenv
. ./virtualenv/bin/activate
python3 ./setup.py develop
Execute o servidor:
mqtt-panel ./config-demo.yaml
No espírito dos hackers do Tech Model Railroad Club do Instituto de Tecnologia de Massachusetts, que nos deu muito para brincar. A licença é MIT.
