[Projekt] Material Design CSS für ioBroker.vis

[Uhula]

Moin. Vor 10 Tagen habe ich zufällig von einem Freund erfahren, dass ioBroker auch auf der Synology NAS im Docker Container läuft. Also mal kurz installiert, eingerichtet - und schon war ich infiziert. Kompliment an alle, die daran mitgearbeitet haben!

Aber. Um den FAF (Frauen-Akzeptanz-Faktor) zu erhöhen (Androids Apps wie WhatsApp kommen gut an) und auch ich selbst das Material Design von Google als gelungen ansehe, im ioBroker.vis aber nichts vergleichbares zu finden war, habe ich begonnen meine eigenen CSS Anweisungen über einige basic und jqui Controls zu stülpen. Es ist kein eigener Adapter (kenne mich in JS noch zu wenig aus), sondern es sind nur CSS Anweisungen, die im Projekt auf der CSS-Registerseite eingefügt werden. Anschließend muss den basic- und jqui-Controls noch die entsprechende(n) CSS-Klasse(n) zugewiesen werden. Fertig.

Bilder sagen mehr, also:


Look & Feel wie eine Android-App mit App-Bar, Tab-Navigation und Bottom-Navigation; alle Farben sind über CSS-Klassen konfigurierbar.

<size size="85">Edit 10.10.2017</size>

Einen Demo-Film gibt es hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/docs/MaterialDesign4ioBroker.mp4 (dort downloaden)

Ein Demo-Projekt für den Import in ioBroker.vis hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/ioBroker%20projects/MD_Demo.zip

Ein Simple-Projekt als Basis für eigene Projekte hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/ioBroker%20projects/MD_Simple.zip

Das Handbuch hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/docs/anleitung.pdf

<size size="85">Edit 17.10.2017</size>

Wer sich das Demo Projekt direkt, also ohne Download/Import ansehen möchte, kann dieses nun auch über die ioBroker-vis-Demo Site tun: https://iobroker.net:8080/vis/index.htm … o#_landing

<size size="85">HowTo-Verweise im Forum</size>

http://forum.iobroker.net/viewtopic.php?f=30&t=8457

http://forum.iobroker.net/viewtopic.php?f=30&t=8101

http://forum.iobroker.net/viewtopic.php?f=30&t=8122

http://forum.iobroker.net/viewtopic.php?f=30&t=8185

http://forum.iobroker.net/viewtopic.php?f=30&t=8294

http://forum.iobroker.net/viewtopic.php?f=30&t=10541

http://forum.iobroker.net/viewtopic.php?f=30&t=10540

[simpixo]

Also sieht sehr gut aus [emoji1303][emoji1303][emoji1303], und ich würde gern wissen wie das ganze aussieht! Vielleicht kannst du in Vorfeld schon was posten!? [emoji848]

Dann könnte ich meine Vis auch in die Richtung aufbauen

Gruß

Adrian

Gesendet von iPhone mit Tapatalk Pro

[Meistertr]

sieht echt super aus, Habe schon mehrfach gedacht, dass mit das Design sher gefällt, aber mit css kenn ich mich mal so garnicht aus. Danke schon mal für deine Arbeit!! Freu mich auf das ergebins

[blauholsten]

Sieht echt Klasse aus, Applaus!!!

Problem nur, ich werde in der nächsten Zeit weniger Zeit für die Familie haben :lol: , da ich meine Views umstellen muss.

[A Former User]

sieht klasse aus!!!

bitte das Beispielprojekt posten.

Danke

[frieda99]

Tolle Arbeit!

In der Doku wird ein zip-File erwähnt, dass man in vis importieren kann. Das kann ich aber im git-Projekt nicht finden?

[Meistertr]

@frieda99:

Tolle Arbeit!

In der Doku wird ein zip-File erwähnt, dass man in vis importieren kann. Das kann ich aber im git-Projekt nicht finden? ` Steht ja im ersten post dass er noch nicht fertig ist

Gesendet von meinem Handy

[Uhula]

OK. Ich werde den Style dann weiter entwickeln. Habe gerade auch mit CSS flex-boxen getestet um ein responsive Design zu bekommen. D.h. es wird dann (fast) egal sein, mit welchem Gerät man sich seinen Views ansieht, die Widgets werden automatisch je nach verfügbaren Platz angeordnet. Man muss dann z.B. nicht mehr 4 Views für 4 Auflösungen/Geräte entwerfen.

Demobilder folgen demnächst.

[pix]

@Uhula:

OK. Ich werde den Style dann weiter entwickeln. Habe gerade auch mit CSS flex-boxen getestet um ein responsive Design zu bekommen. D.h. es wird dann (fast) egal sein, mit welchem Gerät man sich seinen Views ansieht, die Widgets werden automatisch je nach verfügbaren Platz angeordnet. Man muss dann z.B. nicht mehr 4 Views für 4 Auflösungen/Geräte entwerfen.

Demobilder folgen demnächst. `
Da bin ich sehr gespannt. So was fehlt mir noch…

[Uhula]

Hat leider etwas länger gedauert, dafür ist der Style nun aber auch responsible und bietet Left/Right-Navigation mit Side-Panels.

Einen Demo-Film gibt es hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/docs/MaterialDesign4ioBroker.mp4 (dort downloaden)

Ein Demo-Projekt für den Import in ioBroker.vis hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/ioBroker%20projects/MD_Demo.zip

Ein Simple-Projekt als Basis für eigene Projekte hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/ioBroker%20projects/MD_Simple.zip

Das Handbuch hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/docs/anleitung.pdf

Viel Spaß!

[rantanplan]

Super Arbeit!!!!

Ein rundum Komplettpacket. Hut ab!

Grüße

[Meistertr]

Echt hamma

Gesendet von meinem Handy

[blauholsten]

@Uhula:

Hat leider etwas länger gedauert, dafür ist der Style nun aber auch responsible und bietet Left/Right-Navigation mit Side-Panels.

Einen Demo-Film gibt es hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/docs/MaterialDesign4ioBroker.mp4 (dort downloaden)

Ein Demo-Projekt für den Import in ioBroker.vis hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/ioBroker%20projects/MD_Demo.zip

Ein Simple-Projekt als Basis für eigene Projekte hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/ioBroker%20projects/MD_Simple.zip

Das Handbuch hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/docs/anleitung.pdf

Viel Spaß! `

Das ist ganz ganz großes Kino!!!!

[coyote]

Sieht sehr gut aus. Top Arbeit

Gesendet von meinem VTR-L09 mit Tapatalk

[Meistertr]

Habs gerade mal schnell getestet und mein Mund stand die ganze Zeit offen und ich bin aus dem staunen nicht heraus gekommen. echt genial was alles möglich ist..

Gesendet von meinem Handy

[BBTown]

@Meistertr:

Habs gerade mal schnell getestet und mein Mund stand die ganze Zeit offen ` das trifft den Nagel auf den Kopf.

Auch von mir ein heftiges "WOW !!"

und dazu ein großes Dankeschön fürs Teilen, Uhula !!

[htrecksler]

@BBTown:

@Meistertr:

Habs gerade mal schnell getestet und mein Mund stand die ganze Zeit offen ` das trifft den Nagel auf den Kopf.

Auch von mir ein heftiges "WOW !!"

und dazu ein großes Dankeschön fürs Teilen, Uhula !! `

Perfekt … ganz viele Daumen hoch

[A Former User]

habe innerhalb kürzester Zeit ein komplett neues Design hinbekommen.

bin auch begeistert… total begeistert.

in der Android App iobroker.vis liegt nun leider der Button zum einblenden der left navigation genau auf der gleichen Stelle wie auch der Button (drei kleine Punkte) zum aufrufen der Einstellungen der Android App.

Kann man den Button der Android App vielleicht an eine andere Stelle verschieben?

Hat jemand ähnliche Schwierigkeiten

[Uhula]

Das mit dem Button in der ioBroker AndroidApp ist mir auch aufgefallen. Da ich aber den Fully Kiosk Browser nutze, störte es mich nicht. Zur Lösung könntest du den Menü-Button im ioBroker.vis Material Design, der sich im abar-View an der Position Left=0 befindet, einfach auf Left=48px verschieben.

Die ioBroker App braucht nun mal eine Möglichkeit das Setup zu öffnen. Der Fully Kiosk Browser nutzt dazu eine Swipe-Geste vom linken Rand, eine andere Browser App einen Doppel-Tap. Wäre evtl. auch für die ioBroker App eine optionale Möglichkeit.

[kmxak]

Moin, echt klasse was du da gezaubert hast.

Ich habe aber aktuell noch eine Frage.

Habe dieses Widget das soll je nachdem welchen Wert ich bei den Signalbild eingestellt habe eine andere Textfarbe haben.

[{"tpl":"tplJquiIconNav","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":true,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":">=","signals-val-0":"1","signals-icon-0":"","signals-icon-size-0":0,"signals-blink-0":true,"signals-horz-0":"8","signals-vert-0":"-65","signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":"0","signals-icon-1":"","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":"8","signals-vert-1":"-65","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,"class":"mdui-title mdui-flatbutton","text":"","nav_view":"cardadmin-alarm","signals-oid-0":"javascript.0.zählenLowbat.anzahlLOWBAT","signals-text-0":"Smart Home","signals-text-style-0":"mdui-red","signals-text-class-0":"mdui-red","signals-oid-1":"javascript.0.zählenLowbat.anzahlLOWBAT","signals-text-1":"Smart Home"},"style":{"left":"64px","top":"16px","height":"15px","width":"100px","z-index":"0","text-align":"left","padding":"6"},"widgetSet":"jqui"}]

Ich habe unter Signalbilder: CSS Textstyl [1]:

Klassen [1]:

Dort nimmt er aber nicht das mdui-red sondern nur oben unter css Klasse.

Hast du einen Tipp für mich?