Package Exports

iobroker.vis-materialdesign

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (iobroker.vis-materialdesign) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Logo

ioBroker.vis-materialdesign

stable version

Tests::

Material Design Widgets for IoBroker VIS

Material Design Widgets based on Google material components web library.

Charts based on chartjs library.

Supported Browser

https://github.com/material-components/material-components-web/blob/master/docs/supported-browsers.md

Button Toggle

Logo

Card

Logo

Icon Button

List

Logo

Progress

Logo

Slider

Logo

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

Screenshot	Setting	Description
	initDelay	If the slider is not visible or operable after loading the runtime, then this value must be increased. Entry is made in milliseconds. For example, increase by 250 steps until the slider works.

Round Slider

Logo

Based on round-slider from thomasloven

Switch

Logo

Information:

Top App Bar use the view in widget 8 of VIS Adapter - configuration is the same, search the forum for working examples.
App Bar position is hardcoded and always appears in the upper left corner. Only width and height are adjustable. In the editor you can move the widget, but these settings will not be applied!
In the editor, effects such as scrolling, etc. are not displayed correctly or behave differently!
Checkbox "persistent" must be activated!
oid must be set to a datapoint from typ number (like the view in widget 8 of VIS Adapter)

Logo

Layout dismissible:

Logo

Layout permanent:

Logo

Submenu

Logo

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

Screenshot Setting Description

views[x] To activate submenu, you have to add multiple views seperated with '|' into the view field, see screenshots

Screenshot	Setting	Description
	views[x]	To activate submenu, you have to add multiple views seperated with '\|' into the view field, see screenshots
	label[x]	To change the text of the items, you have to put a json object into the label field with the index of the view field. Example: `{"itemText": "Item with Subitems", "subItems": ["subItem1", "subItem2"]}` Result: see screenshot
	icon[x]	To change the icons of the items, you have to put a json object into the icons field with the index of the view field. Example: `{"itemImage": "/icons-material-svg/hardware/ic_computer_48px.svg", "subItems": ["/vis/widgets/materialdesign/img/IoBroker_Logo.png", "/icons-material-svg/action/ic_android_48px.svg"]}` Result: see screenshot

label[x]

To change the text of the items, you have to put a json object into the label field with the index of the view field.
Example:

{"itemText": "Item with Subitems", "subItems": ["subItem1", "subItem2"]}

Result: see screenshot

icon[x]

To change the icons of the items, you have to put a json object into the icons field with the index of the view field.
Example:

{"itemImage": "/icons-material-svg/hardware/ic_computer_48px.svg", "subItems": ["/vis/widgets/materialdesign/img/IoBroker_Logo.png", "/icons-material-svg/action/ic_android_48px.svg"]}

Result: see screenshot

Charts

Line History Chart:

Required Adapter: SQL, History or InfluxDb!

Logo

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

Screenshot	Setting	Description
	adapter instance	Instance for the sql or history adapter
	aggregation	link
	max. number of data points to be displayed	Number of maximum data points to display
	time interval between the data points in [s]	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
	controlling time interval using object	Id of a datapoint to change the time interval of the chart. The data point must be a string and may contain the linked values 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
	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

Table

Logo

Input Data

Input data must be a json array of objects, example:

[
{"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"},
{"img":"/vis.0/myImages/erlebnis_25.png","name":"MusicCast - Esszimmer (WX-030)","betriebszeit":"1h 57m","funk":"2G","ip":"10.0.0.4"},
{"img":"/vis.0/myImages/erlebnis_75.png","name":"MusicCast - K�che (ISX-18D)","betriebszeit":"4h 10m","funk":"2G","ip":"10.0.0.5"}
]

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.

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

Changelog

0.2.7

(Scrounger): List Widget: types switch readonly, checkbox readonly & button toggle readonly added
(Scrounger): Line History Chart Widget: bug fix for hide yaxis by legend click if common axis is set
(Scrounger): Line History Chart Widget: option to append text to yAxis values added
(Scrounger): Switch Widget: color options added
(Scrounger): chartjs lib updated to v2.9.3
(Scrounger): round-slider: lib updated to v0.3.7
(Scrounger): Table Widget: wordwrap & width option added
(Scrounger): Chart Widgets: option for background color of diagram area added

0.2.4

(Scrounger): Round Slider Widget bug fixes
(Scrounger): Line History Chart Widget: null value bug fix
(Scrounger): Line History Chart Widget: tooltip bug fix
(Scrounger): Line History Chart Widget: editor translation improved

0.2.0

(Scrounger): Round Slider Widget added
(Scrounger): Icon Button Adition Widget added
(Scrounger): Button Adition Widget added
(Scrounger): Line History Chart Widget added
(Scrounger): Table Widget added
(Scrounger): Dialog iFrame Widget added
(Scrounger): Dialog View Widget added
(Scrounger): Select Widget added
(Scrounger): colorSchemes for Charts added
(Scrounger): bug fixes

0.1.5

(Scrounger): bar chart added
(Scrounger): pie chart added
(Scrounger): bug fixes

0.1.2

(Scrounger): list: right label option added
(Scrounger): slider: value text option for lees or greather than added
(Scrounger): switch: support for non boolean values added
(Scrounger): checkbox: support for non boolean values added
(Scrounger): buttons: image position option added
(Scrounger): toggle buttons: support for non boolean values added
(Scrounger): topAppBar: z-Index added
(Scrounger): haptic feedback (vibration) option for mobil browser added
(Scrounger): editor text fields changed to html
(Scrounger): mdc-typography font styles added
(Scrounger): bug fixes

0.1.1

(Scrounger): bug fixes

0.1.0

(Scrounger): Top App Bar Submenu added
(Scrounger): List added
(Scrounger): Button vertical State, Link, Nav added
(Scrounger): Icon Button State, Link, Nav added
(Scrounger): initialize slider bug fixes
(Scrounger): moved hard coded styling options to css
(Scrounger): styling options extended
(Scrounger): bug fixes

0.0.7

(Scrounger): Top App Bar Layouts added
(Scrounger): Top App Bar customizing options added
(Scrounger): Top App Bar Navigation Drawer backdrop layout added
(Scrounger): Button State added
(Scrounger): Button Link added

0.0.6

(Scrounger): Top App Bar with Navigation Drawer added
(Scrounger): Checkbox added
(Scrounger): bug fixes

0.0.5

(Scrounger): icon button Toggle added
(Scrounger): color pressed for buttons added
(Scrounger): Slider bug fix & label for value <= min / >= max added
(Scrounger): translation added

0.0.4

(Scrounger): cards added

0.0.3

(Scrounger): progress added

0.0.2

(Scrounger): slider vertical added
(Scrounger): switch added
(Scrounger): button toggle added

0.0.1

(Scrounger) initial release

License

MIT License

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.