mqtt panel
1.0.0
MQTT的自托管Web应用程序面板
该项目提供了一个自托管服务，该服务连接到MQTT代理，并提供一个渐进式网络应用程序面板，该面板可通过YAML完全配置。它的目的是成为一个简单的面板，可以使用户与MQTT主题进行交互。适用于独立或MQTT微服务部署，可以与家庭自动化解决方案一起部署。它不提供更高级别的功能，例如自动化，集成或计划。
跑步
docker run -it --rm -p 8080:8080 sourcesimian/mqtt-panel:latest
并浏览到http：// localhost：8080，将显示为：
预先构建的容器图像可在Docker Hub上找到。
跑步
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
配置您的部署以足够上面的Docker配置。此外，您可以在配置的HTTP端口上添加/api/health LIVES端点。要执行SSL端点终止，您可以添加一个Ingress控制器，例如Traefik，它标准使用K3。
典型的部署可能包括：
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允许以各种方式提供配置文件。使用configmap以下命令是一种直接从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
MQTT-Panel的安装将需要一个MQTT代理才能连接。有很多可能性可用。在演示EMQ X中，使用了免费的开源，云原生经纪人。您可以使用您喜欢的MQTT查看器订阅sourcesimian/mqtt-panel/demo/# 。 Eclipse Mosquitto是一个很好的自托管选择，具有许多安装方式，包括Docker Hub上的预建装容器。
为了补充您的MQTT基础架构，您可以考虑以下其他微服务：
| 服务 | 描述 |
|---|---|
| mqtt-gpio | 将MQTT主题连接到GPIO引脚。 |
| mqtt-ical | 根据iCal日历中的事件将值发布到MQTT主题。 |
| mqtt-kube | 映射kubernetes对象值to in y of MQTT上的主题。 |
| 点头 | 一个基于流动的视觉编程工具，用于将设备接线，并具有内置的MQTT集成以及许多其他可用的设备。可以轻松地用于添加更高级别的行为。 |
mqtt-panel消耗一个YAML文件。首先，您可以复制config-basic.yaml
以下是YAML配置中使用的约定：
| 物品 | 描述 |
|---|---|
<string> | 任何字符串，最好是“引用”，以避免YAML以不同的方式解释。 |
<icon> | 这些是Google字体库中的material-icons 。 |
<color> | 是任何HTML样式的颜色，例如red ， "#F04040" ， rgb(240, 64, 64)等。使用“引号”来确保#不被解释为评论。 |
<topic> | MQTT主题，例如fizz/buzz/status 。订阅也可以接受*和#通配符。使用“引号”来确保#不会被解释为评论。 |
<identifier> | 一串alpha-numeric字符， _ |
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分为面板，一次显示一个面板，每个面板都是组的集合。
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)
一个小组是小部件的盒装集合。它们可以在多个面板上重复使用。
groups:
- title: <string> # Title text
name: <identifier> # Identifier, e.g. "group_one"
widgets: # List of widgets in ths group
... (widgets)
... (repeat)
小部件是功能元素，用于发布和/或订阅MQTT主题，并显示和/或输入一些有效负载。
所有小部件都有以下常见属性。
- 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是将有效载荷发布到MQTT时设置的标志。如果设置消息将持续在经纪人中，则客户将在重新连接时重新接收有效载荷。这并不总是给出所需的行为。
您会注意到，在启动时，一些小部件显示“未知”，直到收到订阅的MQTT主题的有效载荷为止。为了改善MQTT-Panel cache: True将为小部件保留最后的有效载荷。这使服务器能够在重新启动后立即显示最后一个已知的状态，即使使用MQTT主题使用retain: False 。
要重复使用小部件，添加了ref属性，然后将小部件添加到其他组中，为：
- ref: <widget reference> # Identifier of widget to reuse
只需显示订阅的MQTT主题的有效载荷即可。
- title: <string> # Title text
type: text # Widget type
subscribe: <topic> # MQTT topic to listen on
color: <color> # optional: Color of the text
例子：
- title: My Text
type: text
subscribe: text/content
color: "#123456"
从订阅的主题中收到定义的有效载荷时，显示一些文本，图标和颜色。
- 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)
例子：
- 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
向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
例子：
- title: My Button
type: button
text: Push Me
publish: button/command
payload: PRESSED
将下一个有效载荷在值列表中发布到主题。在订阅主题上的有效载荷返回时，用文本，图标和颜色更新显示屏。
- 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)
例子：
- title: My Switch
type: switch
publish: widget/switch/command
subscribe: widget/switch/state
values:
- text: "Off"
payload: "false"
- text: "On"
payload: "true"
显示收到的值和垂直钢筋量表，其中文本，图标和颜色将根据订阅有效载荷的值更改。
- 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
例子：
- 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"
显示收到的值和垂直钢筋量表，其中文本，图标和颜色将根据订阅有效载荷的值更改。另外，当挖掘时，显示一个可以用来输入和发布最大值和最小值之间的值的滑块。
- title: <string> # Title text
type: slider # Widget type
live: [False | True] # optional: Realtime publishing. Default: False
... (same as gauge)
设置live: True随着它的变化，将发布滑块的当前值。默认行为是仅在释放滑块时仅发布最终选定值。
从订阅的主题中收到定义的有效载荷时，显示一些文本，图标和颜色。轻按时，显示可以发布的其他值的列表。
- 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)
例子：
- 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
在<iframe>中显示内容。 src属性可以绑定到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
例子：
- 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:
是的！请。我构建了MQTT-Panel，因为我找不到“我还没有准备好提交完全吹Ha的HA”解决方案，该解决方案是自托管的，并且服务器端可配置。我对当代HTML，CSS和打字稿了解不多，因此我很乐意接受那些了解更多人的建议。我希望它是一个快速易于启动和运行的项目，并有助于向任何人打开MQTT。 ChangElog.md
在推动PR之前，请考虑添加单位测试，并确保make check和make test清洁。
设置Virtualenv：
python3 -m venv virtualenv
. ./virtualenv/bin/activate
python3 ./setup.py develop
运行服务器：
mqtt-panel ./config-demo.yaml
本着马萨诸塞州理工学院的科技模型铁路俱乐部的黑客精神，他给了我们所有人都可以玩。许可证是麻省理工学院。
