Navigation

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

    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

    Material Design Widgets: HTML Card Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • Scrounger
      Scrounger Developer @BobBruni last edited by

      @bobbruni
      Hab was eingebaut und sollte in der nächsten Version dann automatisch gehen

      1 Reply Last reply Reply Quote 1
      • B
        BobBruni @Scrounger last edited by BobBruni

        @scrounger said in Material Design Widgets: HTML Card Widget:

        Anbei ein funktionierendes Beispiel:

        Ich würde hier gern mit Bindings arbeiten... Wie muss ich das machen?
        Wenn ich die mdw-oid weg lasse funktioniert es nicht!?

        db44f7d2-6017-4164-b774-cec997c8d734-image.png

        Edit: Auch mit nothing_selected funktionert es nicht

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

          @bobbruni
          Warum der Vorteil vom value Widget ist das man auf Binding verzichten kann und Vorteil ist das es so perfomanter ist.
          Label, unit und Kommastellen, kannst du doch ganz bequem per Editor konfigurieren

          B 1 Reply Last reply Reply Quote 0
          • B
            BobBruni @Scrounger last edited by

            @scrounger

            Jetz weiß ich auch was das Value-Widget ist... Gerade erst gefunden 🤦‍♂️
            Sorry und Danke!

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

              Hallo @Scrounger

              ist es möglich den Titel der html-card in der Höhe zu zentrieren?

              card.png

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

                @0018
                Entweder die Höhe per Editor ändern oder html Tag verwenden

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

                  @scrounger Danke, leider gibt es per Editor nicht die Möglichkeit direkt die Höhe des Titeltextes zu definieren, es gelingt mir nur über die Höhe des Untertitels. Dann wird allerdings die Titelseite zu hoch und passt nicht mehr ins Gesamtbild.

                  Von html tags habe ich leider keinen Plan und bin auf deine Hilfe angewiesen. Habe durch suchen folgende Ansätze gefunden, aber bringt nicht den gewünschten Erfolg...

                  <div style="vertical-align:middle">
                     Testüberschrift
                  </div>
                  
                  <center> Testüberschrift</center>
                  

                  leider kann ich keinen reinen html tag finden der vertikal zentriert. Kannst du mir evtl den Tag dazu nennen? Bzw ist es möglich über den Projekt-CSS Code diese Funktion generell für das gesamte Projekt zu implementieren?

                  Danke schonmal....

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

                    @0018

                    per css überschreiben:

                    .materialdesign-html-card.card-title-section {
                        padding-top: 0px !important;
                    }
                    

                    https://www.youtube.com/watch?v=J3FU0CVaeHg
                    Da wird gezeigt wie man den inspector nutzt, damit kannst du eigenständig die klassen raus finden und auch in der runtime direkt einstellungen ändern zum vorab probieren.

                    0 O 2 Replies Last reply Reply Quote 1
                    • 0
                      0018 @Scrounger last edited by

                      @scrounger sagte in Material Design Widgets: HTML Card Widget:

                      Da wird gezeigt wie man den inspector nutzt, damit kannst du eigenständig die klassen raus finden und auch in der runtime direkt einstellungen ändern zum vorab probieren.

                      super, danke für das Video, das macht es um einiges leichter zu verstehen 👍
                      Um es letztendlich in der Höhe zu zentrieren und die gleiche Höhe zu behalten, habe ich es jetzt so gelöst:

                      .materialdesign-html-card.card-title-section {
                          padding-top: 8px !important;
                          padding-bottom: 8px !important;
                      }
                      

                      so passt es perfekt, danke 👏

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

                        @scrounger und alle anderen Profis hier,

                        ich habe mich jetzt auch mal an einen html Widget versucht, echt coole Sache.

                        41465945-92b8-4fb9-a285-2c541caee286-image.png

                        Export:

                        <div class='vis-widget materialdesign-widget materialdesign-button materialdesign-button-html-element'
                           style='width: 70px; height: 70px; position: absolute; top: 35px; left: 10px; display: flex; align-items: center;'
                           mdw-type='state_vertical'
                           mdw-oid='homee.0.Homee-0.Homeegrams.26.active'
                           mdw-buttonStyle='raised'
                           mdw-vibrateOnMobilDevices='50'
                           mdw-textFontFamily='#mdwTheme:vis-materialdesign.0.fonts.button.vertical.text'
                           mdw-textFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.button.vertical.text'
                           mdw-alignment='center'
                           mdw-mdwButtonPrimaryColor='#mdwTheme:vis-materialdesign.0.colors.button.vertical.primary'
                           mdw-mdwButtonSecondaryColor='#mdwTheme:vis-materialdesign.0.colors.button.vertical.secondary'
                           mdw-image='/vis.0/main/img/Meine Icons/Gewerke/Heizung_An.png'
                           mdw-iconPosition='top'
                           mdw-iconHeight='66'
                           mdw-autoLockAfter='10'
                           mdw-lockIconTop='5'
                           mdw-lockIconLeft='5'
                           mdw-lockIconColor='#mdwTheme:vis-materialdesign.0.colors.button.lock_icon'
                           mdw-lockFilterGrayscale='30'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-value materialdesign-value-html-element'
                           style='width: calc(100% - 100px); height: 25px; position: absolute; top: 5px; left: 90px; display: flex; align-items: center;'
                           mdw-debug='false'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.1.Temperatur'
                           mdw-targetType='auto'
                           mdw-textAlign='end'
                           mdw-valueLabelWidth='4'
                           mdw-valuesFontColor='#2e2e2e'
                           mdw-valuesFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.text'
                           mdw-valuesFontSize='15'
                           mdw-prepandText='Heizung Wohnzimmer Links'
                           mdw-prepandTextColor='#d7cec1'
                           mdw-prepandTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.prepand'
                           mdw-prepandTextFontSize='15'
                           mdw-appendTextColor='#mdwTheme:vis-materialdesign.0.colors.value.append'
                           mdw-appendTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.append'
                           mdw-appendTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.append'
                           mdw-imageColor='#mdwTheme:vis-materialdesign.0.colors.value.icon'
                           mdw-iconPosition='left'
                           mdw-effectFontColor='#mdwTheme:vis-materialdesign.0.colors.value.effect'
                           mdw-effectFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.effect'
                           mdw-effectDuration='750'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-value materialdesign-value-html-element'
                           style='width: 25%; height: 20px; position: absolute; top: 30px; left: 90px; display: flex; align-items: center;'
                           mdw-debug='false'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.1.Modus'
                           mdw-targetType='auto'
                           mdw-textAlign='end'
                           mdw-valueLabelWidth='4'
                           mdw-valuesFontColor='#2e2e2e'
                           mdw-valuesFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.text'
                           mdw-valuesFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.text'
                           mdw-prepandText='Modus:'
                           mdw-prepandTextColor='#mdwTheme:vis-materialdesign.0.colors.value.prepand'
                           mdw-prepandTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.prepand'
                           mdw-prepandTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand'
                           mdw-appendText=''
                           mdw-appendTextColor='#mdwTheme:vis-materialdesign.0.colors.value.append'
                           mdw-appendTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.append'
                           mdw-appendTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.append'
                           mdw-minDecimals=''
                           mdw-imageColor='#mdwTheme:vis-materialdesign.0.colors.value.icon'
                           mdw-iconPosition='left'
                           mdw-effectFontColor='#mdwTheme:vis-materialdesign.0.colors.value.effect'
                           mdw-effectFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.effect'
                           mdw-effectDuration='750'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-select materialdesign-select-html-element'
                           style='width: 180px; height: 38px; position: absolute; top: 12px; left: calc(100% - 185px); display: flex; align-items: center;'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.1.Modus'
                           mdw-inputType='text'
                           mdw-vibrateOnMobilDevices='50'
                           mdw-inputLayout='text'
                           mdw-inputAlignment='right'
                           mdw-inputLayoutBorderColor='#mdwTheme:vis-materialdesign.0.colors.input.border'
                           mdw-inputLayoutBorderColorHover='#mdwTheme:vis-materialdesign.0.colors.input.border_hover'
                           mdw-inputLayoutBorderColorSelected='#mdwTheme:vis-materialdesign.0.colors.input.border_selected'
                           mdw-inputTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.input.text'
                           mdw-inputTextFontSize='12'
                           mdw-inputTextColor='#mdwTheme:vis-materialdesign.0.colors.input.text'
                           mdw-inputLabelText=''
                           mdw-inputLabelColor='#mdwTheme:vis-materialdesign.0.colors.input.label'
                           mdw-inputLabelColorSelected='#mdwTheme:vis-materialdesign.0.colors.input.label_selected'
                           mdw-inputLabelFontFamily='#mdwTheme:vis-materialdesign.0.fonts.input.label'
                           mdw-inputLabelFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.input.label'
                           mdw-inputAppendixColor='#mdwTheme:vis-materialdesign.0.colors.input.appendix'
                           mdw-inputAppendixFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.input.appendix'
                           mdw-inputAppendixFontFamily='#mdwTheme:vis-materialdesign.0.fonts.input.appendix'
                           mdw-inputMessageFontFamily='#mdwTheme:vis-materialdesign.0.fonts.input.message'
                           mdw-inputMessageFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.input.message'
                           mdw-inputMessageColor='#mdwTheme:vis-materialdesign.0.colors.input.message'
                           mdw-inputCounterColor='#mdwTheme:vis-materialdesign.0.colors.input.counter'
                           mdw-inputCounterFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.input.counter'
                           mdw-inputCounterFontFamily='#mdwTheme:vis-materialdesign.0.fonts.input.counter'
                           mdw-clearIconColor='#mdwTheme:vis-materialdesign.0.colors.input.icon_clear'
                           mdw-collapseIconColor='#mdwTheme:vis-materialdesign.0.colors.input.icon_collapse'
                           mdw-listDataMethod='inputPerEditor'
                           mdw-countSelectItems='4'
                           mdw-listPosition='auto'
                           mdw-listItemBackgroundColor='#mdwTheme:vis-materialdesign.0.colors.input.menu.background'
                           mdw-listItemBackgroundHoverColor='#mdwTheme:vis-materialdesign.0.colors.input.menu.hover'
                           mdw-listItemBackgroundSelectedColor='#mdwTheme:vis-materialdesign.0.colors.input.menu.selected'
                           mdw-listItemRippleEffectColor='#mdwTheme:vis-materialdesign.0.colors.input.menu.effect'
                           mdw-showSelectedIcon='prepend-inner'
                           mdw-listIconColor='#mdwTheme:vis-materialdesign.0.colors.input.menu.icon'
                           mdw-listItemFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.input.dropdown.text'
                           mdw-listItemFont='#mdwTheme:vis-materialdesign.0.fonts.input.dropdown.text'
                           mdw-listItemFontColor='#mdwTheme:vis-materialdesign.0.colors.input.menu.text'
                           mdw-listItemSubFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.input.dropdown.subText'
                           mdw-listItemSubFont='#mdwTheme:vis-materialdesign.0.fonts.input.dropdown.subText'
                           mdw-listItemSubFontColor='#mdwTheme:vis-materialdesign.0.colors.input.menu.subText'
                           mdw-listItemValueFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.input.dropdown.value'
                           mdw-listItemValueFont='#mdwTheme:vis-materialdesign.0.fonts.input.dropdown.value'
                           mdw-listItemValueFontColor='#mdwTheme:vis-materialdesign.0.colors.input.menu.value'
                           mdw-value0='0'
                           mdw-label0='Aus'
                           mdw-value1='1'
                           mdw-label1='Normal'
                           mdw-value2='2'
                           mdw-label2='Energiesparend'
                           mdw-value3='3'
                           mdw-label3='Boost'
                           mdw-value4='4'
                           mdw-label4='Manuell'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-value materialdesign-value-html-element'
                           style='width: 25%; height: 20px; position: absolute; top: 50px; left: 90px; display: flex; align-items: center;'
                           mdw-debug='false'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.1.Ventilstellung'
                           mdw-targetType='auto'
                           mdw-textAlign='end'
                           mdw-valueLabelWidth='4'
                           mdw-valuesFontColor='#mdwTheme:vis-materialdesign.0.colors.value.text'
                           mdw-valuesFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.text'
                           mdw-valuesFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.text'
                           mdw-prepandText='Ventilstellung:'
                           mdw-prepandTextColor='#mdwTheme:vis-materialdesign.0.colors.value.prepand'
                           mdw-prepandTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.prepand'
                           mdw-prepandTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand'
                           mdw-appendText='%'
                           mdw-appendTextColor='#mdwTheme:vis-materialdesign.0.colors.value.append'
                           mdw-appendTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.append'
                           mdw-appendTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.append'
                           mdw-minDecimals='2'
                           mdw-imageColor='#mdwTheme:vis-materialdesign.0.colors.value.icon'
                           mdw-iconPosition='left'
                           mdw-effectFontColor='#mdwTheme:vis-materialdesign.0.colors.value.effect'
                           mdw-effectFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.effect'
                           mdw-effectDuration='750'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-value materialdesign-value-html-element'
                           style='width: 25%; height: 20px; position: absolute; top: 70px; left: 90px; display: flex; align-items: center;'
                           mdw-debug='false'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.1.Solltemperatur'
                           mdw-targetType='auto'
                           mdw-textAlign='end'
                           mdw-valueLabelWidth='4'
                           mdw-valuesFontColor='#mdwTheme:vis-materialdesign.0.colors.value.text'
                           mdw-valuesFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.text'
                           mdw-valuesFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.text'
                           mdw-prepandText='Soll-Temperatur:'
                           mdw-prepandTextColor='#mdwTheme:vis-materialdesign.0.colors.value.prepand'
                           mdw-prepandTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.prepand'
                           mdw-prepandTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand'
                           mdw-appendText='°C'
                           mdw-appendTextColor='#mdwTheme:vis-materialdesign.0.colors.value.append'
                           mdw-appendTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.append'
                           mdw-appendTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.append'
                           mdw-minDecimals='2'
                           mdw-imageColor='#mdwTheme:vis-materialdesign.0.colors.value.icon'
                           mdw-iconPosition='left'
                           mdw-effectFontColor='#mdwTheme:vis-materialdesign.0.colors.value.effect'
                           mdw-effectFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.effect'
                           mdw-effectDuration='750'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-value materialdesign-value-html-element'
                           style='width: 25%; height: 20px; position: absolute; top: 90px; left: 90px; display: flex; align-items: center;'
                           mdw-debug='false'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.1.Temperatur'
                           mdw-targetType='auto'
                           mdw-textAlign='end'
                           mdw-valueLabelWidth='4'
                           mdw-valuesFontColor='#mdwTheme:vis-materialdesign.0.colors.value.text'
                           mdw-valuesFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.text'
                           mdw-valuesFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.text'
                           mdw-prepandText='Ist-Temperatur:'
                           mdw-prepandTextColor='#mdwTheme:vis-materialdesign.0.colors.value.prepand'
                           mdw-prepandTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.prepand'
                           mdw-prepandTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand'
                           mdw-appendText='°C'
                           mdw-appendTextColor='#mdwTheme:vis-materialdesign.0.colors.value.append'
                           mdw-appendTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.append'
                           mdw-appendTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.append'
                           mdw-minDecimals='2'
                           mdw-imageColor='#mdwTheme:vis-materialdesign.0.colors.value.icon'
                           mdw-iconPosition='left'
                           mdw-effectFontColor='#mdwTheme:vis-materialdesign.0.colors.value.effect'
                           mdw-effectFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.effect'
                           mdw-effectDuration='750'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-value materialdesign-value-html-element'
                           style='width: calc(30% - 15px); height: 20px; position: absolute; top: 50px; left: 70%; display: flex; align-items: center;'
                           mdw-debug='false'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.4.CO2'
                           mdw-targetType='auto'
                           mdw-textAlign='end'
                           mdw-valueLabelWidth='4'
                           mdw-valuesFontColor='#mdwTheme:vis-materialdesign.0.colors.value.text'
                           mdw-valuesFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.text'
                           mdw-valuesFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.text'
                           mdw-prepandText='CO2:'
                           mdw-prepandTextColor='#mdwTheme:vis-materialdesign.0.colors.value.prepand'
                           mdw-prepandTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.prepand'
                           mdw-prepandTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand'
                           mdw-appendText='ppm'
                           mdw-appendTextColor='#mdwTheme:vis-materialdesign.0.colors.value.append'
                           mdw-appendTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.append'
                           mdw-appendTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.append'
                           mdw-minDecimals='0'
                           mdw-imageColor='#mdwTheme:vis-materialdesign.0.colors.value.icon'
                           mdw-iconPosition='left'
                           mdw-effectFontColor='#mdwTheme:vis-materialdesign.0.colors.value.effect'
                           mdw-effectFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.effect'
                           mdw-effectDuration='750'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-value materialdesign-value-html-element'
                           style='width: calc(30% - 15px); height: 20px; position: absolute; top: 70px; left: 70%; display: flex; align-items: center;'
                           mdw-debug='false'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.4.Luftdruck'
                           mdw-targetType='auto'
                           mdw-textAlign='end'
                           mdw-valueLabelWidth='4'
                           mdw-valuesFontColor='#mdwTheme:vis-materialdesign.0.colors.value.text'
                           mdw-valuesFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.text'
                           mdw-valuesFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.text'
                           mdw-prepandText='Luftdruck:'
                           mdw-prepandTextColor='#mdwTheme:vis-materialdesign.0.colors.value.prepand'
                           mdw-prepandTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.prepand'
                           mdw-prepandTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand'
                           mdw-appendText='mBar'
                           mdw-appendTextColor='#mdwTheme:vis-materialdesign.0.colors.value.append'
                           mdw-appendTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.append'
                           mdw-appendTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.append'
                           mdw-minDecimals='0'
                           mdw-imageColor='#mdwTheme:vis-materialdesign.0.colors.value.icon'
                           mdw-iconPosition='left'
                           mdw-effectFontColor='#mdwTheme:vis-materialdesign.0.colors.value.effect'
                           mdw-effectFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.effect'
                           mdw-effectDuration='750'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-value materialdesign-value-html-element'
                           style='width: calc(30% - 15px); height: 20px; position: absolute; top: 90px; left: 70%; display: flex; align-items: center;'
                           mdw-debug='false'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.4.Luftfeuchtigkeit'
                           mdw-targetType='auto'
                           mdw-textAlign='end'
                           mdw-valueLabelWidth='4'
                           mdw-valuesFontColor='#mdwTheme:vis-materialdesign.0.colors.value.text'
                           mdw-valuesFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.text'
                           mdw-valuesFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.text'
                           mdw-prepandText='Luftfeuchtigkeit:'
                           mdw-prepandTextColor='#mdwTheme:vis-materialdesign.0.colors.value.prepand'
                           mdw-prepandTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.prepand'
                           mdw-prepandTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand'
                           mdw-appendText='%'
                           mdw-appendTextColor='#mdwTheme:vis-materialdesign.0.colors.value.append'
                           mdw-appendTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.append'
                           mdw-appendTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.append'
                           mdw-minDecimals='2'
                           mdw-imageColor='#mdwTheme:vis-materialdesign.0.colors.value.icon'
                           mdw-iconPosition='left'
                           mdw-effectFontColor='#mdwTheme:vis-materialdesign.0.colors.value.effect'
                           mdw-effectFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.effect'
                           mdw-effectDuration='750'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-value materialdesign-value-html-element'
                           style='width: calc(100% - 100px); height: 20px; position: absolute; top: 115px; left: 90px; display: flex; align-items: center;'
                           mdw-debug='false'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.1.Solltemperatur'
                           mdw-targetType='auto'
                           mdw-overrideText='8Std 20Min'
                           mdw-textAlign='end'
                           mdw-valueLabelWidth='4'
                           mdw-valuesFontColor='#mdwTheme:vis-materialdesign.0.colors.value.text'
                           mdw-valuesFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.text'
                           mdw-valuesFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.text'
                           mdw-prepandText='Änderung Solltemperatur vor:'
                           mdw-prepandTextColor='#mdwTheme:vis-materialdesign.0.colors.value.prepand'
                           mdw-prepandTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.prepand'
                           mdw-prepandTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand'
                           mdw-appendTextColor='#mdwTheme:vis-materialdesign.0.colors.value.append'
                           mdw-appendTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.append'
                           mdw-appendTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.append'
                           mdw-imageColor='#mdwTheme:vis-materialdesign.0.colors.value.icon'
                           mdw-iconPosition='left'
                           mdw-effectFontColor='#mdwTheme:vis-materialdesign.0.colors.value.effect'
                           mdw-effectFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.effect'
                           mdw-effectDuration='750'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-button materialdesign-button-html-element'
                           style='width: 60px; height: 60px; box-shadow: 0px 0px 23px 6px rgba(0,0,0,0.75); position: absolute; top: 50px; left: calc(25% + 110px); display: flex; align-items: center;'
                           mdw-type='addition_vertical'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.1.Solltemperatur'
                           mdw-buttonStyle='raised'
                           mdw-value='-0.5'
                           mdw-minmax='8'
                           mdw-vibrateOnMobilDevices='50'
                           mdw-textFontFamily='#mdwTheme:vis-materialdesign.0.fonts.button.vertical.text'
                           mdw-textFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.button.vertical.text'
                           mdw-alignment='center'
                           mdw-mdwButtonPrimaryColor='#mdwTheme:vis-materialdesign.0.colors.button.vertical.primary'
                           mdw-mdwButtonSecondaryColor='#mdwTheme:vis-materialdesign.0.colors.button.vertical.secondary'
                           mdw-image='/icons-mfd-png/control_minus.png'
                           mdw-iconPosition='top'
                           mdw-iconHeight='50'
                        ></div>
                        
                        <div class='vis-widget materialdesign-widget materialdesign-button materialdesign-button-html-element'
                           style='width: 60px; height: 60px; box-shadow: 0px 0px 23px 6px rgba(0,0,0,0.75);position: absolute; top: 50px; left: calc(70% - 80px); display: flex; align-items: center;'
                           mdw-type='addition_vertical'
                           mdw-oid='linkeddevices.0.Heizung.Wohnzimmer.1.Solltemperatur'
                           mdw-buttonStyle='raised'
                           mdw-value='+0.5'
                           mdw-minmax='24'
                           mdw-vibrateOnMobilDevices='50'
                           mdw-textFontFamily='#mdwTheme:vis-materialdesign.0.fonts.button.vertical.text'
                           mdw-textFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.button.vertical.text'
                           mdw-alignment='center'
                           mdw-mdwButtonPrimaryColor='#mdwTheme:vis-materialdesign.0.colors.button.vertical.primary'
                           mdw-mdwButtonSecondaryColor='#mdwTheme:vis-materialdesign.0.colors.button.vertical.secondary'
                           mdw-image='/icons-mfd-png/control_plus.png'
                           mdw-iconPosition='top'
                           mdw-iconHeight='50'
                        ></div>
                        

                        Nun aber meine Frage:
                        Besteht die Möglichkeit, sich mit diesem Widget, über ein Script, eine dynamische Liste zu generieren? Ähnlich wie beim Adapterstatus
                        Wenn ja, gibt es dazu schon Beispiele, wie ich das am besten umsetze?

                        Meine Kenntnisse mit Javascript begrenzen sich leider nur auf kopieren und anpassen.

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

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        747
                        Online

                        31.9k
                        Users

                        80.1k
                        Topics

                        1.3m
                        Posts

                        vis
                        6
                        25
                        3030
                        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