mqtt panel
1.0.0
Самостоятельная панель веб -приложений для MQTT
Этот проект предоставляет самообеспеченную услугу, которая подключается к брокеру MQTT и обслуживает прогрессивную панель веб -приложений, которая полностью настраивается через YAML. Он направлен на простую панель, которая дает пользовательскую интерактивность с темами MQTT. Подходит для автономных или MQTT Microservice развертывания и может быть развернута вместе с решениями Home Automation. Он не предлагает возможности более высокого уровня, таких как автоматизации, интеграции или планирование.
Бегать
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 выше. Кроме того, вы можете добавить конечную точку Livine AT /api/health в настроенный HTTP -порт. Чтобы выполнить завершение конечной точки SSL, вы можете добавить контроллер входа, такой как Traefik, который в стандартной комплектации с K3S.
Типичное развертывание может включать в себя:
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 используется бесплатный с открытым источником, облачный брокер. Вы можете подписаться на sourcesimian/mqtt-panel/demo/# с вашим любимым зрителем MQTT. Eclipse Mosquitto-отличный вариант самостоятельного самостоятельного использования со многими способами установки, включая предварительно построенные контейнеры на Docker Hub.
Чтобы дополнить инфраструктуру MQTT, вы можете рассмотреть следующие другие микросервисы:
| Услуга | Описание |
|---|---|
| MQTT-GPIO | Подключает темы MQTT к булавкам GPIO. |
| MQTT-ICAL | Публикует ценности по темам MQTT на основе событий в календаре. |
| MQTT-Kube | Карты значений объектов Kubernetes по темам и обратно на MQTT. |
| Noded | Инструмент визуального программирования на основе потока для подключения устройств вместе со встроенной интеграцией MQTT и многими другими. Можно легко использовать для добавления поведения более высокого уровня. |
mqtt-panel потребляет один файл YAML. Для начала вы можете скопировать config-basic.yaml
Ниже приведены конвенции, которые используются в конфигурации YAML:
| Элемент | Описание |
|---|---|
<string> | Любая строка символов, предпочтительно «цитируется», чтобы избежать интерпретации YAML по -другому. |
<icon> | Это material-icons из библиотеки Google Fonts. |
<color> | Является ли любой цвет HTML в стиле, red , "#F04040" , rgb(240, 64, 64) и т. Д. Использование «цитаты», чтобы убедиться, что # не интерпретируется как комментарий. |
<topic> | Тема MQTT, например fizz/buzz/status . Подписки также могут принять подстановочные знаки * и # . Используйте «цитаты», чтобы убедиться, что # не интерпретируется как комментарий. |
<identifier> | Строка альфа-ячечных символов и _ |
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. Чтобы улучшить пользовательский опыт 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, потому что я не мог найти решение «Я не готов принять решение о полном раздувании». Я не знаю много о современном HTML, CSS и TypeScript, поэтому я с радостью приму советы от тех, кто знает больше. Я хочу, чтобы это был проект, который быстро и легко встать и помогает открыть 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
В духе хакеров технического модельного железнодорожного клуба из Массачусетского технологического института, которые дали нам все так много для игры. Лицензия - MIT.
