ioBroker.vis-materialdesign

Tests::

Material Design Widgets for IoBroker VIS

ioBroker Material Design Widgets are based on Google's material design guidelines. The adapter uses the following libraries:

Online Example Project

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

VIS Runtime (alternativ)
VIS Editor (alternativ)

Practical examples

Questions and answers about the widgets

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

German threads

Supported Browser

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 VIS App

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

Material Design Icons and Images

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!

Buttons

Button Toggle

Icon Button

Card

List

IconList

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

JSON-String: object id

Object Id of datapoint with JSON string. The JSON string must have the following format:


[
	{
		"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"
	}
]

Property listType can have the following values:
text, buttonState, buttonToggle, buttonToggleValueTrue, buttonToggleValueFalse, buttonNav, buttonLink

Progress

Slider

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

Checkbox

Switch

Input

Text input

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	Method of data of menu: 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 following format: `[ { "text": "text 0", "subText": "sub 0", "value": "val0", "icon": "account-cancel" }, { "text": "text 1", "subText": "sub 1", "value": "val1", "icon": "/vis/icon/info.png", "iconColor": "red" }, { "text": "text 2", "subText": "sub 2", "value": "val2", "icon": "facebook-workplace", "iconColor": "green" } ]`
	value list	Method of data of menu: value list Define the number of menu entries by adding values that will be set to the datapoint. Entries must be separeted by comma
	value list: labels	Method of data of menu: value list Define the related labels of the values. Entries must be separeted by comma
	value list: labels	Method of data of menu: value list Define the related icons of the values. Entries must be separeted by comma. You can use image path or Material Design Icons name

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	Method of data of menu: 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 following format: `[ { "text": "text 0", "subText": "sub 0", "value": "val0", "icon": "account-cancel" }, { "text": "text 1", "subText": "sub 1", "value": "val1", "icon": "/vis/icon/info.png", "iconColor": "red" }, { "text": "text 2", "subText": "sub 2", "value": "val2", "icon": "facebook-workplace", "iconColor": "green" } ]`
	value list	Method of data of menu: value list Define the number of menu entries by adding values that will be set to the datapoint. Entries must be separeted by comma
	value list: labels	Method of data of menu: value list Define the related labels of the values. Entries must be separeted by comma
	value list: labels	Method of data of menu: value list Define the related icons of the values. Entries must be separeted by comma. You can use image path or Material Design Icons name

Top App Bar with Navigation Drawer

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

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

Layout modal:

Layout permanent:

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

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.

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

Bar Chart

TODO

Pie Chart

TODO

Line History Chart:

Required Adapter: SQL, History or InfluxDb!

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. 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
	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

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
tooltip_text	ovveride text of tooltip	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_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	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

Table

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

Responsive Layout

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

Masonry Views

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

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

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)`

Grid Views

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

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

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

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.

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.

The Alerts widget requires a JSON string as object, which must be structured as follows:

[
       {
		"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": ""
	}
]

Screenshot	Setting	Description
	number of columns	define number of columns
	Object ID	Object must be a json string, which must be structured as described above
	max. Alerts	max number of Alerts that should be shown.

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

The Calendar widget requires a JSON string as object, which must be structured as follows:

[
	{
		"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"
	}
]

Only hex and rgba can be used as colors!

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

Screenshot	Setting	Description
	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

If you want to use the widget with the ical adapter, you can use the following script to convert the ical object to work with the widget.

// 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();

Changelog

0.3.9 (2020-05-20)

(Scrounger): List Widget: subscribe for nested oids and bindings bug fix
(Scrounger): Multi State Button Widgets added
(Scrounger): checkbox: lock option added
(Scrounger): switch: lock option added
(Scrounger): bar & pie chart: option for distance between legends points added
(Scrounger): bar, pie & json chart: tooltip title and value override options added
(Scrounger): pie chart: orientation change bug fix
(Scrounger): json & line history chart: stepped line option added
(Scrounger): table: option for fixed table headline added
(Scrounger): charts: newline bug fixed
(Scrounger): charts: tooltip decimal places bug fix

0.3.6 (2020-04-29)

Input, Select, Autocomplete: default input controll buttons removed
vuetify library updated to v2.2.26
JSON Chart: auto mode to show values added
Line History Chart: auto mode to show values added
Bar Chart: auto mode to show values added
Pie Chart: auto mode to show values added
Button State: lock icon input field bug fix

0.3.4 (2020-04-27)

Select / AutoComplete Widget: Breaking Changes !!! separator for valuelist changed from comma to semicolon
Pie Chart Widget: support for json string implemented
Browser Edge: gradient color bug fix

0.3.3

(Scrounger): css file bug fixes
(Scrounger): Material Design Icons library updated to v5.1.45

0.3.2

(Scrounger): Select & Autocomplete Widget: color option for menu items added
(Scrounger): setState type bug fixes
(Scrounger): small bug fixes

0.3.0

(Scrounger): JSON Chart: error handling added
(Scrounger): IconList: error handling added
(Scrounger): Line History chart: debug mode & error handling added
(Scrounger): Select Widget: handling for object with mulitstate added
(Scrounger): Autocomplete Widget: handling for object with mulitstate added
(Scrounger): bug fixes

0.2.76

(Scrounger): deprecated Widgets Slider, TopAppBar, Select, Column View removed
(Scrounger): JSON Chart Widget added
(Scrounger): Line Chart Widget: starttime by object added
(Scrounger): Bar Chart Widget: support for json string oid added
(Scrounger): Chart Widget: min / max decimals for axis, labels and tooltip added
(Scrounger): Masonry View Widget: sort order added
(Scrounger): Grid View Widget: sort order added
(Scrounger): new Dialog Widget added
(Scrounger): bug fixes

0.2.66

(Scrounger): IconListWidget: button layout options added
(Scrounger): IconListWidget: lock option for toggle and state function added
(Scrounger): Alert Widget: visibility depending on resoltuion added
(Scrounger): Button Widgets: lock option for toggle and state button added
(Scrounger): Material Design Icon Widget added
(Scrounger): bug fixes

0.2.62

(Scrounger): List Widget: binding bug fix
(Scrounger): Select Widget: number bug fix
(Scrounger): IconList Widget: object id for json string added, html input field removed from editor
(Scrounger): Input Widget: clear & null bug fix
(Scrounger): bug fixes

0.2.59

(Scrounger): Buttons Toggle: option for push function added
(Scrounger): IconList Widget added
(Scrounger): Alerts Widget: show dummy message in Editor
(Scrounger): Grid Views Widget added
(Scrounger): List Widget: color option for switch added
(Scrounger): List Widget: dynamic generate item using json string
(Scrounger): Masonry Views Widget: visible condition added
(Scrounger): Calendar Widget added
(Scrounger): translation added
(Scrounger): VIS Editor: Link to Forum widget threads added
(Scrounger): bug fixes

0.2.49

(Scrounger): new Select Widget added
(Scrounger): Autocomplete Widget added
(Scrounger): Alerts Widget added
(Scrounger): use of Material Design Icons as images added
(Scrounger): Perfomrance optimized
(Scrounger): Input Widget added
(Scrounger): Masonry Views Widget: settings options for mobile phone and tablet added
(Scrounger): Masonry Views Widget: another chrome bug fix, option for distance between views added
(Scrounger): Round Slider: vibrate on mobil devices added
(Scrounger): bug fixes

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.

Name		Name	Last commit message	Last commit date
Latest commit History 1,046 Commits
.github		.github
admin		admin
doc/en		doc/en
examples		examples
lib		lib
test		test
widgets		widgets
.commitmessage		.commitmessage
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmignore		.npmignore
.travis.yml		.travis.yml
LICENSE		LICENSE
README.md		README.md
gulpfile.js		gulpfile.js
io-package.json		io-package.json
package-lock.json		package-lock.json
package.json		package.json

License

jobe451/ioBroker.vis-materialdesign

Folders and files

Latest commit

History

Repository files navigation

ioBroker.vis-materialdesign

Material Design Widgets for IoBroker VIS

Online Example Project

Practical examples

Questions and answers about the widgets

Supported Browser

Supported Browser for vibrate on mobil devices function

ioBroker VIS App

Material Design Icons and Images

Buttons

Button Toggle

Icon Button

Card

List

IconList

Progress

Slider

Round Slider

Checkbox

Switch

Input

Text input

Select

Autocomplete

Top App Bar with Navigation Drawer

Layout modal:

Layout permanent:

Submenu

Charts

Bar Chart

Pie Chart

Line History Chart:

JSON Chart

General

graph

graph line chart spfeicifc

graph bar chart spfeicifc

graph y-Axis

gradientColor

Chart with time axis

values with timestamp

x-axis settings for data with timestamp

Table

Input Data

internal object binding

Responsive Layout

Masonry Views

Grid Views

Alerts

Calendar

Changelog

0.3.9 (2020-05-20)

0.3.6 (2020-04-29)

0.3.4 (2020-04-27)

0.3.3

0.3.2

0.3.0

0.2.76

0.2.66

0.2.62

0.2.59

0.2.49

0.2.32

0.2.30

0.2.22

0.2.9

0.2.7

0.2.4

0.2.0

0.1.5

0.1.2

0.1.1

0.1.0

0.0.7

Packages