ioBroker.vis-materialdesign

Material Design Widgets for IoBroker VIS

ioBroker Material Design Widgets are based on Google's material design guidelines

Table of Content

• General
  • Online Example Project
  • Practical examples
  • Questions and answers about the widgets
  • Supported Browser
  • Supported Browser for vibrate on mobil devices function
  • ioBroker VIS App
• Adapter settings
  • General
  • Theme Editor
    • Theme Settings
• Widgets
  • Material Design Icons and Images
    • Editor Settings
    • HTML Properties
  • Buttons
    • Navigation
      • Editor Settings
      • HTML Properties
    • Link
      • Editor Settings
      • HTML Properties
    • State
      • Editor Settings
      • HTML Properties
    • Multi State
      • Editor Settings
      • HTML Properties
    • Addition
      • Editor Settings
      • HTML Properties
    • Toggle
      • Editor Settings
      • HTML Properties
  • Buttons Vertical
    • Navigation
      • Editor Settings
      • HTML Properties
    • Link
      • Editor Settings
      • HTML Properties
    • State
      • Editor Settings
      • HTML Properties
    • Multi State
      • Editor Settings
      • HTML Properties
    • Addition
      • Editor Settings
      • HTML Properties
    • Toggle
      • Editor Settings
      • HTML Properties
  • Icon Buttons
    • Navigation
      • Editor Settings
      • HTML Properties
    • Link
      • Editor Settings
      • HTML Properties
    • State
      • Editor Settings
      • HTML Properties
    • Multi State
      • Editor Settings
      • HTML Properties
    • Addition
      • Editor Settings
      • HTML Properties
    • Toggle
      • Editor Settings
      • HTML Properties
  • Checkbox
    • Editor Settings
    • HTML Properties
  • Switch
    • Editor Settings
    • HTML Properties
  • Value
    • Editor Settings
    • HTML Properties
  • HTML Card
  • List
    • Editor Settings
    • Data JSON Properties
  • IconList
    • Editor Settings
    • Data JSON Properties
  • Progress
    • Editor Settings
    • HTML Properties
  • Progress Circular
    • Editor Settings
    • HTML Properties
  • Slider
    • HTML Properties
  • Slider Round
    • HTML Properties
  • Input
    • Text input
      • Editor Settings
      • HTML Properties
    • Select
      • Menu JSON Properties
      • HTML Properties
    • Autocomplete
      • Menu JSON Properties
      • HTML Properties
  • Top App Bar
    • Editor Settings
    • Menu JSON Properties
    • Submenu
      • Submenu JSON Properties
  • Charts
    • Bar Chart
      • Editor Settings
      • Dataset JSON Properties
    • Pie Chart
      • Editor Settings
      • Dataset JSON Properties
    • Line History Chart:
      • Editor Settings
    • JSON Chart
      • JSON Properties
  • Table
    • Editor Settings
    • Data - JSON Stucture
    • internal object binding
    • Control Elements using HTML Widgets
    • Control Elements - deprecated since v0.5.0
  • Responsive Layout
    • Masonry Views
      • Editor Settings
    • Grid Views
      • Editor Settings
  • Alerts
    • Editor Settings
    • Datapoint JSON Properties
    • Script: send alert to widget
  • Calendar
    • Editor Settings
    • Datapoint JSON Properties
    • Script: ical conversion
  • Dialog
    • Editor Settings
  • HTML Widgets
    • Examples
• Informations
  • used libraries
  • Changelog

General

Online Example Project

provided by iobroker.click, thanks to bluefox and iobroker.

• VIS Runtime (alternativ)
• VIS Editor (alternativ)

Practical examples

• Weather View
• Skript Status
• Adapter Status
• UniFi Netzwerk Status

Questions and answers about the widgets

If you have questions about the individual widgets, then first look at the topics of the individual widgets

• German threads

Supported Browser

I officially support the last two versions of every major browser. Specifically, i test on the following browsers:

• Firefox on Windows and Linux
• Chrome on Android, Windows, and Linux

Supported Browser for vibrate on mobil devices function

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate

ioBroker VIS App

latest version needs to be implemented by the app, see https://github.com/ioBroker/ioBroker.vis.cordova. I do not use the app and do not test on it either

Adapter settings

Starting with version 0.4.0 there is a settings page for the adapter. You can find it under Instances in the user interface of the admin adapter

General

Theme Editor

With the help of the Theme Editor you can centrally set colors, fonts and font sizes for all widgets via the adapter settings. For each widget datapoints (see screenshot below) are created with the set values. This makes it also possible to use these settings in other widgets (not Material Design Widgets) via bindings.

Datapoint structure

Theme Settings

Every settings page for colors, colors dark, font and font sizes look likes show in the screenshot above.

Standard colors / fonts /font sizes can be defined in the upper area. These standard colors / fonts /font sizes can then be assigned to the individual widgets using the buttons in the table. If you change the default colors / fonts /font sizes, it will also change for all widgets that use this colors / fonts /font sizes. Additionally, it is possible to assign your own colors / fonts /font sizes to the widgets, independent of the standard colors.

For colors there are two themes - light theme and dark theme. With the datapoint vis-materialdesign.0.colors.darkTheme you can switch between the two themes. For example this datapoint can be used in a script to switch between lights and dark colors on sunrise and sunset.

VIS Editor (Restore / update old Widgets)

In the VIS Editor you will find a button use theme for each widget. With this button you can reset the widgets to the use of the themes. That means if you have changed colors, fonts or font sizes, you can reset them with this button.

With the help of this button it is also possible to update your widgets from versions before 0.4.0 to use the themes.

Change Datapoint Binding for Material Design Widgets

If you would like to change the using of others colors that are defined for other widgets, you can copy the datapoint binding by pressing the button with the material design icon. Just paste this in any color, fonts or font sizes field of a material design widget. For example a color "state binding" looks like #mdwTheme:vis-materialdesign.0.colors.card.background

Use Binding for non Material Design Widgets

In the adapter settings you can copy the binding command to the clipboard by clicking on the button with iobroker icon. This binding can then be used by copy and paste even for non Material Design Widgets. For example a color binding looks like {mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.card.background;dark:vis-materialdesign.0.colors.dark.card.background; mode === "true" ? dark : light}

Widgets

Material Design Icons and Images

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Description
	Some of the widgets support Material Design Icons library. You can pic up an icon from the list above or open the image picker by clicking the button on the right of the input field. Image colors only applies to the material design icons, not to an image!

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Buttons

Navigation

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	View to navigate	name of view to navigate

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Link

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	Link	url to open
	open in new window	open link in new window / tab

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

State

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	value	value to set

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Multi State

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	Object ID[x]	id of the object from which the value is to be set
	value[x]	value to be set
	delay [ms][x]	delay until value is set

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Addition

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	value	value to be added or subtracted
	minmax	minimum / maximum value up to which adding or subtracting can take place

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Toggle

Editor Settings

Settings that are not listed in the table below are self-explanatory.

tbd

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Buttons Vertical

Navigation

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	View to navigate	name of view to navigate

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Link

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	Link	url to open
	open in new window	open link in new window / tab

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

State

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	value	value to set

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Multi State

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	Object ID[x]	id of the object from which the value is to be set
	value[x]	value to be set
	delay [ms][x]	delay until value is set

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Addition

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	value	value to be added or subtracted
	minmax	minimum / maximum value up to which adding or subtracting can take place

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Toggle

Editor Settings

Settings that are not listed in the table below are self-explanatory.

tbd

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Icon Buttons

Navigation

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	View to navigate	name of view to navigate

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Link

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	Link	url to open
	open in new window	open link in new window / tab

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

State

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	value	value to set

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Multi State

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	Object ID[x]	id of the object from which the value is to be set
	value[x]	value to be set
	delay [ms][x]	delay until value is set

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Addition

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	value	value to be added or subtracted
	minmax	minimum / maximum value up to which adding or subtracting can take place

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Toggle

Editor Settings

Settings that are not listed in the table below are self-explanatory.

tbd

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Checkbox

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	type of toggle	Define which type of datapoint (boolean or value) should be switched
	value for off	Set at which value the checkbox is false
	value for on	Set at which value the checkbox is true
	state if value unequal to 'on' condition	Set the state of the checkbox when the value does not match the 'on' condition

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Switch

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	type of toggle	Define which type of datapoint (boolean or value) should be switched
	value for off	Set at which value the switch is false
	value for on	Set at which value the switch is true
	state if value unequal to 'on' condition	Set the state of the switch when the value does not match the 'on' condition

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Value

As HTML Widget it can be used as an alternativ for Bindings by giving a better performance.

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	target type	If you would like to convert to an other type, choose the target type to convert to.
	override text	override the value text. you can use #value to show the value in the text
	font color	Define the color of the text. Additional it's posible to use #value for conditions to show diffrent colors depending on the value of the datapoint. Allowed expression see mathjs evaluation expressions
	color of the text prepanded	Define the color of the text. Additional it's posible to use #value for conditions to show diffrent colors depending on the value of the datapoint. Allowed expression see mathjs evaluation expressions
	color of appended text	Define the color of the text. Additional it's posible to use #value for conditions to show diffrent colors depending on the value of the datapoint. Allowed expression see mathjs evaluation expressions
	calculate	Use #value for the value of the datapoint and convert it by calculation using mathjs evaluation expressions
	convert seconds to duration	convert a duration in seconds to a readable string. Approved formats must be entered according to the moment-duration-format library. You can also use humanize. It's also possible to combine this with the calculation, e.g. if the source value is in minutes, you can convert it to seconds by using calculation
	convert timestamp to datetime	convert a timestamp to a readable datetime. Approved formats must be entered according to the momentjs library. It's also possible to combine this with the calculation
	condition	Use #value for the value of the datapoint and conditions to format other types to boolean by using the mathjs evaluation expressions
	Image	Select a materialdesignicon or an image. Additional it's posible to use #value for conditions to show diffrent images / icons depending on the value of the datapoint. Allowed expression see mathjs evaluation expressions
	image color	Define the color of the materialdesignicon. Additional it's posible to use #value for conditions to show diffrent colors depending on the value of the datapoint. Allowed expression see mathjs evaluation expressions

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

HTML Card

List

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	type of list	control type of list like checkbox, button state, button toggle, etc.
	divider style	style of the divider
	layout	standard or card layout
	show scollbar	show scrollbar if necessary
	input method for the list data	use the editor or a json string to define the items
	Editor: count of list items	count of list items using the editor
	JSON-String: object id	object id of datapoint containing json string. Allowed properties are described below

Data JSON Properties

JSON Properties - Example

[
    {
        "text": "item0",
        "subText": "{0_userdata.0.MDW.list.bind0}",
        "rightText": "right",
        "rightSubText": "",
        "image": "clock-check-outline",
        "imageColor": "#44739e",
        "imageActive": "",
        "imageActiveColor": "",
        "header": "JSON",
        "showDivider": "false",
        "objectId": "0_userdata.0.MDW.list.bool.val0",
        "buttonStateValue": "",
        "buttonNavView": "",
        "buttonLink": "",
        "listOverflow": false
    }, {
        "text": "item1",
        "subText": "{0_userdata.0.MDW.list.bind1}",
        "rightText": "right",
        "rightSubText": "",
        "image": "clock-check-outline",
        "imageColor": "#44739e",
        "imageActive": "",
        "imageActiveColor": "",
        "header": "",
        "showDivider": "false",
        "objectId": "0_userdata.0.MDW.list.bool.val1",
        "buttonStateValue": "",
        "buttonNavView": "",
        "buttonLink": "",
        "listOverflow": false
    }, {
        "text": "item2",
        "subText": "",
        "rightText": "right",
        "rightSubText": "",
        "image": "clock-check-outline",
        "imageColor": "#44739e",
        "imageActive": "",
        "imageActiveColor": "",
        "header": "",
        "showDivider": "false",
        "objectId": "0_userdata.0.MDW.list.bool.val2",
        "buttonStateValue": "",
        "buttonNavView": "",
        "buttonLink": "",
        "listOverflow": false
    }, {
        "text": "item3",
        "subText": "fuuuu",
        "rightText": "right",
        "rightSubText": "",
        "image": "clock-check-outline",
        "imageColor": "#44739e",
        "imageActive": "",
        "imageActiveColor": "",
        "header": "",
        "showDivider": "false",
        "objectId": "0_userdata.0.MDW.list.bool.val3",
        "buttonStateValue": "",
        "buttonNavView": "",
        "buttonLink": "",
        "listOverflow": false
    }
]

IconList

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	input method for the list data	The data for the IconList can be entered via the editor or a JSON string can be used
	Editor: count of list items	number of list items using vis editor for the data of list
	JSON-String: object id	object id of datapoint containing json string. Allowed properties are described below

Data JSON Properties

JSON string must be an array of objects with the following properties:

JSON Properties - Example

[
    {
        "background": "red",
        "text": "text1",
        "subText": "number",
        "image": "harddisk",
        "imageColor": "#ec0909",
        "imageActive": "folder",
        "imageActiveColor": "#5ad902",
        "buttonBackgroundColor": "",
        "buttonBackgroundActiveColor": "",
        "listType": "buttonState",
        "objectId": "0_userdata.0.iconList.buttonState.number",
        "buttonStateValue": "60",
        "buttonNavView": "",
        "buttonLink": "",
        "buttonToggleValueTrue": "",
        "buttonToggleValueFalse": "",
        "valueAppendix": "",
        "showValueLabel": "true",
        "statusBarColor": "green",
        "lockEnabled": "false"        
    },
    {
        "background": "green",
        "text": "text0",
        "subText": "bool",
        "image": "home",
        "imageColor": "#44739e",
        "imageActive": "home",
        "imageActiveColor": "#44739e",
        "buttonBackgroundColor": "",
        "buttonBackgroundActiveColor": "#a0f628",
        "listType": "buttonToggle",
        "objectId": "0_userdata.0.iconList.buttonToggle.bool0",
        "buttonStateValue": "60",
        "buttonNavView": "",
        "buttonLink": "",
        "buttonToggleValueTrue": "",
        "buttonToggleValueFalse": "",
        "valueAppendix": "",
        "showValueLabel": "false",
        "statusBarColor": "",
        "lockEnabled": "false"
    }
]

Progress

Editor Settings

Screenshot	Setting	Description
	condition for color 1 progress [>]	Condition from when color 1 should be used. The value of the condition must be in percent
	condition for color 2 progress [>]	Condition from when color 2 should be used. The value of the condition must be in percent
	custom label	For custom label you can use the property [#value] to show the real value of the datapoint. To show the current percent you can use [#percent]

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Progress Circular

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	condition for color 1 progress [>]	Condition from when color 1 should be used. The value of the condition must be in percent
	condition for color 2 progress [>]	Condition from when color 2 should be used. The value of the condition must be in percent
	custom label	For custom label you can use the property [#value] to show the real value of the datapoint. To show the current percent you can use [#percent]

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Slider

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Slider Round

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Input

Text input

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	Object ID	id of datapoint
	input type	input type of textfield
	input mask	if using input type mask, you can define a mask. Allowed properties are describe in the vue the mask documentation
	max length	max input length of textfield

HTML Properties

The following properties can be used as HTML Widgets.

Select

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	method of data of menu	There are three methods to define the data of the menu. First is to define it via editor. Second is to define it via a json string. Third method is to define it by three list for values, labels and icons
	Editor: count of menu items	Method of data of menu: via editor Define the number of menu entries. The the individual menu entries can be defined under menu item[x]
	JSON string	Here you can add a JSON string to define the menu entries or use bindings to a datapoint that contains a JSON string. JSON string must have the above descibed format
	value list	Define the number of menu entries by adding values that will be set to the datapoint. Entries must be separeted by semicolon
	value list: labels	Define the related labels of the values. Entries must be separeted by semicolon
	value list: images	Define the related icons of the values. Entries must be separeted by semicolon. You can use image path or Material Design Icons name

Menu JSON Properties

Menu JSON Properties - Example

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Autocomplete

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	method of data of menu	There are three methods to define the data of the menu. First is to define it via editor. Second is to define it via a json string. Third method is to define it by three list for values, labels and icons
	Editor: count of menu items	Method of data of menu: via editor Define the number of menu entries. The the individual menu entries can be defined under menu item[x]
	JSON string	Here you can add a JSON string to define the menu entries or use bindings to a datapoint that contains a JSON string. JSON string must have the above descibed format
	value list	Define the number of menu entries by adding values that will be set to the datapoint. Entries must be separeted by semicolon
	value list: labels	Define the related labels of the values. Entries must be separeted by semicolon
	value list: images	Define the related icons of the values. Entries must be separeted by semicolon. You can use image path or Material Design Icons name

Menu JSON Properties

Menu JSON Properties - Example

HTML Properties

The following properties can be used as HTML Widgets.

HTML Properties - Example

Top App Bar

Top App Bar with Navigation Drawer can be combined with the view in widget 8.

Take a look at the Material Design Widgets example project to understand how it works.

Layout modal:

Layout permanent:

Layout auto:

Layout 'auto' switch automatically between layout 'modal' and 'permanent' depending on screen resolution. Via VIS-Editor you can set the resolution from which the 'permanent' layout should be used (bigger than condition).

Hint: Using with the 'View in Widget 8' widget

To work correct with the 'view in widget 8' widget you have to define a css media rule.

• First assign a "Common CSS Rule" to the widget , e.g. named my-view-in-widget8.
• Then add the following CSS to your project:

  .my-view-in-widget8 {
  top: 64px !important;
  height: calc(100% - 64px) !important;
  overflow-y: auto;
  }
  @media screen and (max-width: 800px) {
  /* Resolution lower than 800px -> using 'modal' layout */
  .my-view-in-widget8 {
      left: 0 !important;
      width: 100% !important;
  }
  }
  @media screen and (min-width: 800px) {
  /* Resolution higher than 800px -> using 'modal' layout */
  .my-view-in-widget8 {
      left: 256px !important;
      width: calc(100% - 256px) !important;
  }
  }

• In the CSS customize the resolution to the resolution that you set via VIS Editor (in the example max-width: 800px and min-width: 800px)
• If you set a custom width for the menu drawer, than you also have to change 'left' and 'width' property in the CSS to this value (in the example left: 256px !important; and width: calc(100% - 256px) !important;)

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	Object ID	must be set to a datapoint from typ number. For example this datapoint can be used by view in widget 8
	show index of navigation items	shows the index of navigation before the item label. This number can be used in view in widget 8 to define the view that should be shown if the item is selected
	count of navigation items	Define the count of the navigations items
	fallback value if not in user group	if you use the group permissions, you can define here the value to switch to if the user is not in the group
	disable fallback value	disable fallback value
	Object Id for selected menu item id or name	You can optionally specify a datapoint in which the name or the menu id of the selected navigation element is written. If no menu id is specified, the text of the navigation element is used. If the selected navigation element is a submenu, the name or menu id of the corresponding navigation element and submenu element is written separated with a '.', e.g. EG.Wohnzimmer For example, this can be used to dynamically create widgets depending on the selected navigation element.
	input method for the navigation items	Choose if the navigation elements are created by VIS editor or by json string.
	JSON String for navigation items	details see Menu JSON Properties and Submenu JSON Properties

Menu JSON Properties

menu items can be defined by a JSON string:

Menu JSON Properties - Example

[
    {
        "text": "Start",
        "divider": "true",
        "icon": "home"
    }, {
        "menuId": "EG",
        "text": "Erdgeschoss",
        "icon": "home-floor-0",
        "setValueOnMenuToggleClick": "true",
        "subMenus": [
            {
                "menuId": "Esszimmer",
                "text": "Esszimmer",
                "icon": "table-furniture"
            }, {
                "menuId": "Wohnzimmer",
                "text": "Wohnzimmer",
                "icon": "sofa"
            }, {
                "menuId": "Kueche",
                "text": "Küche",
                "icon": "sofa"
            }, {
                "menuId": "Eingang",
                "text": "Eingang",
                "icon": "sofa"
            }, {
                "menuId": "Flur",
                "text": "Flur",
                "icon": "sofa"
            }, {
                "menuId": "Bad",
                "text": "Bad",
                "icon": "sofa"
            }, {
                "menuId": "Zimmer",
                "text": "Zimmer",
                "icon": "sofa"
            }
        ]
    }, {
        "menuId": "DG",
        "text": "Dachgeschoss",
        "icon": "home-roof",
        "setValueOnMenuToggleClick": "true",
        "subMenus": [
            {
                "text": "Flur",
                "icon": "table-furniture"
            }, {
                "text": "Galerie",
                "icon": "sofa"
            }, {
                "text": "Schlafzimmer",
                "icon": "sofa"
            }, {
                "text": "Ankleide",
                "icon": "sofa"
            }, {
                "text": "Bad",
                "icon": "sofa"
            }, {
                "text": "Kinderzimmer",
                "icon": "sofa"
            }
        ]
    }
]

Submenu

submenus must be defined by a JSON string:

Submenu JSON Properties

Submenu JSON Properties - Example

[
    {
        "text": "subitem0",
        "icon": "account",
        "iconColor": "red"
    }, 
    {
        "text": "subitem1",
        "icon": "home",
        "iconColor": "green",
        "divider": "true"
    }, 
    {
        "text": "subitem1",
        "divider": "true",
        "icon": "/vis.0/myImages/devices/lxc_iobroker.png",
        "userGroups": ["administrator", "user"],
        "behaviorNotInUserGroup": "disabled"
    }
]

Charts

Bar Chart

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	set datasets with	The data for the BarChart can be entered via the editor or a JSON string can be used
	number of items	number of bars using vis editor for the data of list
	Object Id	object id of datapoint containing json string. Allowed properties are described below
	Object ID[x]	object id for the single bars using vis editor

Dataset JSON Properties

JSON string must be an array of objects with the following properties:

Dataset JSON Properties - Example

[
    {
        "label": "val0",
        "value": "30",
        "valueColor": "#ffffff"
    }, {
        "label": "val1",
        "value": "12.54645646",
        "tooltipTitle": "myTitle"
    }, {
        "label": "val2",
        "value": "48",
        "dataColor": "#c2c2c2",
        "valueAppendix": "\n extra"
    }, {
        "label": "val3",
        "value": "97",
        "valueColor": "#ffffff"
    }, {
        "label": "val4",
        "value": "32",
        "valueText": "text"
    }
]

Pie Chart

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	set datasets with	The data for the PieChart can be entered via the editor or a JSON string can be used
	number of items	number of pies pieces using vis editor for the data of list
	Object Id	object id of datapoint containing json string. Allowed properties are described below
	Object ID[x]	object id for the single pies pieces using vis editor

Dataset JSON Properties

JSON string must be an array of objects with the following properties:

Dataset JSON Properties - Example

[
    {
        "label": "val0",
        "value": "30",
        "valueColor": "#ffffff"
    }, {
        "label": "val1",
        "value": "12.54645646"
    }, {
        "label": "val2",
        "value": "48",
        "dataColor": "#c2c2c2",
        "valueAppendix": "\nextra"
    }, {
        "label": "val3",
        "value": "97",
        "valueColor": "#ffffff"
    }, {
        "label": "val4",
        "value": "32",
        "valueText": "text"
    }
]

Line History Chart:

Required Adapter: SQL, History or InfluxDb!

Editor Settings

Settings that are not listed in the table below are self-explanatory.

Screenshot	Setting	Description
	adapter instance	Instance for the sql or history adapter
	controlling time interval using object	Id of a datapoint to change the time interval of the chart. If the datapoint is from type 'string' it must contain one of the linked values If the datapoint is from type 'number', it must contain the starting timestamp of the graph. For example, you can use a button here to change the display of the chart during runtime
	boolean object for update	Id of adatapoint to trigger a manual refresh of the chart. For example, you can use a button here to refresh the chart during runtime
	chart timeout	timeout for loading the chart data. If you get a timeout error message, increase this value
	debug mode	if you have problems or errors, activate the debug mode and attach the console log (F12) data to the issue
	Object Id[x]	id of datapoint with activated history instance
	display method[x]	aggregation method
	max. number of data points to be displayed[x]	Number of maximum data points to display
	time interval between the data points in [s][x]	Optional setting, overrides the 'count' setting. Distance between the individual data points in seconds. For example, if you want to display data points every minute, you have to enter 60 here
	data multiply with[x]	Optional setting, multiply every datapoint with the given value
	time formats of x-axis	Change the time format of the X-axis. Time formats must be entered for all time units, the following time units are permitted. Approved time formats must be entered according to the moment.js library, see link
	tooltip time formats	Change the time format of the tooltip. Time formats must be entered for all time units, the following time units are permitted. Approved time formats must be entered according to the moment.js library, see link

JSON Chart

With the JSON chart you have the maximum freedom to create a mixed chart (line, bars and stacked bars) by script.

JSON Properties

General

graph

graph line chart spfeicifc

graph bar chart spfeicifc

graph y-Axis

gradientColor

Chart with time axis

JSON Chart supports data that have a timestamp. To use this the data array must have values for timestamp (x-axis value) and value (y-axis value).

values with timestamp

x-axis settings for data with timestamp

Example

{
    "axisLabels": ["1h", "2h", "3h", "4h", "5h", "6h", "7h", "8h", "9h", "10h", "11h", "12h", "13h", "14h", "17h", "18h", "19h", "20h", "21h", "22h", "23h", "24h"],
    "graphs": [
        {
            "data": [19, 19, 18, 19, 19, 20, 20, 21, 22, 24, 24, 24, 23, 22, 23, 23, 24, 23, 23, 22, 22, 21, 20, 20],
            "type": "line",
            "color": "gray",
            "legendText": "Temperatur",
            "line_pointSizeHover": 5,
            "line_pointSize": 0,
            "line_Tension": 0.3,
            "yAxis_show": false,
            "yAxis_gridLines_show": false,
            "yAxis_gridLines_ticks_length": 5,
            "yAxis_min": 0,
            "yAxis_max": 30,
            "yAxis_step": 5,
            "yAxis_position": "left",
            "yAxis_appendix": " °C",
            "yAxis_zeroLineWidth": 0.1,
            "yAxis_zeroLineColor": "black",
            "displayOrder": 0,
            "tooltip_AppendText": " °C",
            "datalabel_backgroundColor": ["#2b9a44", "#2b9a44", "#3aa35b", "#2b9a44", "#2b9a44", "#1d922e", "#1d922e", "#0e8917", "#008000", "#668f00", "#668f00", "#668f00", "#338700", "#008000", "#338700", "#338700", "#668f00", "#338700", "#338700", "#008000", "#008000", "#0e8917", "#1d922e", "#1d922e"],
            "datalabel_color": "white",
            "datalabel_offset": -10,
            "datalabel_fontFamily": "RobotoCondensed-Light",
            "datalabel_fontSize": 12,
            "datalabel_borderRadius": 6,
            "datalabel_show": "auto",
            "line_PointColor": ["#2b9a44", "#2b9a44", "#3aa35b", "#2b9a44", "#2b9a44", "#1d922e", "#1d922e", "#0e8917", "#008000", "#668f00", "#668f00", "#668f00", "#338700", "#008000", "#338700", "#338700", "#668f00", "#338700", "#338700", "#008000", "#008000", "#0e8917", "#1d922e", "#1d922e"],
            "line_PointColorBorder": ["#2b9a44", "#2b9a44", "#3aa35b", "#2b9a44", "#2b9a44", "#1d922e", "#1d922e", "#0e8917", "#008000", "#668f00", "#668f00", "#668f00", "#338700", "#008000", "#338700", "#338700", "#668f00", "#338700", "#338700", "#008000", "#008000", "#0e8917", "#1d922e", "#1d922e"],
            "line_PointColorHover": ["#2b9a44", "#2b9a44", "#3aa35b", "#2b9a44", "#2b9a44", "#1d922e", "#1d922e", "#0e8917", "#008000", "#668f00", "#668f00", "#668f00", "#338700", "#008000", "#338700", "#338700", "#668f00", "#338700", "#338700", "#008000", "#008000", "#0e8917", "#1d922e", "#1d922e"],
            "line_PointColorBorderHover": ["#2b9a44", "#2b9a44", "#3aa35b", "#2b9a44", "#2b9a44", "#1d922e", "#1d922e", "#0e8917", "#008000", "#668f00", "#668f00", "#668f00", "#338700", "#008000", "#338700", "#338700", "#668f00", "#338700", "#338700", "#008000", "#008000", "#0e8917", "#1d922e", "#1d922e"],
            "use_gradient_color": true,
            "gradient_color": [{
                    "value": -20,
                    "color": "#5b2c6f66"
                }, {
                    "value": 0,
                    "color": "#2874a666"
                }, {
                    "value": 14,
                    "color": "#73c6b666"
                }, {
                    "value": 22,
                    "color": "#00800066"
                }, {
                    "value": 27,
                    "color": "#ffa50066"
                }, {
                    "value": 35,
                    "color": "#ff000066"
                }
            ],
            "use_line_gradient_fill_color": true,
            "line_gradient_fill_color": [{
                    "value": -20,
                    "color": "#5b2c6f66"
                }, {
                    "value": 0,
                    "color": "#2874a666"
                }, {
                    "value": 14,
                    "color": "#73c6b666"
                }, {
                    "value": 22,
                    "color": "#00800066"
                }, {
                    "value": 27,
                    "color": "#ffa50066"
                }, {
                    "value": 35,
                    "color": "#ff000066"
                }
            ]
        }, {
            "data": [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 19, 33, 36, 23, 14, 16, 34, 46, 40, 24, 22],
            "type": "line",
            "color": "#0d47a1",
            "legendText": "Regenwahrscheinlichkeit",
            "line_UseFillColor": true,
            "line_pointSize": 0,
            "line_pointSizeHover": 5,
            "yAxis_min": 0,
            "yAxis_max": 100,
            "yAxis_maxSteps": 10,
            "yAxis_position": "left",
            "yAxis_gridLines_show": false,
            "yAxis_gridLines_border_show": false,
            "yAxis_zeroLineWidth": 0.1,
            "yAxis_zeroLineColor": "black",
            "yAxis_appendix": " %",
            "displayOrder": 1,
            "tooltip_AppendText": " %",
            "datalabel_show": false
        }, {
            "data": ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "1.3", "2.5", 0, 1.9, 1.17, 0, 0, 0, 0.18, 0.7, 0.2, 0, 0],
            "type": "bar",
            "color": "#6dd600",
            "legendText": "Niederschlag",
            "yAxis_min": 0,
            "yAxis_max": 5,
            "yAxis_maxSteps": 10,
            "yAxis_position": "right",
            "yAxis_gridLines_show": false,
            "yAxis_appendix": " mm",
            "yAxis_gridLines_border_show": false,
            "yAxis_zeroLineWidth": 0.1,
            "yAxis_zeroLineColor": "black",
            "displayOrder": 1,
            "tooltip_AppendText": " mm",
            "datalabel_show": false
        }
    ]
}

{
    "axisLabels": ["Jan", "Feb", "Mrz", "Apr"],
    "graphs": [{
            "type": "line",
            "data": [40, 22, 160, 92],
            "yAxis_id": 0,
            "barIsStacked": true,
            "datalabel_show": false,
            "line_UseFillColor": true

        }, {
            "type": "bar",
            "barIsStacked": true,
            "data": [30, 69, 91, 35],
            "yAxis_id": 0,
            "barStackId": 0,
            "color": "#6dd600",
            "datalabel_color": "#FFFFFF",
            "datalabel_align": "start",
            "use_gradient_color": true,
            "gradient_color": [{
                    "value": 60,
                    "color": "#6dd600"
                }, {
                    "value": 0,
                    "color": "lightgray"
                }
            ]
        }, {
            "type": "bar",
            "barIsStacked": true,
            "data": [17, 68, 83, 49],
            "yAxis_id": 0,
            "barStackId": 1,
            "color": "#ff9800",
            "datalabel_color": "#FFFFFF",
            "datalabel_align": "start"
        }, {
            "type": "bar",
            "barIsStacked": true,
            "data": [95, 42, 34, 31],
            "yAxis_id": 0,
            "barStackId": 1,
            "color": "#8e24aa",
            "datalabel_color": "#FFFFFF",
            "datalabel_align": "start"
        }, {
            "type": "bar",
            "barIsStacked": true,
            "data": [33, 44, 22, 34],
            "yAxis_id": 0,
            "barStackId": 2,
            "color": "#a65628",
            "datalabel_color": "#FFFFFF",
            "datalabel_align": "start"
        }, {
            "type": "bar",
            "barIsStacked": true,
            "data": [28, 34, 45, 23],
            "yAxis_id": 0,
            "yAxis_max": "180",
            "barStackId": 2,
            "color": "#d32f2f",
            "datalabel_color": "#FFFFFF",
            "datalabel_align": "start"
        }
    ]
}

Table

Editor Settings

Screenshot	Setting	Description
	switch	Datapoint from type string with input data as shown above
	data as JSON	Optional, input data as shown above if no oid datapoint is set
	colType[x]	If image is selected, object property must have the path to the image (see above)
	prefix[x]	Prefix for object property, internal object binding (see below) and html can be used
	suffix[x]	Suffix for object property, internal object binding (see below) and html can be used
	object name for sorting[x]	Here you can define an other object property that should be used for sorting.

Data - JSON Stucture

Input data must be a json array of objects. You can use any property, there is no fixes structure. Column 0 gets the value of the first property, column 1 gets the value of the second property and so on. Important is, that every Object has the same structure.

[
    {
        "img": "/vis.0/myImages/erlebnis_50.png",
        "name": "Empire",
        "betriebszeit": "4h 06m",
        "funk": "5G",
        "ip": "10.0.0.1"
    },
    {
        "img": "/vis.0/myImages/erlebnis_100.png",
        "name": "Handy",
        "betriebszeit": "13m",
        "funk": "5G",
        "ip": "10.0.0.2"
    },
    {
        "img": "/vis.0/myImages/erlebnis_100.png",
        "name": "Harmony Hub - Wohnzimmer",
        "betriebszeit": "18T 07h 21m",
        "funk": "2G",
        "ip": "10.0.0.3"
    }
]

internal object binding

prefix & suffix supports table internal object binding -> you can access other properties of object by using

#[obj.'propertyName']

Example see see above.

Working Widget Example can be found

• here
• ical Adapter

Control Elements using HTML Widgets

You can use the HTML Widgets directly in the json string. If you would like to customize the cell that conatins the widget, use the following container:

HTML Control Widgets - Example

Control Elements - deprecated since v0.5.0

deprecated Use HTML Widgets instead!

To generate a control element (button, checkbox, etc.) in cell of the table you must create an object instead of a string.

Responsive Layout

There are two widgets - Masonry Views and Grid Views - with which it is possible to create a repsonsive layout (a layout for desktop, tablet and mobile). Both Widgets has multiple view in widget integrated.

Masonry Views

Masonry Views has multiple view in widget integrated, that will be ordered automatically depending of the width of the widget. With this widget it is possible to create a responsive layout (one layout for desktop, tablet and mobil). Masonry views are especially useful if the views included have different heights.

Take a look at the Material Design Widgets example project to understand how it works.

Editor Settings

Screenshot	Setting	Description
	Depending on the width of the widget, the number of columns and the distance between the views can be set. The settings can be set independently for portrait and landscape format. To find out the width of the resolution for the different devices, activate the Resolution Assistant under the common settings.
	width of view[x]	Define the width of the view. Allowed values are number, px, % or calc. Examples: 100, 100px, 55%, calc(60% - 12px)
	height of view[x]	Here you can specify the height of the view used. If you want the height to adjust variably to the view, then this input must be empty and for the widget with the highest height in the view the position must be set to relative, see screenshot:

Grid Views

Grid Views has multiple view in widget integrated, that will be ordered automatically depending of the width of the widget. With this widget it is possible to create a responsive layout (one layout for desktop, tablet and mobil). Grid views are especially useful if the views included have the same heights.

The Grid View widget has 12 columns in total. If you want a view to have a width of 4 columns, you have to set column span to 4 in the corresponding view[x]

Take a look at the Material Design Widgets example project to understand how it works.

Editor Settings

Screenshot	Setting	Description
	Depending on the width of the widget, defined from which width of the widget the rules for column span of the individual views[x] can be applied and the distance between the views. The settings can be set independently for portrait and landscape format. To find out the width of the resolution for the different devices, activate the Resolution Assistant under the common settings.
	Define the column span of the view depending of the current width resolution rule. You can also specify here whether a view should only be displayed at a resolution higher or lower than a defined value or whether it should be visible via a object id.
	height of view[x]	Here you can specify the height of the view used. If you want the height to adjust variably to the view, then this input must be empty and for the widget with the highest height in the view the position must be set to relative, see screenshot:

Alerts

Alerts widget can be used e.g. to display messages in the VIS, like it works with the pushover adapter, but directly in the VIS.

Editor Settings

Settings that are not listed in the table below are self-explanatory.