Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Test Adapter Material Design Widgets v0.3.x

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Test Adapter Material Design Widgets v0.3.x

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

      @Coffeelover sagte in Test Adapter Material Design Widgets v0.3.x:

      @AxelF1977 Hi! Wenn du wie geschrieben "to left" oder "xxxdeg" verwendest, drehst du in meinen Augen nur den Farbverlauf. Dann kannst auch in der Reihenfolge in CSS auch die Farben drehen.
      Wenn du aber unter CSS Allgemein bei Transform "rotate(180deg)" (oder andere Winkelwerte) eingibst, drehst du damit das ganze Widget.

      Danke für den Tipp. Probiere ich gleich mal aus!

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

        @AxelF1977 Ich habe mir das gerade nochmal etwas angeschaut. Warum nutzt du das CSS für die Bars überhaupt?
        Wenn du die CSS Klasse entfernst und einfach nur über den eingetragenen Hintergrund gehst, kommst du auf sowas, einmal mit to left, einmal mit to right. Balkenfarbe der Werte auf die Hintergrundfarbe, einen Rotate 180deg und sowas ist möglich. (Zum Testen habe ich links und rechts identische Werte im Bar)

        60fbde48-bb32-407b-a6bc-32349f108c74-grafik.png

        [{"tpl":"tplValueFloatBar","data":{"oid":"spotify-premium.0.player.progressPercentage","g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"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","min":"0","max":"100","orientation":"horizontal","color":"Black","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,"visibility-oid":"spotify-premium.0.player.isPlaying","name":"Spotify Progress 0","reverse":true},"style":{"left":"24px","top":"89px","height":"50px","width":"338px","z-index":"5","background":"linear-gradient(to left, #F44336 0px, #FFEB3B 40%, #4CAF50)","transform":"rotate(180deg)"},"widgetSet":"basic"},{"tpl":"tplValueFloatBar","data":{"oid":"spotify-premium.0.player.progressPercentage","g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"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","min":"0","max":"100","orientation":"horizontal","color":"Black","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,"visibility-oid":"spotify-premium.0.player.isPlaying","name":"Spotify Progress 0","reverse":true},"style":{"left":"366px","top":"89px","height":"50px","width":"338px","z-index":"5","background":"linear-gradient(to left, #F44336 0px, #FFEB3B 40%, #4CAF50)","background-color":""},"widgetSet":"basic"}]
        
        AxelF1977 1 Reply Last reply Reply Quote 1
        • AxelF1977
          AxelF1977 @Coffeelover last edited by

          @Coffeelover sagte in Test Adapter Material Design Widgets v0.3.x:

          @AxelF1977 Ich habe mir das gerade nochmal etwas angeschaut. Warum nutzt du das CSS für die Bars überhaupt?
          Wenn du die CSS Klasse entfernst und einfach nur über den eingetragenen Hintergrund gehst, kommst du auf sowas, einmal mit to left, einmal mit to right. Balkenfarbe der Werte auf die Hintergrundfarbe, einen Rotate 180deg und sowas ist möglich. (Zum Testen habe ich links und rechts identische Werte im Bar)

          60fbde48-bb32-407b-a6bc-32349f108c74-grafik.png

          [{"tpl":"tplValueFloatBar","data":{"oid":"spotify-premium.0.player.progressPercentage","g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"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","min":"0","max":"100","orientation":"horizontal","color":"Black","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,"visibility-oid":"spotify-premium.0.player.isPlaying","name":"Spotify Progress 0","reverse":true},"style":{"left":"24px","top":"89px","height":"50px","width":"338px","z-index":"5","background":"linear-gradient(to left, #F44336 0px, #FFEB3B 40%, #4CAF50)","transform":"rotate(180deg)"},"widgetSet":"basic"},{"tpl":"tplValueFloatBar","data":{"oid":"spotify-premium.0.player.progressPercentage","g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"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","min":"0","max":"100","orientation":"horizontal","color":"Black","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,"visibility-oid":"spotify-premium.0.player.isPlaying","name":"Spotify Progress 0","reverse":true},"style":{"left":"366px","top":"89px","height":"50px","width":"338px","z-index":"5","background":"linear-gradient(to left, #F44336 0px, #FFEB3B 40%, #4CAF50)","background-color":""},"widgetSet":"basic"}]
          

          Zuerst: Sehr geil 👍

          Das CSS habe ich angefangen zu nutzen, als ich vor 2 Jahren mit Uhulas Material CSS experimentiert habe. Dann hab ich es einfach gelassen, und mir keine Platte mehr gemacht

          Vor allem für @ple sollte das jetzt interessant sein, denn das bringt ihm seinen Wunsch näher.

          Ich werde mir das auch ansehen, und dann wohl die anderen austauschen.

          Danke

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

            @AxelF1977 Hab ich doch glatt den falschen verlinkt. Sorry. 😉
            Im CSS ist es übrigens nur diese Vererbung, die das steuert:

            .mdui-hn-bargraph>*{
              background-image:inherit 
            }
            
            
            AxelF1977 1 Reply Last reply Reply Quote 0
            • AxelF1977
              AxelF1977 @Coffeelover last edited by AxelF1977

              @Coffeelover sagte in Test Adapter Material Design Widgets v0.3.x:

              @AxelF1977 Hab ich doch glatt den falschen verlinkt. Sorry. 😉
              Im CSS ist es übrigens nur diese Vererbung, die das steuert:

              .mdui-hn-bargraph>*{
                background-image:inherit 
              }
              
              

              Gibt kein richtig oder falsch, helfen wird es vielen, mich eingeschlossen.

              1 Reply Last reply Reply Quote 1
              • P
                ple last edited by ple

                Also erst mal vielen lieben Dank für eure Hilfe.
                Ich habe das mal soweit ausprobiert mit dem Code oben. Dabei hatte ich leider das Problem, dass bei negativen werden die Balkenlänge mit dem Hintergrund vertauscht ist, also zuweit geht.
                Im Screenshot der Balken nach links.
                34bb76aa-bd17-4897-8594-c537330a91c0-image.png

                Nach rechts mit negativen Werten klappt das soweit.
                c1f7feaa-be34-444a-ae4f-4d74a49d13c1-image.png 5f923173-afb8-4daa-87f0-dcc286d38f2a-image.png

                Ich bin jetzt den Weg gegangen und habe mir mal die css von Uhula geborgt.
                css

                /* Hintergrund und Border */
                .mdui-h-bargraph,
                .mdui-v-bargraph {
                  background-position: -1000px !important;
                  background-repeat: no-repeat !important;
                  box-shadow:0 0 0 1000px rgba(255,255,255,0.1) inset;
                  border:none !important;
                }
                .mdui-h-bargraph>*,
                .mdui-v-bargraph>* {
                  background-image:inherit !important;
                }
                .mdui-h-bargraph:after,
                .mdui-v-bargraph:after {
                  content:"";
                  position:absolute;
                  left:0;
                  top:0;
                  width:100%;
                  height:100%;
                  background-image:inherit !important;
                  opacity:0.1;
                }
                

                und die Widgets sind

                [{"tpl":"tplValueFloatBar","data":{"oid":"s7.1.DBs.DB90._000_Messung_Messung_2_Taster_2_Messwert","g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"min":"0","max":"{s7.1.DBs.DB90._000_Messung_Messung_2_Taster_2_Tolleranz_Max}","orientation":"horizontal","color":"#2196F3","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,"reverse":true,"class":"mdui-h-bargraph","border":"","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,"comment":"","name":"","visibility-cond":">","visibility-val":"0","visibility-groups-action":"hide","visibility-oid":"s7.1.DBs.DB90._000_Messung_Messung_2_Taster_2_Messwert"},"style":{"left":"240px","top":"296px","width":"100px","height":"10px","z-index":"100","background":"linear-gradient(to left, #4CAF50 0px, #fae300 40px, #ff1f1a 80px )"},"widgetSet":"basic"},{"tpl":"tplValueFloatBar","data":{"oid":"s7.1.DBs.DB90._000_Messung_Messung_2_Taster_2_Messwert","g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"<","visibility-val":"0","visibility-groups-action":"hide","min":"0","max":"{s7.1.DBs.DB90._000_Messung_Messung_2_Taster_2_Tolleranz_Min}","orientation":"horizontal","color":"#2196F3","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,"reverse":false,"class":"mdui-h-bargraph","border":"","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,"comment":"","visibility-oid":"s7.1.DBs.DB90._000_Messung_Messung_2_Taster_2_Messwert","name":""},"style":{"left":"344px","top":"296px","width":"100px","height":"10px","z-index":"100","background":"linear-gradient(to right, #4CAF50 0px, #fae300 40px, #ff1f1a 80px )"},"widgetSet":"basic"}]
                

                ist zwar dann nicht mehr standard, aber es geht soweit erst mal. Leider muss ich jeweils den anderen Balken ausblenden, da er sonst voll gefüllt ist 😞
                Mal schauen was noch so kommt an Widgets, vielleicht später mal.

                Gruß

                1 Reply Last reply Reply Quote 0
                • Scrounger
                  Scrounger Developer @bommel_030 last edited by

                  This post is deleted!
                  1 Reply Last reply Reply Quote 0
                  • Scrounger
                    Scrounger Developer @bommel_030 last edited by

                    @bommel_030 sagte in Test Adapter Material Design Widgets v0.3.x:

                    @Scrounger
                    Hab fürs HTML-Card Widget keinen eigenen Thread gefunden, deshalb hier....
                    Ist es möglich das Bild (hier horizontales Layout) zu formatieren? Aktuell zeigt er das Bild stur in Originalauflösung an. Passt nicht so ganz... Könnte das natürlich auf die richtige Auflösung konvertieren, hilft mir dann aber beim Border auch nicht weiter. Egal was ich bei der Bildquelle angebe, er nimmt nur das Bild und keine Bindings, Formatangaben etc.
                    Ein Bild sagt mehr als tausend Worte:
                    c61d426b-904d-4d83-9e52-02808535cc7d-image.png
                    Oben passt die Auflösung der Tonne nicht so recht, und wie den Rahmen mit nem Binding wie bei der Tonne unten versehen geht nicht oder ich verstehe die Syntax nicht.

                    Wenn du ein Bild angibst, dann wird bei diesem Widget immer das aspect ratio (16:9) beibehalten, d.h. die Breite des Widgets bestimmt das aspect ratio. Das eigent sich z.B. sehr gut für FanArt oder Fotos im entsprechenden aspect ratio.

                    Wenn du "icon" verwenden willst, dann nimm das Image-Widget und leg es in das Card Widget. Das geht besser,.

                    1 Reply Last reply Reply Quote 0
                    • B
                      bommel_030 last edited by

                      Alles klar, hab es jetzt mit HTML Card und Basic Image gelöst.

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

                        Moin Leute,

                        erstmal Dank @Scrounger für den Adapter! Echt super Arbeit.

                        Eine Frage habe ich aber noch. Ich versuche grade eine Diagramm aus einer HTML-Card in einer Mansory-View in einem Dialog anzuzeigen. Vorgehen: Page mit Diagramm gebaut und einen Button für ein Dialog-View eingesetzt. Dieser soll man dann die selbe View (bzw. nur den Graphen - hab ihn testweise mal in eine eigene View gebaut) in dem Dialog anzeigen. Das funktioniert auch soweit, nur nachdem ich den Dialog schließe ist die View auf der Hauptseite weg. Ich vermute das VIS intern die Seiten reused und jede Seite immer nur ein Binding haben kann.

                        Gibt es dafür irgendeinen Workaround oder wäre es evtl. sogar möglich eine Funktion einzubauen das ich für jede Sub-View in der Mansory-View auswählen kann ob es einen kleinen "Expand"-Button gibt, der mir genau diese View dann als Semi-Fullscreen Dialog anzeigt?

                        Vielen Dank schonmal!

                        Gruß,
                        Porys

                        Scrounger 1 Reply Last reply Reply Quote 0
                        • Scrounger
                          Scrounger Developer @Guest last edited by

                          @Porys
                          Erstell bitte ein Beispiel Objekt und lad es hoch.
                          Und am besten dann ein paar screenshots posten was du genau umsetzen möchtest. Aus deiner Beschreibung wird mir nicht 100% ersichtlich was du machen möchtest.

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

                            @Scrounger
                            Danke für die schnelle Antwort. Eigentlich möchte ich nur die kleinen Widgets per Button in einem (großen) Dialog anzeigen.

                            Aktuell hab ich in dem View was auf der Übersichtsseite eingebunden wird einen Button der das selbe View nochmal in einem Dialog anzeigt. Wenn ich den Dialog dann aber öffne und wieder schließe, ist die Card auf der Übersichtsseite leer. Ich vermute das liegt darin das sich der Dialog das Binding für die Seite beim Öffnen holt und anschließend die Übersichtseite nicht aktualisiert wird (bzw. das Binding der View zurück bekommt).

                            Daher wäre meine Frage ob es dafür eine Art Workaround gibt (ohne den gleichen Graph mehrfach anzulegen) bzw. ob es vllt möglich ist die Dialog öffnen Logik direkt auf der Overview-Seite in die einzelnen "Cards" anzubinden. Sprich jede Card innerhalb des "Mansonry-Views"-Widget bekommt eine Funktion/Button der die enthaltene View in einem Dialog anzeigt (evtl mit Möglichkeit das per Card an bzw abzuschalten).

                            EDIT: Hier ein Projekt mit den beiden Views.
                            test_project.zip.zip

                            Scrounger 2 Replies Last reply Reply Quote 0
                            • Scrounger
                              Scrounger Developer @Guest last edited by

                              @Porys
                              Exportiere bitte das gesamtes Projekt!
                              Sorry aber ich hab nicht die Zeit mir aus den einzelnen Views das selbst zusammen zu basteln, geschweige denn Lust dazu 😉

                              1 Reply Last reply Reply Quote 0
                              • Scrounger
                                Scrounger Developer @Guest last edited by

                                @Porys sagte in Test Adapter Material Design Widgets v0.3.x:

                                @Scrounger
                                Danke für die schnelle Antwort. Eigentlich möchte ich nur die kleinen Widgets per Button in einem (großen) Dialog anzeigen.

                                Aktuell hab ich in dem View was auf der Übersichtsseite eingebunden wird einen Button der das selbe View nochmal in einem Dialog anzeigt. Wenn ich den Dialog dann aber öffne und wieder schließe, ist die Card auf der Übersichtsseite leer. Ich vermute das liegt darin das sich der Dialog das Binding für die Seite beim Öffnen holt und anschließend die Übersichtseite nicht aktualisiert wird (bzw. das Binding der View zurück bekommt).

                                Daher wäre meine Frage ob es dafür eine Art Workaround gibt (ohne den gleichen Graph mehrfach anzulegen) bzw. ob es vllt möglich ist die Dialog öffnen Logik direkt auf der Overview-Seite in die einzelnen "Cards" anzubinden. Sprich jede Card innerhalb des "Mansonry-Views"-Widget bekommt eine Funktion/Button der die enthaltene View in einem Dialog anzeigt (evtl mit Möglichkeit das per Card an bzw abzuschalten).

                                EDIT: Hier ein Projekt mit den beiden Views.
                                test_project.zip.zip

                                Problem ist, dass man in einer View nicht 2mal eine andere gleiche View verwenden kann, liegt am VIS Adapter.
                                Workaround wäre, eine View mit Graph für Masonry / Grid View erstellen und eine weitere View mit Graph die vom Dialog verwendet wird. Dann sollte es gehen.
                                Da mir der usecase sehr gefällt werd ich mal schauen, ob man das nicht anders lösen kann.

                                Stephan Schleich 1 Reply Last reply Reply Quote 0
                                • Stephan Schleich
                                  Stephan Schleich @Scrounger last edited by

                                  @Scrounger Wäre es möglich einen multi state Button zur Verfügung zu stellen, welcher die zur Verfügung stehenden Objekt Werte pro klick weiterspringt wieder von vorne beginnt? (Sprich von 0 auf 1 von 1 auf 2 etc.)

                                  Scrounger 1 Reply Last reply Reply Quote 0
                                  • Scrounger
                                    Scrounger Developer @Stephan Schleich last edited by

                                    @Stephan-Schleich sagte in Test Adapter Material Design Widgets v0.3.x:

                                    @Scrounger Wäre es möglich einen multi state Button zur Verfügung zu stellen, welcher die zur Verfügung stehenden Objekt Werte pro klick weiterspringt wieder von vorne beginnt? (Sprich von 0 auf 1 von 1 auf 2 etc.)

                                    Nee sorry, viel zu speziell. Sowas musst du über ein skript realisieren.

                                    Stephan Schleich 1 Reply Last reply Reply Quote 0
                                    • Stephan Schleich
                                      Stephan Schleich @Scrounger last edited by Stephan Schleich

                                      @Scrounger okay

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

                                        Habe gestern das ganze mal versucht ins laufen zu bekommen, allerdings funktioniert bei mir die breiten- und höhendefinition in % nicht. Im Editor funktioniert das ganze, in der Runtime leider nicht. Wenn ich die Werte in Pixel angebe klappt alles. Ist natürlich ein wenig unprakisch und sollte ja mit % funktionieren?

                                        Muss ich irgendwo noch definieren was 100% sind?

                                        Version: 0.3.17
                                        JS: 4.6.17
                                        Browser: Chrome aktuell, Edge, Fully, überall das gleiche.

                                        Hier Beispiel beim Wetterskript:

                                        2.png 1.png

                                        Scrounger 1 Reply Last reply Reply Quote 0
                                        • Scrounger
                                          Scrounger Developer @ShneedleWoods last edited by

                                          @ShneedleWoods
                                          Hast du unter Tools Auflösung etwas eingestellt?
                                          Was steht in der browser console zur Runtime (F12)?

                                          S 1 Reply Last reply Reply Quote 0
                                          • S
                                            ShneedleWoods @Scrounger last edited by ShneedleWoods

                                            @Scrounger

                                            Danke erstmal für deine Antwort. Auflösung habe ich jetzt mal überall rausgenommen, keine Änderung.
                                            Bei F12 und Runtime find ich jetzt nix so recht, welche Info brauchst du genau?

                                            Das Menü öffnet sich wenn ich ganz links oben klicke, auch der Seitenwechsel geht. Nur funktioniert die Größenvorgabe via % eben nicht.

                                            Edit: Hab mal paar Fehler angehängt.

                                            3.png

                                            Edit2: Nachdem ich Metro Widgets installiert habe, sind nun weniegr Fehler, aber tut die skalierung geht immernoch nicht. Ich hab mal in einem anderen Projekt Testweise mit % Angaben gearbeitet, funktioniert auch nicht. Muss wohl irgendwas globales sein, finde aber nix 😞

                                            Edit3: Offenbar wird die Breite der Container mit 16px definiert, wieso dieser Wert 100% entspricht, ist mir allerdings nicht nachvollziehbar. Wenn ich die breite auf 50% ändere, ergeben sich 8px.

                                            5.png

                                            Edit4: Nachdem ich via CSS unter html width: 100%; eingefügt hab, funktioniert es nun. 😉

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            932
                                            Online

                                            31.7k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            adapater material material design widgets vis visualization widget
                                            33
                                            169
                                            16622
                                            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