Dashboard Widget Usage

A dashboard widget is used for viewing data from and sending commands to datasources. There are a variety of ways to display different types of data and control devices.

Visit the dashboard setup page for more info on navigating to and setting up dashboards.

Settings

Click the button in the top right to access the widgets' settings, which include adding, editing, deleting and reordering widgets.

Use the button at the bottom of the settings sidebar to save all changes.

Make sure to save any changes made to a dashboard before leaving the page! Changes are not saved automatically!

Adding and Editing Widgets

To add a widget to a pane:

  1. Click the button at the top right of the pane.
  2. Select a widget from any one of the categories.
    • Most of the widgets are built-in to Spoke Zone. This page describes each of them by category.
    • Custom widgets will also show up in this dialog under the Custom category.
  3. A widget settings dialog will appear after the widget is added.
    • Any values can be used for text and number settings and they will show up exactly as inputted.
    • Values are limited to a few options with select and checkbox settings.
    • Use values from datasources for calculated settings.
    • Select any datasource for a datasource setting to give the widget all the data from that datasource to be processed internally.
  4. Apply the settings. The new widget will be located below all other widgets in the pane.

To edit a widget, click the button at the bottom right corner of the widget.

Calculated Settings

Many widgets have calculated settings. These are the core of dashboards because they are used any time a widget displays data from a datasource or sends a command.

Selector Mode is the default way to use calculated settings:

  1. Select a datasource from the drop down.
  2. Use the search bar to find data/commands to display/send.
    • For Spoke Zone Device datasources: select signals from the CAN database or MQTT commands from that device's model.
    • For Time and Weather datasources: select any of the built-in data points.

Click the button to use Code Mode for the setting. Use custom JavaScript (JS) logic to specify exactly how data will appear on the widget by integrating signals from datasources into code.

Any code that is valid in JS will work for calculated setting code as long as it returns values that make sense for the setting is doing (i.e., don't return a random word for a text color setting).

For example, to show data for the topic speed, normally in MPH, converted to KPH, the code might look like this:

return datasources["datasource_name"]["path_to_topic"]["speed"] * 1.60934;

Or, to change the color of the text (using a calculated setting) based on speed, it might resemble this:

// Red text for speeds over 100 KPH if ((datasources["datasource_name"]["path_to_topic"]["speed"] * 1.60934) > 100) return "red"; else return "green";

Data from multiple signals can be used in the same calculated setting. For example, to display warning messages based on error codes that use speed values in the messages, the code might look something like this:

let speed = datasources["datasource_name"]["path_to_topic"]["speed"] * 1.60934; switch (datasources["datasource_name"]["path_to_topic"]["error_code"]) { case 100: // Example OK message return speed + " MPH is below the speed limit"; case 200: // Example Warning message return speed + " MPH is above the speed limit. Please slow down."; case 300: // Example Critical message return speed + " MPH is more than 20 MPH above the speed limit. Slow down immediately."; default: return ""; }

Note that two signals from the datasource, speed and error_code, are used for this setting.

Reordering Widgets

Widgets cannot be dragged from one pane onto another. To "move" a widget to a different pane, delete the widget from the first pane and replicate it in the second pane.

To change the order of widgets in a pane, use the arrow buttons in the bottom right corner of the widget.