Visualisierung mit Material Design
-
Hi zusammen,
ich dachte mir, es ist mal an der Zeit, meine Visualisierung zu präsentieren. Sie basiert auf der letzten Version des Material Design Framework von @Uhula. Ich möchte das hier als Inspiration zeigen, was man damit so machen kann, wenn man sich mit CSS auskennt.
Das ganze Projekt zu exportieren wird nicht gehen, dafür ist das zu groß und komplex. Einzelne Seite könnte ich aber gerne probieren. Sehr es mir aber bitte nach, das es in der Vorweihnachtszeit aber gerade knapp ist mit der Zeit dafür.Viele Views sind in mehrere einzelne Views aufgeteilt. Auch wegen der dynamischen Größenanpassung. Das Projekt soll sowohl auf meinen Tablets (alle 1280er Auflösungen) Also auch ein meinen Geräten mit FullHD Auflösung funktionieren.
Großen Dank an der Stelle an @Uhula für das Framework, @sigi234 für das Bereitstellen seiner HUE View (habe ich bei mir als Expertenmodus eingebunden), @sissiwup für die Erklärung wie Grafana eingebunden wird, und allen die hier Scripte und Views präsentiert haben, die ich nutzen konnte, bzw. Anregungen gefunden habe.
Es ist noch viel zu tun, aber ich hier schon 2 Jahre entwickel, habe ich Geduld.
Meine persönlichen Highlights
- Hintergrund der Lampensteuerungen passen sich entweder in Farbe oder Weißwert dem aktuellen Zustand der Lampen an
- Lichtseite ähnlich aufgebaut wie die HUE App
- Mein Spotify VIEW, gibt es schon im Forum
- Das Heizungsview, durch das Auswählen des Punktes "wie Vortag" wird die ganze Zeile ein oder ausgeblendet, im unteren Teil sieht man den Heitungsverbrauch im Vergleich zu den Vorjahren, hier werden direkt die Techem Thermostate ausgelesen über einen Stick und über FHEM die Werte nach ioBroker geholt
Viel Spaß beim Stöbern und Anregungen holen, bei Fragen stehe ich Euch gerne zur Verfügung
-
@AxelF1977 da hast du ja ordentlich was auf die Beine gestellt - Respekt!! Das da eine Menge Arbeit und Liebe zum Detail drin steckt, sieht man.
Da ich auch damit angefangen habe, meine Visualisierung auf Material Design umzustellen, würde mich Spotify-View und die Lampensteuerung mit den Farbanpassungen sehr interessieren. Wie hast du das aufgebaut?
-
@maloross sagte in Visualisierung mit Material Design:
@AxelF1977 da hast du ja ordentlich was auf die Beine gestellt - Respekt!! Das da eine Menge Arbeit und Liebe zum Detail drin steckt, sieht man.
Da ich auch damit angefangen habe, meine Visualisierung auf Material Design umzustellen, würde mich Spotify-View und die Lampensteuerung mit den Farbanpassungen sehr interessieren. Wie hast du das aufgebaut?
Vielen Dank!
Das Spotify View besteht aus insgesamt 7 card_Seiten, einer cont_ und der page_ Seite. Einen Export findest Du im Anhang. Es müssen sowohl CSS Klassen als auch Scripte eingefügt werden, Leider hakt das sehr nach dem Import bei einigen, so richtig helfen konnte ich da nicht, probier es aus. Ab hier findest Du meine Beiträge zu dem Thema
Bei dem VIEW für die Lichsteuerung arbeite ich mit dem Hue Extended Adapter, wichtig zu wissen, für de Datenpunkte. Weiter brauchst Du dafür die "Colorpicker" Erwiterung, ohne die geht nichts.
Es gibt 3 verschiedene Vews, für HUE RGB Lampen, OSRAM mit Weißspektrum und Birnen die nur weiß sind, ohne weitere Optionen.- z.B HUE RGB ist VIEW Flur_Decke
- Listenpunktz.B. OSRAM weiß ist Flur_Wand, hier wird der Wechsel der Hintergrundfarbe nicht über den Colorpicker geregelt, sondern über den Hintergrund
background: "{ct:hue-extended.1.groups.flur_licht_wand-8.action.colorTemperature;(ct>=2000 && ct<2500) ? \"#ffb141\" :: (ct>2500 && ct<3000) ? \"#ffd381\" :: (ct>3000 && ct<3500) ? \"#ffe1a0\" :: (ct>3500 && ct<4000) ? \"#ffebb8\" :: (ct>4000 && ct<4500) ? \"#fff1c5\" :: (ct>4500 && ct<5000) ? \"#fff7d8\" :: (ct>5000 && ct<5500) ? \"#fffce5\" :: (ct>5500 && ct<6000) ? \"#fcfff4\" :: (ct>6000 && ct<6500) ? \"#f8fffd\" :: \"white\"}",- Listenpunktz.B. nur weiß ist Flur_Deko
Hier kannst Du dir verschiedenen Einstellungen ansehen, wie das aufgebaut ist, und an eigene Views anpassen. Beachte auch, das in den card_views mehrere Ebenen übereinander liegen, hier musst Du mehr anpassen, als Du erstmal siehst. Am besten öffnest Du jedes view in einem Texteditor (nutze gerne pspad) und nutzt die Ersetzen Funktion. Das geht bedeutend schneller
Ich exportiere mal alle Dateien für die Lichtsteuerung. Das kann wegen des Umfangs aber jetzt ein wenig dauern.
EDIT: Anbei der teilweise Export der Lichtsteuerrung. Es sollte alle Dateien vorhanden sein, um nachzuvollziehen wie das alles aufgebaut ist. Die Dateien müssen einzeln zu deinem Projekt hinzugefügt werden. Ich habe probiert meine eigenen css Styles raus zu nehmen und die vorgegebenen von @Uhula einzufügen. Dann sollte es keine Probleme geben, optisch sieht es dann natürlich anders aus. Viel Spaß beim nachbauen. Bei Fragen bin ich hier.
-
Downloads hinzugefügt
-
@AxelF1977 sehr cool, danke! Da werde ich jetzt wohl 'ne zeitlang beschäftigt sein....
Ich werde vermutlich erst mal mit dem Spotify-View anfangen und mich einarbeiten. -
@maloross sagte in Visualisierung mit Material Design:
@AxelF1977 sehr cool, danke! Da werde ich jetzt wohl 'ne zeitlang beschäftigt sein....
Ich werde vermutlich erst mal mit dem Spotify-View anfangen und mich einarbeiten.Was dann das kompliziertere ist. Denn es müssen auch Javascripte angelegt werden. Zumnindest wenn ich mich recht erinnere, die Datei ist knapp ein Jahr alt. Da habe ich bestimmt viel vergessen.
Enthalten sind auf jeden Fall 2 verschiedene Versionen. Für eine Instanz des Spotify Adapters, und eine für mehrere Instanzen. Z.B. für ein Spotify Familien Konto, damit können dann alle Konto angezeigt werden in VIS. Finde ich ganz geil, gibt es sonst keine Möglichkeit, das nutze ich ganz gerne
-
@AxelF1977 da muss ich schauen, wenn was fehlt, werde ich das dann ja sehen. Gerade die Anzeige mehrere Konten ist interessant; aber erst mal schauen, dass ich die Basis hinbekomme. Der Rest dann Step by Step.
-
Eine erste Annäherung mit dem Spotify-View ist schon gemacht, soweit alles funktionsfähig. Zum besseren Verständnis: das Scroll-Menü rechts dient nur der Hervorhebung, auf welchem Endgerät abgespielt wird?
-
@maloross sagte in Visualisierung mit Material Design:
Eine erste Annäherung mit dem Spotify-View ist schon gemacht, soweit alles funktionsfähig. Zum besseren Verständnis: das Scroll-Menü rechts dient nur der Hervorhebung, auf welchem Endgerät abgespielt wird?
Meinst Du das in der rechten unteren Ecke?
Das VIEW sollte so nah wie möglich an die Spotify App rankommen, daher befindet sich hier auch die Auswahl der Endgeräte in dem Popup.
-
@AxelF1977 Die Liste wird angezeigt, aber die Auswahl wird nicht übernommen.
-
@maloross sagte in Visualisierung mit Material Design:
@AxelF1977 Die Liste wird angezeigt, aber die Auswahl wird nicht übernommen.
Welche Version des Spotify Adapters nutzt Du? 1.0.0 ist voraussetzung. Die Liste der Geräte kommt direkt aus dem Adapter spotify-premium.0.html.devices, darauf habe ich keinen Einfluss, es gab hier auch keinen hack
-
@AxelF1977 ist auf dem Stand, 1.0.0.
Was mir aufgefallen ist: Ich habe Sonos Endgeräte, die anscheinend an Spotify keine ID übermitteln. Daher erscheinen diese auch nicht in der Liste. -
@maloross sagte in Visualisierung mit Material Design:
@AxelF1977 ist auf dem Stand, 1.0.0.
Was mir aufgefallen ist: Ich habe Sonos Endgeräte, die anscheinend an Spotify keine ID übermitteln. Daher erscheinen diese auch nicht in der Liste.Da kann kann ich ldier nichts zu sagen, ich habe nur Echos, mit denen klappt alles wunderbar. Wenn die Sonos aber über die normale Spotify App auftauchen, sollte das auch in VIS der Falls ein.
-
@AxelF1977 ja in der App kann ich diese auswählen Wechsle ich dann in die Sonos-App, erscheint dort die Frage, ob ich Spotify als Gast fortführen will oder abbrechen.
Nachtrag: sobald ich wieder auf mein Handy wechsle, sind die Räume in der Objektliste Spotifys wech... -
@maloross sagte in Visualisierung mit Material Design:
@AxelF1977 ja in der App kann ich diese auswählen Wechsle ich dann in die Sonos-App, erscheint dort die Frage, ob ich Spotify als Gast fortführen will oder abbrechen.
Nachtrag: sobald ich wieder auf mein Handy wechsle, sind die Räume in der Objektliste Spotifys wech...Und, hat sich was getan. Falls nicht, frag mal im Thema zum Adapter nach. Hatte ich weiter oben mit abgehangen den Link
-
@AxelF1977 ist unverändert, aber ich denke, es liegt an der Verbindung Sonos-Spotify.
Wenn ich die Handy-App starte, erscheint dieses Gerät in der VIS grün, wird also korrekt angezeigt, aber sonst keine Geräte. Wähle ich in der App ein Gerät aus, erscheint es danach auch in der VIS und ist als aktiv gekennzeichnet.
In VIS kann ich aber kein anderes Gerät auswählen, das wird von Sonos blockiert. Ich muss am Handy erst die Sonos-Verbindung beenden. Danach kann ich dann in VIS das Handy oder ein anderes Gerät auswählen.
Ich habe mir mal ein Echo ausgeliehen, da funktioniert das wie von dir auch vorgesehen.
-
@maloross sagte in Visualisierung mit Material Design:
@AxelF1977 ist unverändert, aber ich denke, es liegt an der Verbindung Sonos-Spotify.
Wenn ich die Handy-App starte, erscheint dieses Gerät in der VIS grün, wird also korrekt angezeigt, aber sonst keine Geräte. Wähle ich in der App ein Gerät aus, erscheint es danach auch in der VIS und ist als aktiv gekennzeichnet.
In VIS kann ich aber kein anderes Gerät auswählen, das wird von Sonos blockiert. Ich muss am Handy erst die Sonos-Verbindung beenden. Danach kann ich dann in VIS das Handy auswählen.
Ich habe mir mal ein Echo ausgeliehen, da funktioniert das wie von dir auch vorgesehen.
Ok, dann bin ich ja beruhigt dass das zumindest mit dem Echo wie geplant klappt
-
@AxelF1977 ja, anscheinend baut Sonos alles komplett um. Viele Dinge, die ich mit Blockly für Sonos angelegt habe, muss ich neu anlegen, weil einiges nicht mehr funktioniert.
-
sehr coole Vis, könntest du bitte kurz erklären, wie das mit der dynamischen Größenanpassung funktioniert?
-
@Oli sagte in Visualisierung mit Material Design:
sehr coole Vis, könntest du bitte kurz erklären, wie das mit der dynamischen Größenanpassung funktioniert?
Hallo Oli,
ich schreibe Dir das heute Abend mal runter. Bitte noch Geduld bis dahin.
Danke
