• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

Scrounger/ioBroker.vis-materialdesign: ioBroker Material Design Widgets are base ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

Scrounger/ioBroker.vis-materialdesign

开源软件地址(OpenSource Url):

https://github.com/Scrounger/ioBroker.vis-materialdesign

开源编程语言(OpenSource Language):

JavaScript 80.6%

开源软件介绍(OpenSource Introduction):

Logo

ioBroker.vis-materialdesign

stable version NPM version Number of Installations Downloads

NPM

Material Design Widgets for IoBroker VIS

paypal

ioBroker Material Design Widgets are based on Google's material design guidelines


Table of Content

General

Online Example Project

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

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

Supported Browser

I officially support the last two versions of every major browser. Specifically, i test on the following browsers:

  • Firefox on Windows and Linux
  • Chrome on Android, Windows, and Linux

Supported Browser for vibrate on mobil devices function

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

ioBroker VIS App

latest version needs to be implemented by the app, see https://github.com/ioBroker/ioBroker.vis.cordova. I do not use the app and do not test on it either

Adapter settings

Starting with version 0.4.0 there is a settings page for the adapter. You can find it under Instances in the user interface of the admin adapter

General

Logo

setting description
Documentation Links to documentation to help you configure the widgets
Generate global script Create a global script for the Javascript Script Engine with all theme data points. This allows to use colors, fonts and font sizes comfortably in scripts.
Sentry use Sentry libraries to automatically report exceptions and code errors anonymously to the developers. For more details and for information how to disable the error reporting see Sentry-Plugin Documentation!

Theme Editor

With the help of the Theme Editor you can centrally set colors, fonts and font sizes for all widgets via the adapter settings. For each widget datapoints (see screenshot below) are created with the set values. This makes it also possible to use these settings in other widgets (not Material Design Widgets) via bindings.

Datapoint structure

Logo

Theme Settings

Logo

Every settings page for colors, colors dark, font and font sizes look likes show in the screenshot above.

Standard colors / fonts /font sizes can be defined in the upper area. These standard colors / fonts /font sizes can then be assigned to the individual widgets using the buttons in the table. If you change the default colors / fonts /font sizes, it will also change for all widgets that use this colors / fonts /font sizes. Additionally, it is possible to assign your own colors / fonts /font sizes to the widgets, independent of the standard colors.

For colors there are two themes - light theme and dark theme. With the datapoint vis-materialdesign.0.colors.darkTheme you can switch between the two themes. For example this datapoint can be used in a script to switch between lights and dark colors on sunrise and sunset.

VIS Editor (Restore / update old Widgets)

Logo

In the VIS Editor you will find a button use theme for each widget. With this button you can reset the widgets to the use of the themes. That means if you have changed colors, fonts or font sizes, you can reset them with this button.

With the help of this button it is also possible to update your widgets from versions before 0.4.0 to use the themes.

Change Datapoint Binding for Material Design Widgets

Logo

If you would like to change the using of others colors that are defined for other widgets, you can copy the datapoint binding by pressing the button with the material design icon. Just paste this in any color, fonts or font sizes field of a material design widget. For example a color "state binding" looks like #mdwTheme:vis-materialdesign.0.colors.card.background

Use Binding for non Material Design Widgets

Logo

In the adapter settings you can copy the binding command to the clipboard by clicking on the button with iobroker icon. This binding can then be used by copy and paste even for non Material Design Widgets. For example a color binding looks like {mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.card.background;dark:vis-materialdesign.0.colors.dark.card.background; mode === "true" ? dark : light}

Widgets

Material Design Icons and Images

Logo

Editor Settings

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

Screenshot Description
Some of the widgets support Material Design Icons library. You can pic up an icon from the list above or open the image picker by clicking the button on the right of the input field.

Image colors only applies to the material design icons, not to an image!

HTML Properties

The following properties can be used as HTML Widgets.

Property Description Type Values

Common
mdw-mdwIcon icon string
mdw-mdwIconSize icon size number
mdw-mdwIconColor icon color string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)
mdw-debug debug boolean false | true

HTML Properties - Example

<div class='vis-widget materialdesign-widget materialdesign-icon materialdesign-materialdesignicons-html-element'
	style='width: 50px; height: 50px; position: relative; display: flex; align-items: center;'
	mdw-mdwIcon='iobroker'
	mdw-mdwIconSize='30'
	mdw-mdwIconColor='#mdwTheme:vis-materialdesign.0.colors.material_design_icon.color'
	mdw-debug='true'
></div>

Buttons

Logo

Navigation

Editor Settings

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

Screenshot Setting Description
View to navigate name of view to navigate

HTML Properties

The following properties can be used as HTML Widgets.

Property Description Type Values
mdw-type Widget type string navigation_default

Common
mdw-buttonStyle button style string text | raised | unelevated | outlined
mdw-nav_view View to navigate views
mdw-vibrateOnMobilDevices vibrate on mobil devices [s] number
mdw-debug debug boolean false | true

labeling
mdw-buttontext Button text string
mdw-textFontFamily font string
mdw-textFontSize text size number
mdw-labelWidth text width number

colors
mdw-mdwButtonPrimaryColor primary color string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)
mdw-mdwButtonSecondaryColor secondary color string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)
mdw-mdwButtonColorPress color pressed string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)

icon
mdw-image Image string
mdw-imageColor image color string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)
mdw-iconPosition image position string left | right
mdw-iconHeight image height number
HTML Properties - Example
<div class='vis-widget materialdesign-widget materialdesign-button materialdesign-button-html-element'
	style='width: 100%; height: 100%; position: relative; padding: 0px;'
	mdw-type='navigation_default'
	mdw-buttonStyle='raised'
	mdw-nav_view='value'
	mdw-vibrateOnMobilDevices='50'
	mdw-buttontext=' Navigation'
	mdw-textFontFamily='#mdwTheme:vis-materialdesign.0.fonts.button.default.text'
	mdw-textFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text'
	mdw-mdwButtonPrimaryColor='#mdwTheme:vis-materialdesign.0.colors.button.default.primary'
	mdw-mdwButtonSecondaryColor='#mdwTheme:vis-materialdesign.0.colors.button.default.secondary'
	mdw-image='navigation'
	mdw-iconPosition='left'
></div>

Link

Editor Settings

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

Screenshot Setting Description
Link url to open
open in new window open link in new window / tab

HTML Properties

The following properties can be used as HTML Widgets.

Property Description Type Values
mdw-type Widget type string link_default

Common
mdw-buttonStyle button style string text | raised | unelevated | outlined
mdw-href Link url
mdw-openNewWindow open in new window boolean false | true
mdw-vibrateOnMobilDevices vibrate on mobil devices [s] number
mdw-debug debug boolean false | true

labeling
mdw-buttontext Button text string
mdw-textFontFamily font string
mdw-textFontSize text size number
mdw-labelWidth text width number

colors
mdw-mdwButtonPrimaryColor primary color string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)
mdw-mdwButtonSecondaryColor secondary color string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)
mdw-mdwButtonColorPress color pressed string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)

icon
mdw-image Image string
mdw-imageColor image color string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)
mdw-iconPosition image position string left | right
mdw-iconHeight image height number
HTML Properties - Example
<div class='vis-widget materialdesign-widget materialdesign-button materialdesign-button-html-element'
	style='width: 100px; height: 30px; position: relative; padding: 0px;'
	mdw-type='link_default'
	mdw-buttonStyle='raised'
	mdw-href='https://github.com/Scrounger/ioBroker.vis-materialdesign'
	mdw-openNewWindow='true'
	mdw-vibrateOnMobilDevices='50'
	mdw-buttontext=' Link'
	mdw-textFontFamily='#mdwTheme:vis-materialdesign.0.fonts.button.default.text'
	mdw-textFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text'
	mdw-mdwButtonPrimaryColor='#mdwTheme:vis-materialdesign.0.colors.button.default.primary'
	mdw-mdwButtonSecondaryColor='#mdwTheme:vis-materialdesign.0.colors.button.default.secondary'
	mdw-image='link'
	mdw-iconPosition='left'
></div>

State

Editor Settings

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

Screenshot Setting Description
value value to set

HTML Properties

The following properties can be used as HTML Widgets.

Property Description Type Values
mdw-type Widget type string state_default

Common
mdw-oid Object ID string
mdw-buttonStyle button style string text | raised | unelevated | outlined
mdw-value value string
mdw-vibrateOnMobilDevices vibrate on mobil devices [s] number
mdw-debug debug boolean false | true

labeling
mdw-buttontext Button text string
mdw-textFontFamily font string
mdw-textFontSize text size number
mdw-labelWidth text width number

colors
mdw-mdwButtonPrimaryColor primary color string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)
mdw-mdwButtonSecondaryColor secondary color string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)
mdw-mdwButtonColorPress color pressed string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)

icon
mdw-image Image string
mdw-imageColor image color string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)
mdw-iconPosition image position string left | right
mdw-iconHeight image height number

Locking
mdw-lockEnabled enable Locking boolean false | true
mdw-autoLockAfter auto Locking after [s] number
mdw-lockIcon icon string
mdw-lockIconSize icon size number
mdw-lockIconColor icon color string hex(#44739e), rgb(20, 50, 200), rgba(20, 50, 200, 0.5)
mdw-lockFilterGrayscale gray filter if locked number
HTML Properties - Example
<div class='vis-widget materialdesign-widget materialdesign-button materialdesign-button-html-element'
	style='width: 100%; height: 100%; position: relative; padding: 0px;'
	mdw-type='state_default'
	mdw-oid='0_userdata.0.number'
	mdw-buttonStyle='raised'
	mdw-value='22'
	mdw-vibrateOnMobilDevices='50'
	mdw-buttontext=' State'
	mdw-textFontFamily='#mdwTheme:vis-materialdesign.0.fonts.button.default.text'
	mdw-textFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text'
	mdw-mdwButtonPrimaryColor='#mdwTheme:vis-materialdesign.0.colors.button.default.primary'
	mdw-mdwButtonSecondaryColor='#mdwTheme:vis-materialdesign.0.colors.button.default.secondary'
	mdw-image='pencil'
	mdw-iconPosition='left'
	mdw-autoLockAfter='10'
	mdw-lockIconColor='#mdwTheme:vis-materialdesign.0.colors.button.lock_icon'
	mdw-lockFilterGrayscale='30'
></div>

Multi State

Editor Settings

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

Screenshot Setting

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap