Widget funktioniert nicht

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

gexle
Beiträge: 94
Registriert: 16. Dez 2021 11:02

Widget funktioniert nicht

Beitrag von gexle »

Hallo

Kann mir jemand sagen warum das Widget nicht funktioniert??

Code: Alles auswählen

uid: widget_with_chart
tags: []
props:
  parameters:
    - description: Title of the widget
      label: Title
      name: title
      required: false
      type: TEXT
    - description: 1st gauge
      label: Gauge 1 label
      name: gauge1
      required: false
      type: TEXT
    - description: 1st gauge MAX
      label: Gauge 1 limit
      name: gauge1max
      required: false
      type: TEXT
    - description: 2nd gauge
      label: Gauge 2 label
      name: gauge2
      required: false
      type: TEXT
    - description: 2nd gauge MAX
      label: Gauge 2 limit
      name: gauge2max
      required: false
      type: TEXT
    - description: 1st chart
      label: Chart label 1
      name: chart1
      required: false
      type: TEXT
    - description: 2nd chart
      label: Chart label 2
      name: chart2
      required: false
      type: TEXT
    - description: Y-axis name
      label: Y-axis label
      name: axlabel
      required: false
      type: TEXT
    - context: item
      description: Item in gauge
      label: Gauge 1 item
      name: item1
      required: false
      type: TEXT
    - context: item
      description: Item in gauge
      label: Gauge 2 item
      name: item2
      required: false
      type: TEXT
    - context: item
      description: Item in chart
      label: Chart item 1
      name: item3
      required: false
      type: TEXT
    - context: item
      description: Item in chart
      label: Chart item 2
      name: item4
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 7, 2022, 3:32:22 PM
component: f7-card
config:
  title: Power
  class:
    - padding-bottom
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top
      slots:
        default:
          - component: f7-col
            config:
              width: 25
              class:
                - display-flex
                - flex-direction-column
                - align-content-space-around
            slots:
              default:
                - component: oh-gauge
                  config:
                    type: semicircle
                    item: StecaGridInverter_ACPower
                    borderColor: green
                    min: 0
                    max: 4000
                    valueTextColor: green
                    borderBgColor: gray
                    labelText: Generating
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
                - component: oh-gauge
                  config:
                    type: semicircle
                    item: calc_power_current_use
                    borderColor: red
                    min: 0
                    max: 4000
                    valueTextColor: red
                    borderBgColor: gray
                    labelText: Using
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
          - component: f7-col
            config:
              width: 75
            slots:
              default:
                - component: oh-chart
                  config:
                    chartType: ""
                    period: 12h
                    label: Power
                  slots:
                    grid:
                      - component: oh-chart-grid
                        config:
                          containLabel: false
                    xAxis:
                      - component: oh-time-axis
                        config:
                          gridIndex: 0
                    yAxis:
                      - component: oh-value-axis
                        config:
                          gridIndex: 0
                          name: W
                          min: 0
                    series:
                      - component: oh-time-series
                        config:
                          name: Generating
                          gridIndex: 0
                          xAxisIndex: 0
                          yAxisIndex: 0
                          type: line
                          color: green
                          item: StecaGridInverter_ACPower
                      - component: oh-time-series
                        config:
                          name: Using
                          gridIndex: 0
                          xAxisIndex: 0
                          yAxisIndex: 0
                          type: line
                          color: red
                          item: calc_power_current_use
                    tooltip:
                      - component: oh-chart-tooltip
                        config:
                          confine: true
                          smartFormatter: true
                    legend:
                      - component: oh-chart-legend
                        config:
                          bottom: 3
                          type: scroll
                    dataZoom:
                      - component: oh-chart-datazoom
                        config:
                          type: inside
Es wird mir das Bild angezeigt aber wenn ich dann ein Item auswähle kommen keine Werte bzw. werden nicht dargestellt!

Danke euch

Der Yaml Code sieht so aus kann das stimmen?

Code: Alles auswählen

component: widget:widget_with_chart
config:
  item: KOSTALPIKO55_DC1Voltage
  item1: KOSTALPIKO55_DC1Power
  item2: KOSTALPIKO55_DC2Power
  item3: KOSTALPIKO55_DC1Voltage
  item4: KOSTALPIKO55_DC2Voltage
  title: Kostal_Piko_5.5

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget funktioniert nicht

Beitrag von peter-pan »

Ich weiss zwar nicht genau, um was für ein Widget es sich handelt und was man damit genau machen kann, aber ich hab es mir einfach mal geladen.

Der Yaml-Code des Widgets bei mir sieht doch schon ganz anders aus, als deiner:

Code: Alles auswählen

component: widget:widget_with_chart
config:
  title: Titel
  gauge1: Label 1
  gauge1max: "250"
  gauge2: Label 2
  gauge2max: "250"
  chart1: Chart 1
  chart2: Chart 2
  axlabel: Y-Achse
  item1: Gosund_socket_01_Spannung
  item2: Gosund_socket_01_Spannung
  item3: Gosund_socket_01_Spannung
  item4: Gosund_socket_01_Spannung
Es fehlt bei mir auch die Zeile "item:" ( bei dir - item: KOSTALPIKO55_DC1Voltage)

Es gibt auch 2 Items, die beim Loggen als Warnung ausgegeben werden, die ich gar nicht habe, die aber im Custom-Widget-Code fest "verdrahtet" sind:

Code: Alles auswählen

2022-05-07 22:35:00.887 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: StecaGridInverter_ACPower
2022-05-07 22:35:00.889 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: calc_power_current_use
Ich nehme an, dass es sich dabei um irgendwelche Wechselrichter einer Photovoltaik-Anlage handelt. Leider habe ich so etwas (noch) nicht.

Deine Angaben hierzu sind halt auch etwas dürftig und vermutlich auch nicht durchgängig, wie der der Vergleich der Yaml-Codes zeigt.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

gexle
Beiträge: 94
Registriert: 16. Dez 2021 11:02

Re: Widget funktioniert nicht

Beitrag von gexle »

Hallo Peter-Pan

Ja genau Kostal WR.

https://community.openhab.org/t/oh3-gra ... /119202/15

Um das gehts....

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget funktioniert nicht

Beitrag von peter-pan »

Ich hab jetzt grad mal das Widget von Daniel genommen und zum Testen etwas "modifiziert", da ich keinen Inverter habe.

1. Ich habe die Parameter für den Dialog (prop1 + item) rausgenommen, da diese für das Widget gar nicht gebraucht werden.
2. Ich habe die "max" Werte von 4000 auf 100 herunter gesetzt an zwei Stellen im Widget. Das habe ich deshalb gemacht, damit man auch auf der Gauge etwas erkennen kann. (Hab grad keine so grossen "Watts" ;) )
3. Ich habe die Itemnamen "StecaGridInverter_ACPower" auf "Gosund_socket_05_Leistung" und "calc_power_current_use" auf "Gosund_socket_01_Leistung"
geändert. Das sind die Items der Leistungsaufnahme von zwei Schaltsteckdosen von mir.

Jetzt sieht der Code des Custom-Widget so aus:

Code: Alles auswählen

uid: widget_with_chart_Daniel
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: May 8, 2022, 1:33:21 PM
component: f7-card
config:
  title: Power
  class:
    - padding-bottom
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top
      slots:
        default:
          - component: f7-col
            config:
              width: 25
              class:
                - display-flex
                - flex-direction-column
                - align-content-space-around
            slots:
              default:
                - component: oh-gauge
                  config:
                    type: semicircle
                    item: Gosund_socket_05_Leistung
                    borderColor: green
                    min: 0
                    max: 100
                    valueTextColor: green
                    borderBgColor: gray
                    labelText: Generating
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
                - component: oh-gauge
                  config:
                    type: semicircle
                    item: Gosund_socket_01_Leistung
                    borderColor: red
                    min: 0
                    max: 100
                    valueTextColor: red
                    borderBgColor: gray
                    labelText: Using
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
          - component: f7-col
            config:
              width: 75
            slots:
              default:
                - component: oh-chart
                  config:
                    chartType: ""
                    period: 12h
                    label: Power
                  slots:
                    grid:
                      - component: oh-chart-grid
                        config:
                          containLabel: false
                    xAxis:
                      - component: oh-time-axis
                        config:
                          gridIndex: 0
                    yAxis:
                      - component: oh-value-axis
                        config:
                          gridIndex: 0
                          name: W
                          min: 0
                    series:
                      - component: oh-time-series
                        config:
                          name: Generating
                          gridIndex: 0
                          xAxisIndex: 0
                          yAxisIndex: 0
                          type: line
                          color: green
                          item: Gosund_socket_05_Leistung
                      - component: oh-time-series
                        config:
                          name: Using
                          gridIndex: 0
                          xAxisIndex: 0
                          yAxisIndex: 0
                          type: line
                          color: red
                          item: Gosund_socket_01_Leistung
                    tooltip:
                      - component: oh-chart-tooltip
                        config:
                          confine: true
                          smartFormatter: true
                    legend:
                      - component: oh-chart-legend
                        config:
                          bottom: 3
                          type: scroll
                    dataZoom:
                      - component: oh-chart-datazoom
                        config:
                          type: inside
und der Yaml-Code für das Widget ganz simpel:

Code: Alles auswählen

component: widget:widget_with_chart_Daniel
config: {}
Das Ergebnis sieht bei mir dann so aus:
gauge.jpg
Ich gehe mal davon aus, dass deine Itemnamen auch nicht so heissen, wie die im Custom-Widget(s.o. Punkt 3). Das musst du natürlich "hart" im Code ändern.

Das andere Custom-Widget schaue ich mir bei Gelegenheit auch mal an und gebe wieder Bescheid, wenn ich etwas dazu gefunden habe.
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget funktioniert nicht

Beitrag von peter-pan »

So nun habe ich auch das zweite Widget mal getestet. Es funktioniert bei mir einwandfrei. Dreh- und Angelpunkt in beiden Widgets sind die Items für "Erzeugte Leistung" und für "verbrauchte Leistung". Die musst du halt zur Verfügung stellen können. Im Widget von Denis kann man halt die Angaben über den Dialog bestimmen.

Das Custom-Widget von Denis:

Code: Alles auswählen

uid: widget_with_chart_Denis
tags: []
props:
  parameters:
    - description: Title of the widget
      label: Title
      name: title
      required: false
      type: TEXT
    - description: 1st gauge
      label: Gauge 1 label
      name: gauge1
      required: false
      type: TEXT
    - description: 1st gauge MAX
      label: Gauge 1 limit
      name: gauge1max
      required: false
      type: TEXT
    - description: 2nd gauge
      label: Gauge 2 label
      name: gauge2
      required: false
      type: TEXT
    - description: 2nd gauge MAX
      label: Gauge 2 limit
      name: gauge2max
      required: false
      type: TEXT
    - description: 1st chart
      label: Chart label 1
      name: chart1
      required: false
      type: TEXT
    - description: 2nd chart
      label: Chart label 2
      name: chart2
      required: false
      type: TEXT
    - description: Y-axis name
      label: Y-axis label
      name: axlabel
      required: false
      type: TEXT
    - context: item
      description: Item in gauge
      label: Gauge 1 item
      name: item1
      required: false
      type: TEXT
    - context: item
      description: Item in gauge
      label: Gauge 2 item
      name: item2
      required: false
      type: TEXT
    - context: item
      description: Item in chart
      label: Chart item 1
      name: item3
      required: false
      type: TEXT
    - context: item
      description: Item in chart
      label: Chart item 2
      name: item4
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 8, 2022, 2:46:28 PM
component: f7-card
config:
  title: =props.title
  class:
    - padding-bottom
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top
      slots:
        default:
          - component: f7-col
            config:
              width: 25
              class:
                - display-flex
                - flex-direction-column
                - align-content-space-around
            slots:
              default:
                - component: oh-gauge
                  config:
                    type: semicircle
                    item: =props.item1
                    borderColor: green
                    min: 0
                    max: =props.gauge1max
                    valueTextColor: green
                    valueFontSize: 22
                    borderBgColor: gray
                    labelText: =props.gauge1
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
                - component: oh-gauge
                  config:
                    type: semicircle
                    item: =props.item2
                    borderColor: red
                    min: 0
                    max: =props.gauge2max
                    valueTextColor: red
                    valueFontSize: 22
                    borderBgColor: gray
                    labelText: =props.gauge2
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
          - component: f7-col
            config:
              width: 75
            slots:
              default:
                - component: oh-chart
                  config:
                    chartType: ""
                    period: 12h
                    label: =props.chart1
                  slots:
                    grid:
                      - component: oh-chart-grid
                        config:
                          containLabel: false
                    xAxis:
                      - component: oh-time-axis
                        config:
                          gridIndex: 0
                    yAxis:
                      - component: oh-value-axis
                        config:
                          name: kWh
                          gridIndex: 0
                          min: 0
                    series:
                      - component: oh-time-series
                        config:
                          name: =props.chart1
                          gridIndex: 0
                          xAxisIndex: 0
                          yAxisIndex: 0
                          type: line
                          color: green
                          item: =props.item3
                      - component: oh-time-series
                        config:
                          name: =props.chart2
                          gridIndex: 0
                          xAxisIndex: 0
                          yAxisIndex: 0
                          type: line
                          color: red
                          item: =props.item4
                    tooltip:
                      - component: oh-chart-tooltip
                        config:
                          confine: true
                          smartFormatter: true
                    legend:
                      - component: oh-chart-legend
                        config:
                          bottom: 3
                          type: scroll
                    dataZoom:
                      - component: oh-chart-datazoom
                        config:
                          type: inside
Der Yaml-Code des Widgets:

Code: Alles auswählen

component: widget:widget_with_chart_Denis
config:
  title: Inverter Denis
  gauge1: Erzeugte Leistung
  gauge1max: "100"
  gauge2: verbrauchte Leistung
  gauge2max: "100"
  chart1: Erzeugt
  chart2: Verbrauch
  axlabel: Watt
  item1: Gosund_socket_05_Leistung
  item2: Gosund_socket_01_Leistung
  item3: Gosund_socket_05_Leistung
  item4: Gosund_socket_01_Leistung
Screenshot:
gauge1.jpg
Eine kleine Anmerkung noch ! Ich habe bemerkt, dass beim Testen im Widget-Editor nach Eingabe der Werte (Set Props) zunächst keine Daten im Beispiel-Screen angezeigt werden. Es muss dann noch ein "Redraw" (Ctrl-R) erfolgen. ---vorausgesetzt die Eingabewerte stimmen ;) :lol:

Aber wie gesagt zum Testen reicht allemal irgend ein bzw. zwei Number - Items .
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Benutzeravatar
udo1toni
Beiträge: 13864
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

Re: Widget funktioniert nicht

Beitrag von udo1toni »

Sehr hübsch.

Blöd, ich finde einfach keine Zeit, mich mit dem Umstieg zu beschäftigen...
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget funktioniert nicht

Beitrag von peter-pan »

udo1toni hat geschrieben: 8. Mai 2022 18:49 Blöd, ich finde einfach keine Zeit, mich mit dem Umstieg zu beschäftigen...
..es hat alles Vor- und Nachteile.
Meine Installation ist ja nicht sehr gross, aber in OH2 war alles etwas übersichtlicher und die Fehlersuche nicht ganz so aufwändig. Ausserdem gibt es doch noch das ein oder andere Problem, wie man jetzt auch beim Umstieg von M3 auf M4 gesehen hat. Was nun ein schnelles M5 nach sich gezogen hat.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Benutzeravatar
udo1toni
Beiträge: 13864
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

Re: Widget funktioniert nicht

Beitrag von udo1toni »

Ja :) das ist aber bei openHAB2 auch mal passiert...
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

gexle
Beiträge: 94
Registriert: 16. Dez 2021 11:02

Re: Widget funktioniert nicht

Beitrag von gexle »

Hallo Peter-Pan

Danke das wars mit "Redraw" jetzt läufts ich teste das ganze mal aus...Was heist den Redraw??? für was ich das den gut??

Die Farben ändern usw. werd ich dann im Code machen müssen...

Aber vom Hintergrunde also dessen Farbe ändern find ich nichts kann das den sein??

Danke

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: Widget funktioniert nicht

Beitrag von peter-pan »

Im Kontext mit dem Widget-Editor, würde ich das "Redraw" als "Code mit Parametern wieder laden" interpretieren. Das brauchst du aber nur in der Testumgebung.

Wenn du das Custom-Widget gespeichert hast und es dann ganz normal auf einer Seite (Page) auswählst, dann brauchst du das nicht mehr, wie auch in meinem Screeshot zu sehen. Bei mir haben sich übrigens auch die Werte geändert, nicht so wie im englischen Forum beschrieben.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Antworten