Custom Widget mit Wetter Icon erstellen

[KiWi22]

Moin,
ich baue mir gerade ein Widget, mit dem ich einige Wetterinfos anzeigen möchte. Für die meisten Infos funktioniert das auch super, nur das Bild / Icon für die Wetterlage bekomme ich nicht hin.
Hier eine Auszug, was funktioniert:

Code: Alles auswählen

 - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: Label
            config:
              text: =(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
              style:
                font-size: 30px
                line-height: 1.1
                font-weight: 500
                margin-left: 0px
                margin-top: 8px
                color: red
          - component: f7-chip
            config:
              bgColor: orange
              text: =(Number.parseFloat(items[props.itemTempGef].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
              style:
                color: white
                top: 14px
                font-size: 20px
                border-radius: 10px 10px 10px 10px
                margin-left: 8px 

Ich habe schon so viel probiert, das Wetter-Icon anzeigen zu lassen, z.B.:

Code: Alles auswählen

default:
          - component: oh-image
            config:
              backround: =props.itemIcon

Leider habe ich immer noch nicht die Lösung gefunden.
Habt ihr Tipps für mich, wie ich das Wetter-Icon dort angezeigt bekomme?
Die probs sind alle vom Typ: TEXT. Vielleicht muss auch hier etwas geändert werden?
Ich bin für jede Hilfe dankbar, ich weis nicht mehr weiter

[KiWi22]

Sorry, habe vergessen zu schreiben, dass ich das Wetter-Icon vom Item "Weather and Forecast" vom Think "OpenWeatherMap" meine. Vielleicht ist das noch wichtig zu wissen.

[KiWi22]

ich bekomme das nicht hin
hat jemand eine Idee, ich werd schon kirre

[peter-pan]

...wäre das eine Option ?

Code: Alles auswählen

- component: oh-image
  config:
    item: =props.itemIcon
    style:
      width: 70%

style/width kann man auch weglassen.


Edit:

Code: Alles auswählen

text: =(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'

Was genau willst du hier eigentlich machen ?
Müsste hier nicht:

Code: Alles auswählen

text: =Number.parseFloat(items[props.itemTemp].state).toFixed(1) + " °"'

reichen ?

[KiWi22]

verdammt, da war ich schon so dicht dran aber mit 'item:' hab ich es noch nicht probiert
Vielen Dank peter-pan, du hast mich wieder aus der Verzweiflung geholt

Die Formel habe ich aus einem Tutorial, ich glaube für den Luftdruck. Habe ich für alle Werte (Temp., Feuchte, Wind, usw.) verwendet und nur die Kommastelle und Einheit angepasst. Da es funktioniert, habe ich mir keine weiteren Gedanken gemacht, warum da ' * 100 / 100 ' steht

[peter-pan]

Das mit der Multiplikation und Division habe ich in einem anderen Zusammenhang auch mal gesehen und zwar mit der Funktion "Math.round" und die Methode "split" trennt ja einen String an einer bestimmten Stelle (hier - Leerzeichen) und macht daraus ein Array in dem man dann auf die einzelnen Elemente per Index [] zugreifen kann. D.h. unter Index[0] findest du dann den Wert (23.7) und unter Index[1] die Masseinheit (°).

Aber die Funktion "Number.parseFloat" macht eigentlich das gleiche, es eliminiert die Einheit und macht ein Gleizahl daraus. Und mit der Methode "toFixed" wird ein String mit festem Dezimalwert erstellt, um beim Beispiel zu bleiben bei .toFixed(2) wird 23.70 erzeugt.

Ich bin jetzt kein Programmierer und mache es eigentlich auch so wie du und schau mal hier und da in die Beispiele und versuche das dann für meine Zwecke zu nutzen.
Es könnte natürlich sein, dass das von mir Beschriebene nicht überall passt. aber im Expression-Tester in der Developer-Sidebar haben die Ausdrücke funktioniert.

Wenn dein Custom-Widget fertig ist, kannst du es ja mal vorstellen.

[KiWi22]

Hallo zusammen,

nun habe ich mein Custom Widget zur Darstellung der OpenWeatherMap Daten seit einigen Tagen erfolgreich laufen. Dafür habe ich eine Layout Page angelegt, auf der die Wetterdaten in 3h Schritten angezeigt werden, drei nebeneinander, drei untereinander, 24h kompakt im Überblick. Die Darstellung im Dunkelmodus auf meinem 10 Zoll Tablett sieht richtig gut aus, bin stolz auf mich

Hier nun die Codezeilen:

Code: Alles auswählen

uid: Wetteranzeige
props:
  parameters:
    - context: item
      description: Messung Zeit
      label: Item
      name: itemMessung
      required: false
      type: TEXT
    - context: item
      description: Temperatur
      label: Item
      name: itemTemp
      required: false
      type: TEXT
    - context: item
      description: gefuehlte Temperatur
      label: Item
      name: itemTempGef
      required: false
      type: TEXT
    - context: item
      description: Luftfeuchte
      label: Item
      name: itemHum
      required: false
      type: TEXT
    - context: item
      description: Windgeschwindigkeit
      label: Item
      name: itemWind
      required: false
      type: TEXT
    - context: item
      description: Regen
      label: Item
      name: itemRegen
      required: false
      type: TEXT
    - context: item
      description: Bewoelkung
      label: Item
      name: itemBewolk
      required: false
      type: TEXT
    - context: item
      description: Wetterlage
      label: Item
      name: itemWetter
      required: false
      type: TEXT
    - context: item
      description: Icon_Wetterlage
      label: Item
      name: itemIcon
      required: false
      type: TEXT
    - label: Background
      name: background
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 5, 2021, 11:33:53 AM
component: f7-card
config:
  style:
    noShadow: true
    class:
      - padding
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
    background: '=(props.background) ? props.background : "linear-gradient(to top, #800000 0%, #000099 100%)"'
    height: 11.5em
    min-width: 12.5em
    max-width: 270px
slots:
  content:
    - component: f7-block
      config:
        style:
          margin-left: 0px
          padding: 0px
          display: flex
          flex-direction: column
          align-items: start
    - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: f7-icon
            config:
              f7: thermometer
              size: 22
              class:
                - align-self-center
              style:
                margin-left: -2px
                margin-top: 0px
                color: lightblue
          - component: f7-chip
            config:
              bgColor: blue
              text: =items[props.itemMessung].displayState
              style:
                color: black
                top: 0px
                font-size: 22px
                border-radius: 22px 3px 22px 3px
                margin-left: 5px
    - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: Label
            config:
              text: =(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
              style:
                font-size: 30px
                line-height: 1.1
                font-weight: 500
                margin-left: 0px
                margin-top: 4px
                color: red
          - component: f7-chip
            config:
              bgColor: red
              text: =(Number.parseFloat(items[props.itemTempGef].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°'
              style:
                color: white
                top: 10px
                font-size: 20px
                border-radius: 10px 10px 10px 10px
                margin-left: 8px
          - component: oh-image
            config:
              class:
                - justify-content-right
              item: =props.itemIcon
              style:
                width: 30%
                margin-left: 5px
                margin-top: -10px
    - component: f7-row
      slots:
        default:
          - component: Label
            config:
              class:
                - justify-content-left
              text: =(items[props.itemWetter].state)
              style:
                font-size: 20px
                line-height: 1.1
                font-weight: 500
                margin-left: 0px
                margin-top: -20px
                color: lightblue
    - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: Label
            config:
              text: "Bewölkung:"
              style:
                font-size: 11px
                line-height: 1.1
                font-weight: 500
                margin-left: 0px
                margin-top: 6px
                color: blue
          - component: Label
            config:
              text: =(Number.parseFloat(items[props.itemBewolk].state.split(" ")[0]) * 100 / 100).toFixed(0) + '%'
              style:
                font-size: 18px
                line-height: 1.1
                font-weight: 500
                margin-left: 4px
                margin-top: 2px
                color: lightblue
          - component: Label
            config:
              text: "Regen:"
              style:
                font-size: 11px
                line-height: 1.1
                font-weight: 500
                margin-left: 20px
                margin-top: 6px
                color: blue
          - component: Label
            config:
              text: =(Number.parseFloat(items[props.itemRegen].state.split(" ")[0]) * 100 / 100).toFixed(1) + 'mm'
              style:
                font-size: 18px
                line-height: 1.1
                font-weight: 500
                margin-left: 4px
                margin-top: 2px
                color: lightblue
    - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: Label
            config:
              text: "Luftfeuchte:"
              style:
                font-size: 11px
                line-height: 1.1
                font-weight: 500
                margin-left: 0px
                margin-top: 6px
                color: blue
          - component: Label
            config:
              text: =(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) * 100 / 100).toFixed(0) + '%'
              style:
                font-size: 18px
                line-height: 1.1
                font-weight: 500
                margin-left: 4px
                margin-top: 2px
                color: lightblue
          - component: Label
            config:
              text: "Wind:"
              style:
                font-size: 11px
                line-height: 1.1
                font-weight: 500
                margin-left: 20px
                margin-top: 6px
                color: blue
          - component: Label
            config:
              text: =(Number.parseFloat(items[props.itemWind].state.split(" ")[0]) * 100 / 100).toFixed(0) + 'km/h'
              style:
                font-size: 18px
                line-height: 1.1
                font-weight: 500
                margin-left: 4px
                margin-top: 2px
                color: lightblue

[int5749]

Hier nun die Codezeilen:

Evtl. Postest Du noch das eine oder andere Bild? Dann bekommt man einen Eindruck, ob man dies für sich übernehmen möchte. Auch wenn ich bereits ein anderes Wetter Widget laufen habe.

[KiWi22]

[peter-pan]

Super gemacht.
Gefällt mir. Werd ich auch einsetzen. Der Code ist gut lesbar.

wetter.jpg