* adds a bunch of ui components with mock data * build docker image with yarn.lock & yarn instead of npm * easier to add topics, build options smarter from ENV vars * fallback to index.html on all requests for SPA * updates w/ black/white support, better mobile styling * adds test components to home & dashboard pages * adds chart.js dependency * mqtt payload examples * lint * drone ci config * eslint fixes
2.3 KiB
Hive monitor
Hive monitor is a frontend for displaying data from MQTT server receiving events from bee hives. The complementary project hivemonitor-ESP32-firmware reads sensor values and publishes on MQTT topic.
Complemetary hivemonitor repositories:
Preview
Requirements
This sveltekit project requires Node.js and yarn installed:
Page requires data from MQTT topic, use a public or locally hosted MQTT broker:
Config
Set PUBLIC_MQTT_BROKER_WS_URL environment variable for MQTT broker. Since browsers don't support MQTT natively we want to connect to MQTT over WebSockets for events.
cp .env.example .env
# edit .env in favorite text editor
# PUBLIC_MQTT_BROKER_WS_URL=ws://test.mosquitto.org
Run
Using docker:
docker run -d -p 8080:8080 --name hivemonitor ghcr.io/kevinmidboe/hivemonitor
Setup
Install
Clone repo, navigate into folder and install node dependencies:
git clone https://github.com/KevinMidboe/hivemonitor.git
cd hivemonitor
yarn
Development
Run development server using yarn dev command. Add --host flag for allowing connections for any device on same network.
Production
Build static files and serve them with your favorite webserver, or use included docker configuration.
Compile project into static files located at generated folder: ./build.
yarn build
Build and run using nginx in docker:
docker build -t hivemonitor .
docker run -p 8080:8080 --name hivemonitor-frontend hivemonitor
Example mqtt payloads
should automate generating interfaces or grpc.
telemetry/gateway/[id]:
{
"gateway_name": "Elisabeth",
"t": "2025-02-08 15:03:30",
"temperature": "22",
"battery_level": "20"
}
telemetry/hive/[id]:
{
"hive_name": "Elisabeth",
"t": "2025-02-08 15:03:30",
"temperature": "22",
"humidity": "30",
"pressure": "30",
"weight": "30",
"battery_level": "20"
}