Seite 1 von 2
Custom Widget mit Wetter Icon erstellen
Verfasst: 24. Mär 2021 20:16
von 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
Re: Custom Widget mit Wetter Icon erstellen
Verfasst: 25. Mär 2021 19:57
von 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.
Re: Custom Widget mit Wetter Icon erstellen
Verfasst: 29. Mär 2021 23:01
von KiWi22
ich bekomme das nicht hin
hat jemand eine Idee, ich werd schon kirre
Re: Custom Widget mit Wetter Icon erstellen
Verfasst: 29. Mär 2021 23:36
von 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 ?
Re: Custom Widget mit Wetter Icon erstellen
Verfasst: 31. Mär 2021 20:25
von 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
Re: Custom Widget mit Wetter Icon erstellen
Verfasst: 31. Mär 2021 20:48
von 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.
Re: Custom Widget mit Wetter Icon erstellen
Verfasst: 5. Apr 2021 11:41
von 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
Re: Custom Widget mit Wetter Icon erstellen
Verfasst: 5. Apr 2021 14:21
von int5749
KiWi22 hat geschrieben: ↑5. Apr 2021 11:41
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.
Re: Custom Widget mit Wetter Icon erstellen
Verfasst: 5. Apr 2021 17:41
von KiWi22
Re: Custom Widget mit Wetter Icon erstellen
Verfasst: 6. Apr 2021 12:22
von peter-pan
Super gemacht.
Gefällt mir. Werd ich auch einsetzen. Der Code ist gut lesbar.
wetter.jpg
