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:

• Google material components for the web
• Vuetify
• chartjs
• round-slider from thomasloven
• Material Design Icons

Online Example Project

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

• VIS Runtime (alternativ)
• VIS Editor (alternativ)

Practical examples

• Weather View
• Skript Status
• Adapter Status
• UniFi Netzwerk Status

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

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

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

graph

graph line chart spfeicifc

graph bar chart spfeicifc

graph y-Axis

gradientColor

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

x-axis settings for data with timestamp

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

Control Elements

To generate a control element (button, checkbox, etc.) in cell of the table you must create an object instead of a string.

[
    {
        "control": {
            "type": "buttonToggle",
            "oid": "0_userdata.0.MDW.Buttons.bool",
            "buttonText": " off",
            "buttonTextTrue": " on",
            "image": "home",
            "imagePosition": "left",
            "colorBgTrue": "green",
            "lockEnabled": "true"
        },
        "img": "/vis.0/myImages/erlebnis_50.png",
        "name": "Empire",
        "betriebszeit": "4h 06m",
        "funk": "5G"
    }, {
        "img": "/vis.0/myImages/erlebnis_100.png",
        "control": {
            "type": "buttonToggle",
            "oid": "0_userdata.0.MDW.Buttons.bool",
            "buttonText": "off",
            "buttonTextTrue": "on",
            "image": "home",
            "colorBgTrue": "green"
        },
        "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"
    }
]

Generate by Editor

You can very easy generate controls by using the editor. Just create a supported Widget, configure it over the editor and export the settings by copy and paste to the table wigdet. Take a look at the animated screenshot below:

General

Button Toggle

Button Toggle Vertical

Button Toggle Icon

Button State

Button State Vertical

Button State Icon

Progress

Progress Circular

Slider

Slider Round

Switch

Checkbox

Textfield

Select

Autocomplete

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.

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
• ical Adapter

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)
	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 to understand how it works.

Screenshot	Setting	Description
	Depending on the width of the widget, defined from which width of the widget the rules for column span of the individual views[x] can be applied and the distance between the views. The settings can be set independently for portrait and landscape format. To find out the width of the resolution for the different devices, activate the Resolution Assistant under the common settings.
	Define the column span of the view depending of the current width resolution rule. You can also specify here whether a view should only be displayed at a resolution higher or lower than a defined value or whether it should be visible via a object id.
	height of view[x]	Here you can specify the height of the view used. If you want the height to adjust variably to the view, then this input must be empty and for the widget with the highest height in the view the position must be set to relative, see screenshot:

Alerts

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

WORK IN PROGRESS

0.3.13 (2020-05-29)

• (Scrounger): Multi State Button Widgets: delay option added
• (Scrounger): Table Widget: option to add ohter Widgets to table added
• (Scrounger): Slider & Round Slider Widget: option to show value in percent added
• (Scrounger): Sentry error handling improved
• (scrounger): Buttons: click bug fix
• (scrounger): MaterialDesingIcons: extension bug fix
• (Scrounger): small bug fixes

0.3.11 (2020-05-24)

• (Scrounger): Sentry added
• (Scrounger): Select & Autocomplete Widget: vibrate on mobil devices added
• (Scrounger): List Widget: vibrate on mobil devices added
• (Scrounger): Masonry & Grid Widget: height changed to optional to support widgets using relative position
• (Scrounger): Progress Widget revised
• (Scrounger): Progress Circular Widget added
• (Scrounger): bug fixes

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

Copyright (c) 2020 Scrounger scrounger@gmx.net

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.