Skip to main content

Use Dashboards

The dashboard is NeoMind's core visualization surface. Drag widgets onto a canvas, bind them to device data sources, and watch telemetry, AI inference results, and device state update in real time.

Overview​

Each dashboard is a responsive grid that can hold multiple widgets:

  • Real-time updates: Data changes are pushed via WebSocket / SSE β€” widgets update within seconds
  • Responsive layout: Drag-and-drop editing on desktop; auto-stacked single column on mobile
  • Shareable: Generate public links with expiry times β€” no login required to view
  • Multi-backend: One dashboard can display data from multiple NeoMind instances simultaneously

Creating a Dashboard​

  1. Click the Dashboards icon in the left navigation to open the dashboard list
  2. Click the + (New Dashboard) button
Create dashboard dialog β€” enter name and description
  1. Enter a name (required) and description (optional), then click create
  2. The new dashboard enters edit mode automatically with an empty canvas

The dashboard list shows all created dashboards β€” click any name to view it:

Dashboard list β€” all created dashboards

View Mode vs Edit Mode​

Dashboards have two modes, toggled via the gear / checkmark icon on the left side of the toolbar:

ModeDescriptionIcon
View Mode (default)Layout locked, shows real-time data only. This is what regular users and share link visitors seeGear icon (Settings2)
Edit ModeDrag widgets to reposition/resize, add/delete widgets, edit configurations. Grid supports snap-to-alignCheckmark icon (Check)
Dashboard view mode β€” empty state prompting to enter edit mode

An empty dashboard in view mode shows "Click Edit Layout to add components". Click the gear icon to enter edit mode, which reveals the Add Component button.

Dashboard edit mode β€” empty state with Add Component button

Adding Widgets​

Component Library​

In edit mode, click Add Component to open the component library panel. Components are organized by category:

Component library β€” built-in widgets organized by category

Indicators & Metrics​

WidgetPurposeTypical Use
Value CardLarge-font single value display with unit and threshold coloringTemperature, humidity, counters
LED IndicatorOn/off status indicator lightDevice online status, valve open/closed
SparklineMini trend line for compact layoutsQuick trend preview
Progress BarHorizontal/vertical progress barCPU usage, storage utilization

Charts​

WidgetPurposeTypical Use
Line ChartTime-series line trendTemperature history, flow trends
Area ChartFilled time-series chartCumulative volume, inventory levels
Bar ChartDiscrete data comparisonProduction output by line, weekly stats
Pie ChartProportion distributionDevice type breakdown, alert categories

Controls​

WidgetPurposeTypical Use
Toggle SwitchSend on/off commands to devicesRemote control lights, pumps

Display & Content​

WidgetPurposeTypical Use
Image DisplayShow latest image frame + AI annotation boxesYOLO detection results, camera snapshots
Image HistoryBrowse historical images by timeSecurity playback, event tracing
Web DisplayEmbed external webpage via iframeThird-party panels, documentation
Markdown DisplayRich text notesDashboard title, instructions

Spatial & Media​

WidgetPurposeTypical Use
Map DisplayGPS coordinates + trajectoryVehicle tracking, asset distribution
Video DisplayRTSP / RTMP / HLS live video streamNE301/NE101 live camera feed
Custom LayerCommunity or custom-built widgetsAny extension

Beyond built-in widgets, you can install more from the Marketplace tab in the component library, sourced from the community marketplace.

Configuring Widgets​

After selecting a widget type from the library, it's added to the canvas and a configuration panel opens. Key configuration areas:

β‘  Data Source Binding

Each widget needs a data source to display data. In the config panel, select:

SelectionDescription
InstanceChoose a NeoMind backend instance (local or remote)
DeviceChoose which device's data to display
MetricChoose the specific metric (e.g. temperature, humidity)

After selection, a DataSourceId is auto-generated in the format {type}:{id}:{field}:

TypeExampleMeaning
devicedevice:esp32-01:temperatureA device metric
extensionextension:weather:tempAn extension metric
agentagent:guard-01:last_resultAn agent execution result

DataSourceId is auto-generated β€” no need to write it manually.

β‘‘ Display Options

Depending on widget type, you can configure:

  • Title / Unit: Name and unit shown above the widget
  • Color / Threshold: Change color when value exceeds threshold (e.g. temp > 30Β°C turns red)
  • Time Range: For chart widgets β€” last 1h / 24h / 7d / custom
  • Refresh Interval: Data pull frequency (doesn't affect real-time push)

β‘’ Layout Adjustment

  • Drag: Hold and drag a widget to reposition β€” grid auto-aligns
  • Resize: Drag the bottom-right corner to resize
  • Delete: Select a widget, then press Delete key or click delete in the config panel

Real-time Data Flow​

NeoMind pushes device data to the frontend via WebSocket / SSE:

  • Device publishes MQTT data β†’ backend event bus β†’ subscribed widgets refresh
  • End-to-end latency typically < 1 second (same datacenter)
  • On disconnect, the frontend auto-reconnects and backfills recent data

For historical data queries, use the widget's "Time Range" setting (last 1 hour / 24 hours / 7 days / custom).

Sharing Dashboards​

You can generate public links to share dashboards with unauthenticated users:

  1. Click the Share icon in the dashboard toolbar
Share dialog β€” generate public link
  1. Click New Link to generate a new link
  2. Set the expiry time (1 hour / 1 day / 7 days / permanent)
  3. Copy the generated link (e.g. https://your-host/share/<token>)
  4. Recipients can view without an account (read-only)

Note: Share links only expose a read-only view of that specific dashboard. They do not expose API keys, device controls, or other dashboards. Links automatically expire after the set duration.

Mobile Experience​

Dashboard on mobile β€” single column stacked layout
  • Responsive breakpoint: < 768px switches to single-column stacked layout
  • Edit mode: Drag-and-drop editing is disabled on mobile (screen too small) β€” edit on desktop
  • Touch interaction: Charts support pinch-to-zoom and swipe-to-pan
  • Mobile web: Access http://your-host:9375 directly in browser β€” no app install needed

Multi-Instance Dashboards​

If you manage multiple NeoMind backends (e.g. multiple edge servers in a factory), you can register them under Settings β†’ Instances. Once registered, you can select cross-instance data sources when editing widgets β€” one dashboard can display device data from multiple backends simultaneously.

Community & Custom Widgets​

Built-in widgets cover common IoT visualization needs. For more widgets, NeoMind offers two ways to extend:

Option 1: Install from Marketplace​

Switch to the Marketplace tab in the component library to browse the community widget marketplace:

Community widget marketplace β€” browse and install community widgets

Each widget card shows:

InfoDescription
Widget name + iconWidget identifier
Versione.g. v1.1.0
Authore.g. NeoMind Team, CamThink Team
DescriptionBrief summary of widget functionality
Install / UninstallOne-click install or remove

Click Install to add a widget. Once installed, it appears in the Components tab and works just like built-in widgets. Installed widgets show an Uninstall button for easy removal.

Marketplace widgets come from the NeoMind-Dashboard-Components community repository, continuously updated.

Option 2: Import via ZIP Upload​

If you've developed your own widget or obtained a widget package from another source, you can upload it via Import Component:

  1. In the Marketplace tab, click the Import Component button in the top right
Import component dialog β€” upload ZIP widget package
  1. Click the upload zone to select a .zip file (or drag a file onto the zone)
  2. The ZIP must contain manifest.json (widget metadata) and bundle.js (widget code)
  3. Click Install Confirm to complete the installation

See Developer Guide β€” Dashboard Component Development for the ZIP package structure.

You can also install via CLI:

# List available marketplace widgets
neomind widget list

# Install a marketplace widget
neomind widget install <widget-name>

# Install from a local ZIP file
neomind widget install /path/to/widget.zip

Building Custom Widgets​

Want to build your own? A NeoMind widget is essentially a ZIP package (manifest.json + bundle.js) written in React and bundled as an IIFE. Once built, upload it via Import Component to start using.

See Developer Guide β€” Dashboard Component Development for the full development workflow.

Next Steps​

  • AI Chat β€” Query device data in natural language
  • AI Agent β€” Scheduled / event-triggered autonomous monitoring
  • Automation Rules β€” Automatic alerts when data crosses thresholds

Last updated: 2026-06-16