Card Widget

Card Widget

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:

"color"color for text
"background_color"color for the widget background
"chart_color"color for the mini-chart

Here's a JSON example:

  "variable": "current",
  "value": 5.3,
  "unit": "A",
  "metadata": {
    "color": "white",
    "background_color": "blue",
    "chart_color": "green"
TIPYou 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.

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.

    • Related Articles

    • Note Widget

      Note allows you to create a text to be viewed in your dashboard. It accepts a markdown formatted text, allowing you to use bold, italic and list tools.  Although you could use the Note Widget to add images to your dashboard, we highly recommend that ...
    • Widget Header

      The widget header enables you to add customized buttons in the header of your widget in order to improve the flow of your dashboard. The widget header is enabled for all widgets. You can configure it by selecting the Header tab in your widget ...
    • Pie Widget

      Using data from multiples variables, the Pie widget automatically produces a Pie Chart, where each slice represents variable data. This widget also accepts features like metadata, that can be set in your variable data. Creating your own To add it to ...
    • Custom Widget

      Custom Widgets are very versatile, allowing you to build whatever you need to suit your application’s needs. The widget can be built with plain web technologies like HTML, CSS, and JavaScript, but keep in mind that at least some JavaScript is needed ...
    • Icons Widget

      With icons, the user can create very personalized widgets for their applications, and the result can look like the ones shown below, but the possibilities are endless. Users can add up to 9 variables in this widget, and each variable will show its ...