Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Projekt] Material Design CSS für ioBroker.vis

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    2.2k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    950

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

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

Scheduled Pinned Locked Moved Visualisierung
650 Posts 111 Posters 231.3k Views 68 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    Sven2013
    wrote on last edited by
    #196

    @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
    0
    • C Offline
      C Offline
      Crockers
      wrote on last edited by
      #197

      @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
      0
      • ? Offline
        ? Offline
        A Former User
        wrote on last edited by
        #198

        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
        0
        • C Offline
          C Offline
          Crockers
          wrote on last edited by
          #199

          @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
          0
          • C Offline
            C Offline
            cuuira
            wrote on last edited by
            #200

            @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!!! :D

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

            1 Reply Last reply
            0
            • 0 Offline
              0 Offline
              0018
              wrote on last edited by
              #201

              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?

              Mfg
              0018

              1 Reply Last reply
              0
              • R Offline
                R Offline
                reini
                wrote on last edited by
                #202

                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
                0
                • M Offline
                  M Offline
                  Mac
                  wrote on last edited by
                  #203

                  Hi, wie denn? Wäre nett wenn Du das beschreiben würdest, danke.

                  1 Reply Last reply
                  0
                  • R Offline
                    R Offline
                    reini
                    wrote on last edited by
                    #204

                    2 Fragen bitte, wie bekomm ich denn das Bild FullScreen/zentriert? bzw. die Navigationsleiste (EG, OG usw.) schneidet es mir im Hochformat ab? (müsste die nicht wenn responsiv dann mehrzeilig werden ?!)

                    @Mac:

                    Hi, wie denn? Wäre nett wenn Du das beschreiben würdest, danke. `

                    als Widget nimmst du "Bar" , die Einstellungen bei Allgemein & Hintergrund machen lt. Screens

                    Background: linear-gradient(to right,red,yellow,green)
                    3845_unbenannt.png
                    3845_unbenannt2.png
                    3845_unbenannt3.png
                    3845_img_3483.jpg

                    1 Reply Last reply
                    0
                    • T Offline
                      T Offline
                      tempestas
                      wrote on last edited by
                      #205

                      Hall uhula,

                      eine Frage habe ich:

                      ich kopiere mir Teile des MD (komplette Abschnitte, also z.B. alles, was unter /* INPUT */ steht ).

                      Trotzdem sehen bei mir z.B. die jqui input Widgets nach Zuweisung der CSS Klasse ganz anders aus, als in deinen Vorlagen? Habe ich da was falsch gemacht, muss man doch einfach alles rüberkopieren?

                      Danke vorab!

                      Nachtrag: ok, war ne blöde Frage: alles rüberkopieren hilft natürlich. Da habe ich die Abhängigkeiten der einzelnen Abschnitte wohl noch nicht verstanden.

                      Hach Mensch, es gibt aber auch viel zu lernen…

                      Edit 2:

                      ok, eine Frage habe ich nun doch. Wie bekomme ich biem jqui date time input nun die Sekunden weg? die werden immer angezeigt, reagieren nicht auf das "zeige keine Sekunden" (logisch, wird ja auch alles überschrieben).

                      was müsste ich tun, um bei spezifischen jqui date time inputs den Unterstrich zu entfernen?

                      DANKE!

                      <size="85">ioBroker | 21 Adapter | Ubuntu Server | intel NUC | Homematic CCU2 | Hue | Osram Lightify| Sonos | 2x Instar Cam | Samsung Tab A 2016 im Holzrahmen| 3x Echo dot | 1x Echo | Neato Botvac D5</size>

                      1 Reply Last reply
                      0
                      • T Offline
                        T Offline
                        tempestas
                        wrote on last edited by
                        #206

                        Da man die Sekunden wohl nicht ausschalten kann im Widget habe ich mir jetzt so beholfen, die Schrift und die Bottom-Border unsichtbar zu machen und dann das Ganze als unsichtbares Overlay über meine Zeitanszeige zu legen, die sich dann wiederum aus den Stunden und Minuten, die man mit dem Widget einstellt, speist.

                        Etwas von Hinten durchs Auge in die Brust, aber funktioniert!

                        <size="85">ioBroker | 21 Adapter | Ubuntu Server | intel NUC | Homematic CCU2 | Hue | Osram Lightify| Sonos | 2x Instar Cam | Samsung Tab A 2016 im Holzrahmen| 3x Echo dot | 1x Echo | Neato Botvac D5</size>

                        1 Reply Last reply
                        0
                        • R Offline
                          R Offline
                          reini
                          wrote on last edited by
                          #207

                          Hallo Leute,

                          habe ich mit dem responsiven Design auch eine Chance diverse reingesetzte Widgets im Bild richtig positioniert zu bekommen? Bild wird auf die Breite angepasst, die Widgets stehen aber dann zum Teil irgendwo herum..
                          3845_img_3502.png

                          1 Reply Last reply
                          0
                          • arteckA Offline
                            arteckA Offline
                            arteck
                            Developer Most Active
                            wrote on last edited by
                            #208

                            hier kannst du auf prozent umschalten
                            1518_unbenannt.jpg

                            zigbee hab ich, zwave auch, nuc's genauso und HA auch

                            1 Reply Last reply
                            0
                            • R Offline
                              R Offline
                              reini
                              wrote on last edited by
                              #209

                              @arteck:

                              hier kannst du auf prozent umschalten `

                              was ändert das aber an einer richtigen Positionierung? Ich hab ja das Problem das ich Widgets in die Cards reinsetze welche dann je nach Auflösung nicht richtig mitwandern an die korrekten Positionen, vielleicht geht das auch gar nicht aber müsste ich es wissen denn dann probier ich nicht weiter :)

                              thx

                              1 Reply Last reply
                              0
                              • arteckA Offline
                                arteckA Offline
                                arteck
                                Developer Most Active
                                wrote on last edited by
                                #210

                                @reini:

                                @arteck:

                                hier kannst du auf prozent umschalten `

                                was ändert das an der Positionierung? `

                                na die widgets werden nach der Scallierung an die entsprechnde stelle gepackt..so wie du die haben willst

                                zigbee hab ich, zwave auch, nuc's genauso und HA auch

                                1 Reply Last reply
                                0
                                • R Offline
                                  R Offline
                                  reini
                                  wrote on last edited by
                                  #211

                                  @arteck:

                                  @reini:

                                  @arteck:

                                  hier kannst du auf prozent umschalten `

                                  was ändert das an der Positionierung? `

                                  na die widgets werden nach der Scallierung an die entsprechnde stelle gepackt..so wie du die haben willst `

                                  ich checks nicht, die Widgets wandern auch mit den % irgendwo hin, die Temperatur müsste Mitte des Raumes bleiben und das LED beim TV - die Widgets müssten doch dann auch kleiner werden wenn das Bild responsiv kleiner wird, vielleicht geht das auch gar nicht was ich meine…trotzdem danke

                                  Ich werde das Bild einfach alleine darstellen und die Widgets in nem eigenen Grid darunter
                                  3845_2018-01-25_10_41_45-home_-teamviewer-freie_lizenz__keine_kommerzielle_nutzung.png

                                  1 Reply Last reply
                                  0
                                  • T Offline
                                    T Offline
                                    tempestas
                                    wrote on last edited by
                                    #212

                                    EDIT: Hier stand eine wirklich, wirklich dumme Frage von mir.

                                    Mein Beeindruckt-Sein vom MD scheint manchmal mit meiner Denkfähigkeit zu kollidieren….

                                    also: die hier stehende Frage wurde gelöst

                                    <size="85">ioBroker | 21 Adapter | Ubuntu Server | intel NUC | Homematic CCU2 | Hue | Osram Lightify| Sonos | 2x Instar Cam | Samsung Tab A 2016 im Holzrahmen| 3x Echo dot | 1x Echo | Neato Botvac D5</size>

                                    1 Reply Last reply
                                    0
                                    • arteckA Offline
                                      arteckA Offline
                                      arteck
                                      Developer Most Active
                                      wrote on last edited by
                                      #213

                                      @reini:

                                      @arteck:

                                      @reini:

                                      was ändert das an der Positionierung? `

                                      na die widgets werden nach der Scallierung an die entsprechnde stelle gepackt..so wie du die haben willst `

                                      ich checks nicht, die Widgets wandern auch mit den % irgendwo hin, die Temperatur müsste Mitte des Raumes bleiben und das LED beim TV - die Widgets müssten doch dann auch kleiner werden wenn das Bild responsiv kleiner wird, vielleicht geht das auch gar nicht was ich meine…trotzdem danke

                                      Ich werde das Bild einfach alleine darstellen und die Widgets in nem eigenen Grid darunter `

                                      ok also nochmal…du klickst auf das widget was du verschieben willst... jetzt änderst du die px auf % wie ich es dir angegeben habe.. ewtl. nochmal das widget schieben ..halt nur ein stückchen...

                                      jetzt die vis neu laden (nicht den editor) ..somit müsste das widget an der stelle bleiben passen zur Scallierung..
                                      1518_unbenannt.jpg

                                      zigbee hab ich, zwave auch, nuc's genauso und HA auch

                                      1 Reply Last reply
                                      0
                                      • R Offline
                                        R Offline
                                        reini
                                        wrote on last edited by
                                        #214

                                        danke arteck, es scheitert sicher bei mir schon an der "ContPage1" - habe hier sicher nur Schrott eingestellt (und dort sind die Widgets auch schon verschoben)

                                        Kannste mir richtige Einstellungen dafür geben ;)

                                        thx
                                        3845_2018-01-25_14_17_24-posteingang_-reinhard.hackl_spitz.at-_outlook.png

                                        1 Reply Last reply
                                        0
                                        • arteckA Offline
                                          arteckA Offline
                                          arteck
                                          Developer Most Active
                                          wrote on last edited by
                                          #215

                                          du musst "top" und "left" auf % stellen nicht die "width" und "height" (das sind die Grössenangaben)

                                          zigbee hab ich, zwave auch, nuc's genauso und HA auch

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          398

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe