Building Dashboards, Charts, and Interactive Mesh Interfaces

Updated: January 2026

Once your Meshtastic nodes are publishing via MQTT and Mesh-Plug is connected to your WordPress site, the foundation is complete. The next step is turning that live stream into useful interfaces; dashboards, charts, alerts, and interactive views that surface insight instead of raw packets.

This guide focuses on what Mesh-Plug does after connectivity is solved; visualization, filtering, automation, and long-term usability.

Step 1: Confirm Live Data Inside WordPress

Before building dashboards, confirm that MQTT messages are reaching Mesh-Plug itself; not just your broker.

Verify at the broker level (optional)

From a terminal or MQTT client:

mosquitto_sub -h 127.0.0.1 -t "msh/#" -v

You should see structured messages similar to:

msh/2/e/nodedata {"id":12345,"text":"Hello from Node 2","rssi":-65}

This confirms your nodes are publishing.

Verify inside Mesh-Plug

In WordPress:

Mesh-Plug → Diagnostics → Test Subscription

When data is flowing, incoming messages will appear here in near real time. This step confirms that:

The broker connection is valid
Topics are subscribed correctly
Messages are being parsed by Mesh-Plug

If no data appears:

Recheck the Broker URL and protocol (ws vs wss)
Confirm topic alignment (msh/# is recommended)
Verify authentication credentials if enabled
Confirm tunnel or LAN reachability

Once data appears in Diagnostics, you are ready to render it.

Step 2: Displaying Data with Shortcodes

Mesh-Plug exposes all MQTT data through a single, flexible shortcode that can be used anywhere in WordPress.

Basic example

[mesh_plug_display topic="msh/#"]

Common display formats

Format	Purpose
`log`	Live message stream
`text`	Simplified message output
`table`	Structured fields in HTML tables
`nodes`	NodeDB summary view
`map`	Node locations (GPS required)
`chart`	Telemetry visualization (archive enabled)

Shortcodes can be placed in pages, posts, widgets, or custom templates; no theme changes required.

Step 3: Building a Real-Time Dashboard Page

A dashboard is simply a WordPress page composed of multiple Mesh-Plug views.

Timed refresh (simple and reliable)

[mesh_plug_display topic="msh/#" format="table" refresh="10"]

This reloads data every 10 seconds.

Live refresh (JavaScript polling)

Enable:

Mesh-Plug → Settings → Live Refresh

This allows in-place updates without full page reloads; better for monitoring screens and control rooms.

Multi-panel dashboard example

<h2>Node Status</h2>

[mesh_plug_display topic=”msh/#” format=”nodes”]

<h2>Telemetry</h2>

[mesh_plug_display topic=”msh/+/e/telemetry” format=”chart” refresh=”30″]

<h2>Recent Messages</h2>

[mesh_plug_display topic=”msh/#” format=”text” limit=”10″]

The result is a single WordPress page acting as a live mesh dashboard; no external tools required.

Step 4: Filtering and Shaping the Data

Shortcodes support filtering, ordering, and limits to prevent information overload.

[mesh_plug_display
  topic="msh/#"
  format="table"
  filter_field="text"
  filter_value="alert"
  limit="20"
  order="desc"]

Common attributes

filter_field / filter_value; show only matching packets
limit; cap the number of rows displayed
order; ascending or descending

Developer hook (optional)

Mesh-Plug allows computed fields to be added before rendering:

add_filter('mesh_plug_format_message', function ($msg) {
    if (isset($msg['rssi'])) {
        $msg['signal_quality'] = $msg['rssi'] > -70 ? 'Good' : 'Weak';
    }
    return $msg;
});

This allows you to enrich raw MQTT data without modifying the source nodes.

Step 5: Charts and Telemetry Visualization

When message archiving is enabled, Mesh-Plug can render historical telemetry using built-in charting.

[mesh_plug_display
  topic="msh/+/e/telemetry"
  format="chart"
  value_field="temperature"
  chart_type="line"
  refresh="30"]

Supported chart types

Line
Bar
Gauge
Scatter

Charts automatically inherit your WordPress theme’s color mode (light, dark, or system).

Step 6: Alerts and Thresholds

Mesh-Plug includes a lightweight alert engine designed for operational awareness.

Create alert rules under:

Mesh-Plug → Alerts

Example rule:

Setting	Example
Topic	`msh/2/e/nodedata`
Field	`rssi`
Condition	`< -80`
Action	Email administrator

Alerts can:

Send email notifications
Log events to the Mesh Events log
Prepare data for external automation hooks

Common use cases include signal degradation, battery warnings, and sensor thresholds.

Step 7: WordPress-Native Integration

Because Mesh-Plug runs entirely inside WordPress, it integrates naturally with your site:

Gutenberg and classic editors
Custom Post Types and ACF
REST endpoints for external access
User-role based dashboards
Theme-aware styling

Mesh-Plug behaves like a first-class WordPress feature; not a bolt-on iframe or third-party embed.

Step 8: Optimization and Hardening

Area	Recommendation
Security	Use TLS for public brokers; restrict topics where possible
Performance	Narrow topic scopes (`msh/2/#`) when scaling
Retention	Enable pruning to control database growth
Backups	Include Mesh-Plug tables in site backups
Diagnostics	Use the built-in log viewer for connection tracing

Step 9: Beyond Visualization

For advanced users, Mesh-Plug supports expansion into:

Custom widgets and dashboards
Webhook forwarding to Node-RED or external systems
Geo dashboards with map libraries
AI-assisted summaries and classification (optional)

At this stage, Mesh-Plug becomes less of a viewer and more of a control and insight layer for mesh networks.

Final Thoughts

With MQTT delivering data and Mesh-Plug rendering it natively inside WordPress, you now have a flexible bridge between off-grid radios and the modern web.

Whether your goal is monitoring, experimentation, coordination, or automation, the heavy lifting is already done. What remains is deciding how you want to use the data.

Mesh-Plug connects the dots; dashboards are just the beginning.

Next Steps: Dashboards