Widget guide
This guide provides an overview of the different types of widgets available for your dashboard, along with examples and key settings to configure for each widget type.
1. Single Value Widget
- Purpose: To display a single, current, or aggregated piece of information from a device. This is great for at-a-glance readings.
- Examples:
- Current temperature in a room.
- Total items produced by a machine today.
- The minimum battery level recorded for a device in the last 24 hours.
- Key Settings You’ll Configure:
- Title: e.g., “Current Office Temperature”
- Description: e.g., “Displays the latest temperature reading from the office thermostat.”
- Data Source (Device / Bundle): Choose the specific device or group of devices.
- Data Field: The specific sensor reading you want to see (e.g.,
temperature,battery_level). - Aggregate: How to summarize the data. For a “current” value, you’d often use
LATEST. For “total items today,” you might useSUMwith aTime Rangeof “Last 24 hours.” - Time Range: How far back to look for the data.
- Suffix: Unit to display (e.g., “°F”, “volts”, “units”).
- Decimal Points: Number of decimal places to show for the value. (defaults to 2 if left blank)
2. Graph Widget
- Purpose: To display trends of one or more data fields over time, usually as a line chart or area chart. This is excellent for seeing patterns, comparisons, and history.
- Examples:
- A chart showing temperature and humidity trends over the last day.
- Key Settings You’ll Configure:
- Title: e.g., “Sensor Readings - Last 24 Hours”
- Description: e.g., “Tracks temperature, humidity, and pressure from the weather station.”
- Time Range: The overall period the chart will cover (e.g., “Last 7 days”).
- Group Time Range: This determines how data is grouped on the chart. Basically how many data points to show.
- Fields: This is where you define what data lines or bars appear on your chart. For each piece of data you want to plot, you’ll specify:
- Field: The sensor reading (e.g.,
internal_temp_celsius,external_temp_celsius). - Legend: How this data series will be named in the chart’s legend (e.g., “Internal Temp,” “External Temp”).
- Aggregate: How to summarize the data for each Interval (e.g.,
AVG,MAX). - Color: The color of the line or bar for this data series on the chart.
- Data Source (Bundle / Device): You can specify a device/bundle for each field individually if needed, or it can use a general one for the widget. This will override the widget-level device/bundle if set.
- Field: The sensor reading (e.g.,
- Important Note: You can’t add the exact same data field with the exact same aggregation type from the exact same device more than once to the same chart. Each line needs to be unique in what it’s representing.
- Suffix: A general unit that might apply to values on the Y-axis (e.g., “°C”).
- References: Optional horizontal lines on the chart to indicate important thresholds. For each reference line, you’ll set:
- Value: The Y-axis value where the line should appear.
- Label (Optional): Text to describe what this line represents (e.g., “Max Safe Temp”). If left blank, no label will be shown.
- Color: The color of the reference line.
3. State Widget
- Purpose: To display a status or condition based on a numerical value from a device. It changes color and label depending on the value.
- Examples:
- A temperature status: “Cold” (blue) if below 18°C, “Normal” (green) if 18-24°C, “Hot” (red) if above 24°C.
- Machine status: “Idle” (grey), “Running” (green), “Warning” (yellow), “Error” (red).
- Key Settings You’ll Configure:
- Title: e.g., “Server Room Temperature Status”
- Description: e.g., “Indicates if the server room temperature is within acceptable limits.”
- Data Source (Device / Bundle): Choose the specific device or group of devices.
- Field: The sensor reading that determines the state (e.g.,
temperature). - Aggregate: How to get the value to check (often
LATESTorAVG). - Time Range: How far back to look for the data to determine the current state.
- Minimum Value & Maximum Value: The overall expected range for your data field. The max must be greater than the min.
- States: This is where you define the different conditions. For each state, you’ll set:
- Value: The threshold value at which this state begins. For example, if you have states for “Cold” starting at 0, “Normal” starting at 18, and “Hot” starting at 25, a reading of 20 would fall into the “Normal” state. The first state’s value should generally match your minimum value.
- Color: The color to display for this state.
- Label: The text to display for this state (e.g., “Cold,” “Optimal,” “High”).
- Important Note: Each state must have a unique “Value.”
4. Gauge Widget
- Purpose: To display a single data point on a gauge, like a speedometer or a progress bar. It visually shows where the current value falls within a minimum and maximum range, often with color-coded thresholds.
- Examples:
- A radial (speedometer-style) gauge showing current machine pressure from 0 to 100 PSI, with green, yellow, and red zones.
- A fill (bar-style) gauge showing tank fill level as a percentage.
- Key Settings You’ll Configure:
- Title: e.g., “Water Tank Level”
- Description: e.g., “Shows current water level as a percentage of capacity.”
- Data Source (Device / Bundle): Select the device.
- Field: The sensor reading for the gauge (e.g.,
pressure,fill_level). - Aggregate: How to get the value to check (often
LATESTorAVG). - Time Range: Time period for the data.
- Minimum Value & Maximum Value: The start and end points of your gauge scale. Maximum value must be greater than minimum value.
- Display as Percentage: If checked, the gauge will show the value as a percentage.
- Thresholds: Define color-coded zones on your gauge. For each threshold, you set:
- Value: The value at which this color zone begins. First threshold needs to match minimum value. Must be less than maximum value and greater than the previous threshold value.
- Color: The color for this zone on the gauge.
5. Trigger Widget
- Purpose: To send a command, signal, or change a setting on a specific device directly from your dashboard (e.g., sending a
SHUTDOWNsignal). - Examples:
- A button to remotely reboot or shut down a device.
- A button to turn a connected light on/off.
- Key Settings You’ll Configure:
- Title: e.g., “System Power Control”
- Description: e.g., “Click to send a shutdown signal to the selected device.”
- Device: The specific device you want to control.
- Trigger Name: The name of the command or action you want to send to the device (e.g.,
SHUTDOWN,reboot_device). - Label: The display name of the trigger button on the dashboard.
- Color: The color assigned to the trigger button and its label.
- Require Confirmation: If checked, a prompt will appear asking for user confirmation before executing the trigger.
6. Histogram Widget
- Purpose: To display the distribution of a numerical data field over a specified time range. This is useful for understanding how often certain values occur within your data set.
- Examples:
- A histogram showing the distribution of temperature readings over the last week.
- A histogram displaying the frequency of different humidity levels recorded by a sensor.
- Key Settings You’ll Configure:
- Bucket Count: The number of bars (buckets) to display in the histogram. More buckets provide a more detailed view of the distribution.
- Min Bucket Threshold: The minimum value for the first bucket. This sets the second point of your histogram. the first bucket is all values under this value.
- Max Bucket Threshold: The maximum value for the last bucket. This sets the second to last point of your histogram. the last bucket is all values over this value.
- Count Type: Choose between
COUNT(number of readings) orSUM(sum of readings) to determine how the data is aggregated within each bucket. - Display Type: Choose between
SIDE BY SIDE(bars next to each other) orSTACKED(bars on top of each other) for visualizing multiple fields.
7. Boolean Widget
- Purpose: To display a boolean (true/false) value from a specific field of a device. It functions similarly to the Single Value Widget but is optimized for displaying custom text labels like “On/Off”.
- Examples:
- Displaying whether a specific machine in a bundle is “On” or “Off”.
- Showing if a safety switch is currently “Engaged” or “Disengaged”.
- Key Settings You’ll Configure:
- Title: e.g., “Main Engine Status”
- Description: e.g., “Displays the current operational state of the engine.”
- Data Source (Device / Bundle): Choose the specific device or group of devices.
- Data Field: The specific sensor reading yielding a boolean value (e.g.,
is_running). - Aggregate: How to summarize the data (often
LATESTfor boolean values). - Time Range: How far back to look for the data.
- On Text: The text you want to display when the device reports true (e.g., “On”, “Active”).
- Off Text: The text you want to display when the device reports false (e.g., “Off”, “Inactive”).
8. Text Widget
- Purpose: To display simple, static text directly on the dashboard. This is useful for providing context, instructions, or titles without connecting to device data.
- Examples:
- A welcome message or general instructions for dashboard operators.
- Section headers to organize different operational views.
- Key Settings You’ll Configure:
- Title: (Optional) A title for the text block.
- Text Content: The actual string of text you wish to display.
9. Image Map Widget
- Purpose: To visually map and overlay data directly onto a custom background image. This allows for clear spatial visualization of your data by placing mini Single Value Widgets on top of a diagram.
- Examples:
- Overlaying temperature readings on specific rooms displayed over a building’s floor plan.
- Mapping the active status of servers over a schematic of a server rack.
- Key Settings You’ll Configure:
- Title: e.g., “Floor Plan Temperature Map”
- Description: e.g., “Live temperature readings mapped across the office layout.”
- Background Image: The image file you upload to serve as the map (e.g., blueprint, layout design).
- Single Widget Settings (Data Points): For each reading you want to display on the image, you configure standard Single Value Widget settings (Data Source, Data Field, Aggregate, Time Range, etc.) and drag them into position over the background image.
10. Image Widget
- Purpose: To display image data that is directly received from a specific device within a bundle. It functions similarly to the Single Value Widget, but lacks the aggregation setting since the data type is an image.
- Examples:
- Displaying an updated building blueprint or architectural schematic sent by a device.
- Showing a snapshot or visual diagram generated and transmitted by a sensor system.
- Key Settings You’ll Configure:
- Title: e.g., “Current Blueprint Reference”
- Description: e.g., “Latest camera snapshot or generated schematic from the device.”
- Data Source (Device / Bundle): Choose the specific device that transmits the image.
- Data Field: The specific field that contains the image data payload.
- Time Range: The timeframe to query the latest available image data.
11. Table Widget
- Purpose: To display data received from specific devices in a clean, tabular format. This is ideal for listing multiple properties or states side-by-side.
- Important Constraint: The Table Widget currently only supports displaying data formatted as Text or Single Value widgets within its cells.
- Examples:
- A status table listing multiple devices and their current operational text states side-by-side.
- A table aggregating the latest single-value temperature readings across multiple zones.
- Key Settings You’ll Configure:
- Title: e.g., “Device Overview Table”
- Columns: Define the headers and structure for your table.
- Data Source & Fields: Select the devices and their corresponding fields to populate the rows and columns. only suppory single value widget & text
Last updated on