Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Projekt] Material Design CSS für ioBroker.vis

    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

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • 0
      0018 last edited by

      Hi,

      gibt es die Möglichkeit die Ausgabe des TV-Spielfilm-Adapters https://github.com/Pix–-/ioBroker.tvspielfilm auch im Material Design zu gestalten? Wenn ja wie könnte das aussehen?

      Danke 🙂

      1 Reply Last reply Reply Quote 0
      • C
        cuuira last edited by

        Moin

        Bin gerade am anpassen meines Projektes…. jetzt habe ich zur Zeit ein Problem mit dem mdui-float in der tnav. Kann es sein, dass es sich jetzt anders verhält als bei den älteren Versionen. Die Buttons werden nicht mehr automatisch angeordnet?

        Gruß

        cuuira

        --edit--

        Habe das Problem gefunden. Die Sortierung der Views war ein bißchen anders dadurch hat es nicht gepasst.

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

          Hallo,

          ich spiele gerade ein wenig mit dem MD herum und hab ein kleines Problem mit der Schrift. Habe mir das aktuell MD_Demo importiert.

          Habe mir das mdui-label -basic -HTML widget exportiert und in meiner aktuellen VIS eingefügt.

          Leider passt die Schriftart nun nicht mehr, beides im selben chrome Browser im unterscheidlichen TAB geöffnet.

          Anbei ein Screenshot:
          1620_schrift.png
          oben: MD_DEMO und unten mein Projekt.

          Gibt es noch eine Einstellung oder warum sieht es so unterscheidlich aus?

          1 Reply Last reply Reply Quote 0
          • blauholsten
            blauholsten Developer last edited by

            @0018:

            Hallo,

            ich spiele gerade ein wenig mit dem MD herum und hab ein kleines Problem mit der Schrift. Habe mir das aktuell MD_Demo importiert.

            Habe mir das mdui-label -basic -HTML widget exportiert und in meiner aktuellen VIS eingefügt.

            .

            Gibt es noch eine Einstellung oder warum sieht es so unterscheidlich aus? `
            Benutzt du denn auch in deinen Views die css Anweisungen aus dem Demo Projekt?

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

              @blauholsten:

              Benutzt du denn auch in deinen Views die css Anweisungen aus dem Demo Projekt? `

              Ja habe unter:

              Eigenschaften– CSS -- Projekt sowie unter Skripte

              die Sachen aus der Demo kopiert und eingefügt.

              1620_css.png

              1 Reply Last reply Reply Quote 0
              • T
                tempestas last edited by

                ich rate mal:

                muss eventuell ein Schriftsatz (Adapter) installiert sein?

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

                  @0018:

                  Gibt es noch eine Einstellung oder warum sieht es so unterscheidlich aus? `
                  Nein, keine weitere Einstellung. Im vis CSS | Projekt, wo du die MD CSS hinein kopiert hast, wird die Schriftart am Anfang festgelegt:

                  ****.vis-view,

                  .vis-view .ui-widget {

                  font-family: Roboto, Arial;

                  font-size: 16px !important;

                  color:#ffffff;

                  }****

                  Wenn das im gleichen Browser mal geht und mal nicht, vermute ich, dass irgendeine andere CSS-Anweisung "stärker" ist und die font-family verändert. Das kann sogar Widget-abhängig sein. Wenn du hier keine Ursache findest, versuch mal die Anweisung in

                  ****.vis-view,

                  .vis-view .ui-widget {

                  font-family: Roboto, Arial !important;

                  font-size: 16px !important;

                  color:#ffffff;

                  }****

                  zu ändern.

                  Ein besonderer Adapter muss nicht installiert sein. Die Roboto Schriftart scheint auch korrekt vorhanden zu sein, sonst würde sie auch im MD_Demo nicht korrekt angezeigt werden.

                  1 Reply Last reply Reply Quote 0
                  • C
                    cuuira last edited by

                    Nabend

                    Ich habe leider keinen Plan von diesem ganzen CSS Sachen. Deswegen brauche ich mal eine Hilfe…. ich jetzt so einige Sachen in meinem Projekt angepasst und würde gerne bei einer bestimmten Auflösung die Namen kürzen. Dazu gibt es auch in der Anleitung eine Beschreibung. Leider weiß ich damit nichts anzufangen.

                    > Wenn man hier Rücksicht auf ein responsive Design nehmen möchte, kann man den Text so gestalten, dass er bei Bildschirmauflösungen von max. 480px und mehr als 480px unterschiedlich dargestellt wird. Hierzu sind die CSS Klassen mdui-show480 und mdui-hide480 zu nutzen. Bsp: EGErdgeschoß

                    Gruß Cuuira

                    jpgorganizer 1 Reply Last reply Reply Quote 0
                    • 0
                      0018 last edited by

                      @Uhula:

                      font-family: Roboto, Arial !important; `

                      Danke, das hat geholfen!

                      1 Reply Last reply Reply Quote 0
                      • C
                        cuuira last edited by

                        Nabend….

                        Habe jetzt mal ein bißchen angepasst und eingefügt.... kann mir einer sagen, wie ich ein zentrierte Ausrichtung hinbekomme? Habe die Quelle an Hand von dem "LOCAL" angepasst, aber sobald eine neue Quelle ins Spiel kommt, ist alles verschoben.

                        Gruß

                        cuuira
                        4970_bildschirmfoto_2018-01-14_um_19.25.18.png
                        4970_bildschirmfoto_2018-01-14_um_19.26.36.png

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

                          @cuuira:

                          kann mir einer sagen, wie ich ein zentrierte Ausrichtung hinbekomme? `
                          Da ich nur raten kann, wie du die Texte darstellst, hier der Versuch einer Antwort. Angenommen du nimmst dafür ein basic HTML oder basic String, dann setzt du für dieses Widget die folgenden Eigenschaften:

                          • left: an den linken Rand des Tile, z.B. 13

                          • width: auf 200 (oder so, dass es gerade noch in das Tile passt)

                          • Font / Ausrichtung (text-align): center (dann werden Texte innerhalb der Breite des Widgets zentriert)

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

                            Hallo,

                            wie kann ich am besten das "yr.0.forecast.html" in das MD mit einbinden?

                            1 Reply Last reply Reply Quote 0
                            • C
                              Crockers last edited by

                              Hallo,

                              ich würde gerne einen Switch nehmen, um bei mir Steckdosen zu steuern.

                              Ich habe das Widget aus dem Beispiel "cardDemoSwitches" importiert und die CSS klassen "mdui-switch und mdui-yellow-acc" zugewiesen.

                              Leider zeigt mir der Switch bisher nur den aktuellen Status an. Steuern kann ich die Lampe nicht.

                              Wer kann mir auf die sprünge helfen?

                              Vielen Dank 🙂

                              1 Reply Last reply Reply Quote 0
                              • S
                                Sven2013 last edited by

                                @Crockers:

                                Hallo,

                                ich würde gerne einen Switch nehmen, um bei mir Steckdosen zu steuern.

                                Ich habe das Widget aus dem Beispiel "cardDemoSwitches" importiert und die CSS klassen "mdui-switch und mdui-yellow-acc" zugewiesen.

                                Leider zeigt mir der Switch bisher nur den aktuellen Status an. Steuern kann ich die Lampe nicht.

                                Wer kann mir auf die sprünge helfen?

                                Vielen Dank 🙂 `

                                Hast du dem Widget auch nochmal die Widgetnummer zugewiesen?

                                Gruß Sven

                                Gesendet von iPhone mit Tapatalk

                                1 Reply Last reply Reply Quote 0
                                • C
                                  Crockers last edited by

                                  @Sven2013:

                                  @Crockers:

                                  Hallo,

                                  ich würde gerne einen Switch nehmen, um bei mir Steckdosen zu steuern.

                                  Ich habe das Widget aus dem Beispiel "cardDemoSwitches" importiert und die CSS klassen "mdui-switch und mdui-yellow-acc" zugewiesen.

                                  Leider zeigt mir der Switch bisher nur den aktuellen Status an. Steuern kann ich die Lampe nicht.

                                  Wer kann mir auf die sprünge helfen?

                                  Vielen Dank 🙂 `

                                  Hast du dem Widget auch nochmal die Widgetnummer zugewiesen?

                                  Gruß Sven

                                  Gesendet von iPhone mit Tapatalk `

                                  Widgetnummer? :?:
                                  5056_forum.png

                                  1 Reply Last reply Reply Quote 0
                                  • ?
                                    A Former User last edited by

                                    Die Widgetnummer in deinem Screenshot ist w00012.

                                    Diese Nummer musst du bei dem Feld "HTML anhängen:" eintragen.

                                    Dort steht noch eine falsche Nummer (w00312).

                                    1 Reply Last reply Reply Quote 0
                                    • C
                                      Crockers last edited by

                                      @nisio:

                                      Die Widgetnummer in deinem Screenshot ist w00012.

                                      Diese Nummer musst du bei dem Feld "HTML anhängen:" eintragen.

                                      Dort steht noch eine falsche Nummer (w00312). `

                                      Kleine Ursache, große Wirkung. Perfekt. es funktioniert. Vielen Dank.

                                      1 Reply Last reply Reply Quote 0
                                      • C
                                        cuuira last edited by

                                        @Uhula:

                                        @cuuira:

                                        kann mir einer sagen, wie ich ein zentrierte Ausrichtung hinbekomme? `
                                        Da ich nur raten kann, wie du die Texte darstellst, hier der Versuch einer Antwort. Angenommen du nimmst dafür ein basic HTML oder basic String, dann setzt du für dieses Widget die folgenden Eigenschaften:

                                        • left: an den linken Rand des Tile, z.B. 13

                                        • width: auf 200 (oder so, dass es gerade noch in das Tile passt)

                                        • Font / Ausrichtung (text-align): center (dann werden Texte innerhalb der Breite des Widgets zentriert) `

                                        Sorry für die fehlenden Angaben… aber du kannst ja zum Glück Gedanken lesen!!! 😄

                                        Deine Antwort hat natürlich geholfen.... THX

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

                                          Hallo zusammen,

                                          ich habe ein Problem mit der Auflösung auf meinen Tab mit Android7.

                                          Ich habe das MD Design auf 1280x800 ausgelegt.

                                          Auf dem Tab wird es im Fully Kiosk Browser aber nur vergrößert dargestellt und ich kann nicht weiter rein zoomen, so das ich Scroll-Effekte habe, die ich nicht möchte. Bekomme also nur eine geringere Auflösung angezeigt.

                                          Kann mir jemand sagen woran das liegt?

                                          1 Reply Last reply Reply Quote 0
                                          • R
                                            reini last edited by

                                            Hallo Leute, wie bekomm ich denn die schönen Balken hin?! (wie von Ruhr70 gezeigt)

                                            Ist dies das Bar-Widget bzw. wie bekomm ich den Farbverlauf?

                                            thx

                                            edit

                                            erledigt, habs nach einiger Zeit hinbekommen!!
                                            3845_2018-01-23_12_37_21-2017-12-10_simple_md.png__png-grafik__2936___956_pixel_.png

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            875
                                            Online

                                            31.8k
                                            Users

                                            79.9k
                                            Topics

                                            1.3m
                                            Posts

                                            111
                                            650
                                            186510
                                            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