Avantec widgets

Widget list

Entities cards

Latest values widget.

../_images/entities-cards-1.png

Configuration:

  1. Add all datasources and data keys in Data page.

  2. Add some card templates in Advanced page. A card template per entity alias used in the datasources.

    • Alias Name: Entity alias name.

    • Card HTML pattern: HTML template. You can use ${dsName}, ${entityName}, ${deviceName}, ${entityLabel}, ${aliasName}, ${entityDescription}, or ${your_datakey_label} in it.

    • Card style function: f(datasource, ctx): CSS.

  3. Optionally, configure some data keys used in Card HTML pattern: Data page –> Pen icon –> Advanced page.

    • Cell content function: f(value, datasource, ctx): text or HTML

    • Cell style function: f(value, datasource, ctx): CSS.

  4. Add some action in Action page. A action of element click per entity alias used in the datasources.

    • Action source: On HTML element click

    • Name: Entity alias name.

  5. Optionally, if you want to hide the border of the widget, you should do this in Settings page:

    • Disable Display widget title.

    • Background color of the widget should be the same as background color of Dashboard.

RPC button with params & response

Control widget.

For Server-side RPC.

../_images/rpc-button-with-params--response-1.png

Segmented switch of boolean value

Control widget.

../_images/segmented-switch-of-boolean-value-1.png

Segmented switch of string value

Control widget.

../_images/segmented-switch-of-string-value-1.png

Select double value from flexible options

Control widget.

Deprecated!

../_images/select-double-value-from-flexible-options-1.png

Select double value from flexible options (New)

Control widget.

../_images/select-double-value-from-flexible-options-new-1.png

Select double value from flexible options with pattern key

Control widget.

Some parameters of this widget can be appended with a suffix for programming time.

../_images/select-double-value-from-flexible-options-with-pattern-key-1.png

Select time zone value

Control widget.

../_images/select-timezone-value-1.png

Setting list

Control widget.

../_images/setting-list-1.png

Simple Attributes Card

Latest values widget.

This widget can display the attributes of devices.

../_images/simple-attributes-card-1.png

Simple state params card

Control widget.

This widget can display the state parameters of the Dashboard.

../_images/simple-state-params-card-1.png

Styled button of string value

Control widget.

../_images/styled-button-of-string-value-1.png

Styled button of string value with pattern key

Control widget.

../_images/styled-button-of-string-value-with-pattern-key-1.png

Buttons navigation bar

Control widget.

../_images/buttons-navigation-bar-1.png

Tabs navigation bar

Control widget.

../_images/tabs-navigation-bar-1.png

Update shared string attribute with segmented switch

Latest values widget.

../_images/update-shared-string-attribute-with-segmented-switch-1.png

Update time value

Control widget.

../_images/update-time-value-1.png

Update time value with pattern key

Control widget.

Some parameters of this widget can be appended with a suffix for programming time.

../_images/update-time-value-with-pattern-key-1.png

Import Avantec Widgets

Tip

Avantec_widgets.json can only be imported once. If you have already imported it, you do not need and cannot repeat the import.

If you have already imported it, you can skip this step or Update Avantec Widgets.

  • Download avantec_widgets.json.

  • Widgets Library –> + –> Import widgets bundle –> Popup dialog: Import widgets bundle –> Drag and drop avantec_widgets.json –> Import.

../_images/import-avantec-widgets-1.png

  • Widgets Library –> click Avantec widgets

../_images/import-avantec-widgets-2.png

  • All Avantec widgets

../_images/import-avantec-widgets-3.png

Update Avantec Widgets

  • First, Delete Avantec Widgets: Widgets Library –> Click icon_delete in the row of Avantec widgets –> Popup dialog: Are you sure you want to delete …? –> Yes.

../_images/delete-avantec-widgets-1.png