The Text widget is designed for displaying text output, which can either be set to a static text value or dynamically calculated from a variable of a subscribed datasource.

• Title: Enter a title for the widget.
• Size: Select the font size for the value text.
• Value: Select the name of the variable to display from a datasource.
• Units: Enter the units for the value that will be displayed.
• Animation: Select whether to add an animation when the value changes.

The Link widget allows the user to show an anchor link to a given URL.

• Title: Enter a title for the widget.
• Link: Enter a URL for the widget.

The Picture widget allows the user to display an image from a given URL.

• Image URL: Enter a valid image URL for the widget.
• Refresh Interval: Input how long the widget should wait before refreshing the image.

The Map widget widget allows visualization of the real-time location of a device. It displays an interactive map with markers indicating the coordinates of the given device.

• Latitude: Select the value to be used for the device's latitude.
• Longitude: Select the value to be used for the device's longitude.

The Indicator Light widget showcases the status of a boolean datasource variable. It provides a clear visual representation that dynamically updates to reflect the variable's state, toggling between on and off.

• Title: Enter a title for the widget.
• Value: Select the name of the variable to subscribe to.
• On Text: Enter the text to display when the variable is on.
• Off Text: Enter the text to display when the variable is off.
• Icon: Select the icon to be displayed for visualization.
• Icon Color: Enter the color to display the icon in.

The Single Monitor widget displays a single data variable from a subscribed datasource in a clear and concise format, allowing for monitoring of a key metric.

• Title: Enter a title for the widget.
• Value: Select the name of the variable to subscribe to.
• Units: Enter the units for the value that will be displayed.
• Apply Rounding: Select whether to round off the value to be displayed.
• Decimal: Enter the number of decimal places to which the value should be rounded.

The Monitor Grid widget displays a grid with variables from datasources to which it is subscribed, presenting the information in a clear and concise format. Users can display as many variables as needed.

• Datasets: Allows the user to add datasets, each of which represents one block in the grid.
  • For each dataset, specify:
    • The title of the metric
    • The variable to use for the value
    • The variable's units
    • An optional variable or hardcoded value for the background color of the block
  • Add more datasets with the button.

The Button widget provides a customizable button that triggers specific actions for the linked datasource.

• Title: Enter a title for the widget.
• Color: Select a color for the button background.
• Button text: Enter the text to be displayed on the button.
• Datasource: Select the datasource command to publish when the button is clicked.

The Interactive Indicator widget provides a visual indicator of a variable's state, allowing users to quickly assess and toggle between two defined states by clicking the indicator.

• Title: Enter a title for the widget.
• Initial Value: Select the initial state of the widget. By default, the widget starts in the "Off" state (false). Select "On" (true) to make the widget start in that state.
• Datasource: Select the datasource command to publish when the indicator is clicked.
• On Text: Enter the text to be displayed when the widget is in the "On" state (true).
• Off Text: Enter the text to be displayed when the widget is in the "Off" state (false).
• Icon: Select the icon to be displayed for visualization.
• Icon Color: Enter the color to display the icon in.

The Text Sender widget allows users to publish text strings to a variable associated with a datasource.

• Title: Enter a title for the widget.
• Datasource: Select the datasource command to publish text to when the "Send" button is clicked.

The Number Sender widget allows users to publish numeric values to a variable associated with a datasource.

• Title: Enter a title for the widget.
• Datasource: Select the datasource command to publish text to when the "Send" button is clicked.

The Slide Switch widget allows users to directly control a variable associated with a given datasource by toggling the visual switch to send an MQTT command.

• Title: Enter a title for the widget.
• On Text: Enter the text to be displayed when the switch is on.
• Off Text: Enter the text to be displayed when the switch is off.
• Initial Value: Select the name of the variable to subscribe to for the switch's initial value.
• Datasource: Select the datasource command to publish when the switch is toggled.

The Two Action Control widget provides users with direct control over a variable linked to a given datasource through two buttons. These buttons enable users to increase or decrease the variable's value.

• Title: Enter a title for the widget.

• Current Status: Select the name of the variable to subscribe to for the current state.

• Enable Lookup Table: Select whether to enable the lookup table.

• Lookup Table: Enter a string with the following format:

  // Use as many rows as needed. [ { value: <some-value>, color: <some-color>, text: <some-text>, textColor: <some-color> }, { value: <some-value>, color: <some-color>, text: <some-text>, textColor: <some-color> }, { value: <some-value>, color: <some-color>, text: <some-text>, textColor: <some-color> } ]

  Then, the value from the datasource will be compared against the values in the lookup table, and the corresponding properties will be used to display the status.

• Send: Select the datasource command to publish when the buttons are clicked.

  • The left button sends a JSON-stringified version of {"button_1":1, "button_2":0}.
  • The right button sends a JSON-stringified version of {"button_1":0, "button_2":1}.

• Left Button Color: Select the background color for the left button.

• Left Button Text: Enter the text for the left button.

• Right Button Color: Select the background color for the right button.

• Right Button Text: Enter the text for the right button.

• Button Style: Select the shape of the buttons.

• Default Value: Enter the default value.

The Hex widget allows users to publish CAN data directly to a given device datasource.

• Title: Enter a title for the widget.
• Datasource: Select a device datasource to publish to.
• With Values: Select whether to use raw hex data or signals from the CAN database.

The Reboot Command Widget allows users to send the reboot command to connected logger device.

• Title: Enter a title for the widget.
• Datasource: Select the device datasource to publish to.

The Line Graph widget allows users to display data in a line graph. The data is shown in a Cartesian coordinate system using line segments, with the option to fill the area under the line.

• The Line Graph widget is a handy option for observing how data changes over time, allowing for identification of patterns and general trends.
• Easy to visualize fluctuations and peaks in data, allowing for more precise analysis of its behavior.
• Good option for when it's necessary to compare different data sets in the same graph.
• The widget highlights the most recent value for each dataset above the chart.

• Title: Enter a title for the widget.
• Datasets: Allows the user to add datasets by giving a label and selecting the name of the variable to display for each dataset. Additional variables can be included in the graph by using the button to add more datasets.
• Fill the area under the line: Select whether to fill the area under the line. This is purely for visual effect.
• Gridlines: Select whether to show the x-axis and y-axis gridlines on the chart.
• Adjustable Y axis: Select whether to show the y-axis slider to filter out the values that lie within the upper and lower limit of the slider.
• Maximum Series Length: Enter the maximum amount of data points to display in the graph at a time.
• Minimum Y Value: Enter the minimum value for the Y axis. Data points below this value will not be shown in the graph.
• Maximum Y Value: Enter the maximum value for the Y axis. Data points above this value will not be shown in the graph.
• Y Axis Constants: Allow user to add thresholds by providing the value for each Y axis constant to check how many points are above or below the applied threshold.
  • Additional constants can be included in the graph by using the button.

The Bar Graph widget allows users to analyze data with a bar graph. The data is represented by rectangular bars displayed on a Cartesian coordinate system.

• Ideal for comparing different values of a dataset side-by-side, allowing for easy identification of the highest, lowest, and average values.
• The visual representation of data distribution helps users identify trends, patterns, and potential outliers within the dataset.

• Title: Enter a title for the widget.
• Datasets: Allows the user to add datasets by giving a label and selecting the name of the variable to display for each dataset. Additional variables can be included in the graph by using the button to add more datasets.
• Y Axis: Select whether each bar should display the number of times the data point is received or the percentage of all data received that match that data point.
• Maximum Y Value: Enter the maximum value for the Y axis. Data points above this value will not be shown in the graph.

The Donut Chart widget enables users to visualize and analyze data in a donut chart. Data is represented as portions of a donut shape, with labels indicating the category and corresponding value.

• Great option for comparing the relative sizes of different data categories, highlighting the percentage contribution of each variable to the whole.
• The visual representation of data distribution helps users to identify the dominance of a specific category within the data.

• Title: Enter a title for the widget.
• Datasets: Allows the user to add datasets by giving a label and selecting the name of the variable to display for each dataset. Additional variables can be included in the graph by using the button to add more datasets.

The Pie Chart widget allows users to analyze data in a pie chart. Data is represented as slices of a circle, with labels indicating the category and corresponding value.

• Pie charts effectively communicate the proportional relationships between data, making it easy to understand the relative size of each category.

• Title: Enter a title for the widget.
• Datasets: Allows the user to add datasets by giving a label and selecting the name of the variable to display for each dataset. Additional variables can be included in the graph by using the button to add more datasets.

The Gauge widget allows users to represent and analyze data with a gauge. Data is displayed using a needle or visual indicator that moves within a specified range.

• Excels at showing real-time fluctuations and variations within a specific data range.
• Great option for monitoring a single data point in real-time.
• Showcases variation, but not ideal for analyzing long-term trends or patterns within the data.

• Type: Select the type of gauge to display. This is purely for visual effect.
• Title: Enter a title for the widget.
• Value: Select the name of the variable to subscribe to.
• Units: Enter the units for the value to be displayed.
• Minimum: Enter the minimum value of the gauge.
• Maximum: Enter the maximum value of the gauge.
• Highlights: Add highlight(s) to the gauge. The appearance of the highlight varies depending on gauge type:
  • For the original gauge type, each highlight added has threshold values that change the color of the indicator depending on its actual value.
  • For the custom gauge type, the highlights added will be shown as the background color of the scale in the gauge.
• Animation: Select whether to add an animation when the value changes.
• Legends: Select whether to show a legend for the added highlights.