Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scrounger/iobroker.vis-materialdesign
ioBroker Material Design Widgets are based on Google's material design guidelines. The adapter uses different libraries.
https://github.com/scrounger/iobroker.vis-materialdesign
iobroker iobroker-vis material
Last synced: 4 days ago
JSON representation
ioBroker Material Design Widgets are based on Google's material design guidelines. The adapter uses different libraries.
- Host: GitHub
- URL: https://github.com/scrounger/iobroker.vis-materialdesign
- Owner: Scrounger
- License: mit
- Created: 2019-09-20T14:38:19.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-11-29T13:02:35.000Z (12 months ago)
- Last Synced: 2024-11-09T07:08:51.894Z (8 days ago)
- Topics: iobroker, iobroker-vis, material
- Language: JavaScript
- Homepage: https://forum.iobroker.net/topic/42185/test-adapter-material-design-widgets-v0-5-x
- Size: 56.7 MB
- Stars: 59
- Watchers: 21
- Forks: 38
- Open Issues: 84
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG_OLD.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## ioBroker.vis-materialdesign
[](https://www.npmjs.com/package/iobroker.vis-materialdesign)
[](https://www.npmjs.com/package/ioBroker.vis-materialdesign)
[](https://www.npmjs.com/package/ioBroker.vis-materialdesign)
[](https://nodei.co/npm/iobroker.vis-materialdesign/)
# Material Design Widgets for IoBroker VIS
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VWAXSTS634G88&source=url)
ioBroker Material Design Widgets are based on [Google's material design guidelines](https://material.io/design/)
## Table of Content
- [General](#general)
- [Online Example Project](#online-example-project)
- [Practical examples](#practical-examples)
- [Questions and answers about the widgets](#questions-and-answers-about-the-widgets)
- [Supported Browser](#supported-browser)
- [Supported Browser for vibrate on mobil devices function](#supported-browser-for-vibrate-on-mobil-devices-function)
- [ioBroker VIS App](#iobroker-vis-app)
- [Adapter settings](#adapter-settings)
- [General](#general-1)
- [Theme Editor](#theme-editor)
- [Theme Settings](#theme-settings)
- [Widgets](#widgets)
- [Material Design Icons and Images](#material-design-icons-and-images)
- [Editor Settings](#editor-settings)
- [HTML Properties](#html-properties)
- [Buttons](#buttons)
- [Navigation](#navigation)
- [Editor Settings](#editor-settings-1)
- [HTML Properties](#html-properties-1)
- [Link](#link)
- [Editor Settings](#editor-settings-2)
- [HTML Properties](#html-properties-2)
- [State](#state)
- [Editor Settings](#editor-settings-3)
- [HTML Properties](#html-properties-3)
- [Multi State](#multi-state)
- [Editor Settings](#editor-settings-4)
- [HTML Properties](#html-properties-4)
- [Addition](#addition)
- [Editor Settings](#editor-settings-5)
- [HTML Properties](#html-properties-5)
- [Toggle](#toggle)
- [Editor Settings](#editor-settings-6)
- [HTML Properties](#html-properties-6)
- [Buttons Vertical](#buttons-vertical)
- [Navigation](#navigation-1)
- [Editor Settings](#editor-settings-7)
- [HTML Properties](#html-properties-7)
- [Link](#link-1)
- [Editor Settings](#editor-settings-8)
- [HTML Properties](#html-properties-8)
- [State](#state-1)
- [Editor Settings](#editor-settings-9)
- [HTML Properties](#html-properties-9)
- [Multi State](#multi-state-1)
- [Editor Settings](#editor-settings-10)
- [HTML Properties](#html-properties-10)
- [Addition](#addition-1)
- [Editor Settings](#editor-settings-11)
- [HTML Properties](#html-properties-11)
- [Toggle](#toggle-1)
- [Editor Settings](#editor-settings-12)
- [HTML Properties](#html-properties-12)
- [Icon Buttons](#icon-buttons)
- [Navigation](#navigation-2)
- [Editor Settings](#editor-settings-13)
- [HTML Properties](#html-properties-13)
- [Link](#link-2)
- [Editor Settings](#editor-settings-14)
- [HTML Properties](#html-properties-14)
- [State](#state-2)
- [Editor Settings](#editor-settings-15)
- [HTML Properties](#html-properties-15)
- [Multi State](#multi-state-2)
- [Editor Settings](#editor-settings-16)
- [HTML Properties](#html-properties-16)
- [Addition](#addition-2)
- [Editor Settings](#editor-settings-17)
- [HTML Properties](#html-properties-17)
- [Toggle](#toggle-2)
- [Editor Settings](#editor-settings-18)
- [HTML Properties](#html-properties-18)
- [Checkbox](#checkbox)
- [Editor Settings](#editor-settings-19)
- [HTML Properties](#html-properties-19)
- [Switch](#switch)
- [Editor Settings](#editor-settings-20)
- [HTML Properties](#html-properties-20)
- [Value](#value)
- [Editor Settings](#editor-settings-21)
- [HTML Properties](#html-properties-21)
- [HTML Card](#html-card)
- [List](#list)
- [Editor Settings](#editor-settings-22)
- [Data JSON Properties](#data-json-properties)
- [IconList](#iconlist)
- [Editor Settings](#editor-settings-23)
- [Data JSON Properties](#data-json-properties-1)
- [Progress](#progress)
- [Editor Settings](#editor-settings-24)
- [HTML Properties](#html-properties-22)
- [Progress Circular](#progress-circular)
- [Editor Settings](#editor-settings-25)
- [HTML Properties](#html-properties-23)
- [Slider](#slider)
- [HTML Properties](#html-properties-24)
- [Slider Round](#slider-round)
- [HTML Properties](#html-properties-25)
- [Input](#input)
- [Text input](#text-input)
- [Editor Settings](#editor-settings-26)
- [HTML Properties](#html-properties-26)
- [Select](#select)
- [Menu JSON Properties](#menu-json-properties)
- [HTML Properties](#html-properties-27)
- [Autocomplete](#autocomplete)
- [Menu JSON Properties](#menu-json-properties-1)
- [HTML Properties](#html-properties-28)
- [Top App Bar](#top-app-bar)
- [Editor Settings](#editor-settings-27)
- [Menu JSON Properties](#menu-json-properties-2)
- [Submenu](#submenu)
- [Submenu JSON Properties](#submenu-json-properties)
- [Charts](#charts)
- [Bar Chart](#bar-chart)
- [Editor Settings](#editor-settings-28)
- [Dataset JSON Properties](#dataset-json-properties)
- [Pie Chart](#pie-chart)
- [Editor Settings](#editor-settings-29)
- [Dataset JSON Properties](#dataset-json-properties-1)
- [Line History Chart:](#line-history-chart)
- [Editor Settings](#editor-settings-30)
- [JSON Chart](#json-chart)
- [JSON Properties](#json-properties)
- [Table](#table)
- [Editor Settings](#editor-settings-31)
- [Data - JSON Stucture](#data---json-stucture)
- [internal object binding](#internal-object-binding)
- [Control Elements using HTML Widgets](#control-elements-using-html-widgets)
- [Control Elements - **deprecated since v0.5.0**](#control-elements---deprecated-since-v050)
- [Responsive Layout](#responsive-layout)
- [Masonry Views](#masonry-views)
- [Editor Settings](#editor-settings-32)
- [Grid Views](#grid-views)
- [Editor Settings](#editor-settings-33)
- [Alerts](#alerts)
- [Editor Settings](#editor-settings-34)
- [Datapoint JSON Properties](#datapoint-json-properties)
- [Script: send alert to widget](#script-send-alert-to-widget)
- [Calendar](#calendar)
- [Editor Settings](#editor-settings-35)
- [Datapoint JSON Properties](#datapoint-json-properties-1)
- [Script: ical conversion](#script-ical-conversion)
- [Dialog](#dialog)
- [Editor Settings](#editor-settings-36)
- [HTML Widgets](#html-widgets)
- [Examples](#examples)
- [Informations](#informations)
- [used libraries](#used-libraries)
- [Changelog](#changelog)
# General
## Online Example Project
provided by [iobroker.click](https://iobroker.click/index.html), thanks to bluefox and iobroker.
* VIS Runtime (alternativ)
* VIS Editor (alternativ)
## Practical examples
* [Weather View](https://forum.iobroker.net/topic/32232/material-design-widgets-wetter-view)
* [Skript Status](https://forum.iobroker.net/topic/30662/material-design-widgets-skript-status)
* [Adapter Status](https://forum.iobroker.net/topic/30661/material-design-widgets-adapter-status)
* [UniFi Netzwerk Status](https://github.com/Scrounger/ioBroker.vis-materialdesign/tree/master/examples/UnifiNetworkState)
## Questions and answers about the widgets
If you have questions about the individual widgets, then first look at the topics of the individual widgets
* [German threads](https://forum.iobroker.net/search?term=Material%20Design%20Widgets%3A&in=titles&matchWords=all&by%5B%5D=Scrounger&categories%5B%5D=7&sortBy=topic.title&sortDirection=desc&showAs=topics)
## Supported Browser
I officially support the last two versions of every major browser. Specifically, i test on the following browsers:
* Firefox on Windows and Linux
* Chrome on Android, Windows, and Linux
## Supported Browser for vibrate on mobil devices function
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate
## ioBroker VIS App
latest version needs to be implemented by the app, see https://github.com/ioBroker/ioBroker.vis.cordova.
I do not use the app and do not test on it either
# Adapter settings
Starting with version 0.4.0 there is a settings page for the adapter. You can find it under Instances in the user interface of the admin adapter
## General
| setting | description |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Documentation | Links to documentation to help you configure the widgets |
| Generate global script | Create a global script for the [Javascript Script Engine](https://github.com/ioBroker/ioBroker.javascript) 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](https://github.com/ioBroker/plugin-sentry#plugin-sentry)! |
## Theme Editor
With the help of the Theme Editor you can centrally set colors, fonts and font sizes for all widgets via the adapter settings. For each widget datapoints (see screenshot below) are created with the set values. This makes it also possible to use these settings in other widgets (not Material Design Widgets) via bindings.
##### Datapoint structure
### Theme Settings
Every settings page for colors, colors dark, font and font sizes look likes show in the screenshot above.
Standard colors / fonts /font sizes can be defined in the upper area. These standard colors / fonts /font sizes can then be assigned to the individual widgets using the buttons in the table. If you change the default colors / fonts /font sizes, it will also change for all widgets that use this colors / fonts /font sizes.
Additionally, it is possible to assign your own colors / fonts /font sizes to the widgets, independent of the standard colors.
For colors there are two themes - light theme and dark theme. With the datapoint `vis-materialdesign.0.colors.darkTheme` you can switch between the two themes. For example this datapoint can be used in a script to switch between lights and dark colors on sunrise and sunset.
##### VIS Editor (Restore / update old Widgets)
In the VIS Editor you will find a button `use theme` for each widget. With this button you can reset the widgets to the use of the themes. That means if you have changed colors, fonts or font sizes, you can reset them with this button.
With the help of this button it is also possible to update your widgets from versions before 0.4.0 to use the themes.
##### Change Datapoint Binding for Material Design Widgets
If you would like to change the using of others colors that are defined for other widgets, you can copy the datapoint binding by pressing the button with the material design icon. Just paste this in any color, fonts or font sizes field of a material design widget. For example a color "state binding" looks like `#mdwTheme:vis-materialdesign.0.colors.card.background`
##### Use Binding for non Material Design Widgets
In the adapter settings you can copy the binding command to the clipboard by clicking on the button with iobroker icon. This binding can then be used by copy and paste even for non Material Design Widgets. For example a color binding looks like `{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.card.background;dark:vis-materialdesign.0.colors.dark.card.background; mode === "true" ? dark : light}`
# Widgets
## Material Design Icons and Images
### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Description
Some of the widgets support Material Design Icons library. You can pic up an icon from the list above or open the image picker by clicking the button on the right of the input field.
Image colors only applies to the material design icons, not to an image!
### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
#### HTML Properties - Example
```
```
## Buttons
### Navigation
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
View to navigate
name of view to navigate
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### Link
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
Link
url to open
open in new window
open link in new window / tab
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### State
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
value
value to set
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### Multi State
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
Object ID[x]
id of the object from which the value is to be set
value[x]
value to be set
delay [ms][x]
delay until value is set
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### Addition
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
value
value to be added or subtracted
minmax
minimum / maximum value up to which adding or subtracting can take place
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### Toggle
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
tbd
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
## Buttons Vertical
### Navigation
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
View to navigate
name of view to navigate
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### Link
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
Link
url to open
open in new window
open link in new window / tab
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### State
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
value
value to set
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### Multi State
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
Object ID[x]
id of the object from which the value is to be set
value[x]
value to be set
delay [ms][x]
delay until value is set
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### Addition
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
value
value to be added or subtracted
minmax
minimum / maximum value up to which adding or subtracting can take place
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### Toggle
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
tbd
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
## Icon Buttons
### Navigation
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
View to navigate
name of view to navigate
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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)
##### HTML Properties - Example
```
```
### Link
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
Link
url to open
open in new window
open link in new window / tab
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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)
##### HTML Properties - Example
```
```
### State
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
value
value to set
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### Multi State
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
Object ID[x]
id of the object from which the value is to be set
value[x]
value to be set
delay [ms][x]
delay until value is set
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
### Addition
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
value
value to be added or subtracted
minmax
minimum / maximum value up to which adding or subtracting can take place
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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)
##### HTML Properties - Example
```
```
### Toggle
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
tbd
#### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
##### HTML Properties - Example
```
```
## Checkbox
### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
type of toggle
Define which type of datapoint (boolean or value) should be switched
value for off
Set at which value the checkbox is false
value for on
Set at which value the checkbox is true
state if value unequal to 'on' condition
Set the state of the checkbox when the value does not match the 'on' condition
### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
#### HTML Properties - Example
```
```
## Switch
### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
type of toggle
Define which type of datapoint (boolean or value) should be switched
value for off
Set at which value the switch is false
value for on
Set at which value the switch is true
state if value unequal to 'on' condition
Set the state of the switch when the value does not match the 'on' condition
### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
#### HTML Properties - Example
```
```
## Value
As HTML Widget it can be used as an alternativ for Bindings by giving a better performance.
### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
target type
If you would like to convert to an other type, choose the target type to convert to.
override text
override the value text. you can use #value to show the value in the text
font color
Define the color of the text. Additional it's posible to use #value for conditions to show diffrent colors depending on the value of the datapoint. Allowed expression see mathjs evaluation expressions
color of the text prepanded
Define the color of the text. Additional it's posible to use #value for conditions to show diffrent colors depending on the value of the datapoint. Allowed expression see mathjs evaluation expressions
color of appended text
Define the color of the text. Additional it's posible to use #value for conditions to show diffrent colors depending on the value of the datapoint. Allowed expression see mathjs evaluation expressions
calculate
Use #value for the value of the datapoint and convert it by calculation using mathjs evaluation expressions
convert seconds to duration
convert a duration in seconds to a readable string. Approved formats must be entered according to the moment-duration-format library. You can also use humanize.
It's also possible to combine this with the calculation, e.g. if the source value is in minutes, you can convert it to seconds by using calculation
convert timestamp to datetime
convert a timestamp to a readable datetime. Approved formats must be entered according to the momentjs library.
It's also possible to combine this with the calculation
condition
Use #value for the value of the datapoint and conditions to format other types to boolean by using the mathjs evaluation expressions
Image
Select a materialdesignicon or an image. Additional it's posible to use #value for conditions to show diffrent images / icons depending on the value of the datapoint. Allowed expression see mathjs evaluation expressions
image color
Define the color of the materialdesignicon. Additional it's posible to use #value for conditions to show diffrent colors depending on the value of the datapoint. Allowed expression see mathjs evaluation expressions
### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
#### HTML Properties - Example
```
```
## HTML Card
## List
### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
type of list
control type of list like checkbox, button state, button toggle, etc.
divider style
style of the divider
layout
standard or card layout
show scollbar
show scrollbar if necessary
input method for the list data
use the editor or a json string to define the items
Editor: count of list items
count of list items using the editor
JSON-String: object id
object id of datapoint containing json string. Allowed properties are described below
### Data JSON Properties
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
#### JSON Properties - Example
[
{
"text": "item0",
"subText": "{0_userdata.0.MDW.list.bind0}",
"rightText": "right",
"rightSubText": "",
"image": "clock-check-outline",
"imageColor": "#44739e",
"imageActive": "",
"imageActiveColor": "",
"header": "JSON",
"showDivider": "false",
"objectId": "0_userdata.0.MDW.list.bool.val0",
"buttonStateValue": "",
"buttonNavView": "",
"buttonLink": "",
"listOverflow": false
}, {
"text": "item1",
"subText": "{0_userdata.0.MDW.list.bind1}",
"rightText": "right",
"rightSubText": "",
"image": "clock-check-outline",
"imageColor": "#44739e",
"imageActive": "",
"imageActiveColor": "",
"header": "",
"showDivider": "false",
"objectId": "0_userdata.0.MDW.list.bool.val1",
"buttonStateValue": "",
"buttonNavView": "",
"buttonLink": "",
"listOverflow": false
}, {
"text": "item2",
"subText": "",
"rightText": "right",
"rightSubText": "",
"image": "clock-check-outline",
"imageColor": "#44739e",
"imageActive": "",
"imageActiveColor": "",
"header": "",
"showDivider": "false",
"objectId": "0_userdata.0.MDW.list.bool.val2",
"buttonStateValue": "",
"buttonNavView": "",
"buttonLink": "",
"listOverflow": false
}, {
"text": "item3",
"subText": "fuuuu",
"rightText": "right",
"rightSubText": "",
"image": "clock-check-outline",
"imageColor": "#44739e",
"imageActive": "",
"imageActiveColor": "",
"header": "",
"showDivider": "false",
"objectId": "0_userdata.0.MDW.list.bool.val3",
"buttonStateValue": "",
"buttonNavView": "",
"buttonLink": "",
"listOverflow": false
}
]
## IconList
### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
input method for the list data
The data for the IconList can be entered via the editor or a JSON string can be used
Editor: count of list items
number of list items using vis editor for the data of list
JSON-String: object id
object id of datapoint containing json string. Allowed properties are described below
### Data JSON Properties
JSON string must be an array of objects with the following properties:
Property
Description
Type
Values
listType
type of list
- buttonToggleValueTrue: is only on if the value equals the condition 'on'
- buttonToggleValueFalse: is only off if the value equals the condition 'off'
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
#### JSON Properties - Example
[
{
"background": "red",
"text": "text1",
"subText": "number",
"image": "harddisk",
"imageColor": "#ec0909",
"imageActive": "folder",
"imageActiveColor": "#5ad902",
"buttonBackgroundColor": "",
"buttonBackgroundActiveColor": "",
"listType": "buttonState",
"objectId": "0_userdata.0.iconList.buttonState.number",
"buttonStateValue": "60",
"buttonNavView": "",
"buttonLink": "",
"buttonToggleValueTrue": "",
"buttonToggleValueFalse": "",
"valueAppendix": "",
"showValueLabel": "true",
"statusBarColor": "green",
"lockEnabled": "false"
},
{
"background": "green",
"text": "text0",
"subText": "bool",
"image": "home",
"imageColor": "#44739e",
"imageActive": "home",
"imageActiveColor": "#44739e",
"buttonBackgroundColor": "",
"buttonBackgroundActiveColor": "#a0f628",
"listType": "buttonToggle",
"objectId": "0_userdata.0.iconList.buttonToggle.bool0",
"buttonStateValue": "60",
"buttonNavView": "",
"buttonLink": "",
"buttonToggleValueTrue": "",
"buttonToggleValueFalse": "",
"valueAppendix": "",
"showValueLabel": "false",
"statusBarColor": "",
"lockEnabled": "false"
}
]
## Progress
### Editor Settings
Screenshot
Setting
Description
condition for color 1 progress [>]
Condition from when color 1 should be used. The value of the condition must be in percent
condition for color 2 progress [>]
Condition from when color 2 should be used. The value of the condition must be in percent
custom label
For custom label you can use the property [#value] to show the real value of the datapoint. To show the current percent you can use [#percent]
### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
#### HTML Properties - Example
```
```
## Progress Circular
### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
condition for color 1 progress [>]
Condition from when color 1 should be used. The value of the condition must be in percent
condition for color 2 progress [>]
Condition from when color 2 should be used. The value of the condition must be in percent
custom label
For custom label you can use the property [#value] to show the real value of the datapoint. To show the current percent you can use [#percent]
### HTML Properties
The following properties can be used as [HTML Widgets](#html-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
#### HTML Properties - Example
```
```
## Slider
### HTML Properties
The following properties can be used as [HTML Widgets](#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
#### HTML Properties - Example
```
```
## Slider Round
### HTML Properties
The following properties can be used as [HTML Widgets](#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
#### HTML Properties - Example
```
```
## Input
### Text input
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
Object ID
id of datapoint
input type
input type of textfield
input mask
if using input type mask, you can define a mask. Allowed properties are describe in the vue the mask documentation
max length
max input length of textfield
#### HTML Properties
The following properties can be used as [HTML Widgets](#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)
### Select
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
method of data of menu
There are three methods to define the data of the menu. First is to define it via editor. Second is to define it via a json string. Third method is to define it by three list for values, labels and icons
Editor: count of menu items
Method of data of menu: via editor
Define the number of menu entries. The the individual menu entries can be defined under menu item[x]
JSON string
Here you can add a JSON string to define the menu entries or use bindings to a datapoint that contains a JSON string.
JSON string must have the above descibed format
value list
Define the number of menu entries by adding values that will be set to the datapoint. Entries must be separeted by semicolon
value list: labels
Define the related labels of the values. Entries must be separeted by semicolon
value list: images
Define the related icons of the values. Entries must be separeted by semicolon. You can use image path or Material Design Icons name
#### Menu JSON Properties
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)
##### Menu JSON Properties - Example
```
[ {
"text": "1 Tag",
"subText": "sub",
"value": "1 day",
"icon": "home"
},
{
"text": "3 Tage",
"subText": "sub",
"value": "3 days",
"icon": "home"
},
{
"text": "1 Woche",
"subText": "sub",
"value": "7 days",
"icon": "home"
},
{
"text": "2 Wochen",
"subText": "sub",
"value": "14 days",
"icon": "home"
},
{
"text": "1 Monat",
"subText": "sub",
"value": "1 month",
"icon": "/vis.0/myImages/hard-drive.png"
},
{
"text": "2 Monate",
"subText": "sub",
"value": "2 months",
"icon": "home",
"iconColor": "blue",
"iconColorSelectedTextField": "purple"
},
{
"text": "3 Monate",
"value": "3 months"
},
{
"text": "6 Monate",
"value": "6 months"
},
{
"text": "1 Jahr",
"value": "1 year"
}
]
```
#### HTML Properties
The following properties can be used as [HTML Widgets](#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)
##### HTML Properties - Example
```
```
### Autocomplete
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
method of data of menu
There are three methods to define the data of the menu. First is to define it via editor. Second is to define it via a json string. Third method is to define it by three list for values, labels and icons
Editor: count of menu items
Method of data of menu: via editor
Define the number of menu entries. The the individual menu entries can be defined under menu item[x]
JSON string
Here you can add a JSON string to define the menu entries or use bindings to a datapoint that contains a JSON string.
JSON string must have the above descibed format
value list
Define the number of menu entries by adding values that will be set to the datapoint. Entries must be separeted by semicolon
value list: labels
Define the related labels of the values. Entries must be separeted by semicolon
value list: images
Define the related icons of the values. Entries must be separeted by semicolon. You can use image path or Material Design Icons name
#### Menu JSON Properties
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)
##### Menu JSON Properties - Example
```
[ {
"text": "1 Tag",
"subText": "sub",
"value": "1 day",
"icon": "home"
},
{
"text": "3 Tage",
"subText": "sub",
"value": "3 days",
"icon": "home"
},
{
"text": "1 Woche",
"subText": "sub",
"value": "7 days",
"icon": "home"
},
{
"text": "2 Wochen",
"subText": "sub",
"value": "14 days",
"icon": "home"
},
{
"text": "1 Monat",
"subText": "sub",
"value": "1 month",
"icon": "/vis.0/myImages/hard-drive.png"
},
{
"text": "2 Monate",
"subText": "sub",
"value": "2 months",
"icon": "home",
"iconColor": "blue",
"iconColorSelectedTextField": "purple"
},
{
"text": "3 Monate",
"value": "3 months"
},
{
"text": "6 Monate",
"value": "6 months"
},
{
"text": "1 Jahr",
"value": "1 year"
}
]
```
#### HTML Properties
The following properties can be used as [HTML Widgets](#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)
##### HTML Properties - Example
```
```
## Top App Bar
Top App Bar with Navigation Drawer can be combined with the view in widget 8.
Take a look at the [Material Design Widgets example project](https://github.com/Scrounger/ioBroker.vis-materialdesign#online-example-project) to understand how it works.
##### Layout modal:
##### Layout permanent:
##### Layout auto:
Layout 'auto' switch automatically between layout 'modal' and 'permanent' depending on screen resolution. Via VIS-Editor you can set the resolution from which the 'permanent' layout should be used (bigger than condition).
**Hint: Using with the 'View in Widget 8' widget**
To work correct with the 'view in widget 8' widget you have to define a css media rule.
* First assign a "Common CSS Rule" to the widget , e.g. named `my-view-in-widget8`.
* Then add the following CSS to your project:
```
.my-view-in-widget8 {
top: 64px !important;
height: calc(100% - 64px) !important;
overflow-y: auto;
}
@media screen and (max-width: 800px) {
/* Resolution lower than 800px -> using 'modal' layout */
.my-view-in-widget8 {
left: 0 !important;
width: 100% !important;
}
}
@media screen and (min-width: 800px) {
/* Resolution higher than 800px -> using 'modal' layout */
.my-view-in-widget8 {
left: 256px !important;
width: calc(100% - 256px) !important;
}
}
```
* In the CSS customize the resolution to the resolution that you set via VIS Editor (in the example `max-width: 800px` and `min-width: 800px`)
* If you set a custom width for the menu drawer, than you also have to change 'left' and 'width' property in the CSS to this value (in the example `left: 256px !important;` and `width: calc(100% - 256px) !important;`)
### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
Object ID
must be set to a datapoint from typ number. For example this datapoint can be used by view in widget 8
show index of navigation items
shows the index of navigation before the item label. This number can be used in view in widget 8 to define the view that should be shown if the item is selected
count of navigation items
Define the count of the navigations items
fallback value if not in user group
if you use the group permissions, you can define here the value to switch to if the user is not in the group
disable fallback value
disable fallback value
Object Id for selected menu item id or name
You can optionally specify a datapoint in which the name or the menu id of the selected navigation element is written.
If no menu id is specified, the text of the navigation element is used. If the selected navigation element is a submenu, the name or menu id of the corresponding navigation element and submenu element is written separated with a '.', e.g. EG.Wohnzimmer
For example, this can be used to dynamically create widgets depending on the selected navigation element.
input method for the navigation items
Choose if the navigation elements are created by VIS editor or by json string.
JSON String for navigation items
details see Menu JSON Properties and Submenu JSON Properties
### Menu JSON Properties
menu items can be defined by a JSON string:
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]
#### Menu JSON Properties - Example
[
{
"text": "Start",
"divider": "true",
"icon": "home"
}, {
"menuId": "EG",
"text": "Erdgeschoss",
"icon": "home-floor-0",
"setValueOnMenuToggleClick": "true",
"subMenus": [
{
"menuId": "Esszimmer",
"text": "Esszimmer",
"icon": "table-furniture"
}, {
"menuId": "Wohnzimmer",
"text": "Wohnzimmer",
"icon": "sofa"
}, {
"menuId": "Kueche",
"text": "Küche",
"icon": "sofa"
}, {
"menuId": "Eingang",
"text": "Eingang",
"icon": "sofa"
}, {
"menuId": "Flur",
"text": "Flur",
"icon": "sofa"
}, {
"menuId": "Bad",
"text": "Bad",
"icon": "sofa"
}, {
"menuId": "Zimmer",
"text": "Zimmer",
"icon": "sofa"
}
]
}, {
"menuId": "DG",
"text": "Dachgeschoss",
"icon": "home-roof",
"setValueOnMenuToggleClick": "true",
"subMenus": [
{
"text": "Flur",
"icon": "table-furniture"
}, {
"text": "Galerie",
"icon": "sofa"
}, {
"text": "Schlafzimmer",
"icon": "sofa"
}, {
"text": "Ankleide",
"icon": "sofa"
}, {
"text": "Bad",
"icon": "sofa"
}, {
"text": "Kinderzimmer",
"icon": "sofa"
}
]
}
]
### Submenu
submenus must be defined by a JSON string:
#### Submenu JSON Properties
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
##### Submenu JSON Properties - Example
[
{
"text": "subitem0",
"icon": "account",
"iconColor": "red"
},
{
"text": "subitem1",
"icon": "home",
"iconColor": "green",
"divider": "true"
},
{
"text": "subitem1",
"divider": "true",
"icon": "/vis.0/myImages/devices/lxc_iobroker.png",
"userGroups": ["administrator", "user"],
"behaviorNotInUserGroup": "disabled"
}
]
## Charts
### Bar Chart
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
set datasets with
The data for the BarChart can be entered via the editor or a JSON string can be used
number of items
number of bars using vis editor for the data of list
Object Id
object id of datapoint containing json string. Allowed properties are described below
Object ID[x]
object id for the single bars using vis editor
#### Dataset JSON Properties
JSON string must be an array of objects with the following properties:
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
#### Dataset JSON Properties - Example
[
{
"label": "val0",
"value": "30",
"valueColor": "#ffffff"
}, {
"label": "val1",
"value": "12.54645646",
"tooltipTitle": "myTitle"
}, {
"label": "val2",
"value": "48",
"dataColor": "#c2c2c2",
"valueAppendix": "\n extra"
}, {
"label": "val3",
"value": "97",
"valueColor": "#ffffff"
}, {
"label": "val4",
"value": "32",
"valueText": "text"
}
]
### Pie Chart
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
set datasets with
The data for the PieChart can be entered via the editor or a JSON string can be used
number of items
number of pies pieces using vis editor for the data of list
Object Id
object id of datapoint containing json string. Allowed properties are described below
Object ID[x]
object id for the single pies pieces using vis editor
#### Dataset JSON Properties
JSON string must be an array of objects with the following properties:
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
#### Dataset JSON Properties - Example
[
{
"label": "val0",
"value": "30",
"valueColor": "#ffffff"
}, {
"label": "val1",
"value": "12.54645646"
}, {
"label": "val2",
"value": "48",
"dataColor": "#c2c2c2",
"valueAppendix": "\nextra"
}, {
"label": "val3",
"value": "97",
"valueColor": "#ffffff"
}, {
"label": "val4",
"value": "32",
"valueText": "text"
}
]
### Line History Chart:
> Required Adapter: [SQL](https://github.com/ioBroker/ioBroker.sql), [History](https://github.com/ioBroker/ioBroker.history) or [InfluxDb](https://github.com/ioBroker/ioBroker.influxdb)!
#### Editor Settings
Settings that are not listed in the table below are self-explanatory.
Screenshot
Setting
Description
adapter instance
Instance for the sql or history adapter
controlling time interval using object
Id of a datapoint to change the time interval of the chart.
If the datapoint is from type 'string' it must contain one of the linked values
If the datapoint is from type 'number', it must contain the starting timestamp of the graph.
For example, you can use a button here to change the display of the chart during runtime
boolean object for update
Id of adatapoint to trigger a manual refresh of the chart.
For example, you can use a button here to refresh the chart during runtime
chart timeout
timeout for loading the chart data. If you get a timeout error message, increase this value
debug mode
if you have problems or errors, activate the debug mode and attach the console log (F12) data to the issue
Object Id[x]
id of datapoint with activated history instance
display method[x]
aggregation method
max. number of data points to be displayed[x]
Number of maximum data points to display
time interval between the data points in [s][x]
Optional setting, overrides the 'count' setting.
Distance between the individual data points in seconds.
For example, if you want to display data points every minute, you have to enter 60 here
data multiply with[x]
Optional setting, multiply every datapoint with the given value
time formats of x-axis
Change the time format of the X-axis. Time formats must be entered for all time units, the following time units are permitted.
Approved time formats must be entered according to the moment.js library, see link
tooltip time formats
Change the time format of the tooltip. Time formats must be entered for all time units, the following time units are permitted.
Approved time formats must be entered according to the moment.js library, see link
### JSON Chart
With the JSON chart you have the maximum freedom to create a mixed chart (line, bars and stacked bars) by script.
 
#### JSON Properties
##### General
Property
Description
Type
Values
axisLabels
axis label of graph
Array
numbers or string
graphs
data of graphs
array<graph>
see graph
##### 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, ...
##### graph line chart spfeicifc
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', ...
##### graph bar chart spfeicifc
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, ...
##### graph y-Axis
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, ...
##### gradientColor
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)
##### Chart with time axis
JSON Chart supports data that have a timestamp. To use this the data array must have values for timestamp (x-axis value) and value (y-axis value).
###### values with timestamp
Property
Description
Type
Values
t
timestamp - xAxis value
number
1, 2, 5, ...
y
value for timestamp - yAxis value
number
1, 2, 5, ...
###### x-axis settings for data with timestamp
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
#### Example
{
"axisLabels": ["1h", "2h", "3h", "4h", "5h", "6h", "7h", "8h", "9h", "10h", "11h", "12h", "13h", "14h", "17h", "18h", "19h", "20h", "21h", "22h", "23h", "24h"],
"graphs": [
{
"data": [19, 19, 18, 19, 19, 20, 20, 21, 22, 24, 24, 24, 23, 22, 23, 23, 24, 23, 23, 22, 22, 21, 20, 20],
"type": "line",
"color": "gray",
"legendText": "Temperatur",
"line_pointSizeHover": 5,
"line_pointSize": 0,
"line_Tension": 0.3,
"yAxis_show": false,
"yAxis_gridLines_show": false,
"yAxis_gridLines_ticks_length": 5,
"yAxis_min": 0,
"yAxis_max": 30,
"yAxis_step": 5,
"yAxis_position": "left",
"yAxis_appendix": " °C",
"yAxis_zeroLineWidth": 0.1,
"yAxis_zeroLineColor": "black",
"displayOrder": 0,
"tooltip_AppendText": " °C",
"datalabel_backgroundColor": ["#2b9a44", "#2b9a44", "#3aa35b", "#2b9a44", "#2b9a44", "#1d922e", "#1d922e", "#0e8917", "#008000", "#668f00", "#668f00", "#668f00", "#338700", "#008000", "#338700", "#338700", "#668f00", "#338700", "#338700", "#008000", "#008000", "#0e8917", "#1d922e", "#1d922e"],
"datalabel_color": "white",
"datalabel_offset": -10,
"datalabel_fontFamily": "RobotoCondensed-Light",
"datalabel_fontSize": 12,
"datalabel_borderRadius": 6,
"datalabel_show": "auto",
"line_PointColor": ["#2b9a44", "#2b9a44", "#3aa35b", "#2b9a44", "#2b9a44", "#1d922e", "#1d922e", "#0e8917", "#008000", "#668f00", "#668f00", "#668f00", "#338700", "#008000", "#338700", "#338700", "#668f00", "#338700", "#338700", "#008000", "#008000", "#0e8917", "#1d922e", "#1d922e"],
"line_PointColorBorder": ["#2b9a44", "#2b9a44", "#3aa35b", "#2b9a44", "#2b9a44", "#1d922e", "#1d922e", "#0e8917", "#008000", "#668f00", "#668f00", "#668f00", "#338700", "#008000", "#338700", "#338700", "#668f00", "#338700", "#338700", "#008000", "#008000", "#0e8917", "#1d922e", "#1d922e"],
"line_PointColorHover": ["#2b9a44", "#2b9a44", "#3aa35b", "#2b9a44", "#2b9a44", "#1d922e", "#1d922e", "#0e8917", "#008000", "#668f00", "#668f00", "#668f00", "#338700", "#008000", "#338700", "#338700", "#668f00", "#338700", "#338700", "#008000", "#008000", "#0e8917", "#1d922e", "#1d922e"],
"line_PointColorBorderHover": ["#2b9a44", "#2b9a44", "#3aa35b", "#2b9a44", "#2b9a44", "#1d922e", "#1d922e", "#0e8917", "#008000", "#668f00", "#668f00", "#668f00", "#338700", "#008000", "#338700", "#338700", "#668f00", "#338700", "#338700", "#008000", "#008000", "#0e8917", "#1d922e", "#1d922e"],
"use_gradient_color": true,
"gradient_color": [{
"value": -20,
"color": "#5b2c6f66"
}, {
"value": 0,
"color": "#2874a666"
}, {
"value": 14,
"color": "#73c6b666"
}, {
"value": 22,
"color": "#00800066"
}, {
"value": 27,
"color": "#ffa50066"
}, {
"value": 35,
"color": "#ff000066"
}
],
"use_line_gradient_fill_color": true,
"line_gradient_fill_color": [{
"value": -20,
"color": "#5b2c6f66"
}, {
"value": 0,
"color": "#2874a666"
}, {
"value": 14,
"color": "#73c6b666"
}, {
"value": 22,
"color": "#00800066"
}, {
"value": 27,
"color": "#ffa50066"
}, {
"value": 35,
"color": "#ff000066"
}
]
}, {
"data": [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 19, 33, 36, 23, 14, 16, 34, 46, 40, 24, 22],
"type": "line",
"color": "#0d47a1",
"legendText": "Regenwahrscheinlichkeit",
"line_UseFillColor": true,
"line_pointSize": 0,
"line_pointSizeHover": 5,
"yAxis_min": 0,
"yAxis_max": 100,
"yAxis_maxSteps": 10,
"yAxis_position": "left",
"yAxis_gridLines_show": false,
"yAxis_gridLines_border_show": false,
"yAxis_zeroLineWidth": 0.1,
"yAxis_zeroLineColor": "black",
"yAxis_appendix": " %",
"displayOrder": 1,
"tooltip_AppendText": " %",
"datalabel_show": false
}, {
"data": ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "1.3", "2.5", 0, 1.9, 1.17, 0, 0, 0, 0.18, 0.7, 0.2, 0, 0],
"type": "bar",
"color": "#6dd600",
"legendText": "Niederschlag",
"yAxis_min": 0,
"yAxis_max": 5,
"yAxis_maxSteps": 10,
"yAxis_position": "right",
"yAxis_gridLines_show": false,
"yAxis_appendix": " mm",
"yAxis_gridLines_border_show": false,
"yAxis_zeroLineWidth": 0.1,
"yAxis_zeroLineColor": "black",
"displayOrder": 1,
"tooltip_AppendText": " mm",
"datalabel_show": false
}
]
}
{
"axisLabels": ["Jan", "Feb", "Mrz", "Apr"],
"graphs": [{
"type": "line",
"data": [40, 22, 160, 92],
"yAxis_id": 0,
"barIsStacked": true,
"datalabel_show": false,
"line_UseFillColor": true
}, {
"type": "bar",
"barIsStacked": true,
"data": [30, 69, 91, 35],
"yAxis_id": 0,
"barStackId": 0,
"color": "#6dd600",
"datalabel_color": "#FFFFFF",
"datalabel_align": "start",
"use_gradient_color": true,
"gradient_color": [{
"value": 60,
"color": "#6dd600"
}, {
"value": 0,
"color": "lightgray"
}
]
}, {
"type": "bar",
"barIsStacked": true,
"data": [17, 68, 83, 49],
"yAxis_id": 0,
"barStackId": 1,
"color": "#ff9800",
"datalabel_color": "#FFFFFF",
"datalabel_align": "start"
}, {
"type": "bar",
"barIsStacked": true,
"data": [95, 42, 34, 31],
"yAxis_id": 0,
"barStackId": 1,
"color": "#8e24aa",
"datalabel_color": "#FFFFFF",
"datalabel_align": "start"
}, {
"type": "bar",
"barIsStacked": true,
"data": [33, 44, 22, 34],
"yAxis_id": 0,
"barStackId": 2,
"color": "#a65628",
"datalabel_color": "#FFFFFF",
"datalabel_align": "start"
}, {
"type": "bar",
"barIsStacked": true,
"data": [28, 34, 45, 23],
"yAxis_id": 0,
"yAxis_max": "180",
"barStackId": 2,
"color": "#d32f2f",
"datalabel_color": "#FFFFFF",
"datalabel_align": "start"
}
]
}
## Table
### Editor Settings
Screenshot
Setting
Description
switch
Datapoint from type string with input data as shown above
data as JSON
Optional, input data as shown above if no oid datapoint is set
colType[x]
If image is selected, object property must have the path to the image (see above)
prefix[x]
Prefix for object property, internal object binding (see below) and html can be used
suffix[x]
Suffix for object property, internal object binding (see below) and html can be used
object name for sorting[x]
Here you can define an other object property that should be used for sorting.
### Data - JSON Stucture
Input data must be a json array of objects. You can use any property, there is no fixes structure. Column 0 gets the value of the first property, column 1 gets the value of the second property and so on.
Important is, that every Object has the same structure.
```
[
{
"img": "/vis.0/myImages/erlebnis_50.png",
"name": "Empire",
"betriebszeit": "4h 06m",
"funk": "5G",
"ip": "10.0.0.1"
},
{
"img": "/vis.0/myImages/erlebnis_100.png",
"name": "Handy",
"betriebszeit": "13m",
"funk": "5G",
"ip": "10.0.0.2"
},
{
"img": "/vis.0/myImages/erlebnis_100.png",
"name": "Harmony Hub - Wohnzimmer",
"betriebszeit": "18T 07h 21m",
"funk": "2G",
"ip": "10.0.0.3"
}
]
```
### internal object binding
prefix & suffix supports table internal object binding -> you can access other properties of object by using
```
#[obj.'propertyName']
```
Example see see above.
Working Widget Example can be found
* [here](https://forum.iobroker.net/topic/26199/test-adapter-material-design-widgets-v0-1-x/113)
* [ical Adapter](https://forum.iobroker.net/topic/29658/material-design-widgets-table-widget/2)
### Control Elements using HTML Widgets
You can use the [HTML Widgets](#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
#### HTML Control Widgets - Example
```
[
{
"col_1": "button toggle",
"col_2": {
"rowspan": "2",
"html": "
},
"col_3": "",
"col_4": ""
}, {
"col_1": "Checkbox / Switch",
"col_2": "
"col_3": {
"cellStyleAttrs": "padding: 8px;",
"html": "
}
}, {
"col_1": "Button State",
"col_2": "
"col_3": "
"col_4": "
}, {
"col_1": "Progress",
"col_2": "
"col_3": {
"colspan": "2",
"html": "
}
}, {
"col_1": "Slider",
"col_2": {
"colspan": "2",
"cellStyleAttrs": "overflow: visible;",
"html": "
},
"col_3": "
}, {
"col_1": "Select",
"col_2": "
"col_3": "
"col_4": {
"cellStyleAttrs": "padding: 6px;",
"html": "
}
}, {
"col_1": "col_1",
"col_2": "col_2",
"col_3": "col_3",
"col_4": "col_4"
}
]
```
### Control Elements - **deprecated since v0.5.0**
> **deprecated Use [HTML Widgets](#html-widgets) instead!**
To generate a control element (button, checkbox, etc.) in cell of the table you must create an object instead of a string.
## Responsive Layout
There are two widgets - Masonry Views and Grid Views - with which it is possible to create a repsonsive layout (a layout for desktop, tablet and mobile). Both Widgets has multiple `view in widget` integrated.
### Masonry Views
Masonry Views has multiple `view in widget` integrated, that will be ordered automatically depending of the width of the widget. With this widget it is possible to create a responsive layout (one layout for desktop, tablet and mobil).
Masonry views are especially useful if the views included have different heights.
Take a look at the [Material Design Widgets example project](https://github.com/Scrounger/ioBroker.vis-materialdesign#online-example-project) to understand how it works.
#### Editor Settings
Screenshot
Setting
Description
Depending on the width of the widget, the number of columns and the distance between the views can be set. The settings can be set independently for portrait and landscape format.
To find out the width of the resolution for the different devices, activate the Resolution Assistant under the common settings.
width of view[x]
Define the width of the view. Allowed values are number, px, % or calc. Examples: 100, 100px, 55%, calc(60% - 12px)
height of view[x]
Here you can specify the height of the view used.
If you want the height to adjust variably to the view, then this input must be empty and for the widget with the highest height in the view the position must be set to relative, see screenshot:
### Grid Views
Grid Views has multiple `view in widget` integrated, that will be ordered automatically depending of the width of the widget. With this widget it is possible to create a responsive layout (one layout for desktop, tablet and mobil).
Grid views are especially useful if the views included have the same heights.
The Grid View widget has 12 columns in total. If you want a view to have a width of 4 columns, you have to set column span to 4 in the corresponding view[x]
Take a look at the [Material Design Widgets example project](https://github.com/Scrounger/ioBroker.vis-materialdesign#online-example-project) to understand how it works.
#### Editor Settings
Screenshot
Setting
Description
Depending on the width of the widget, defined from which width of the widget the rules for column span of the individual views[x] can be applied and the distance between the views. The settings can be set independently for portrait and landscape format.
To find out the width of the resolution for the different devices, activate the Resolution Assistant under the common settings.
Define the column span of the view depending of the current width resolution rule.
You can also specify here whether a view should only be displayed at a resolution higher or lower than a defined value or whether it should be visible via a object id.
height of view[x]
Here you can specify the height of the view used.
If you want the height to adjust variably to the view, then this input must be empty and for the widget with the highest height in the view the position must be set to relative, see screenshot:
## Alerts
Alerts widget can be used e.g. to display messages in the VIS, like it works with the pushover adapter, but directly in the VIS.
### Editor Settings
Settings that are not listed in the table below are self-explanatory.
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.
### Datapoint JSON Properties
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)
#### Datapoint JSON Properties - Example
```
[
{
"text": "we have a new message",
"backgroundColor": "",
"borderColor": "darkred",
"icon": "message-alert-outline",
"iconColor": "darkred",
"fontColor": "blue"
}, {
"text": "we have a new message",
"backgroundColor": "#e6b0aa",
"borderColor": "green",
"icon": "/vis/img/bulb_on.png",
"iconColor": "green",
"fontColor": "gold"
}, {
"text": "we have a new message",
"backgroundColor": "",
"borderColor": "gold",
"icon": "alert-outline",
"iconColor": "gold",
"fontColor": ""
}
]
```
### Script: send alert to widget
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);
}
```
## Calendar
### Editor Settings
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
### Datapoint JSON Properties
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
#### Datapoint JSON Properties - Example
```
[
{
"name": "Event",
"color": "#e74c3c",
"colorText": "#FFFFFF",
"start": "2020-01-24",
"end": "2020-01-26"
},
{
"name": "Meeting",
"color": "#717d7e",
"colorText": "#FFFFFF",
"start": "2020-03-23 16:00",
"end": "2020-03-24 17:15"
}
]
```
### Script: ical conversion
If you want to use the widget with the [ical adapter](https://github.com/iobroker-community-adapters/ioBroker.ical), you can use the following script to convert the ical object to work with the widget.
```
// momentjs is required as dependecies in javascript adapter
const moment = require("moment");
var instances = $(`[id=ical.*.data.table]`);
instances.on(ical2CalendarWidget);
// remove this, if you know to use your own datapoint
let datapointId = 'materialdesignwidgets.calendar.ical2calendar'
createState(datapointId, "[]", {
read: true,
write: false,
desc: "JSON String for Calendar Widget",
type: "string",
def: "[]"
});
function ical2CalendarWidget() {
try {
let calList = [];
for (var inst = 0; inst <= instances.length - 1; inst++) {
let icalObj = getState(instances[inst]).val;
if (icalObj) {
for (var i = 0; i <= icalObj.length - 1; i++) {
let item = icalObj[i];
// extract calendar color
let calendarName = item._class.split(' ')[0].replace('ical_', '');
let startTime = moment(item._date);
let endTime = moment(item._end);
let start = startTime.format("YYYY-MM-DD HH:mm");
let end = endTime.format("YYYY-MM-DD HH:mm");
if (startTime.format('HH:mm') === '00:00' && endTime.format('HH:mm') === '00:00') {
// is full-day event
if (endTime.diff(startTime, 'hours') === 24) {
// full-day event, one day
start = startTime.format("YYYY-MM-DD");
end = startTime.format("YYYY-MM-DD");
} else {
// full-day event, multiple days
start = startTime.format("YYYY-MM-DD");
end = endTime.format("YYYY-MM-DD");
}
}
// create object for calendar widget
calList.push({
name: item.event,
color: getMyCalendarColor(calendarName),
colorText: getMyCalendarTextColor(calendarName),
start: start,
end: end
})
}
function getMyCalendarColor(calendarName) {
// assign colors via the calendar names, use calendar name as set in ical
if (calendarName === 'calendar1') {
return '#FF0000';
} else if (calendarName === 'calendar2') {
return '#44739e'
} else if (calendarName === 'calendar3') {
return '#32a852'
}
}
function getMyCalendarTextColor(calendarName) {
// assign colors via the calendar names, use calendar name as set in ical
if (calendarName === 'calendar1') {
return '#FFFFFF';
} else if (calendarName === 'calendar2') {
return '#FFFFFF'
} else if (calendarName === 'calendar3') {
return '#FFFFFF'
}
}
}
// Enter the destination data point that is to be used as object ID in the widget
setState(datapointId, JSON.stringify(calList), true);
}
} catch (e) {
console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: ${e.stack}`);
}
}
ical2CalendarWidget();
```
## Dialog
### Editor Settings
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.
## HTML Widgets
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
### Examples
#### Slider Round combined with Icon Button using HTML Widget
Round slider and icon button comined in a html widget
Widget to import via VIS Editor:
```
[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"
```
#### List with HTML Widgets
A list with custom control elements using HTML Widgets
Widget to import via VIS Editor:
```
[{"tpl":"tplVis-materialdesign-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","vibrateOnMobilDevices":"50","listType":"text","listItemDividerStyle":"padded","listLayout":"card","showScrollbar":false,"listItemDataMethod":"inputPerEditor","countListItems":"5","listItemAlignment":"left","listItemBackground":"#mdwTheme:vis-materialdesign.0.colors.list.background_off","listItemBackgroundActive":"#mdwTheme:vis-materialdesign.0.colors.list.background_on","colorSwitchThumb":"#mdwTheme:vis-materialdesign.0.colors.switch.off","colorSwitchTrack":"#mdwTheme:vis-materialdesign.0.colors.switch.track","colorSwitchTrue":"#mdwTheme:vis-materialdesign.0.colors.switch.on","colorSwitchHover":"#mdwTheme:vis-materialdesign.0.colors.switch.off_hover","colorCheckBox":"#mdwTheme:vis-materialdesign.0.colors.checkbox.on","colorListItemHover":"#mdwTheme:vis-materialdesign.0.colors.list.hover","colorListItemSelected":"#mdwTheme:vis-materialdesign.0.colors.list.selected","colorListItemText":"#mdwTheme:vis-materialdesign.0.colors.list.text","colorListItemTextSecondary":"#mdwTheme:vis-materialdesign.0.colors.list.subText","colorListItemTextRight":"#mdwTheme:vis-materialdesign.0.colors.list.text_right","colorListItemTextSecondaryRight":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.list.subText_right;dark:vis-materialdesign.0.colors.dark.list.subText_right; mode === \"true\" ? dark : light}","colorListItemHeaders":"#mdwTheme:vis-materialdesign.0.colors.list.header","colorListItemDivider":"#mdwTheme:vis-materialdesign.0.colors.list.divider","headerFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.list.header","listItemFont":"#mdwTheme:vis-materialdesign.0.fonts.list.text","listItemSubFont":"#mdwTheme:vis-materialdesign.0.fonts.list.subText","listItemRightFont":"#mdwTheme:vis-materialdesign.0.fonts.list.text_right","listItemSubRightFont":"#mdwTheme:vis-materialdesign.0.fonts.list.subText_right","listItemTextSize":"#mdwTheme:vis-materialdesign.0.fontSizes.list.text","listItemSubTextSize":"#mdwTheme:vis-materialdesign.0.fontSizes.list.subText","listItemTextRightSize":"#mdwTheme:vis-materialdesign.0.fontSizes.list.text_right","listItemSubTextRightSize":"#mdwTheme:vis-materialdesign.0.fontSizes.list.subText_right","listItemHeaderTextSize":"#mdwTheme:vis-materialdesign.0.fontSizes.list.header","listImageColor0":"#mdwTheme:vis-materialdesign.0.colors.list.icon_off","listImageActiveColor0":"#mdwTheme:vis-materialdesign.0.colors.list.icon_on","listImageColor1":"#mdwTheme:vis-materialdesign.0.colors.list.icon_off","listImageActiveColor1":"#mdwTheme:vis-materialdesign.0.colors.list.icon_on","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"groupHeader0":"List with HTML Widgets","label0":"Button Toggle","rightLabel0":"
```
#### HTML Widgets using in non Material Design Widgets
Button toggle used in a non Material Design Widget, here using [vis-material-advanced](https://github.com/iobroker-community-adapters/ioBroker.vis-material-advanced) ListThermostat Widget
Widget to import via VIS Editor:
```
[{"tpl":"tplMaListThermostat","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","showTitle":"checked","onlyTitle":"","titleSize":"medium","widgetBackground":"#121212","TextColor":"white","subtitleSize":"x-small","valueAlign":"right","valueVertical":"center","valueSize":"medium","opacityColor":"white","min":"14","max":"30","cardIcon":"/icons-mfd-svg/sani_heating_temp.svg","showIcon":"checked","centerIcon":true,"borderRadius":"10","borderColor":"white","useOverallRoundedValues":"checked","roundLeftUp":"10","roundLeftBottom":"0","roundRightUp":"0","roundRightBottom":"10","boxShadow":"unchecked","shadowWidth":"2","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"subtitle":"
\n
```
#### Value HTML Widgets using in a complex view
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:
```
{
"settings": {
"style": {
"background_class": ""
},
"theme": "redmond",
"sizex": "",
"sizey": "",
"gridSize": "",
"snapType": null
},
"widgets": {
"e00001": {
"tpl": "tplVis-materialdesign-Card",
"data": {
"g_fixed": true,
"g_visibility": false,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "==",
"visibility-val": 1,
"visibility-groups-action": "hide",
"cardLayout": "Basic",
"cardStyle": "default",
"showTitle": false,
"titleLayout": "20",
"titleFontFamily": "",
"showSubTitle": false,
"subtitleLayout": "",
"subTitleFontFamily": "",
"showText": "true",
"textFontSize": "",
"textFontFamily": "",
"refresh_oid_delay": "100",
"refresh_animation_duration": "150",
"colorBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background",
"colorTitleSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_title",
"colorTextSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_body",
"colorTitle": "#mdwTheme:vis-materialdesign.0.colors.card.title",
"colorSubtitle": "#mdwTheme:vis-materialdesign.0.colors.card.subTitle",
"colorBody": "#mdwTheme:vis-materialdesign.0.colors.card.text",
"clickType": "none",
"controlType": "link",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"title": "",
"html": "
"showScrollbar": false,
"name": "Photovoltaik - Card "
},
"style": {
"left": "10px",
"top": "10px",
"z-index": "1",
"width": "calc(50% - 15px)",
"height": "120px"
},
"widgetSet": "materialdesign"
},
"e00002": {
"tpl": "tplVis-materialdesign-Progress",
"data": {
"oid": "",
"g_fixed": true,
"g_visibility": true,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "!=",
"visibility-val": "0",
"visibility-groups-action": "hide",
"progressRounded": false,
"colorProgressBackground": "#mdwTheme:vis-materialdesign.0.colors.progress.track_background",
"colorProgress": "#mdwTheme:vis-materialdesign.0.colors.progress.track",
"colorOne": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition1",
"colorTwo": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition2",
"showValueLabel": false,
"valueLabelStyle": "progressValue",
"textColor": "#mdwTheme:vis-materialdesign.0.colors.progress.text",
"textFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.progress.text",
"textFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.progress.text",
"textAlign": "center",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"progressIndeterminate": true,
"visibility-oid": "linkeddevices.0.Energiespeicher.Photovoltaik.Leistung",
"reverse": false,
"progressRotate": "yes",
"name": "Photovoltaik - Progress OUT "
},
"style": {
"left": "calc(25% - 2px)",
"top": "130px",
"width": "4px",
"height": "50px",
"z-index": "1"
},
"widgetSet": "materialdesign"
},
"e00003": {
"tpl": "tplVis-materialdesign-value",
"data": {
"oid": "linkeddevices.0.Energiespeicher.Photovoltaik.Leistung",
"g_fixed": true,
"g_visibility": true,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "!=",
"visibility-val": "0",
"visibility-groups-action": "hide",
"targetType": "auto",
"textAlign": "start",
"valuesFontColor": "#mdwTheme:vis-materialdesign.0.colors.value.text",
"valuesFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.text",
"valuesFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.text",
"prepandTextColor": "#mdwTheme:vis-materialdesign.0.colors.value.prepand",
"prepandTextFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.prepand",
"prepandTextFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand",
"appendTextColor": "#mdwTheme:vis-materialdesign.0.colors.value.append",
"appendTextFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.append",
"appendTextFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.append",
"image": "",
"imageColor": "#mdwTheme:vis-materialdesign.0.colors.value.icon",
"iconPosition": "left",
"effectFontColor": "#00e640",
"effectFontSize": "",
"effectDuration": "500",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"valueLabelUnit": "W",
"changeEffectEnabled": false,
"generateHtmlControl": "true",
"visibility-oid": "linkeddevices.0.Energiespeicher.Photovoltaik.Leistung",
"name": "Photovoltaik - Leistung"
},
"style": {
"left": "calc(25% + 10px)",
"top": "140px",
"z-index": "2",
"width": "100px",
"height": "29px"
},
"widgetSet": "materialdesign"
},
"e00004": {
"tpl": "tplVis-materialdesign-Chart-Bar",
"data": {
"oid": "nothing_selected",
"g_fixed": true,
"g_visibility": false,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "==",
"visibility-val": 1,
"visibility-groups-action": "hide",
"chartDataMethod": "inputPerEditor",
"dataCount": "1",
"chartType": "vertical",
"backgroundColor": "#mdwTheme:vis-materialdesign.0.colors.charts.background",
"chartAreaBackgroundColor": "#mdwTheme:vis-materialdesign.0.colors.charts.background_chart",
"titleLayout": "#mdwTheme:vis-materialdesign.0.fontSizes.card.title",
"titleFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.card.title",
"colorBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background",
"colorTitleSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_title",
"colorTextSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_body",
"colorTitle": "#mdwTheme:vis-materialdesign.0.colors.card.title",
"globalColor": "#mdwTheme:vis-materialdesign.0.colors.charts.global",
"hoverColor": "#mdwTheme:vis-materialdesign.0.colors.charts.bar.hover",
"hoverBorderColor": "#mdwTheme:vis-materialdesign.0.colors.charts.bar.hover_border",
"showValues": "showValuesOn",
"valuesFontColor": "#mdwTheme:vis-materialdesign.0.colors.charts.value",
"valuesFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.value",
"valuesFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.value",
"valuesPositionAnchor": "end",
"valuesPositionAlign": "top",
"valuesTextAlign": "center",
"yAxisPosition": "left",
"yAxisTitleColor": "#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_title",
"yAxisTitleFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_title",
"yAxisTitleFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_title",
"yAxisValueLabelColor": "#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_values",
"yAxisValueFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_values",
"yAxisValueFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_values",
"yAxisValueDistanceToAxis": "10",
"yAxisShowAxis": false,
"yAxisShowAxisLabels": false,
"yAxisShowGridLines": false,
"yAxisGridLinesColor": "#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_gridlines",
"yAxisShowTicks": false,
"yAxisZeroLineColor": "#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_zeroline",
"xAxisPosition": "bottom",
"xAxisTicksSource": "auto",
"xAxisTitleColor": "#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_title",
"xAxisTitleFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_title",
"xAxisTitleFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_title",
"xAxisValueLabelColor": "#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_values",
"xAxisValueFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_values",
"xAxisValueFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_values",
"xAxisValueDistanceToAxis": "6",
"xAxisShowAxis": false,
"xAxisShowAxisLabels": true,
"xAxisShowGridLines": false,
"xAxisGridLinesColor": "#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_gridlines",
"xAxisShowTicks": false,
"xAxisZeroLineColor": "#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_zeroline",
"xAxisMinRotation": "0",
"xAxisMaxRotation": "0",
"legendPosition": "right",
"legendFontColor": "#mdwTheme:vis-materialdesign.0.colors.charts.legend",
"legendFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.legend",
"legendFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend",
"legendPointStyle": "true",
"showTooltip": false,
"tooltipBackgroundColor": "#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background",
"tooltipShowColorBox": "true",
"tooltipTitleFontColor": "#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title",
"tooltipTitleFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title",
"tooltipTitleFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_title",
"tooltipBodyFontColor": "#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text",
"tooltipBodyFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text",
"tooltipBodyFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_text",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"oid0": "linkeddevices.0.Energiespeicher.Eigenverbrauch",
"oid1": "linkeddevices.0.Energiespeicher.Autarkie",
"axisValueMin": "0",
"axisValueMax": "100",
"chartPaddingTop": "30",
"valueTextColor0": "",
"valuesAppendText": " %",
"label0": "Eigenverbrauch",
"label1": "Autarkie",
"cardUse": true,
"dataColor0": "#ff9800",
"dataColor1": "#6dd600",
"barWidth": "",
"disableHoverEffects": true,
"name": "Bar Chart "
},
"style": {
"left": "30px",
"top": "180px",
"width": "calc(100% - 60px)",
"height": "200px",
"z-index": "1"
},
"widgetSet": "materialdesign"
},
"e00005": {
"tpl": "tplVis-materialdesign-Card",
"data": {
"g_fixed": true,
"g_visibility": false,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "==",
"visibility-val": 1,
"visibility-groups-action": "hide",
"cardLayout": "Basic",
"cardStyle": "default",
"showTitle": false,
"titleLayout": "20",
"titleFontFamily": "",
"showSubTitle": false,
"subtitleLayout": "",
"subTitleFontFamily": "",
"showText": "true",
"textFontSize": "",
"textFontFamily": "",
"refresh_oid_delay": "100",
"refresh_animation_duration": "150",
"colorBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background",
"colorTitleSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_title",
"colorTextSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_body",
"colorTitle": "#mdwTheme:vis-materialdesign.0.colors.card.title",
"colorSubtitle": "#mdwTheme:vis-materialdesign.0.colors.card.subTitle",
"colorBody": "#mdwTheme:vis-materialdesign.0.colors.card.text",
"clickType": "none",
"controlType": "link",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"title": "",
"html": "
"showScrollbar": false,
"name": "Netz - Card "
},
"style": {
"left": "calc(50% + 5px)",
"top": "10px",
"z-index": "1",
"width": "calc(50% - 15px)",
"height": "120px"
},
"widgetSet": "materialdesign"
},
"e00006": {
"tpl": "tplVis-materialdesign-Progress",
"data": {
"oid": "nothing_selected",
"g_fixed": true,
"g_visibility": true,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "<",
"visibility-val": "0",
"visibility-groups-action": "hide",
"progressRounded": false,
"colorProgressBackground": "#mdwTheme:vis-materialdesign.0.colors.progress.track_background",
"colorProgress": "#mdwTheme:vis-materialdesign.0.colors.progress.track",
"colorOne": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition1",
"colorTwo": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition2",
"showValueLabel": false,
"valueLabelStyle": "progressPercent",
"textColor": "#mdwTheme:vis-materialdesign.0.colors.progress.text",
"textFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.progress.text",
"textFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.progress.text",
"textAlign": "end",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"progressIndeterminate": true,
"visibility-oid": "linkeddevices.0.Stromzaehler.Leistung",
"reverse": true,
"progressRotate": "yes",
"name": "Netz - Progress IN "
},
"style": {
"left": "calc(75% - 2px)",
"top": "130px",
"width": "4px",
"height": "50px",
"z-index": "1"
},
"widgetSet": "materialdesign"
},
"e00007": {
"tpl": "tplVis-materialdesign-Progress",
"data": {
"oid": "nothing_selected",
"g_fixed": true,
"g_visibility": true,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": ">",
"visibility-val": "0",
"visibility-groups-action": "hide",
"progressRounded": false,
"colorProgressBackground": "#mdwTheme:vis-materialdesign.0.colors.progress.track_background",
"colorProgress": "#mdwTheme:vis-materialdesign.0.colors.progress.track",
"colorOne": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition1",
"colorTwo": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition2",
"showValueLabel": false,
"valueLabelStyle": "progressPercent",
"textColor": "#mdwTheme:vis-materialdesign.0.colors.progress.text",
"textFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.progress.text",
"textFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.progress.text",
"textAlign": "end",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"progressIndeterminate": true,
"visibility-oid": "linkeddevices.0.Stromzaehler.Leistung",
"reverse": false,
"progressRotate": "yes",
"name": "Netz - Progress OUT "
},
"style": {
"left": "calc(75% - 2px)",
"top": "130px",
"width": "4px",
"height": "50px",
"z-index": "1"
},
"widgetSet": "materialdesign"
},
"e00008": {
"tpl": "tplVis-materialdesign-value",
"data": {
"oid": "linkeddevices.0.Stromzaehler.Leistung",
"g_fixed": true,
"g_visibility": true,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "!=",
"visibility-val": "0",
"visibility-groups-action": "hide",
"targetType": "auto",
"textAlign": "start",
"valuesFontColor": "#mdwTheme:vis-materialdesign.0.colors.value.text",
"valuesFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.text",
"valuesFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.text",
"prepandTextColor": "#mdwTheme:vis-materialdesign.0.colors.value.prepand",
"prepandTextFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.prepand",
"prepandTextFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand",
"appendTextColor": "#mdwTheme:vis-materialdesign.0.colors.value.append",
"appendTextFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.append",
"appendTextFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.append",
"image": "",
"imageColor": "#mdwTheme:vis-materialdesign.0.colors.value.icon",
"iconPosition": "left",
"effectFontColor": "#00e640",
"effectFontSize": "",
"effectDuration": "500",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"valueLabelUnit": "W",
"calculate": "",
"condition": "",
"textOnTrue": "",
"textOnFalse": "",
"changeEffectEnabled": false,
"visibility-oid": "linkeddevices.0.Stromzaehler.Leistung",
"name": "Netz - Leistung "
},
"style": {
"left": "calc(75% + 10px)",
"top": "140px",
"width": "100px",
"height": "29px",
"z-index": "2"
},
"widgetSet": "materialdesign"
},
"e00009": {
"tpl": "tplVis-materialdesign-Card",
"data": {
"g_fixed": true,
"g_visibility": false,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "==",
"visibility-val": 1,
"visibility-groups-action": "hide",
"cardLayout": "Basic",
"cardStyle": "default",
"showTitle": false,
"titleLayout": "20",
"titleFontFamily": "",
"showSubTitle": false,
"subtitleLayout": "",
"subTitleFontFamily": "",
"showText": "true",
"textFontSize": "",
"textFontFamily": "",
"refresh_oid_delay": "100",
"refresh_animation_duration": "150",
"colorBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background",
"colorTitleSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_title",
"colorTextSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_body",
"colorTitle": "#mdwTheme:vis-materialdesign.0.colors.card.title",
"colorSubtitle": "#mdwTheme:vis-materialdesign.0.colors.card.subTitle",
"colorBody": "#mdwTheme:vis-materialdesign.0.colors.card.text",
"clickType": "none",
"controlType": "link",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"title": "",
"html": "
"showScrollbar": false,
"name": "Batterie - Card "
},
"style": {
"left": "10px",
"top": "430px",
"z-index": "1",
"width": "calc(50% - 15px)",
"height": "120px"
},
"widgetSet": "materialdesign"
},
"e00010": {
"tpl": "tplVis-materialdesign-Progress",
"data": {
"oid": "nothing_selected",
"g_fixed": true,
"g_visibility": true,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "<",
"visibility-val": "0",
"visibility-groups-action": "hide",
"progressRounded": false,
"colorProgressBackground": "#mdwTheme:vis-materialdesign.0.colors.progress.track_background",
"colorProgress": "#mdwTheme:vis-materialdesign.0.colors.progress.track",
"colorOne": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition1",
"colorTwo": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition2",
"showValueLabel": false,
"valueLabelStyle": "progressPercent",
"textColor": "#mdwTheme:vis-materialdesign.0.colors.progress.text",
"textFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.progress.text",
"textFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.progress.text",
"textAlign": "end",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"progressIndeterminate": true,
"visibility-oid": "linkeddevices.0.Energiespeicher.Batterie.Leistung",
"reverse": true,
"progressRotate": "yes",
"name": "Batterie - Progress OUT "
},
"style": {
"left": "calc(25% - 2px)",
"top": "380px",
"width": "4px",
"height": "50px",
"z-index": "1"
},
"widgetSet": "materialdesign"
},
"e00011": {
"tpl": "tplVis-materialdesign-Progress",
"data": {
"oid": "nothing_selected",
"g_fixed": true,
"g_visibility": true,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": ">",
"visibility-val": "0",
"visibility-groups-action": "hide",
"progressRounded": false,
"colorProgressBackground": "#mdwTheme:vis-materialdesign.0.colors.progress.track_background",
"colorProgress": "#mdwTheme:vis-materialdesign.0.colors.progress.track",
"colorOne": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition1",
"colorTwo": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition2",
"showValueLabel": false,
"valueLabelStyle": "progressPercent",
"textColor": "#mdwTheme:vis-materialdesign.0.colors.progress.text",
"textFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.progress.text",
"textFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.progress.text",
"textAlign": "end",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"progressIndeterminate": true,
"visibility-oid": "linkeddevices.0.Energiespeicher.Batterie.Leistung",
"reverse": false,
"progressRotate": "yes",
"name": "Batterie - Progress IN "
},
"style": {
"left": "calc(25% - 2px)",
"top": "380px",
"width": "4px",
"height": "50px",
"z-index": "1"
},
"widgetSet": "materialdesign"
},
"e00012": {
"tpl": "tplVis-materialdesign-value",
"data": {
"oid": "linkeddevices.0.Energiespeicher.Batterie.Leistung",
"g_fixed": true,
"g_visibility": true,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "!=",
"visibility-val": "0",
"visibility-groups-action": "hide",
"targetType": "auto",
"textAlign": "start",
"valuesFontColor": "#mdwTheme:vis-materialdesign.0.colors.value.text",
"valuesFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.text",
"valuesFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.text",
"prepandTextColor": "#mdwTheme:vis-materialdesign.0.colors.value.prepand",
"prepandTextFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.prepand",
"prepandTextFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand",
"appendTextColor": "#mdwTheme:vis-materialdesign.0.colors.value.append",
"appendTextFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.append",
"appendTextFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.append",
"image": "",
"imageColor": "#mdwTheme:vis-materialdesign.0.colors.value.icon",
"iconPosition": "left",
"effectFontColor": "#00e640",
"effectFontSize": "",
"effectDuration": "500",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"valueLabelUnit": "W",
"calculate": "",
"condition": "",
"textOnTrue": "",
"textOnFalse": "",
"changeEffectEnabled": false,
"visibility-oid": "linkeddevices.0.Energiespeicher.Batterie.Leistung",
"name": "Batterie - Leistung "
},
"style": {
"left": "calc(25% + 10px)",
"top": "390px",
"width": "100px",
"height": "29px",
"z-index": "2"
},
"widgetSet": "materialdesign"
},
"e00013": {
"tpl": "tplVis-materialdesign-Card",
"data": {
"g_fixed": true,
"g_visibility": false,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "==",
"visibility-val": 1,
"visibility-groups-action": "hide",
"cardLayout": "Basic",
"cardStyle": "default",
"showTitle": false,
"titleLayout": "20",
"titleFontFamily": "",
"showSubTitle": false,
"subtitleLayout": "",
"subTitleFontFamily": "",
"showText": "true",
"textFontSize": "",
"textFontFamily": "",
"refresh_oid_delay": "100",
"refresh_animation_duration": "150",
"colorBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background",
"colorTitleSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_title",
"colorTextSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_body",
"colorTitle": "#mdwTheme:vis-materialdesign.0.colors.card.title",
"colorSubtitle": "#mdwTheme:vis-materialdesign.0.colors.card.subTitle",
"colorBody": "#mdwTheme:vis-materialdesign.0.colors.card.text",
"clickType": "none",
"controlType": "link",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"title": "",
"html": "
"showScrollbar": false,
"name": "Haus - Card "
},
"style": {
"left": "calc(50% + 5px)",
"top": "430px",
"z-index": "1",
"width": "calc(50% - 15px)",
"height": "120px"
},
"widgetSet": "materialdesign"
},
"e00014": {
"tpl": "tplVis-materialdesign-Progress",
"data": {
"oid": "nothing_selected",
"g_fixed": true,
"g_visibility": true,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "!=",
"visibility-val": "0",
"visibility-groups-action": "hide",
"progressRounded": false,
"colorProgressBackground": "#mdwTheme:vis-materialdesign.0.colors.progress.track_background",
"colorProgress": "#mdwTheme:vis-materialdesign.0.colors.progress.track",
"colorOne": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition1",
"colorTwo": "#mdwTheme:vis-materialdesign.0.colors.progress.track_condition2",
"showValueLabel": false,
"valueLabelStyle": "progressPercent",
"textColor": "#mdwTheme:vis-materialdesign.0.colors.progress.text",
"textFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.progress.text",
"textFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.progress.text",
"textAlign": "end",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"progressIndeterminate": true,
"visibility-oid": "linkeddevices.0.Energiespeicher.Haus.Leistung",
"reverse": false,
"progressRotate": "yes",
"name": "Haus - Progress IN "
},
"style": {
"left": "calc(75% - 2px)",
"top": "380px",
"width": "4px",
"height": "50px",
"z-index": "1"
},
"widgetSet": "materialdesign"
},
"e00015": {
"tpl": "tplVis-materialdesign-value",
"data": {
"oid": "linkeddevices.0.Energiespeicher.Haus.Leistung",
"g_fixed": true,
"g_visibility": true,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "!=",
"visibility-val": "0",
"visibility-groups-action": "hide",
"targetType": "auto",
"textAlign": "start",
"valuesFontColor": "#mdwTheme:vis-materialdesign.0.colors.value.text",
"valuesFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.text",
"valuesFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.text",
"prepandTextColor": "#mdwTheme:vis-materialdesign.0.colors.value.prepand",
"prepandTextFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.prepand",
"prepandTextFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand",
"appendTextColor": "#mdwTheme:vis-materialdesign.0.colors.value.append",
"appendTextFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.value.append",
"appendTextFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.value.append",
"image": "",
"imageColor": "#mdwTheme:vis-materialdesign.0.colors.value.icon",
"iconPosition": "left",
"effectFontColor": "#00e640",
"effectFontSize": "",
"effectDuration": "500",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"valueLabelUnit": "W",
"calculate": "",
"condition": "",
"textOnTrue": "",
"textOnFalse": "",
"changeEffectEnabled": false,
"visibility-oid": "linkeddevices.0.Energiespeicher.Haus.Leistung",
"name": "Haus - Leistung "
},
"style": {
"left": "calc(75% + 10px)",
"top": "390px",
"width": "100px",
"height": "29px",
"z-index": "2"
},
"widgetSet": "materialdesign"
},
"e00016": {
"tpl": "tplVis-materialdesign-Card",
"data": {
"g_fixed": true,
"g_visibility": false,
"g_css_font_text": false,
"g_css_background": false,
"g_css_shadow_padding": false,
"g_css_border": false,
"g_gestures": false,
"g_signals": false,
"g_last_change": false,
"visibility-cond": "==",
"visibility-val": 1,
"visibility-groups-action": "hide",
"cardLayout": "Basic",
"cardStyle": "default",
"showTitle": "true",
"titleLayout": "#mdwTheme:vis-materialdesign.0.fontSizes.card.title",
"titleFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.card.title",
"showSubTitle": "true",
"subtitleLayout": "#mdwTheme:vis-materialdesign.0.fontSizes.card.subTitle",
"subTitleFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.card.subTitle",
"showText": "true",
"textFontSize": "#mdwTheme:vis-materialdesign.0.fontSizes.card.text",
"textFontFamily": "#mdwTheme:vis-materialdesign.0.fonts.card.text",
"refresh_oid_delay": "100",
"refresh_animation_duration": "150",
"colorBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background",
"colorTitleSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_title",
"colorTextSectionBackground": "#mdwTheme:vis-materialdesign.0.colors.card.background_body",
"colorTitle": "#mdwTheme:vis-materialdesign.0.colors.card.title",
"colorSubtitle": "#mdwTheme:vis-materialdesign.0.colors.card.subTitle",
"colorBody": "#mdwTheme:vis-materialdesign.0.colors.card.text",
"clickType": "none",
"controlType": "link",
"signals-cond-0": "==",
"signals-val-0": true,
"signals-icon-0": "/vis/signals/lowbattery.png",
"signals-icon-size-0": 0,
"signals-blink-0": false,
"signals-horz-0": 0,
"signals-vert-0": 0,
"signals-hide-edit-0": false,
"signals-cond-1": "==",
"signals-val-1": true,
"signals-icon-1": "/vis/signals/lowbattery.png",
"signals-icon-size-1": 0,
"signals-blink-1": false,
"signals-horz-1": 0,
"signals-vert-1": 0,
"signals-hide-edit-1": false,
"signals-cond-2": "==",
"signals-val-2": true,
"signals-icon-2": "/vis/signals/lowbattery.png",
"signals-icon-size-2": 0,
"signals-blink-2": false,
"signals-horz-2": 0,
"signals-vert-2": 0,
"signals-hide-edit-2": false,
"lc-type": "last-change",
"lc-is-interval": true,
"lc-is-moment": false,
"lc-format": "",
"lc-position-vert": "top",
"lc-position-horz": "right",
"lc-offset-vert": 0,
"lc-offset-horz": 0,
"lc-font-size": "12px",
"lc-font-family": "",
"lc-font-style": "",
"lc-bkg-color": "",
"lc-color": "",
"lc-border-width": "0",
"lc-border-style": "",
"lc-border-color": "",
"lc-border-radius": 10,
"lc-zindex": 0,
"class": "my-card-container-relative",
"showScrollbar": true
},
"style": {
"left": "",
"top": "",
"height": "600px",
"z-index": "0"
},
"widgetSet": "materialdesign"
}
},
"name": "Energie_2",
"filterList": []
}
```
# Informations
## used libraries
The adapter uses the following libraries:
* [Google material components for the web](https://github.com/material-components/material-components-web)
* [Vuetify](https://github.com/vuetifyjs/vuetify)
* [chartjs](https://www.chartjs.org/)
* [round-slider from thomasloven](https://github.com/thomasloven/round-slider)
* [Material Design Icons](https://materialdesignicons.com/)
## Changelog
### __WORK IN PROGRESS__
* (Scrounger) JSON Chart Widget: method to use css color variables added
* (Scrounger) Pie Chart Widget: method to use css color variables added
* (Scrounger) Bar Chart Widget: method to use css color variables added
* (Scrounger) IconList Widget: sub text color activ added
* (Scrounger) css default color variables added
* (Scrounger) Icon Button Slider Widget added
* (Scrounger) Button Toggle Widgets: bug fix for state on runtime load
* (Scrounger) Value Widget: bug fix for show unit only if result is of type number
* (Scrounger) Value Widget: bug fix for data ovveride
* (Scrounger) IconList Widget: option to set minimal width for single item added
* (Scrounger) IconList Widget: header added
* (Scrounger) IconList Widget: color options added
* (Scrounger) IconList Widget: added option for color and text of status bar if state is active
* (Scrounger) List Widget: main header added
* (Scrounger) List Widget: events bug fix
* (darkiop) documentation updated ([#PR179](https://github.com/Scrounger/ioBroker.vis-materialdesign/pull/179))
* (Scrounger) Top App Bar Widget: fixed bugs found by sentry
* (Scrounger) Top App Bar Widget: icon color bug fix if using json string
* (Scrounger) Top App Bar Widget: selected item icon color option added
* (Scrounger) Round Slider Widget: control bug fix
* (Scrounger) Grid Views Widget: Bug fix for nested grid views widgets
* (Scrounger) Masonry Views Widget: Bug fix for nested masonry views widgets
* (Scrounger) Progress Widget: striped distance option added
* (Scrounger) Advanced View in Widget widget added
* (Scrounger) Advanced View in Widget 8 widget added
* (Scrounger) Dialog Widget: background color bug fix on close animation
* (Scrounger) Dialog Widget: option added to show a save button and write a value to a datapoint
* (Scrounger) HTML Widget: bug fix for wrong type ([#182](https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/182))
* (Scrounger) support for base64 images added
* (Scrounger) Material Design Icons updated to v6.6.96
* (Scrounger) bug fix for VIS Editor dev values
### 0.5.9 (2021-06-13)
* (Scrounger) Top App Bar Widget: option added to define navigation items per JSON String [Details see documentation!](https://github.com/Scrounger/ioBroker.vis-materialdesign#top-app-bar)
* (Scrounger) Top App Bar Widget: option added to define an id per item
* (Scrounger) fixed bugs found by sentry
### 0.5.8 (2021-06-09)
* (Scrounger) Top App Bar Widget: new layout 'auto' added - change between modal and permanent layout depending on screen resolution. [Details see documentation!](#layout-auto)
* (Scrounger) Top App Bar Widget: option added to set value on click at item that toggle submenu
* (Scrounger) IconList Widget: option added to set used space per row for every items
* (Scrounger) IconList Widget: option added to set visibility condition for every items ([#118](https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/118))
* (Scrounger) IconList Widget: bug fix for applying active color ([#176](https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/176))
* (Scrounger) Grid Widget: bug fix for visibility condition
* (Scrounger) Masonry Widget: bug fix for visibility condition
### 0.5.7 (2021-05-26)
* (Scrounger) Top App Bar Widget: color option for menu icon added ([#171](https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/171))
* (Scrounger) Top App Bar Widget: Permission group - option to deactivate default value added ([#173](https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/173))
* (Scrounger) iconList Widget: bug fix for active state at diffrent types ([#168](https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/168))
* (Scrounger) iconList Widget: layout bug fix for radius of buttons ([#174](https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/174))
* (Scrounger) list Widget: bug fix for theme properties
* (Scrounger) select Widget: bug fix for long text ([#169](https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/169))
* (Scrounger) fixed bugs found by sentry
### 0.5.6 (2021-05-07)
* (Scrounger) Html Widgets: escaping bug fix
* (Scrounger) iconList: layout bug fix
### 0.5.5 (2021-04-21)
* (Scrounger) adapter settings bug fixes
* (Scrounger) icon buttons: color bug fixes
* (Scrounger) Fixing bugs found by sentry
## License
MIT License
Copyright (c) 2021 Scrounger
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.