Use Card to display the last value of a variable, its unit, and a mini-chart. Card accepts links so that when users click on it, it may redirect them to another website, dashboard, or tab. 

This widget also accepts features like metadata, that can be set in your variable data.

Creating your own

To add it to your dashboard, choose the Card widget from the list and customize it to your preference. You can edit it by using the options located on the right side of the widget.

This widget works for both dashboards, Normal and Blueprint.

1. 'Data From' Field

This field allows you to set the device and variable that will be used in this widget.

This field is dependent on the type of dashboard you are using; the difference is explained below.

1.1 'Data From' for Normal Dashboards

From the option 'Data From' on the right menu, select one device from your list of devices and the variable that contains the data.

1.2 'Data From' for Blueprint Dashboards

From the option 'Data From' on the right menu, add the Blueprint device and input the name of the variable that contains the information.

When using a Blueprint dashboard, the field Variable will not list variables to be picked because it doesn't know the devices linked to your Blueprint Device.

2. Color Options

You are able to configure colors for the text, background, and chart based on certain conditions. 

The conditions use the value of the selected variable to dynamically display the colors.

Colors can be controlled by the parameters defined in the widget configuration or by the metadata stored within the variable.

3. Using colors from Metadata

You can define the colors of the Card widget by using information stored in the metadata of the variable. 

Switch the option present on the Visualization tab, 'Override colors with the conditions defined here' to False to apply the colors from the metadata.

By default, the colors are defined by the conditions defined on the widget configuration.

Inside the metadata, the following fields can be used to define the color of each component:

Here's a JSON example:

{
  "variable": "current",
  "value": 5.3,
  "unit": "A",
  "metadata": {
    "color": "white",
    "background_color": "blue",
    "chart_color": "green"
  }
}

TIP: You can always enter colors using #HEX or RGB values instead of a color name. 

{
  "variable": "current",
  "value": 5.3,
  "unit": "A",
  "metadata": {
    "color": "#FFFFFF",
    "background_color": "blue",
    "chart_color": "rgb(44, 144, 223)"
  }
}

4. Mini-chart

A mini-chart can be added at the bottom of the widget to display up to the last 30 points (values). The chart is optional and the number of points are configurable. 

The mini-chart doesn't present absolute values, its purpose is only to depict the trend of the variable.

5. Clickable link

If you want the user to be redirected to another website, dashboard, or tab, just add a valid https link in the field inside the User Control tab.