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 uses the following libraries:

Online Example Project

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

Supported Browser

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

Supported Browser for vibrate on mobil devices function

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

ioBroker App

not working, needs to be implemneted by app, see https://github.com/ioBroker/ioBroker.vis.cordova

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

Switch

Logo

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

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

Logo

Layout permanent:

Logo

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

Submenu

Logo

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

Screenshot Setting Description

count of sub menus[x] Define if the navigation item has submenus and the count of submenus.

Screenshot	Setting	Description
	count of sub menus[x]	Define if the navigation item has submenus and the count of submenus.
	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

Column Views

Column 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 cereate a responsive layout (one layout for desktop, tablet and mobil)

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

Logo

Screenshot	Setting	Description
	number of columns	define number of columns
	minmal width	minimal width of each column. For example use the width of the resolution of a mobil device
	views in column[x]	Define the views that should be shown in this column. Multiple views must be separated by '\|'
	height of views in column[x]	Define the height of each view in the column. Multiple heights must be separated by '\|'

Changelog

0.2.32

(Scrounger): Editor translation bug fix
(Scrounger): Masonry Views Widget: alignment bug fix for chrome
(Scrounger): Line History Chart Widget: layout option for line values added
(Bluefox): Russian translation revised

0.2.30

(Scrounger): Masonry Views Widget added
(Scrounger): Select Widget: background color bug fix
(Scrounger): Column Views Widget added
(Scrounger): Button Widgets: icon height bug fix
(Scrounger): Vuetify API bug fix
(Scrounger): Chart Widgets: localization added
(Scrounger): Line History Chart Widget: color options for each y-axis added
(Scrounger): Line History Chart Widget: x-axis boundary options added
(Scrounger): Line History Chart Widget: x-axis scaling bug fix
(Scrounger): TopAppBar Widget: view in widget 8 removed -> old TopAppBar Widget will be removed in version 0.3.x
(Scrounger): bug fixes

0.2.22

(Scrounger): library material-components-web updated to v4.0.0
(Scrounger): Table: support for objects added
(Scrounger): List: layout checkbox disabled added
(Scrounger): vuetify slider added -> old slider will be removed in version 0.3.x
(Scrounger): vuetify library v2.1.15 added
(Scrounger): bug fixes

0.2.9

(Scrounger): translations added
(Scrounger): select Widget: color options added
(Scrounger): slider Widget: color options added
(Scrounger): bug fixes

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.