ioBroker Material Design Widgets are based on Google's material design guidelines
provided by iobroker.click, thanks to bluefox and iobroker.
If you have questions about the individual widgets, then first look at the topics of the individual widgets
I officially support the last two versions of every major browser. Specifically, i test on the following browsers:
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate
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
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
setting | description |
---|---|
Documentation | Links to documentation to help you configure the widgets |
Generate global script | Create a global script for the Javascript Script Engine with all theme data points. This allows to use colors, fonts and font sizes comfortably in scripts. |
Sentry | use Sentry libraries to automatically report exceptions and code errors anonymously to the developers. For more details and for information how to disable the error reporting see Sentry-Plugin Documentation! |
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.
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.
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.
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
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}
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! |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
Common |
|||
mdw-mdwIcon | icon | string | |
mdw-mdwIconSize | icon size | number | |
mdw-mdwIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-debug | debug | boolean | false | true |
Settings that are not listed in the table below are self-explanatory.
Screenshot | Setting | Description |
---|---|---|
![]() |
View to navigate | name of view to navigate |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | navigation_default |
Common |
|||
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-nav_view | View to navigate | views | |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-labelWidth | text width | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonColorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | left | right |
mdw-iconHeight | image height | number |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | link_default |
Common |
|||
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-href | Link | url | |
mdw-openNewWindow | open in new window | boolean | false | true |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-labelWidth | text width | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonColorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | left | right |
mdw-iconHeight | image height | number |
Settings that are not listed in the table below are self-explanatory.
Screenshot | Setting | Description |
---|---|---|
![]() |
value | value to set |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | state_default |
Common |
|||
mdw-oid | Object ID | string | |
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-value | value | string | |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-labelWidth | text width | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonColorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | left | right |
mdw-iconHeight | image height | number | |
Locking |
|||
mdw-lockEnabled | enable Locking | boolean | false | true |
mdw-autoLockAfter | auto Locking after [s] | number | |
mdw-lockIcon | icon | string | |
mdw-lockIconSize | icon size | number | |
mdw-lockIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockFilterGrayscale | gray filter if locked | number |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | multiState_default |
Common |
|||
mdw-countOids | count of Object Id's | number | |
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
Object Id [x] |
|||
mdw-oid[x] | Object ID | string | |
mdw-value[x] | value | string | |
mdw-delayInMs[x] | delay [ms] | number | |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-labelWidth | text width | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonColorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | left | right |
mdw-iconHeight | image height | number | |
Locking |
|||
mdw-lockEnabled | enable Locking | boolean | false | true |
mdw-autoLockAfter | auto Locking after [s] | number | |
mdw-lockIcon | icon | string | |
mdw-lockIconSize | icon size | number | |
mdw-lockIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockFilterGrayscale | gray filter if locked | number |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | addition_default |
Common |
|||
mdw-oid | Object ID | string | |
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-value | value | string | |
mdw-minmax | minmax | string | |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-labelWidth | text width | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonColorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | left | right |
mdw-iconHeight | image height | number |
Settings that are not listed in the table below are self-explanatory.
tbd
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | toggle_default |
Common |
|||
mdw-oid | Object ID | string | |
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-readOnly | read only | boolean | false | true |
mdw-toggleType | type of toggle | string | boolean | value |
mdw-pushButton | push button | boolean | false | true |
mdw-valueOff | value for off | string | |
mdw-valueOn | value for on | string | |
mdw-stateIfNotTrueValue | state if value unequal to 'on' condition | string | on | off |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-labelTrue | Label true | string | |
mdw-labelColorFalse | label color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-labelColorTrue | active label color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-labelWidth | text width | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonColorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorBgFalse | background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorBgTrue | active background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-imageTrue | active image | string | |
mdw-imageTrueColor | active image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | left | right |
mdw-iconHeight | image height | number | |
Locking |
|||
mdw-lockEnabled | enable Locking | boolean | false | true |
mdw-autoLockAfter | auto Locking after [s] | number | |
mdw-lockIcon | icon | string | |
mdw-lockIconSize | icon size | number | |
mdw-lockIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockFilterGrayscale | gray filter if locked | number |
Settings that are not listed in the table below are self-explanatory.
Screenshot | Setting | Description |
---|---|---|
![]() |
View to navigate | name of view to navigate |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | navigation_vertical |
Common |
|||
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-nav_view | View to navigate | views | |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-alignment | alignment | string | flex-start | center | flex-end |
mdw-distanceBetweenTextAndImage | distance between text and image | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonColorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | top | bottom |
mdw-iconHeight | image height | number |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | link_vertical |
Common |
|||
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-href | Link | url | |
mdw-openNewWindow | open in new window | boolean | false | true |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-alignment | alignment | string | flex-start | center | flex-end |
mdw-distanceBetweenTextAndImage | distance between text and image | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonColorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | top | bottom |
mdw-iconHeight | image height | number |
Settings that are not listed in the table below are self-explanatory.
Screenshot | Setting | Description |
---|---|---|
![]() |
value | value to set |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | state_vertical |
Common |
|||
mdw-oid | Object ID | string | |
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-value | value | string | |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-alignment | alignment | string | flex-start | center | flex-end |
mdw-distanceBetweenTextAndImage | distance between text and image | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonColorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | top | bottom |
mdw-iconHeight | image height | number | |
Locking |
|||
mdw-lockEnabled | enable Locking | boolean | false | true |
mdw-autoLockAfter | auto Locking after [s] | number | |
mdw-lockIcon | icon | string | |
mdw-lockIconTop | symbol distance from top [%] | number | |
mdw-lockIconLeft | symbol distance from left [%] | number | |
mdw-lockIconSize | icon size | number | |
mdw-lockIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockFilterGrayscale | gray filter if locked | number |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | multiState_vertical |
Common |
|||
mdw-countOids | count of Object Id's | number | |
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
Object Id [x] |
|||
mdw-oid[x] | Object ID | string | |
mdw-value[x] | value | string | |
mdw-delayInMs[x] | delay [ms] | number | |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-alignment | alignment | string | flex-start | center | flex-end |
mdw-distanceBetweenTextAndImage | distance between text and image | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonColorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | top | bottom |
mdw-iconHeight | image height | number | |
Locking |
|||
mdw-lockEnabled | enable Locking | boolean | false | true |
mdw-autoLockAfter | auto Locking after [s] | number | |
mdw-lockIcon | icon | string | |
mdw-lockIconTop | symbol distance from top [%] | number | |
mdw-lockIconLeft | symbol distance from left [%] | number | |
mdw-lockIconSize | icon size | number | |
mdw-lockIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockFilterGrayscale | gray filter if locked | number |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | addition_vertical |
Common |
|||
mdw-oid | Object ID | string | |
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-value | value | string | |
mdw-minmax | minmax | string | |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-alignment | alignment | string | flex-start | center | flex-end |
mdw-distanceBetweenTextAndImage | distance between text and image | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonColorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | top | bottom |
mdw-iconHeight | image height | number |
Settings that are not listed in the table below are self-explanatory.
tbd
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | toggle_vertical |
Common |
|||
mdw-oid | Object ID | string | |
mdw-buttonStyle | button style | string | text | raised | unelevated | outlined |
mdw-readOnly | read only | boolean | false | true |
mdw-toggleType | type of toggle | string | boolean | value |
mdw-pushButton | push button | boolean | false | true |
mdw-valueOff | value for off | string | |
mdw-valueOn | value for on | string | |
mdw-stateIfNotTrueValue | state if value unequal to 'on' condition | string | on | off |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-buttontext | Button text | string | |
mdw-labelTrue | Label true | string | |
mdw-labelColorFalse | label color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-labelColorTrue | active label color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-textFontFamily | font | string | |
mdw-textFontSize | text size | number | |
mdw-alignment | alignment | string | flex-start | center | flex-end |
mdw-distanceBetweenTextAndImage | distance between text and image | number | |
colors |
|||
mdw-mdwButtonPrimaryColor | primary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-mdwButtonSecondaryColor | secondary color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorBgFalse | background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorBgTrue | active background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-imageTrue | active image | string | |
mdw-imageTrueColor | active image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | top | bottom |
mdw-iconHeight | image height | number | |
Locking |
|||
mdw-lockEnabled | enable Locking | boolean | false | true |
mdw-autoLockAfter | auto Locking after [s] | number | |
mdw-lockIcon | icon | string | |
mdw-lockIconTop | symbol distance from top [%] | number | |
mdw-lockIconLeft | symbol distance from left [%] | number | |
mdw-lockIconSize | icon size | number | |
mdw-lockIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockFilterGrayscale | gray filter if locked | number |
Settings that are not listed in the table below are self-explanatory.
Screenshot | Setting | Description |
---|---|---|
![]() |
View to navigate | name of view to navigate |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | navigation_icon |
Common |
|||
mdw-nav_view | View to navigate | views | |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconHeight | image height | number | |
colors |
|||
mdw-colorBgFalse | background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | link_icon |
Common |
|||
mdw-href | Link | url | |
mdw-openNewWindow | open in new window | boolean | false | true |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconHeight | image height | number | |
colors |
|||
mdw-colorBgFalse | background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
Settings that are not listed in the table below are self-explanatory.
Screenshot | Setting | Description |
---|---|---|
![]() |
value | value to set |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | state_icon |
Common |
|||
mdw-oid | Object ID | string | |
mdw-value | value | string | |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconHeight | image height | number | |
colors |
|||
mdw-colorBgFalse | background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
Locking |
|||
mdw-lockEnabled | enable Locking | boolean | false | true |
mdw-autoLockAfter | auto Locking after [s] | number | |
mdw-lockIcon | icon | string | |
mdw-lockIconTop | symbol distance from top [%] | number | |
mdw-lockIconLeft | symbol distance from left [%] | number | |
mdw-lockIconSize | icon size | number | |
mdw-lockIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockIconBackground | lockIconBackground | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockBackgroundSizeFactor | lockBackgroundSizeFactor | number | |
mdw-lockFilterGrayscale | gray filter if locked | number |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | multiState_icon |
Common |
|||
mdw-countOids | count of Object Id's | number | |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
Object Id [x] |
|||
mdw-oid[x] | Object ID | string | |
mdw-value[x] | value | string | |
mdw-delayInMs[x] | delay [ms] | number | |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconHeight | image height | number | |
colors |
|||
mdw-colorBgFalse | background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
Locking |
|||
mdw-lockEnabled | enable Locking | boolean | false | true |
mdw-autoLockAfter | auto Locking after [s] | number | |
mdw-lockIcon | icon | string | |
mdw-lockIconTop | symbol distance from top [%] | number | |
mdw-lockIconLeft | symbol distance from left [%] | number | |
mdw-lockIconSize | icon size | number | |
mdw-lockIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockIconBackground | lockIconBackground | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockBackgroundSizeFactor | lockBackgroundSizeFactor | number | |
mdw-lockFilterGrayscale | gray filter if locked | number |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | addition_icon |
Common |
|||
mdw-oid | Object ID | string | |
mdw-value | value | string | |
mdw-minmax | minmax | string | |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconHeight | image height | number | |
colors |
|||
mdw-colorBgFalse | background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
Settings that are not listed in the table below are self-explanatory.
tbd
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | toggle_icon |
Common |
|||
mdw-oid | Object ID | string | |
mdw-readOnly | read only | boolean | false | true |
mdw-toggleType | type of toggle | string | boolean | value |
mdw-pushButton | push button | boolean | false | true |
mdw-valueOff | value for off | string | |
mdw-valueOn | value for on | string | |
mdw-stateIfNotTrueValue | state if value unequal to 'on' condition | string | on | off |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-imageTrue | active image | string | |
mdw-imageTrueColor | active image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconHeight | image height | number | |
colors |
|||
mdw-colorBgFalse | background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorBgTrue | active background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorPress | color pressed | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
Locking |
|||
mdw-lockEnabled | enable Locking | boolean | false | true |
mdw-autoLockAfter | auto Locking after [s] | number | |
mdw-lockIcon | icon | string | |
mdw-lockIconTop | symbol distance from top [%] | number | |
mdw-lockIconLeft | symbol distance from left [%] | number | |
mdw-lockIconSize | icon size | number | |
mdw-lockIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockIconBackground | lockIconBackground | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockBackgroundSizeFactor | lockBackgroundSizeFactor | number | |
mdw-lockFilterGrayscale | gray filter if locked | number |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
Common |
|||
mdw-oid | Object ID | string | |
mdw-readOnly | read only | boolean | false | true |
mdw-toggleType | type of toggle | string | boolean | value |
mdw-valueOff | value for off | string | |
mdw-valueOn | value for on | string | |
mdw-stateIfNotTrueValue | state if value unequal to 'on' condition | string | on | off |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-labelFalse | Label false | string | |
mdw-labelTrue | Label true | string | |
mdw-labelPosition | labelPosition | string | left | right | off |
mdw-labelClickActive | activate label click | boolean | false | true |
mdw-valueFontFamily | valueFontFamily | string | |
mdw-valueFontSize | value font size | number | |
colors |
|||
mdw-colorCheckBox | checkbox color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorCheckBoxBorder | border color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorCheckBoxHover | hover color of checkbox | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-labelColorFalse | label color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-labelColorTrue | active label color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
Locking |
|||
mdw-lockEnabled | enable Locking | boolean | false | true |
mdw-autoLockAfter | auto Locking after [s] | number | |
mdw-lockIcon | icon | string | |
mdw-lockIconTop | symbol distance from top [%] | number | |
mdw-lockIconLeft | symbol distance from left [%] | number | |
mdw-lockIconSize | icon size | number | |
mdw-lockIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockFilterGrayscale | gray filter if locked | number |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
Common |
|||
mdw-oid | Object ID | string | |
mdw-readOnly | read only | boolean | false | true |
mdw-toggleType | type of toggle | string | boolean | value |
mdw-valueOff | value for off | string | |
mdw-valueOn | value for on | string | |
mdw-stateIfNotTrueValue | state if value unequal to 'on' condition | string | on | off |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
labeling |
|||
mdw-labelFalse | Label false | string | |
mdw-labelTrue | Label true | string | |
mdw-labelPosition | labelPosition | string | left | right | off |
mdw-labelClickActive | activate label click | boolean | false | true |
mdw-valueFontFamily | valueFontFamily | string | |
mdw-valueFontSize | value font size | number | |
colors |
|||
mdw-colorSwitchThumb | thumb color of switch | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorSwitchTrack | track color of switch | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorSwitchTrue | active switch color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorSwitchHover | hover color of switch | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorSwitchHoverTrue | active switch color selected / hover | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-labelColorFalse | label color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-labelColorTrue | active label color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
Locking |
|||
mdw-lockEnabled | enable Locking | boolean | false | true |
mdw-autoLockAfter | auto Locking after [s] | number | |
mdw-lockIcon | icon | string | |
mdw-lockIconTop | symbol distance from top [%] | number | |
mdw-lockIconLeft | symbol distance from left [%] | number | |
mdw-lockIconSize | icon size | number | |
mdw-lockIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-lockFilterGrayscale | gray filter if locked | number |
As HTML Widget it can be used as an alternativ for Bindings by giving a better performance.
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
Common |
|||
mdw-oid | Object ID | string | |
mdw-targetType | target type | string | auto | number | string | boolean |
mdw-overrideText | override text | string | |
mdw-debug | debug | boolean | false | true |
layout |
|||
mdw-textAlign | textAlign | string | start | center | end |
mdw-valuesFontColor | font color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-valuesFontFamily | font | string | |
mdw-valuesFontSize | font size | number | |
mdw-prepandText | text prepanded | string | |
mdw-prepandTextColor | color of text prepanded | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-prepandTextFontFamily | font of text prepanded | string | |
mdw-prepandTextFontSize | size text prepanded | number | |
mdw-appendText | appended text | string | |
mdw-appendTextColor | color of appended text | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-appendTextFontFamily | font of appended text | string | |
mdw-appendTextFontSize | font size of appended text | number | |
number formatting |
|||
mdw-valueLabelUnit | unit | string | |
mdw-minDecimals | minimal decimals | number | |
mdw-maxDecimals | maximal decimals | number | |
mdw-calculate | calculate | string | |
mdw-convertToDuration | convert to duration | text | |
boolean formatting |
|||
mdw-textOnTrue | text if true | string | |
mdw-textOnFalse | text if false | string | |
mdw-condition | condition | string | |
icon |
|||
mdw-image | Image | string | |
mdw-imageColor | image color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-iconPosition | image position | string | left | right |
mdw-iconHeight | image height | number | |
value change effect |
|||
mdw-changeEffectEnabled | enabled | boolean | false | true |
mdw-effectFontColor | font color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-effectFontSize | font size | number | |
mdw-effectDuration | effect duration | number |
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 |
Property | Description | Type | Values |
---|---|---|---|
objectId | id of datapoint | string | |
buttonStateValue | value for button if list is from type button state | string | |
buttonNavView | view for button if list is from type button navigation | string | |
buttonLink | link adresse for button if list is from type button link | string | |
header | header text of item | string | |
text | primary text | string | |
subText | secondary text | string | |
rightText | primary right text | string | |
rightSubText | secondary right text | string | |
image | material design icon or image path | string | |
imageColor | color of material design icon | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
imageActive | material design icon or image path if datapoint is active | string | |
imageActiveColor | color of material design icon if datapoint is active | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
showDivider | show divider | boolean | false | true |
listOverflow | automatically adjust column width to value | boolean | false | true |
[
{
"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
}
]
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 |
JSON string must be an array of objects with the following properties:
Property | Description | Type | Values |
---|---|---|---|
listType | type of list
|
string | text | buttonState | buttonToggle | buttonToggleValueTrue | buttonToggleValueFalse | buttonNav | buttonLink |
objectId | object id for button | string | |
minWidth | min width for item | string | 30px | 60% |
usePercentOfRow | item use x percent of row. | number | 0 = auto |
buttonStateValue | value for button state | string | |
buttonNavView | view to navigate | string | |
buttonLink | url to navigate | string | |
buttonToggleValueTrue | true value for button toggle | string | |
buttonToggleValueFalse | false value for button toggle | string | |
readOnly | button is read only | boolean | false | true |
showValueLabel | show value as text | boolean | false | true |
valueAppendix | append text to value | string | |
background | background color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
text | text | string | |
subText | second text | string | |
image | image path or name of Material Design Icons | string | |
imageColor | color of Material Design Icons | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
imageActive | image path or name of Material Design Icons | string | |
imageActiveColor | image path or name of Material Design Icons for active button | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
buttonBackgroundColor | background color of button | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
buttonBackgroundActiveColor | background color of button for active button | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
statusBarColor | color of status bar | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
statusBarColorActive | color of status bar if active | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
statusBarText | text of status bar | string | |
statusBarTextActive | text of status bar if active | string | |
lockEnabled | enable Locking | boolean | false | true |
visibilityOid | Object Id for visibility | string | |
visibilityCondition | visibility condition | string | == | != | <= | >= | < | > | consist | not consist | exist | not exist |
visibilityConditionValue | value for visibility condition | string |
[
{
"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"
}
]
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] |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | linear |
Common |
|||
mdw-oid | Object ID | string | |
mdw-min | min | string | |
mdw-max | max | string | |
mdw-progressIndeterminate | indeterminate - continuously animates | boolean | false | true |
mdw-reverse | Revers value | boolean | false | true |
mdw-debug | debug | boolean | false | true |
layout |
|||
mdw-progressRounded | rounded corners | boolean | false | true |
mdw-progressStriped | striped | boolean | false | true |
mdw-progressStripedColor | progressStripedColor | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-stripDistance | stripDistance | number | |
colors |
|||
mdw-colorProgressBackground | background color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorProgress | color progress | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorOneCondition | condition for color 1 progress [>] | number | |
mdw-colorOne | color 1 progress | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorTwoCondition | condition for color 2 progress [>] | number | |
mdw-colorTwo | color 2 progress | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
labeling |
|||
mdw-showValueLabel | show value | boolean | false | true |
mdw-valueLabelStyle | value caption style | string | progressPercent | progressValue | progressCustom |
mdw-valueLabelUnit | unit | string | |
mdw-valueMaxDecimals | decimal points | number | |
mdw-valueLabelCustom | custom label | string | |
mdw-textColor | Minutes text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-textFontSize | text size | number | |
mdw-textFontFamily | font | string | |
mdw-textAlign | textAlign | string | start | center | end |
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] |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
mdw-type | Widget type | string | linear |
Common |
|||
mdw-oid | Object ID | string | |
mdw-min | min | string | |
mdw-max | max | string | |
mdw-reverse | Revers value | boolean | false | true |
mdw-invertValue | invert value | boolean | false | true |
mdw-debug | debug | boolean | false | true |
layout |
|||
mdw-progressRounded | rounded corners | boolean | false | true |
mdw-progressIndeterminate | indeterminate - continuously animates | boolean | false | true |
mdw-progressRotate | rotate 90 degress | string | noRotate | yesRotate |
group_layoutStriped |
|||
mdw-progressStriped | striped | boolean | false | true |
mdw-progressStripedColor | progressStripedColor | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-stripAngle | stripAngle | number | |
colors |
|||
mdw-colorProgressBackground | background color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorProgress | color progress | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorOneCondition | condition for color 1 progress [>] | number | |
mdw-colorOne | color 1 progress | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorTwoCondition | condition for color 2 progress [>] | number | |
mdw-colorTwo | color 2 progress | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
labeling |
|||
mdw-showValueLabel | show value | boolean | false | true |
mdw-valueLabelStyle | value caption style | string | progressPercent | progressValue | progressCustom |
mdw-valueLabelUnit | unit | string | |
mdw-valueMaxDecimals | decimal points | number | |
mdw-valueLabelCustom | custom label | string | |
mdw-textColor | Minutes text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-textFontSize | text size | number | |
mdw-textFontFamily | font | string | |
mdw-textAlign | textAlign | string | start | center | end |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
Common |
|||
mdw-oid | Object ID | string | |
mdw-oid-working | Working Object ID | string | |
mdw-orientation | Orientation | string | horizontal | vertical |
mdw-reverseSlider | invert slider | boolean | false | true |
mdw-knobSize | knob size | string | knobSmall | knobMedium | knobBig |
mdw-readOnly | read only | boolean | false | true |
mdw-min | min | string | |
mdw-max | max | string | |
mdw-step | steps | string | |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
steps Layout |
|||
mdw-showTicks | show steps | string | no | yes | always |
mdw-tickSize | display size of steps | number | |
mdw-tickLabels | text of steps (comma separated) | string | |
mdw-tickTextColor | text color of steps | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-tickFontFamily | font of steps | string | |
mdw-tickFontSize | font size | number | |
mdw-tickColorBefore | color before the regulator | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-tickColorAfter | color after the regulator | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
colors |
|||
mdw-colorBeforeThumb | color before regulator | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorThumb | color of regulator | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorAfterThumb | color after regulator | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
labeling |
|||
mdw-prepandText | text prepanded | string | |
mdw-prepandTextWidth | prepandTextWidth | number | |
mdw-prepandTextColor | color of text prepanded | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-prepandTextFontSize | size text prepanded | number | |
mdw-prepandTextFontFamily | font of text prepanded | string | |
mdw-showValueLabel | show value | boolean | false | true |
mdw-valueLabelStyle | value caption style | string | sliderPercent | sliderValue |
mdw-valueLabelUnit | unit | string | |
mdw-valueFontFamily | valueFontFamily | string | |
mdw-valueFontSize | value font size | number | |
mdw-valueLabelColor | text color of value | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-valueLabelMin | text for value less than min | string | |
mdw-valueLabelMax | text for value greater than min | string | |
mdw-valueLessThan | 'smaller than' condition for the text of the value | number | |
mdw-textForValueLessThan | text for 'smaller than' | string | |
mdw-valueGreaterThan | 'greater than' condition for the text of the value | number | |
mdw-textForValueGreaterThan | text for 'greater than' | string | |
mdw-valueLabelWidth | distance label | number | |
layout of the controller label |
|||
mdw-showThumbLabel | show label | string | no | yes | always |
mdw-thumbSize | label size | number | |
mdw-thumbBackgroundColor | background color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-thumbFontColor | font color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-thumbFontSize | font size | number | |
mdw-thumbFontFamily | font | string | |
mdw-useLabelRules | use rules of the text | boolean | false | true |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
Common |
|||
mdw-oid | Object ID | string | |
mdw-oid-working | Working Object ID | string | |
mdw-min | min | string | |
mdw-max | max | string | |
mdw-step | steps | string | |
mdw-readOnly | read only | boolean | false | true |
mdw-startAngle | start angle | number | |
mdw-arcLength | arc length | number | |
mdw-sliderWidth | slider thikness | number | |
mdw-handleSize | knob size | number | |
mdw-handleZoom | knob zoom at control | number | |
mdw-rtl | slider movement from right to left | boolean | false | true |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
colors |
|||
mdw-colorSliderBg | background | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorBeforeThumb | color before regulator | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorThumb | color of regulator | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-colorAfterThumb | color after regulator | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-valueLabelColor | text color of value | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
labeling |
|||
mdw-showValueLabel | show value | boolean | false | true |
mdw-valueLabelVerticalPosition | vertical text position of value | number | |
mdw-valueLabelStyle | value caption style | string | sliderPercent | sliderValue |
mdw-valueLabelUnit | unit | string | |
mdw-valueFontFamily | valueFontFamily | string | |
mdw-valueFontSize | value font size | number | |
mdw-valueLabelMin | text for value less than min | string | |
mdw-valueLabelMax | text for value greater than min | string | |
mdw-valueLessThan | 'smaller than' condition for the text of the value | number | |
mdw-textForValueLessThan | text for 'smaller than' | string | |
mdw-valueGreaterThan | 'greater than' condition for the text of the value | number | |
mdw-textForValueGreaterThan | text for 'greater than' | string |
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 |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
Common |
|||
mdw-oid | Object ID | string | |
mdw-inputType | input type | string | text | number | date | time | mask |
mdw-inputMask | input mask | string | |
mdw-inputMaxLength | max length | number | |
mdw-debug | debug | boolean | false | true |
layout input |
|||
mdw-inputLayout | layout | string | regular | solo | solo-rounded | solo-shaped | filled | filled-rounded | filled-shaped | outlined | outlined-rounded | outlined-shaped |
mdw-inputAlignment | text alignment | string | left | center | right |
mdw-inputLayoutBackgroundColor | background color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBackgroundColorHover | background color hover | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBackgroundColorSelected | background color selected | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBorderColor | border color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBorderColorHover | border color hover | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBorderColorSelected | border color selected | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputTextFontFamily | font | string | |
mdw-inputTextFontSize | font size | number | |
mdw-inputTextColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
label of input |
|||
mdw-inputLabelText | text | string | |
mdw-inputLabelColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLabelColorSelected | text color selected | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLabelFontFamily | font | string | |
mdw-inputLabelFontSize | font size | number | |
mdw-inputTranslateX | offset x | number | |
mdw-inputTranslateY | offset y | number | |
appendixs of the input |
|||
mdw-inputPrefix | prepended text | string | |
mdw-inputSuffix | appended text | string | |
mdw-inputAppendixColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputAppendixFontSize | font size | number | |
mdw-inputAppendixFontFamily | font | string | |
sub text of input |
|||
mdw-showInputMessageAlways | always show | boolean | false | true |
mdw-inputMessage | text | string | |
mdw-inputMessageFontFamily | font | string | |
mdw-inputMessageFontSize | font size | number | |
mdw-inputMessageColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
counter layout |
|||
mdw-showInputCounter | show counter | boolean | false | true |
mdw-inputCounterColor | font color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputCounterFontSize | font size | number | |
mdw-inputCounterFontFamily | font | string | |
Icons |
|||
mdw-clearIconShow | show text delete icon | boolean | false | true |
mdw-clearIcon | text delete icon | string | |
mdw-clearIconSize | size of text delete icon | number | |
mdw-clearIconColor | color of text delete icon | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-prepandIcon | prefixed icon | string | |
mdw-prepandIconSize | size of prefixed icon | number | |
mdw-prepandIconColor | color of prefixed icon | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-prepandInnerIcon | inner prefixed symbol | string | |
mdw-prepandInnerIconSize | size of inner prefixed symbol | number | |
mdw-prepandInnerIconColor | color of inner prefixed symbol | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-appendIcon | appended symbol | string | |
mdw-appendIconSize | size of appended symbol | number | |
mdw-appendIconColor | color of appended symbol | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-appendOuterIcon | outer appended symbol | string | |
mdw-appendOuterIconSize | size of outer appended symbol | number | |
mdw-appendOuterIconColor | color of outer appended symbol | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
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 |
Property | Description | Type | Values |
---|---|---|---|
text | text of menu item | string | |
subText | subtext of menu item | string | |
value | value of menu item, this will assign as value to the datapoint if this is selected | string | |
icon | material design icon or image path for menu item | string | |
iconColor | color of material design icon | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
iconColorSelectedTextField | icon color of input field when selected | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
Common |
|||
mdw-oid | Object ID | string | |
mdw-inputType | input type | string | text | date | time |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
layout input |
|||
mdw-inputLayout | layout | string | regular | solo | solo-rounded | solo-shaped | filled | filled-rounded | filled-shaped | outlined | outlined-rounded | outlined-shaped |
mdw-inputAlignment | text alignment | string | left | center | right |
mdw-inputLayoutBackgroundColor | background color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBackgroundColorHover | background color hover | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBackgroundColorSelected | background color selected | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBorderColor | border color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBorderColorHover | border color hover | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBorderColorSelected | border color selected | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputTextFontFamily | font | string | |
mdw-inputTextFontSize | font size | number | |
mdw-inputTextColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
label of input |
|||
mdw-inputLabelText | text | string | |
mdw-inputLabelColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLabelColorSelected | text color selected | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLabelFontFamily | font | string | |
mdw-inputLabelFontSize | font size | number | |
mdw-inputTranslateX | offset x | number | |
mdw-inputTranslateY | offset y | number | |
appendixs of the input |
|||
mdw-inputPrefix | prepended text | string | |
mdw-inputSuffix | appended text | string | |
mdw-inputAppendixColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputAppendixFontSize | font size | number | |
mdw-inputAppendixFontFamily | font | string | |
sub text of input |
|||
mdw-showInputMessageAlways | always show | boolean | false | true |
mdw-inputMessage | text | string | |
mdw-inputMessageFontFamily | font | string | |
mdw-inputMessageFontSize | font size | number | |
mdw-inputMessageColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
counter layout |
|||
mdw-showInputCounter | show counter | boolean | false | true |
mdw-inputCounterColor | font color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputCounterFontSize | font size | number | |
mdw-inputCounterFontFamily | font | string | |
Icons |
|||
mdw-clearIconShow | show text delete icon | boolean | false | true |
mdw-clearIcon | text delete icon | string | |
mdw-clearIconSize | size of text delete icon | number | |
mdw-clearIconColor | color of text delete icon | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-collapseIcon | menu open symbol | string | |
mdw-collapseIconSize | size of menu open symbol | number | |
mdw-collapseIconColor | color of menu open symbol | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-prepandIcon | prefixed icon | string | |
mdw-prepandIconSize | size of prefixed icon | number | |
mdw-prepandIconColor | color of prefixed icon | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-prepandInnerIcon | inner prefixed symbol | string | |
mdw-prepandInnerIconSize | size of inner prefixed symbol | number | |
mdw-prepandInnerIconColor | color of inner prefixed symbol | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-appendOuterIcon | outer appended symbol | string | |
mdw-appendOuterIconSize | size of outer appended symbol | number | |
mdw-appendOuterIconColor | color of outer appended symbol | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
data of menu |
|||
mdw-listDataMethod | input method for the menu data | string | inputPerEditor | jsonStringObject | multistatesObject | valueList |
mdw-countSelectItems | Editor: count of menu items | number | |
mdw-jsonStringObject | JSON string. Must be html escaped! Hint: use he library in your scripts to encode to htmle | string | |
mdw-valueList | value list | string | |
mdw-valueListLabels | value list: labels | string | |
mdw-valueListIcons | value list: images | string | |
menu layout |
|||
mdw-listPosition | position | string | auto | top | bottom |
mdw-listPositionOffset | use position offset | boolean | false | true |
mdw-openOnClear | open Menu at using clear button | boolean | false | true |
mdw-listItemHeight | height of menu item | number | |
mdw-listItemBackgroundColor | background color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemBackgroundHoverColor | hover color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemBackgroundSelectedColor | color of selected item | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemRippleEffectColor | effect color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-showSelectedIcon | show icon of selected item | string | no | prepend | prepend-inner | append-outer |
mdw-listIconSize | icon size | number | |
mdw-listIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listIconHoverColor | icon hover color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listIconSelectedColor | icon color of selected item | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemFontSize | font size | number | |
mdw-listItemFont | font | string | |
mdw-listItemFontColor | font color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemFontHoverColor | font hover color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemFontSelectedColor | font color of selected item | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemSubFontSize | second text font size | number | |
mdw-listItemSubFont | second text font | string | |
mdw-listItemSubFontColor | second text font color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemSubFontHoverColor | hover color of second text | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemSubFontSelectedColor | color of second selected text | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-showValue | show value | boolean | false | true |
mdw-listItemValueFontSize | font size of value | number | |
mdw-listItemValueFont | font of value | string | |
mdw-listItemValueFontColor | font color of value | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemValueFontHoverColor | hover font color of value | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemValueFontSelectedColor | font color of selected value | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
menu item [x] |
|||
mdw-value[x] | value | string | |
mdw-label[x] | label | string | |
mdw-subLabel[x] | second text | string | |
mdw-listIcon[x] | icon | string | |
mdw-listIconColor[x] | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-imageColorSelectedTextField[x] | selected icon color for textfield | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
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 |
Property | Description | Type | Values |
---|---|---|---|
text | text of menu item | string | |
subText | subtext of menu item | string | |
value | value of menu item, this will assign as value to the datapoint if this is selected | string | |
icon | material design icon or image path for menu item | string | |
iconColor | color of material design icon | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
iconColorSelectedTextField | icon color of input field when selected | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
The following properties can be used as HTML Widgets.
Property | Description | Type | Values |
---|---|---|---|
Common |
|||
mdw-oid | Object ID | string | |
mdw-inputMode | inputMode | string | write | select |
mdw-inputType | input type | string | text | date | time |
mdw-vibrateOnMobilDevices | vibrate on mobil devices [s] | number | |
mdw-debug | debug | boolean | false | true |
layout input |
|||
mdw-inputLayout | layout | string | regular | solo | solo-rounded | solo-shaped | filled | filled-rounded | filled-shaped | outlined | outlined-rounded | outlined-shaped |
mdw-inputAlignment | text alignment | string | left | center | right |
mdw-inputLayoutBackgroundColor | background color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBackgroundColorHover | background color hover | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBackgroundColorSelected | background color selected | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBorderColor | border color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBorderColorHover | border color hover | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLayoutBorderColorSelected | border color selected | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputTextFontFamily | font | string | |
mdw-inputTextFontSize | font size | number | |
mdw-inputTextColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
label of input |
|||
mdw-inputLabelText | text | string | |
mdw-inputLabelColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLabelColorSelected | text color selected | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputLabelFontFamily | font | string | |
mdw-inputLabelFontSize | font size | number | |
mdw-inputTranslateX | offset x | number | |
mdw-inputTranslateY | offset y | number | |
appendixs of the input |
|||
mdw-inputPrefix | prepended text | string | |
mdw-inputSuffix | appended text | string | |
mdw-inputAppendixColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputAppendixFontSize | font size | number | |
mdw-inputAppendixFontFamily | font | string | |
sub text of input |
|||
mdw-showInputMessageAlways | always show | boolean | false | true |
mdw-inputMessage | text | string | |
mdw-inputMessageFontFamily | font | string | |
mdw-inputMessageFontSize | font size | number | |
mdw-inputMessageColor | text color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
counter layout |
|||
mdw-showInputCounter | show counter | boolean | false | true |
mdw-inputCounterColor | font color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-inputCounterFontSize | font size | number | |
mdw-inputCounterFontFamily | font | string | |
Icons |
|||
mdw-clearIconShow | show text delete icon | boolean | false | true |
mdw-clearIcon | text delete icon | string | |
mdw-clearIconSize | size of text delete icon | number | |
mdw-clearIconColor | color of text delete icon | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-collapseIcon | menu open symbol | string | |
mdw-collapseIconSize | size of menu open symbol | number | |
mdw-collapseIconColor | color of menu open symbol | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-prepandIcon | prefixed icon | string | |
mdw-prepandIconSize | size of prefixed icon | number | |
mdw-prepandIconColor | color of prefixed icon | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-prepandInnerIcon | inner prefixed symbol | string | |
mdw-prepandInnerIconSize | size of inner prefixed symbol | number | |
mdw-prepandInnerIconColor | color of inner prefixed symbol | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-appendOuterIcon | outer appended symbol | string | |
mdw-appendOuterIconSize | size of outer appended symbol | number | |
mdw-appendOuterIconColor | color of outer appended symbol | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
data of menu |
|||
mdw-listDataMethod | input method for the menu data | string | inputPerEditor | jsonStringObject | multistatesObject | valueList |
mdw-countSelectItems | Editor: count of menu items | number | |
mdw-jsonStringObject | JSON string. Must be html escaped! Hint: use he library in your scripts to encode to htmle | string | |
mdw-valueList | value list | string | |
mdw-valueListLabels | value list: labels | string | |
mdw-valueListIcons | value list: images | string | |
menu layout |
|||
mdw-listPosition | position | string | auto | top | bottom |
mdw-listPositionOffset | use position offset | boolean | false | true |
mdw-openOnClear | open Menu at using clear button | boolean | false | true |
mdw-listItemHeight | height of menu item | number | |
mdw-listItemBackgroundColor | background color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemBackgroundHoverColor | hover color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemBackgroundSelectedColor | color of selected item | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemRippleEffectColor | effect color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-showSelectedIcon | show icon of selected item | string | no | prepend | prepend-inner | append-outer |
mdw-listIconSize | icon size | number | |
mdw-listIconColor | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listIconHoverColor | icon hover color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listIconSelectedColor | icon color of selected item | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemFontSize | font size | number | |
mdw-listItemFont | font | string | |
mdw-listItemFontColor | font color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemFontHoverColor | font hover color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemFontSelectedColor | font color of selected item | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemSubFontSize | second text font size | number | |
mdw-listItemSubFont | second text font | string | |
mdw-listItemSubFontColor | second text font color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemSubFontHoverColor | hover color of second text | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemSubFontSelectedColor | color of second selected text | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-showValue | show value | boolean | false | true |
mdw-listItemValueFontSize | font size of value | number | |
mdw-listItemValueFont | font of value | string | |
mdw-listItemValueFontColor | font color of value | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemValueFontHoverColor | hover font color of value | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-listItemValueFontSelectedColor | font color of selected value | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
menu item [x] |
|||
mdw-value[x] | value | string | |
mdw-label[x] | label | string | |
mdw-subLabel[x] | second text | string | |
mdw-listIcon[x] | icon | string | |
mdw-listIconColor[x] | icon color | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
mdw-imageColorSelectedTextField[x] | selected icon color for textfield | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
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 '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.
my-view-in-widget8
..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;
}
}
max-width: 800px
and min-width: 800px
)left: 256px !important;
and width: calc(100% - 256px) !important;
)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 items can be defined by a JSON string:
Property | Description | Type | Values |
---|---|---|---|
menuId | define a custom id for menu item, will be written to the "Object Id for selected menu item id or name" if selected | string | |
text | text of menu item | string | |
header | header of menu item | string | |
icon | icon or image path of entry | string | |
iconColor | icon color (works not if image is used) | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
divider | show a divider | boolean | false, true |
userGroups | user groups that are allowed to view and control this entry. | array[string] | id of user groups |
behaviorNotInUserGroup | hide or disable entry if user is not part of user group | string | hide, disabled |
setValueOnMenuToggleClick | set value on click at item that toggle submenu | boolean | false, true |
subMenuIconColor | icon color of sub menu items (works not if image is used) | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
subMenus | Object with sub menu items, Details see Submenu JSON Properties | array[subMenu] |
[
{
"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"
}
]
}
]
submenus must be defined by a JSON string:
Property | Description | Type | Values |
---|---|---|---|
menuId | define a custom id for menu item, will be written to the "Object Id for selected menu item id or name" if selected | string | |
text | text of submenu | string | |
icon | icon or image path of entry | string | |
iconColor | icon color (works not if image is used) | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
divider | show a divider | boolean | false, true |
userGroups | user groups that are allowed to view and control this entry. | array[string] | id of user groups |
behaviorNotInUserGroup | hide or disable entry if user is not part of user group | string | hide, disabled |
[
{
"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"
}
]
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 |
JSON string must be an array of objects with the following properties:
Property | Description | Type | Values |
---|---|---|---|
label | axis label of bar | string | |
value | bar value | number | |
dataColor | bar color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) | |
valueText | override text of bar | string | |
valueColor | color of value text | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) | |
valueAppendix | appendix of value text | string | |
tooltipTitle | tooltip title | string | |
tooltipText | tooltip text | string |
[
{
"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"
}
]
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 |
JSON string must be an array of objects with the following properties:
Property | Description | Type | Values |
---|---|---|---|
label | axis label of pie | string | |
value | pie value | number | |
dataColor | pie color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) | |
valueText | override text of pie | string | |
valueColor | color of value text | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) | |
valueAppendix | appendix of value text | string | |
tooltipTitle | tooltip title | string | |
tooltipText | tooltip text | string |
[
{
"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"
}
]
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 |
With the JSON chart you have the maximum freedom to create a mixed chart (line, bars and stacked bars) by script.
Property | Description | Type | Values |
---|---|---|---|
axisLabels | axis label of graph | Array | numbers or string |
graphs | data of graphs | array<graph> | see graph |
Property | Description | Type | Values |
---|---|---|---|
data | data of graph or data with timestamp | Array[numbers] | Array[values with timestamp] | number |
type | type of graph | string | 'line', 'bar' |
legendText | text of legend | string | |
displayOrder | overlay order of graph | number | 1, 2, ... |
color | color of graph | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
use_gradient_color | use gradient color | boolean | false, true |
gradient_color | gradient color array | array[gradientColor] | [ { value: -20, color: '#7d3c98' }, { value: 0, color: '#2874a6' } ] |
tooltip_title | title of tooltip | string | array[string] | |
tooltip_text | ovveride text of tooltip | string | array[string] | |
tooltip_MinDigits | max decimals of tooltip value | number | 0, 1, 2, ... |
tooltip_MaxDigits | max decimals of tooltip value | number | 0, 1, 2, ... |
tooltip_AppendText | append text to tooltip value | string | |
datalabel_show | show data labels for graph | string | boolean | false, true, auto |
datalabel_anchor | anchor of data labels | string | center, start, end |
datalabel_align | position of the data label relative to the anchor point | string | left, start, center, end, right, top, bottom |
datalabel_offset | distance (in pixels) to pull the data label away from the anchor point | number | 0, 1, 2, ... |
datalabel_text_align | text aligment of the data label | string | left, start, center, end, right |
datalabel_rotation | clockwise rotation angle (in degrees) of the data label | number | 0, 1, 2, ... |
datalabel_steps | show data label every x step | number | 0, 1, 2, ... |
datalabel_minDigits | minimum decimals of data labels | number | 0, 1, 2, ... |
datalabel_maxDigits | maximum decimals of data labels | number | 0, 1, 2, ... |
datalabel_override | override text of data label | array[string] | |
datalabel_append | append text to data label | string | |
datalabel_color | data label color | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
datalabel_fontFamily | data label font family | string | |
datalabel_fontSize | data label font size | number | 1, 2, 5, ... |
datalabel_backgroundColor | data label background color | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
datalabel_borderColor | data label border color | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
datalabel_borderWidth | data label border width | number | 1, 2, 5, ... |
datalabel_borderRadius | data label border radius | number | 1, 2, 5, ... |
Property | Description | Type | Values |
---|---|---|---|
line_pointStyle | point style of line | string | circle, cross, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle |
line_pointSize | point size of line | number | 1, 2, 3, ... |
line_pointSizeHover | point size of line | number | 1, 2, 3, ... |
line_PointColor | color of line point | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
line_PointColorBorder | border color of line point | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
line_PointColorHover | hover color of line point | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
line_PointColorBorderHover | border hover color of line point | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
line_spanGaps | draw lines if data has gaps | boolean | false, true |
line_steppedLine | enable stepped line | boolean | false, true |
line_Tension | smothness of line | number | 0 - 1 |
line_Thickness | thikness of line | number | 1, 2, 5, ... |
line_UseFillColor | use fill color under line | boolean | false, true |
line_FillColor | fill color under line | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
use_line_gradient_fill_color | use gradient fill color | boolean | false, true |
line_gradient_fill_color | gradient color array | array[gradientColor] | [ { value: -20, color: '#7d3c98' }, { value: 0, color: '#2874a6' } ] |
line_FillBetweenLines | fill color to next / previous line | string | '+1', '-1', '+2', ... |
Property | Description | Type | Values |
---|---|---|---|
barIsStacked | stacked bar. If you have a comined chart (Line + stacked Bar), then you must also set this value for the line dataset! | boolean | false, true |
barStackId | id of stack. Bar that should combine to a stack must have the same id | number | 1, 2, 5, ... |
barColorHover | hover color of bar | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
barBorderColor | border color of bar | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
barBorderWidth | thikness of bar border | number | 1, 2, 5, ... |
barBorderColorHover | border hover color of bar | color | array[colors] | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
barBorderWidthHover | hover thikness of bar border | number | 1, 2, 5, ... |
Property | Description | Type | Values |
---|---|---|---|
yAxis_id | id of y-axis. If you would like to use a common y-axis for multipl graph data, use the same id. | number | 1, 2, 5, ... |
yAxis_position | position of y-axis | string | left, right |
yAxis_show | show y-axis | boolean | false, true |
yAxis_title_text | y-axis title | string | |
yAxis_title_color | override y-axis title color | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
yAxis_title_fontFamily | override y-axis title font family | string | |
yAxis_title_fontSize | override y-axis title font size | number | 1, 2, 5, ... |
yAxis_min | minimum value of y-axis | number | 1, 2, 5, ... |
yAxis_max | maximum value of y-axis | number | 1, 2, 5, ... |
yAxis_step | steps of y-axis | number | 1, 2, 5, ... |
yAxis_minimumDigits | y-axis minimum number of decimal places | number | 1, 2, 5, ... |
yAxis_maximumDigits | y-axis maximum number of decimal places | number | 1, 2, 5, ... |
yAxis_maxSteps | maximum steps of y-axis | number | 1, 2, 5, ... |
yAxis_distance | override y-axis value distance to axis | number | 1, 2, 5, ... |
yAxis_appendix | append text to y-axis value | string | |
yAxis_color | override y-axis value color | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
yAxis_fontFamily | override y-axis value font family | string | |
yAxis_fontSize | override y-axis value font size | number | 1, 2, 5, ... |
yAxis_zeroLineWidth | width of y-axis zero line | number | 0.3, 1.5, 4, ... |
yAxis_zeroLineColor | y-axis zero line color | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
yAxis_gridLines_show | show y-axis grid lines | boolean | false, true |
yAxis_gridLines_color | color of y-axis grid lines | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
yAxis_gridLines_lineWidth | width of grid lines | number | 0 - 1 |
yAxis_gridLines_border_show | show border of y-axis grid lines | boolean | false, true |
yAxis_gridLines_ticks_show | show y-axis grid interval ticks | boolean | false, true |
yAxis_gridLines_ticks_length | length of y-axis grid ticks | number | 1, 2, 5, ... |
Property | Description | Type | Values |
---|---|---|---|
value | value where color should be applied | number | 1, 2, 5, ... |
color | color for value | color | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
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).
Property | Description | Type | Values |
---|---|---|---|
t | timestamp - xAxis value | number | 1, 2, 5, ... |
y | value for timestamp - yAxis value | number | 1, 2, 5, ... |
Property | Description | Type | Values |
---|---|---|---|
xAxis_bounds | scale boundary strategy 'data': makes sure data are fully visible, labels outside are removed 'ticks': makes sure ticks are fully visible, data outside are truncated |
String | data, ticks |
xAxis_timeFormats | time formats for the x-axis | Object | 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 |
xAxis_tooltip_timeFormats | time formats for the x-axis | String | Approved time formats must be entered according to the moment.js library, see link |
xAxis_time_unit | force the time format for the x-axis | String | following units are allowed, see link |
{
"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"
}
]
}
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. |
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"
}
]
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
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:
Property | Description | Type | Properties |
---|---|---|---|
rowspan | cell that spans x rows | number | 1, 2, 3, ... |
colspan | cell that spans x columns | number | 1, 2, 3, ... |
cellStyleAttrs | css style attributes for cell | string | |
html | any html element, eg. html widget | string |
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.
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 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.
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 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.
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 widget can be used e.g. to display messages in the VIS, like it works with the pushover adapter, but directly in the VIS.
Settings that are not listed in the table below are self-explanatory.
Screenshot | Setting | Description |
---|---|---|
![]() |
number of columns | define number of columns |
Object ID | Object must be a json string. Allowed properties are described below | |
max. Alerts | max number of Alerts that should be shown. |
Property | Description | Type | Values |
---|---|---|---|
text | text of menu item | string | |
backgroundColor | background color of alert item | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
borderColor | border color of alert item | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
icon | material design icon or image path for menu item | string | |
iconColor | color of material design icon | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
fontColor | font color of alert item | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
With the following script you can send easy messages to datapoint that is used by the Alerts Widget. The script must put into global scripts. Then it is possible to send message with the following command
materialDesignWidgets.sendTo('datapoint_id', 'message', 'color');
var materialDesignWidgets = {};
materialDesignWidgets.sendTo = function (id, text, backgroundColor = '', borderColor = '', icon = '', iconColor = '', fontColor = '') {
let json = getState(id).val;
if (json) {
try {
json = JSON.parse(json);
} catch (e) {
json = [];
console.warn('Wert ist kein JSON string! Wert wird ersetzt!');
}
} else {
json = [];
}
json.push(
{
text: text,
backgroundColor: backgroundColor,
borderColor: borderColor,
icon: icon,
iconColor: iconColor,
fontColor: fontColor
}
)
setState(id, JSON.stringify(json), true);
}
Settings that are not listed in the table below are self-explanatory.
Screenshot | Setting | Description |
---|---|---|
![]() |
Object Id | id of datapoint. Datapoint must contains a json string. Allowed json properties are desribed below |
![]() |
days of the week to be shown | Specifies which days of the week to display. To display Monday through Friday only, a value of 1, 2, 3, 4, 5 can be used. To display a week starting on Monday a value of 1, 2, 3, 4, 5, 6, 0 can be used. |
Object ID | Object must be a json string, which must be structured as described above | |
![]() |
start hour | The hour from which appointments should be displayed in the week and day view. |
end hour | The hour until which appointments should be displayed in the week and day view | |
![]() |
Override the default date formats. Allowed formats are described in the documentation of momentjs |
Property | Description | Type | Values |
---|---|---|---|
name | name of Event | string | |
color | background color of event | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
colorText | text color of event | string | hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5) |
start | start date and time of event. For all day events use only a date without time. | string | YYYY-MM-DD | YYYY-MM-DD HH:mm |
end | end date and time of event. For all day events use only a date without time | string | YYYY-MM-DD | YYYY-MM-DD HH:mm |
If you want to use the widget with the ical adapter, you can use the following script to convert the ical object to work with the widget.
Settings that are not listed in the table below are self-explanatory.
Screenshot | Setting | Description |
---|---|---|
![]() |
method to show dialog | show dialog using a button or using a datapoint (type boolean) |
Conatins view | the view that should be shown by the dialog | |
show fullscreen dialog if resoltuion is lower than | Show fullscreen dialog if resolution is lower than the given value. |
Create a html widget from the supported Material Design widgets to use it in any other widget that supports html.
Just style your Material Design widget, press the generate Html Element
, copy the data and paste it to any widget that supports html tags.
Or use it in scripts to generate dynamically Widgets.
Attention:
- attributes of html tags must surrounded by
'
(single quote)- double quotes
"
used in attributes must be escaped like\"
compare this with the shown examples of the diffrent widgets
More information about the supported properties can be found in the chapter HTML Properties of the individual widgets
Round slider and icon button comined in a html widget
Widget to import via VIS Editor:
A list with custom control elements using HTML Widgets
Widget to import via VIS Editor:
Button toggle used in a non Material Design Widget, here using vis-material-advanced ListThermostat Widget
Widget to import via VIS Editor:
Value widget in a more complex view with conversions, showing how to use the value widget instead of bindings.
View to import via VIS Editor:
The adapter uses the following libraries:
MIT License
Copyright (c) 2021 Scrounger scrounger@gmx.net
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.