Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: HTML Card Widget

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.3k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.3k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.6k

Material Design Widgets: HTML Card Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
25 Beiträge 6 Kommentatoren 4.1k Aufrufe 9 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • 0 0018

    Hallo @Scrounger

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

    card.png

    ScroungerS Offline
    ScroungerS Offline
    Scrounger
    Developer
    schrieb am zuletzt editiert von
    #21

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

    0 1 Antwort Letzte Antwort
    0
    • ScroungerS Scrounger

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

      0 Offline
      0 Offline
      0018
      schrieb am zuletzt editiert von 0018
      #22

      @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....

      Mfg
      0018

      ScroungerS 1 Antwort Letzte Antwort
      0
      • 0 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....

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        schrieb am zuletzt editiert von
        #23

        @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 Antworten Letzte Antwort
        1
        • ScroungerS Scrounger

          @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 Offline
          0 Offline
          0018
          schrieb am zuletzt editiert von
          #24

          @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 :+1:
          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 :clap:

          Mfg
          0018

          1 Antwort Letzte Antwort
          1
          • ScroungerS Scrounger

            @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.

            O Offline
            O Offline
            Oli
            schrieb am zuletzt editiert von
            #25

            @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.

            Gruß
            Oliver

            1 Antwort Letzte Antwort
            0
            Antworten
            • In einem neuen Thema antworten
            Anmelden zum Antworten
            • Älteste zuerst
            • Neuste zuerst
            • Meiste Stimmen


            Support us

            ioBroker
            Community Adapters
            Donate

            660

            Online

            32.5k

            Benutzer

            81.7k

            Themen

            1.3m

            Beiträge
            Community
            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
            ioBroker Community 2014-2025
            logo
            • Anmelden

            • Du hast noch kein Konto? Registrieren

            • Anmelden oder registrieren, um zu suchen
            • Erster Beitrag
              Letzter Beitrag
            0
            • Home
            • Aktuell
            • Tags
            • Ungelesen 0
            • Kategorien
            • Unreplied
            • Beliebt
            • GitHub
            • Docu
            • Hilfe