Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Visualisierung mit Material Design

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Visualisierung mit Material Design

    This topic has been deleted. Only users with topic management privileges can see it.
    • maloross
      maloross @AxelF1977 last edited by

      @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.

      AxelF1977 1 Reply Last reply Reply Quote 0
      • AxelF1977
        AxelF1977 @maloross last edited by

        @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

        maloross 1 Reply Last reply Reply Quote 0
        • maloross
          maloross @AxelF1977 last edited by

          @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.

          maloross 1 Reply Last reply Reply Quote 1
          • maloross
            maloross @maloross last edited by

            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?

            AxelF1977 1 Reply Last reply Reply Quote 0
            • AxelF1977
              AxelF1977 @maloross last edited by

              @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?

              Bild Text

              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.

              maloross 1 Reply Last reply Reply Quote 0
              • maloross
                maloross @AxelF1977 last edited by

                @AxelF1977 Die Liste wird angezeigt, aber die Auswahl wird nicht übernommen.

                AxelF1977 1 Reply Last reply Reply Quote 0
                • AxelF1977
                  AxelF1977 @maloross last edited by

                  @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

                  maloross 1 Reply Last reply Reply Quote 0
                  • maloross
                    maloross @AxelF1977 last edited by

                    @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.

                    AxelF1977 1 Reply Last reply Reply Quote 0
                    • AxelF1977
                      AxelF1977 @maloross last edited by

                      @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.

                      maloross 1 Reply Last reply Reply Quote 0
                      • maloross
                        maloross @AxelF1977 last edited by maloross

                        @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...

                        AxelF1977 1 Reply Last reply Reply Quote 0
                        • AxelF1977
                          AxelF1977 @maloross last edited by

                          @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

                          maloross 1 Reply Last reply Reply Quote 0
                          • maloross
                            maloross @AxelF1977 last edited by maloross

                            @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.

                            AxelF1977 1 Reply Last reply Reply Quote 0
                            • AxelF1977
                              AxelF1977 @maloross last edited by

                              @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 🤝

                              maloross 1 Reply Last reply Reply Quote 0
                              • maloross
                                maloross @AxelF1977 last edited by

                                @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.

                                1 Reply Last reply Reply Quote 0
                                • O
                                  Oli @AxelF1977 last edited by

                                  @AxelF1977

                                  sehr coole Vis, könntest du bitte kurz erklären, wie das mit der dynamischen Größenanpassung funktioniert?

                                  AxelF1977 1 Reply Last reply Reply Quote 0
                                  • AxelF1977
                                    AxelF1977 @Oli last edited by

                                    @Oli sagte in Visualisierung mit Material Design:

                                    @AxelF1977

                                    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

                                    1 Reply Last reply Reply Quote 0
                                    • AxelF1977
                                      AxelF1977 last edited by

                                      Um eine Seite floatend zu bekommen, was bedeutet dass sich der Inhalt dynamisch an die Auflösung anpasst, müssen etliche Parameter per css angepasst werden.

                                      Meine VIS sind aber nur nach oeben hin offen, hin zu kleineren Auflösungen sind sie nicht optimiert. Sie gehen gut von 1290px bis zu 4k

                                      Meine Floatenden Seiten sind in mehreren VIS ausgebaut. Ich verdeutliche das mal anhand meiner Übersicht der Heizungen

                                      c58a016c-fa4c-447b-b884-2d0ffaa643aa-image.png

                                      1. Vis sind die Steuerrungselemente an sich, mit einer gesamten Breite von 100%, hier die "Spalte" Zimmer am Ende. Wichtig ist auch hier die Schriftgröße so zu definieren, dass diese sich auch mit der Auflösung anpasst, ich nutze dafür vw anstatt px oder ct

                                      ea3861b3-2a17-402d-982b-9ad441ba856e-image.png

                                      1. ist ein VIS wo dann alle einzelnen VIS aus 1. zusammengefasst werden, hier 9 Stück. Hier werden jetzt die Breite der einzelnen Spalten per % angegeben, das Du am Ende bei 100% landest, bzw. etwas weniger falls noch Scrollbalken dazukommen, weil die Seite länger ist.

                                      5ff81324-d9c7-426a-b52a-06f612f21295-image.png

                                      1. VIS ist dann die Seite, auf der alle einzelnen VIS zusammen kommen.

                                      Wichtig ist dass überall mit % gearbeitet wird, auch Abstände zwischen Boxen etc. Sonst bleibt das nicht überall gleich.

                                      Und ganz wichtig, einzelne Boxen brauche die CSS Klasse float. Am besten mal bei Google danach suchen.

                                      Ich bin leider nicht sonderlich gut darin sowas zu erklären, sorry.

                                      Aber bei Fragen fragen, ich probiere die dann zu beantworten

                                      O 1 Reply Last reply Reply Quote 1
                                      • O
                                        Oli @AxelF1977 last edited by

                                        @AxelF1977
                                        super, erstmal danke für die tolle Beschreibung

                                        1 Reply Last reply Reply Quote 0
                                        • dsiggi
                                          dsiggi last edited by

                                          Hallo,
                                          erstmal ein großes Lob für diese super Vis.

                                          Ich habe mir gerade mal deine Exports der Lichtsteuerung heruntergeladen um mir das ganze mal anzuschauen.
                                          Dazu hab ich gleich mal eine Frage.

                                          Du benutzt hier CSS-Klassen mit den Namen

                                          • clearright
                                          • mdui-flex-item

                                          Das sind Klassen die im originale MaterialDesign von @Uhula nicht existieren. Hast du diese selbst hinzugefügt?
                                          Wenn ja, was bewirken diese und kannst du die auch zur Verfügung stellen?

                                          Daniel

                                          AxelF1977 1 Reply Last reply Reply Quote 0
                                          • AxelF1977
                                            AxelF1977 @dsiggi last edited by

                                            @dsiggi sagte in Visualisierung mit Material Design:

                                            Hallo,
                                            erstmal ein großes Lob für diese super Vis.

                                            Ich habe mir gerade mal deine Exports der Lichtsteuerung heruntergeladen um mir das ganze mal anzuschauen.
                                            Dazu hab ich gleich mal eine Frage.

                                            Du benutzt hier CSS-Klassen mit den Namen

                                            • clearright
                                            • mdui-flex-item

                                            Das sind Klassen die im originale MaterialDesign von @Uhula nicht existieren. Hast du diese selbst hinzugefügt?
                                            Wenn ja, was bewirken diese und kannst du die auch zur Verfügung stellen?

                                            Daniel

                                            Moin Daniel,

                                            danke für das Lob. Zu der Frage der CSS Klassen

                                            • clearright ist von mir, hatte ich vergessen hinzuzufügen, danke für den Hinweis. Dazu unten mehr*
                                            • mdui-flex-item gehört zur letzten Version des Material Framework und ist dort in der CSS enthalten, ich prüfe das aber mal, diese CSS Klasse hatte ich direkt aus den Beispielen von @Uhula übernommen

                                            *Das das Layout Floatent ist, müssen die Boxen wissen wann sie fließen (float) dürfen und wann nicht.. Ich zitiere mal von https://blog.kulturbanause.de/

                                            Floats beenden mit clear
                                            Die Eigenschaft »clear« (zu Deutsch: »abschalten«) beendet Floats. Erhält ein Element diese Eigenschaft, so schaltet es den Float vorangehender Elemente ab. Folgende Optionen stehen euch zur Verfügung:

                                            clear: both
                                            Floats beider Richtungen werden beendet. Normalerweise reicht das aus, um das gewünschte Ergebnis zu erzielen.

                                            clear: left
                                            beendet nur float: left

                                            clear: right
                                            beendet nur float: right

                                            Ein Element, das gecleared wurde, setzt sich nicht neben vorherige Elemente und versteckt sich auch nicht dahinter. Es positioniert sich eine Zeile darunter.

                                            Entsprechende CSS Klassen sehen dann so aus

                                            .clear
                                            {
                                                clear: both;
                                            }
                                            
                                            .clearboth
                                            {
                                                clear: both;
                                            }
                                            
                                            .clearleft
                                            {
                                                clear: left;
                                            }
                                            
                                            .clearright
                                            {
                                                clear: right;
                                            }
                                            
                                            
                                            dsiggi 1 Reply Last reply Reply Quote 1
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            837
                                            Online

                                            31.9k
                                            Users

                                            80.2k
                                            Topics

                                            1.3m
                                            Posts

                                            material css material ui vis
                                            7
                                            38
                                            4977
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo