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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • 15. 05. Wartungsarbeiten am ioBroker Forum

    • Monatsrückblick - April 2025

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

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

      @Pittini Wundert mich, dass die mdui Controls da funktionieren, da sie eigentlich mit den "from=" und "to=" Angaben im sek-Format eigentlich nicht umgehen können. Ich habe es nur mit "&from=now-2h&to=now-0h" usw. getestet.
      Info Zeitangaben: m=min h=hour d=day w=week M=month y=year

      Edit: Geht doch, wenn man vorher einmal das Intervall "1 Stunde" ... gewählt hat, bevor man "<" und ">" nutzt.

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

        Hi zusammen,

        EDIT: ich hab mein Problem gefunden --- ich lass das aber mal stehen, vielleicht nützt es jemandem --- es geht genau so, wie ich hier geschrieben habe

        ich versuche mich gerade daran einen HTML Text (basic - html mit CSS mdui-title mdui-center-v) in der Breite (width) variabel, also in Abhängigkeit von angezeigten anderen Widgets zu gestalten.

        Dafür habe ich in der width eingetragen:

        calc(100% - {wert:meinadapter.run; wert!="run"? 50 : 100}px)
        

        Noch ein Bild vom "Problem"
        90ac18fd-3ae5-4a61-85e7-6ad44e213d58-grafik.png

        Der Text geht hinter den Stop-Button (weißes Quadrat). Dieser Button wird nur angezeigt, wenn meine Geräte laufen, deshalb frage ich den Status "run" ab. Wenn dieser Button nicht da ist (und das ist meistens der Fall), dann kann der Text bis zu dem Pfeilchen gehen und sonst soll er vorher einfach abgeschnitten werden (bzw. mehrzeilig werden).

        Wie ganz oben schon editiert. Es geht genau so - ich hatte vergessen, dass ich ja nicht links bei 0 anfange, sondern auch schon bei 100px, also sollte ich 150 bzw 200 schreiben und schon geht's

        Grüße jpgorganizer

        1 Reply Last reply Reply Quote 0
        • S
          SMARTY.ML @jpgorganizer last edited by

          @jpgorganizer bin auf die gleiche Lösung gestoßen, funktioniert

          1 Reply Last reply Reply Quote 0
          • W
            webseb79 last edited by

            @Uhula
            benutze dein Projekt schon eine Weile und bin begeistert von deiner Arbeit und deinem Wissen.
            MeinProblem was ich habe ist das Input Widget.
            Egal ob String angehakt oder nicht gibt es immer ein String zurück anstatt Number.
            Kann man mit CSS oder Skript in Vis das Input auf Typ Number festnageln?

            Danke im Voraus

            Gruß Sebastian

            jpgorganizer Uhula 2 Replies Last reply Reply Quote 0
            • jpgorganizer
              jpgorganizer @webseb79 last edited by jpgorganizer

              deleted - wrong post

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

                @Uhula sagte in [Projekt] Material Design CSS für ioBroker.vis:

                oder du weist deinen cards in den content-Views direkt Farben zu

                Genau das mache ich ja, aber wie schaffe ich es das bei hellem content Hintergrund die cards die Backgorundfarbe des mdui-dark nehmen?

                bluegrey.png

                Hier in meinem Beispiel habe ich die contentfarbe in der mdui-config angepasst. Beide cards haben den mdui-bluegrey-bg. ich hätte aber gerne bei einem hellen content Hintergrund die card mit dem dunklen mdui-blue-bg.

                Wie bzw. wo muss ich das einstellen?

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

                  @webseb79 vis rendert immer type="text". Mit MD CSS v2.1 kannst du das übersteuern, in dem du de, Widget explizit "mdui-input mdui-input-number" zuweist. Ich patche dann "text" gegen "number" beim Wechsel einer page in das HTML-input.

                  @0018 Das geht nicht, die Farb-Zuweisungen an die cards sind immer stärker als die dahinter liegende content-Farbe. Eine Lösung für dich wäre, wenn du die Farben der cards nicht direkt zuweist, sondern über ein vis-Binding und via vis-State die Farbe setzt.
                  Bsp: Statt "mdui-bluegrey-bg" den cards "{vis.0.my_card_bg}" zuweisen. Und dann dafür sorgen, dass im State "vis.0.my_card_bg" dann entweder "mdui-bluegrey-bg" oder eben ""mdui-blue-bg" gesetzt wird.

                  1 Reply Last reply Reply Quote 0
                  • D
                    der-eine @Pittini last edited by

                    @Pittini oh sorry hab Deinen Post wohl übersehen. Danke für den Tipp. Der Link war der richtige hab übersehen, dass die Bedienelemente ein Target haben. 🙈

                    1 Reply Last reply Reply Quote 0
                    • D
                      der-eine @Uhula last edited by

                      @Uhula sagte in [Projekt] Material Design CSS für ioBroker.vis:

                      @der-eine Wenn du deine Grafana iFrames in der Zeitachse direkt steuern möchtest, schau dir mal das Beispiel in MD_Demo (Bedienung>Skalieren) an, dort mache ich das über ein Popupmenu, refresh dito. Allerdings muss die Grafana URL einen besonderen Aufbau haben (from / to).

                      Danke. Hab es hinbekommen. 👍🏻
                      Die lnav sollte doch eigentlich nach betätigen eines Reiters wieder einklappen oder? Rufe sie oben über das Burgermenü auf aber sie klappt nicht mehr ein wenn ich was anklicke. Ist das auch eine Option?

                      Uhula 1 Reply Last reply Reply Quote 0
                      • Uhula
                        Uhula @der-eine last edited by

                        @der-eine Jein. Wenn du in einen freien lnav Bereich klickst, dann ja. Klickst du ne Schaltfläche, dann nicht, da der Klick nicht bubbelt. IdR wird aber eine neue page geladen, so dass es nicht auffällt. Anders, wenn sich nur ein Popup/Dialog öffnet, dann bleibt lnav (leider) geöffnet.

                        D 1 Reply Last reply Reply Quote 0
                        • D
                          der-eine @Uhula last edited by

                          @Uhula das stimmt, dass eine neue Seite geladen wird aber leider ist die lnav am iPhone mehr als die Hälfte der Breite des Displays groß und daher wäre es schon gut wenn sie wieder zugehen würde. Wenn’s natürlich keine Möglichkeit gibt, dann hilfst eh nichts.

                          1 Reply Last reply Reply Quote 0
                          • S
                            SMARTY.ML last edited by

                            Ich habe eine Frage zu den Status Anzeigen. Hier werden Variablen 0-12 abgefragt und dementsprechend die HTML nach Zeile ausgewählt. Gibt es auch eine Möglichkeit direkt true/fals als Status abzugreifen? Bsp. simples Licht An/Aus

                            Dominik F. 1 Reply Last reply Reply Quote 0
                            • Dominik F.
                              Dominik F. @SMARTY.ML last edited by Dominik F.

                              @SMARTY-ML

                              über das Bool HTML Widget. Ob es auch anders geht weiß ich nicht. Hier ein Beispiel aus meiner Vis:

                              [{"tpl":"tplValueBool","data":{"oid":"radar2.0.Handy_Dominik","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"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,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html_false":"<i class=\"material-icons mdui-red\">close</i>","html_append":"","html_true":"<i class=\"material-icons mdui-green\">check</i>;","class":"mdui-state"},"style":{"left":"calc(40% - 12px)","top":"69px","width":"24px","height":"24px"},"widgetSet":"basic"}]
                              
                              1 Reply Last reply Reply Quote 0
                              • Uhula
                                Uhula last edited by Uhula

                                CLOSED

                                Bitte im Material Design CSS v2 Thema weitere Fragen stellen, diskutieren und ANregungen posten.

                                Danke

                                -> Moderatoren: Wie kann man eigene Themen schließen?

                                Negalein 1 Reply Last reply Reply Quote 0
                                • Negalein
                                  Negalein Global Moderator @Uhula last edited by

                                  @Uhula sagte in [Projekt] Material Design CSS für ioBroker.vis:

                                  Moderatoren: Wie kann man eigene Themen schließen?

                                  Ich hab ihn soeben geschlossen.
                                  User können das nicht.

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

                                  Support us

                                  ioBroker
                                  Community Adapters
                                  Donate

                                  592
                                  Online

                                  31.6k
                                  Users

                                  79.5k
                                  Topics

                                  1.3m
                                  Posts

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