Text zusammensetzen im Widget

[Mclupo]

Hallo
Ich möchte im einem Widget einen zusammengesetzten Text ausgeben:
z. B . item.art = "Balkontür" und items.[props.door.item].state = "CLOSED"

Das funktioniert soweit auch, aber leider wird nicht der gemappte Wert für CLOSED (offen) angezeigt.
Wie kann ich nun dies zusammensetzen ?
Dies geht leider nicht : text: =props.art + " " + "=(items[props.door_item].state === 'ON') ? 'offen' : 'geschlossen'"

Gruß Wolf

Code: Alles auswählen

          - component: f7-row
            config:
              style:
                justify-content: flex-start
                z-index: 2
              visible: "=props.door_item ? true : false"
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: "=(items[props.door_item].state === 'ON') ? 'door-open' : 'door-closed'"
                    width: 20
                - component: Label
                  config:
                    style:
                      margin-left: 5px
                    text: =props.art + "  " + items[props.door_item].state

[udo1toni]

Der Itemstate ist ja auch (mal vorausgesetzt, dass es sich um ein Contact Item handelt) CLOSED bzw. OPEN. Du musst schon den korrekten Wert verwenden.

[Mclupo]

text: =(items[props.door_item].state ==='OPEN')? 'offen' :'zu' --> ergibt zu bzw. offen
text: =props.art -------------------------------------------------------> ergibt Balkontür

aber wie gebe ich beides in einer Zeile aus, sodaß dort "Balkontür zu" bzw "Balkontür offen" steht.
Bei "item.art" kann man dann eingeben, ob es "Balkontür" oder "Wohnungstür" ist, ohne jeweils das Widget zu ändern

[peter-pan]

...ich gehe mal davon aus das dein Item gemapped ist. Dann propier einfach mal den Code:

Code: Alles auswählen

text: =props.art + "  " + items[props.door_item].displayState

[Mclupo]

Danke Herr Nachbar, das wars!!

[peter-pan]

..gerne, aber magst du nicht mal das ganze Widget als Yaml vorstellen ?

[peter-pan]

Hallo Wolf,
in dem Widget-Code sind ein paar, für mich, interessante, Ansätze, mit denen ich weiter "spielen" kann.

Aber nochmal zum Vergleich mit dem Standard-Location-Widget:

wolf.jpg

Sieht doch so ähnlich aus, oder ? , ja gut damit kann ich den Taupunkt und die Batterie nicht anzeigen
Die Informationen hab ich aber momentan anderer Stelle:

Gruss - Peter

[int5749]

Danke Herr Nachbar, das wars!!

Mich würde es ach freuen, den YAML hier öffentlich zu teilen, würde sicher noch andere interessieren.

[Mclupo]

Kleines Update : 18.03. : Bei Batterie Ladung unter 20 % erscheint das Alarmzeichen in der Batterie Zeile (auf dem Bild bei < 80 %)

ich hab aus mehreren Widgets auf dem Markt dieses hier zusammenkopiert und versucht die ganze Sache zu verstehen (englisch und deutsch ist noch gemischt). Das große Problem ist, dass man nicht weiss, welche Anweisungen verarbeitet werden und welche einfach ignoriert werden. Die Text Farbe habe ich z.B. noch nicht hinbekommen. Aber man kann endlos damit spielen.

Code: Alles auswählen

uid: Raum_Status_neu
tags: []
props:
  parameters:
    - description: Ort
      label: Ort
      name: ort
      required: true
      type: TEXT
    - description: Art der Tür
      label: Art_1
      name: art_1
      required: false
      type: TEXT
    - description: Art der Fenster
      label: Art_2
      name: art_2
      required: false
      type: TEXT
    - description: Sensor Name
      label: Sensor Name
      name: sensorName
      required: false
      type: TEXT
    - description: Hintergrundfarbe
      label: Hintergrund Farbe
      name: color_1
      required: false
      type: TEXT
    - context: item
      description: Temperatur
      label: Temperatur
      name: temperature_item
      required: false
      type: TEXT
    - context: item
      description: Feuchtigkeit
      label: Feuchtigkeit
      name: feuchtigkeit_item
      required: false
      type: TEXT
    - context: item
      description: Taupunkt
      label: Taupunkt
      name: taupunkt_item
      required: false
      type: TEXT
    - context: item
      description: Batterie Ladung
      label: Batterie item
      name: batterie_item
      required: false
      type: TEXT
    - context: item
      description: Tür Zustand
      label: Tür item
      name: door_item
      required: false
      type: TEXT
    - context: item
      description: Fenster Zustand
      label: Fenster item
      name: window_item
      required: false
      type: TEXT
    - context: item
      description: Bewegung
      label: Bewegungs item
      name: bewegung_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 18, 2022, 10:43:10 AM
component: f7-card
config:
  style:
    background-brightness: 60%
    background-color: "=props.color_1 ? props.color_1 : ''"
    background-position: down;
    background-repeat: no-repeat;
    background-size: cover
    border-radius: var(--f7-card-expandable-border-radius)
    font-size: medium
    margin: 5
    noShadow: false
    padding: 0
slots:
  content:
    - component: f7-card-header
      config:
        style:
          justify-content: flex-start
          margin-top: -15px
          min-height: 30px
          padding: 0
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 18px
                margin-left: 5px
              text: "=props.ort ? props.ort : 'Ort'"
          - component: Label
            config:
              style:
                font-size: 12px
                margin-left: 20px
              text: "=props.sensorName ? props.sensorName : 'Sensor'"
    - component: f7-card-content
      config:
        style:
          justify-content: flex-start
          margin-top: 5px
          padding: 0
          width: 100%
      slots:
        default:
          - component: f7-row
            config:
              style:
                justify-content: flex-start
              visible: "=props.temperature_item ? true : false"
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: temperature
                    item: =props.temperature_item
                    width: 23
                - component: Label
                  config:
                    style:
                      margin-left: 5px
                    text: ="Temperatur...."  + items[props.temperature_item].state
          - component: f7-row
            config:
              style:
                justify-content: flex-start
                z-index: 2
              visible: "=props.feuchtigkeit_item ? true : false"
            slots:
              default:
                - component: oh-icon
                  config:
                    action: analyser
                    actionAnalyzerItems: =props.feuchtigkeit_item
                    icon: humidity
                    item: =props.feuchtigkeit_item
                    width: 23
                - component: Label
                  config:
                    style:
                      margin-left: 5px
                    text: ="Feuchtigkeit..."  + items[props.feuchtigkeit_item].state +" rel%"
          - component: f7-row
            config:
              style:
                justify-content: flex-start
                z-index: 2
              visible: "=props.taupunkt_item ? true : false"
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: temperature
                    width: 23
                - component: Label
                  config:
                    style:
                      margin-left: 5px
                    text: ="Taupunkt........."+ items[props.taupunkt_item].state
          - component: f7-row
            config:
              style:
                justify-content: flex-start
                z-index: 2
              visible: "=props.batterie_item ? true : false"
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: battery
                    width: 20
                - component: Label
                  config:
                    style:
                      margin-left: 5px
                    text: ="Batterie............."+items[props.batterie_item].state + " %"
                - component: oh-icon
                  config:
                    style:
                      margin-left: 10px
                    icon: alarm
                    width: 25
                    visible: =Number.parseFloat(items[props.batterie_item].state) < 20.0
          - component: f7-row
            config:
              style:
                justify-content: flex-start
                z-index: 2
              visible: "=props.door_item ? true : false"
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: "=(items[props.door_item].state === 'OPEN') ? 'door-open' : 'door-closed'"
                    width: 20
                - component: Label
                  config:
                    style:
                      margin-left: 5px
                    text: =props.art_1 + " ist "+ items[props.door_item].displayState
          - component: f7-row
            config:
              style:
                justify-content: flex-start
                z-index: 2
              visible: "=props.window_item ? true : false"
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: "=(items[props.window_item].state === 'ON') ? 'window-open' : 'window-closed'"
                    width: 30
                - component: Label
                  config:
                    style:
                      margin-left: 5px
                    text: =props.art_2 + " ist " + items[props.window_item].displayState
          - component: f7-row
            config:
              style:
                justify-content: flex-start
                z-index: 2
              visible: "=props.bewegung_item ? true : false"
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: "=(items[props.bewegung_item].state === 'OFF') ? 'motion-on' : 'motion-off'"
                    width: 30
                - component: Label
                  config:
                    style:
                      margin-left: 5px
                    text: "=(items[props.bewegung_item].state === 'OFF') ? 'abwesend' : 'anwesend'"
          - component: oh-chart-datazoom
            config:
              style:
                height: 300px
                left: 10px
                position: absolute
                top: 10px
                visible: "=props.temperature_item ? true : false"
                width: 100%
                z-index: 1
            slots:
              default:
                - component: oh-trend
                  config:
                    style:
                      --f7-theme-color-bg-color: transparent
                      background: var(--f7-theme-color-bg-color)
                      filter: opacity(60%)
                    trendGradient:
                      - "#d4220f"
                      - "#cc561e"
                      - "#ef8d32"
                      - "#beca5c"
                    trendItem: =props.temperature_item
    - component: oh-link
      config:
        action: analyzer
        actionAnalyzerChartType: day
        actionAnalyzerCoordSystem: time
        actionAnalyzerItems: "=props.taupunkt_item ? [props.temperature_item, props.feuchtigkeit_item, props.taupunkt_item] : (props.feuchtigkeit_item ? [props.temperature_item, props.feuchtigkeit_item] : [props.temperature_item] ) "
        style:
          height: 100%
          left: 0px
          padding: 0
          position: absolute
          top: 0px
          width: 100%
          z-index: 3

[Mclupo]

noch ein kleines Widget (Code vom grünen Widget)

Code: Alles auswählen

uid: Karte - Schalter 2x
tags: []
props:
  parameters:
    - description: Überschrift(1)
      label: Titel(1)
      name: title_1
      required: false
      type: TEXT
    - description: Bezeichnung Item(1)
      label: Header(1)
      name: header_1
      required: false
      type: TEXT
    - description: Bezeichnung Icon(1)
      label: Icon(1)
      name: item_icon_1
      required: false
      type: TEXT
    - context: item
      description: Item(1) - Schalter
      label: Item(1)
      name: item_schalter_1
      required: false
      type: TEXT
    - context: item
      description: Wert von Item(1) anzeigen
      label: Item(1) Wert
      name: item_wert_1
      required: false
      type: TEXT
    - description: Überschrift(2)
      label: Title(2)
      name: title_2
      required: false
      type: TEXT
    - description: Bezeichnung Item(2)
      label: Header(2)
      name: header_2
      required: false
      type: TEXT
    - description: Bezeichnung Icon(2)
      label: Icon(2)
      name: item_icon_2
      required: false
      type: TEXT
    - context: item
      description: Item(2) - Schalter
      label: Item(2)
      name: item_schalter_2
      required: false
      type: TEXT
    - context: item
      description: Wert von Item(2) anzeigen
      label: Item(2) Wert
      name: item_wert_2
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 10, 2022, 6:22:18 PM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 100px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: raw
          left: 20px
          position: absolute
          top: -5px
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 12px
                margin-top: 0px
              text: "=props.title_1 ? props.title_1 : 'Titel-1'"
    - component: f7-block
      config:
        style:
          flex-direction: row
          left: 30px
          position: absolute
          top: 45px
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 12px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
              text: "=props.header_1 ? props.header_1 : 'header-1'"
    - component: f7-block
      config:
        style:
          flex-direction: row
          position: absolute
          right: 90px
          top: 30px
      slots:
        default:
          - component: f7-row
            config:
              style:
                justify-content: flex-start
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: item_icon_1
                    item: =props.temp_item
                    width: 23
                - component: Label
                  config:
                    style:
                      margin-left: 5px
                    text: =items[props.item_wert_1].state
    - component: oh-toggle
      config:
        item: =props.item_schalter_1
        style:
          position: absolute
          right: 20px
          top: 15px
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: raw
          left: 20px
          position: absolute
          top: 70px
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 12px
                margin-top: 0px
              text: "=props.title_2 ? props.title_2 : 'Titel-2'"
    - component: f7-block
      config:
        style:
          flex-direction: row
          left: 30px
          position: absolute
          top: 85px
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 12px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
              text: "=props.header_2 ? props.header_2 : 'header-2'"
    - component: f7-block
      config:
        style:
          flex-direction: row
          position: absolute
          right: 90px
          top: 70px
      slots:
        default:
          - component: f7-row
            config:
              style:
                justify-content: flex-start
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: item_icon_2
                    item: =props.temp_item
                    width: 23
                - component: Label
                  config:
                    style:
                      margin-left: 5px
                    text: =items[props.item_wert_2].state
    - component: oh-toggle
      config:
        item: =props.item_schalter_2
        style:
          position: absolute
          right: 20px
          top: 55px