[Neuer VIS-Adpater] Material Design Widgets

[Meistertr]

Der fully Browser greift auf Chrome zurück soweit ich weiß

[helfi9999]

@Meistertr kriege es nicht angezeigt obwohl ich 2 versch. Widgets eingebaut habe

[sigi234]

@helfi9999 sagte in [Neuer VIS-Adpater] Material Design Widgets:

@Meistertr kriege es nicht angezeigt obwohl ich 2 versch. Widgets eingebaut habe

Screenshot bitte.

[Scrounger]

@helfi9999 sagte in [Neuer VIS-Adpater] Material Design Widgets:

@dos1973 Ich hoffe das er noch was macht diesbezüglich

Sorry Leute, dass kann ich leider nicht.
Wie oben geschrieben nutze ich die Google material components web Bibliothek.
Die geben vor welche Browser unterstützt werden -> https://github.com/material-components/material-components-web/blob/master/docs/supported-browsers.md

Ihr könnt aber versuchen dort ein Issue zu erstellen.

[Home4.0]

Hallo @Scrounger ,

bis jetzt klappt alles bestens. (auch mit Fully)

Vielen Dank für die tollen Widgets....

Gruß

[helfi9999]

@Home4-0 welche Einstellung hast du beim Fully gemacht

[Home4.0]

@helfi9999 Ich habe nichts an den Einstellungen geändert.

(Android 6 und 7 mit Fully 1.35.2)

Gruß

[dos1973]

bei mir läuft er auch im Fully.
hat echt Potenzial, sieht sehr "schick" aus. Ich konnte alle auch die Slider reinziehen, konfigurieren und funktionieren auch. HUE->level

die Top Bar funktioniert zwar noch nicht, aber diese Menüführung wäre Klasse!

[Scrounger]

Hab die Top App Bar mit Navigationsleiste implementiert, auf basis des "view in widget 8" widget vom vis Adapter.

folgende wichtigen Infos dazu, weil die nur so funtkioniert:

• Position ist fix (hardcoded), d.h. die App Bar ist immer in der oberen linken Ecke. Man kann nur Höhe und Breite einstellen. Deshalb heißt sie ja auch Top App Bar
• Im Editor werden Effekte, wie scrollen, etc. nicht korrekt dargestellt.
• Checkbox 'persitent' (Dauernd) muss aktiviert sein.

Es gibt drei layouts:

1. modal:
   

2. dismissible:
   

3. permanent:
   

Falls noch weitere konfigurations optionen gewünscht werden, dann bitte hier posten oder ein issue bei github aufmachen.

Viel Spaß beim testen

[sigi234]

@dos1973 sagte in [Neuer VIS-Adpater] Material Design Widgets:

die Top Bar funktioniert zwar noch nicht, aber diese Menüführung wäre Klasse!

Wo ist die Top Bar? Ist das ein eigenes Widget?

[Scrounger]

@sigi234
Ja ist ein eigenes Widget.

[sigi234]

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

Falls noch weitere konfigurations optionen gewünscht werden, dann bitte hier posten oder ein issue bei github aufmachen.

Einer der Besten Adapter!

Wünsche:

• Navigationsleiste Trennlinien Farbe einstellbar

• Bei allen Farben transparent auswählbar

• Schriftart einstellbar

Danke vorerst.

[Glasfaser]

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

@sigi234
Ja ist ein eigenes Widget.

Bei mir sieht es so aus , das Widget " Top Bar " ist kaum zu erkennen ( Version 0.0.6 )
Ist das richtig so !?

( bei jedem Browser )

[Scrounger]

@sigi234

• Navigationsleiste Trennlinien Farbe einstellbar

Sachdienlicher Hinweise Mach ich rein

• Bei allen Farben transparent auswählbar

Geht schon, musst einfach 'transparent' im color feld schreiben oder 'rgba(0, 0, 0, 0.37)' dort reinschreiben

• Schriftart einstellbar

Geht auch schon, siehe "Listenelemente Schriftgröße"

Alternativ kann man mit html tags für jedes Listenelement eine eigen schriftgröße, Frabe, Fett, kursiv etc. definieren, Beispiel: '<font size="13"><i>Hallo</></font>'

[sigi234]

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

@sigi234

• Schriftart einstellbar

Geht auch schon, siehe "Listenelemente Schriftgröße"

Ups da habe ich mich Falsch ausgedrückt, ich meinte Font-Family

[Scrounger]

@sigi234
Achso das geht natürlich auch mit html tag, z.B. '<font face="verdana">Hallo</font>.
Aber stimmt ein Fled wo man das für alle Listenelemente setzen kann wäre natürlich komfortabler - schau ich mir an.

[sigi234]

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

@sigi234
Achso das geht natürlich auch mit html tag, z.B. '<font face="verdana">Hallo</font>.
Aber stimmt ein Fled wo man das für alle Listenelemente setzen kann wäre natürlich komfortabler - schau ich mir an.

Super, noch einige Fragen, wie kann ich die Menüfarbe (Hintergrund derzeit Blau) oben Links ändern?
Die Schriftfarbe bei den Navigationsleisten Überschrift ist Schwarz, kann ich die auch ändern? Ich glaube die ist mit den Trennlinien verbunden.

[heinzie]

@sigi234 sagte in [Neuer VIS-Adpater] Material Design Widgets:

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

@sigi234
Achso das geht natürlich auch mit html tag, z.B. '<font face="verdana">Hallo</font>.
Aber stimmt ein Fled wo man das für alle Listenelemente setzen kann wäre natürlich komfortabler - schau ich mir an.

Super, noch einige Fragen, wie kann ich die Menüfarbe (Hintergrund derzeit Blau) oben Links ändern?
Die Schriftfarbe bei den Navigationsleisten Überschrift ist Schwarz, kann ich die auch ändern? Ich glaube die ist mit den Trennlinien verbunden.

@Scrounger

Könntest Du vielleicht einmal deinen aktuellen Stand als export zur Verfügung stellen. Stehe da irgendwie noch auf dem Schlauch, mit einem Beispiel ist das immer wesentlich einfacher

[Scrounger]

@sigi234
Noch gar nicht Habs grad hinzugefügt, lad dir das aktuelle git rep.
Weiter hab ich noch zwei neue Layouts für die AppBar hinzugfeügt

short:

dense (schmale AppBar):

@heinzie

Spoiler

[{"tpl":"tplVis-materialdesign-Drawer","data":{"oid":"javascript.0.iFrame","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","count":"4","titleTopAppBar":"Material Design Widgets","drawerLayout":"modal","showHeader":"true","headerLabel":"<h4 class='mdc-drawer__title'>Material Design Widgets</h4><h6 class='mdc-drawer__subtitle'>by Scrounger</h6>","showLabels":"true","iconDrawer0":"/vis/widgets/materialdesign/img/IoBroker_Logo.png","iconDrawer1":"/icons-material-svg/hardware/ic_computer_48px.svg","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"contains_view_0":"Preview","contains_view_1":"Buttons","iconDrawer2":"/vis/widgets/materialdesign/img/IoBroker_Logo.png","contains_view_2":"Cards","iconDrawer3":"/icons-material-svg/action/ic_android_48px.svg","contains_view_3":"Progress","iconDrawer4":"/vis/widgets/materialdesign/img/IoBroker_Logo.png","contains_view_4":"Slider","headers0":"","dividers0":false,"dividers1":true,"headers1":"","headers2":"Header","dividers4":true,"dividers3":true,"persistent":true,"drawerWidth":"","drawerIconHeight":"","topAppBarLayout":"standard","colorTopAppBarBackground":"","colorTopAppBarTitle":"","labels2":""},"style":{"left":"0px","top":"-1px","width":"1200px","height":"1200px","z-index":""},"widgetSet":"materialdesign"}]

@sigi234
Der Volumen Regler sieht nice aus. Welches Widget ist das? Mach mal bitte ein Export.

[sigi234]

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

Der Volumen Regler sieht nice aus. Welches Widget ist das? Mach mal bitte ein Export.

ioBroker.vis-hqWidgets

Export Widget

[{"tpl":"tplHqCircle","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","oid":"alexa2.0.Echo-Devices.GXXXXXXXXXXXXX.Player.volume","min":"0","max":"100","digits":"0","step":"1","is_comma":false,"displayPrevious":true,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"descriptionLeft":"Volume to use for speak commands","thickness":"0.1","color":"#a8d7ff","bgcolor":"#dedede","caption":"Volume","hideNumber":false,"cursor":"","linecap":true,"anticlockwise":false,"unit":" %","class":""},"style":{"left":"900px","top":"251px","width":"102px","height":"108px","z-index":"5","font-size":"small","color":"#d7cec1","text-align":"left","font-family":"RobotoCondensed-Light"},"widgetSet":"hqwidgets"}]