Post

Project Dashboard: Live Data, Video, and Automation at a Glance

The Project Dashboard brings live sensor data, camera feeds, diagrams, graphs, and automation controls into a single organized view.

Project Dashboard: Live Data, Video, and Automation at a Glance

Project Dashboard: Your Live Control Center

Projects have evolved from simple organizational containers into full-featured live dashboards. When you click on a Project, the new Project Screen gives you a real-time overview of every child node — organized into intuitive sections for visual media, sensor data, digital controls, hardware, and automation.

New: Projects now display live camera feeds, mini graphs, interactive diagrams, and digital toggle controls — all on a single scrollable screen. No more drilling into individual nodes to check status.

What You See on the Dashboard

The Project Screen automatically categorizes your child nodes into these sections:

SectionWhat it Shows
ProjectsSub-projects displayed as clickable cards for hierarchical organization
VisualLive camera feeds, interactive SVG diagrams, and mini data graphs
ControlsDigital data points with ON/OFF toggle buttons for instant control
DataAll non-digital data points showing current sensor readings
HardwareGPIO pins and serial device status
AutomationLogic gates, calculations, cron timers, webhooks, MQTT, lambdas, email, compute, and backups

Each item is clickable — tap any node to expand into its full view or editor.

Live Visual Media

The Visual section is the centerpiece of the dashboard. It renders live thumbnails in a horizontal scrollable row:

  • Camera — Live camera feed polling at ~2 FPS directly on the dashboard. No need to open the camera node individually.
  • Diagram — Interactive SVG diagrams with data point overlays rendered as mini previews.
  • Graph — Mini graphs showing recent time-series trends from linked data points.

Digital Controls

Digital Data Points appear in the Controls section with a live ON/OFF button. Toggle relays, solenoids, or any digital output directly from the project dashboard without navigating away.

QR Code Sharing

Every project includes a QR code in the bottom bar — click to download. Share project access instantly by scanning the code from any Krill client.


Everything You Can Add to a Project

Projects support a wide variety of node types. Here’s the complete list of what you can add from the Project menu, the icon used in the app, and what each one does:

Organization

IconNode TypeDescription
ProjectNest sub-projects for hierarchical organization of complex systems.

Visual & Documentation

IconNode TypeDescription
DiagramSVG-based visual diagram with live data point overlays. Upload an SVG and bind nodes to anchor regions.
Task ListTrack tasks with priorities and deadlines alongside your automation nodes.
JournalDocument project progress with timestamped notes and photos.
CameraLive video feed from a Raspberry Pi Camera Module 3. Streams at ~2 FPS on the dashboard. (Raspberry Pi only)

Data & Monitoring

IconNode TypeDescription
Data PointTime-series data storage for sensor readings — supports DOUBLE, DIGITAL, TEXT, and JSON types.
GraphVisualize data point history as line charts. Renders as a mini preview on the dashboard.

Hardware

IconNode TypeDescription
GPIO PinControl Raspberry Pi GPIO pins for digital I/O and PWM. (Raspberry Pi only)
Serial DeviceCommunicate with hardware over USB/UART — sensors, microcontrollers, Zigbee coordinators.

Triggers

IconNode TypeDescription
ButtonManual one-click trigger for on-demand workflow execution.
Cron TimerSchedule-based trigger using cron expressions for time-driven automation.
Incoming WebHookReceive HTTP requests from external systems to trigger automation workflows.

Executors & Automation

IconNode TypeDescription
Logic GateBoolean logic (AND, OR, NOT, XOR, NAND, NOR, XNOR, IMPLY, NIMPLY) for conditional automation.
CalculationCompute derived values from data points using formulas and aggregations.
ComputeGenerate statistical summaries (avg, min, max, stddev) over configurable time windows.
LambdaExecute custom Python scripts for advanced data processing and integration.
Outgoing WebHookSend HTTP requests to external APIs for notifications and integrations.
SMTPSend email notifications triggered by automation events.
MQTTPublish and subscribe to MQTT topics for IoT device communication.
BackupCreate automated backups of node configurations and data.

Networking

IconNode TypeDescription
PeerConnect to other Krill servers in a decentralized mesh network.
LLMLocal large language model integration for AI-powered automation.

Dashboard Architecture

flowchart TD
    P["<i class='fa-duotone fa-diagram-project'></i> Project"]
    P --> SP["Sub-Projects"]
    P --> V["Visual Media"]
    P --> C["Digital Controls"]
    P --> D["Data Points"]
    P --> H["Hardware"]
    P --> A["Automation"]

    V --> CAM["Camera ~2 FPS"]
    V --> DIA["SVG Diagram"]
    V --> GR["Mini Graph"]

    C --> TOG["ON/OFF Toggles"]

    H --> PIN["GPIO Pins"]
    H --> SER["Serial Devices"]

    A --> LG["Logic Gates"]
    A --> CALC["Calculations"]
    A --> CRON["Cron Timers"]
    A --> WH["WebHooks"]
    A --> MQ["MQTT"]
    A --> LAM["Lambda"]
    A --> SMTP2["SMTP"]
    A --> COMP["Compute"]
    A --> BAK["Backup"]

How It Works

The Project Dashboard subscribes to live node state updates via SSE (Server-Sent Events). When a child node’s state changes on the server, the update flows through the SharedFlow pipeline and appears on the dashboard in real time — no manual refresh needed.

  1. Node state changes on the Krill Server (sensor reading, camera frame, pin toggle)
  2. ServerNodeManager writes to the H2 database and emits the update
  3. SSE route pushes the event to all connected clients
  4. ClientNodeManager updates the local state
  5. ProjectScreen recomposes the affected section automatically

Example: Greenhouse Dashboard

1
2
3
4
5
6
7
8
9
10
11
12
Project: Greenhouse
├─> 📹 Camera (live feed of plants)
├─> 📊 Temperature Graph
├─> 📊 Humidity Graph
├─> 🌡️ Temperature Data Point
├─> 💧 Humidity Data Point
├─> 🔌 Vent Fan (Digital Control - ON/OFF)
├─> 🔌 Heater (Digital Control - ON/OFF)
├─> ⏰ Cron Timer (daily photo + report)
├─> 🔀 Logic Gate (if temp > 30 AND humidity > 80 → fan ON)
├─> 📤 Outgoing WebHook (daily summary to Slack)
└─> 📈 Diagram (greenhouse floor plan with sensor overlays)

Getting Started

  1. Create a Project — From any Krill Server, click the add menu and select Project
  2. Add child nodes — Click the Krill avatar in the project header to open the add menu
  3. Organize — Add sub-projects for complex setups, or keep everything flat for simple dashboards
  4. View the dashboard — Click on any Project node to see the live dashboard view

Tip: Right-click or long-press on a Project to edit its name and description. Click to view the dashboard.

This post is licensed under CC BY 4.0 by Sautner Studio, LLC.