What You'll Learn
Design dashboards optimized for big screens and distance viewing
Create multi-machine overview layouts
Configure auto-refresh for live monitoring
Apply visual optimizations for shopfloor displays
Prepare dashboards for kiosk mode
Completed Part 2 (Visualization Types)
Basic understanding of panel configuration
Access to ENLYZE data source
Shopfloor dashboards serve a different purpose than office dashboards:
Aspect
Office Dashboard
Shopfloor Dashboard
Design Principles
Less is more – Show only essential information
Big and bold – Large text, thick lines, clear colours
At-a-glance status – Traffic light colours for immediate understanding
Consistent layout – Same position for same metrics across machines
Multi-Machine Layout
Side-by-Side Comparison
The most common shopfloor layout shows multiple machines in columns:
Grafana uses a 24-unit grid. For shopfloor layouts:
Machines
Width per machine
Layout
Creating the Layout
Plan your grid – Sketch the layout first
Create one column – Build all panels for one machine
Duplicate and modify – Copy panels, change data source
Align precisely – Use the grid snapping feature
[SCREENSHOT: Multi-machine shopfloor layout]
Machine Header Panels
Use text panels to create clear machine identification:
HTML Header Style
Panel type: Text
Mode: HTML
Content:
Markdown Header Style
Mode: Markdown
Content:
[SCREENSHOT: Machine header text panel]
Current Value Displays
For shopfloor displays, stat panels should be large and readable from distance.
Large Stat Panel Configuration
Panel type: Stat
Remove sparkline for clarity
Font Size Considerations
Grafana auto-sizes text to fit the panel. For readability at distance:
Minimum panel height: 4-5 units
Panel width: 6-8 units per machine
One value per panel: Don't stack multiple values
Colour by Threshold
Configure thresholds for immediate status recognition:
Example for throughput (target: 100 kg/h):
[SCREENSHOT: Large stat panel with thresholds]
Time Series for Trends
Even on shopfloor displays, trend lines help operators see patterns.
Optimised Time Series Settings
Threshold Visualisation
Show thresholds directly on charts:
In Field settings, configure thresholds
Under Thresholds, set Show thresholds to:
As lines – Horizontal reference lines
As filled regions – Coloured background areas
Threshold display modes:
As filled regions + lines
[SCREENSHOT: Time series with threshold regions]
Axis Configuration
For consistent comparison across machines:
This ensures all machine charts have the same scale.
Status Indicator Panels
Create simple running/stopped indicators.
Using Stat with Value Mappings
Query: Use a variable that indicates machine state (e.g., speed > 0)
Value mappings:
Or with text values:
The entire panel becomes the status colour.
[SCREENSHOT: Status indicator panels]
Transparent Panels
For a cleaner shopfloor look, use transparent panels:
Go to Panel options (right sidebar)
Enable Transparent background
Benefits:
Cleaner, more modern appearance
Dashboard background shows through
Best practices:
Use with dark dashboard backgrounds
Apply consistently across all panels
Ensure sufficient contrast for text
[SCREENSHOT: Dashboard with transparent panels]
Auto-Refresh Configuration
Shopfloor dashboards need automatic updates.
Setting Refresh Interval
Method 1: Time picker
Click the time picker (top right)
Select refresh interval from dropdown
Options: 5s, 10s, 30s, 1m, 5m, etc.
Method 2: Dashboard settings
Click gear icon → Settings
Under General, find Auto refresh
Enter allowed intervals: 5s,10s,30s,1m,5m
Set default refresh in time picker
Recommended Intervals
For truly real-time displays:
Select a relative range (e.g., "Last 15 minutes")
The view continuously shifts forward
Note: Very short refresh intervals increase server load.
[SCREENSHOT: Auto-refresh configuration]
Dashboard-Wide Settings
Set to local factory time:
Dashboard settings → General
Timezone: Browser (uses viewer's timezone) or specific timezone
Default Time Range
Set an appropriate default:
Dashboard settings → General
Default time range: e.g., "Last 1 hour"
For kiosk displays, consider hiding UI elements:
Dashboard settings → General
Enable Hide time picker (if time range is fixed)
Colour Consistency
Per-Machine Colours
Assign consistent colours to each machine:
Applying Colours
Method 1: Fixed colour in field config
Choose the machine's colour
Method 2: Field override
Add override → By name → [Variable name]
Add property → Colour → Fixed colour
High Contrast Palette
For distance viewing, avoid subtle colours:
Complete Shopfloor Dashboard
Layout Example (3 Machines)
Row 1: Headers (height: 2)
Row 2: Current Values (height: 5)
Machine 1 throughput stat (8 units)
Machine 2 throughput stat (8 units)
Machine 3 throughput stat (8 units)
Row 3: Status (height: 3)
Machine 1 status (8 units)
Machine 2 status (8 units)
Machine 3 status (8 units)
Row 4: Trends (height: 8)
Machine 1 time series (8 units)
Machine 2 time series (8 units)
Machine 3 time series (8 units)
Dashboard Settings
[SCREENSHOT: Complete shopfloor dashboard]
Preparing for Kiosk Mode
Kiosk mode hides all Grafana UI for a clean display.
Accessing Kiosk Mode
Add ?kiosk to the dashboard URL:
Kiosk variations:
Hide UI, cycle through rows
Auto-fit panels to screen
Full Kiosk URL Example
For dedicated shopfloor displays:
Open dashboard in browser
Press F11 for full-screen browser mode
Configure browser to start with this URL
[SCREENSHOT: Dashboard in kiosk mode]
Practical Exercise
Build a shopfloor dashboard with:
Layout: 2 machines side-by-side (Kiefel and Macchi)
Per machine:
Header text panel with machine name
Large stat panel for current throughput
Status indicator (running/stopped simulation)
Time series trend with thresholds
Styling:
Consistent colours per machine
Threshold visualisation on charts
You've learned to build shopfloor monitoring dashboards:
Design for distance viewing with large, clear displays
Create multi-machine layouts with consistent positioning
Configure auto-refresh for live monitoring
Apply visual optimisations (transparency, thresholds, colours)
Prepare dashboards for kiosk mode deployment
Continue with:
Quick Reference
Panel Sizes for Shopfloor
Auto-Refresh URL Parameter
High Contrast Colours
Stat Panel for Distance Viewing
