openhabforum.de


https://openhabforum.de/

Widget funktioniert nicht

https://openhabforum.de/viewtopic.php?t=6949

Seite 2 von 2

Re: Widget funktioniert nicht

Verfasst: 8. Mai 2022 19:53
von gexle
Ok aber was macht Redraw??

Kann irgendwie was einbauen das man Hintergrundfarbe ändern kann??

Danke

Re: Widget funktioniert nicht

Verfasst: 8. Mai 2022 19:59
von peter-pan
Hier nochmal das Widget von Denis mit der Ergänzung der Hintergrundfarbe. Ich hab diese auf "lightblue" eingestellt. Dazu habe ich die Zeilen 76 und 77 ergänzt.

Code: Alles auswählen

  style:
    background-color: lightblue
Du solltest auf jeden Fall eine helle Farbe verwenden, da man sonst die anderen Werte nicht sehen kann.

Custom-Widget (modifiziert):

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
  style:
    background-color: lightblue
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

Re: Widget funktioniert nicht

Verfasst: 8. Mai 2022 20:05
von gexle
Dankeschön

Re: Widget funktioniert nicht

Verfasst: 11. Mai 2022 19:13
von gexle
Hallo

Jetzt muss ich nochmals stören :)

Kann mir vielleicht jemand den Code so umbauen das man auch die Schrift farblich anpassen kann?

Ich bin darin nicht gut genug

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 11, 2022, 7:08:55 PM
component: f7-card
config:
  title: =props.title
  class:
    - padding-bottom
  style:
    background-color: tan
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: Volt/Ampere/Watt
                          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

Re: Widget funktioniert nicht

Verfasst: 4. Jun 2022 00:47
von peter-pan
Ich habe mich nochmal mit dem Widget beschäftigt und es etwas "gepimpt". Man kann jetzt auch die Text/Chartfarben und das Layout (scharfe Ecken/abgerundete Ecken) und auch den Hintergrund ändern. Beim Hintergrund sind sowohl Unifarben und Transparenz als auch Farbverläufe möglich. Bei den Texten/Gaugen sind aber nur eingeschränkte Farben möglich (OH3 Standard)
inverter.jpg
Widget 1: Standard, eckige Kanten
Widget 2: Hintergrund-Farbverlauf, Gauge und Texte coloriert, runde Ecken
Widget 3: Hintergrund transparent, Gauge und Texte coloriert, runde Ecken

Yaml Widget 1 :

Code: Alles auswählen

omponent: widget:inverter
config:
  gauge1: Erzeugt
  gauge1max: "100"
  gauge2: verbraucht
  gauge2max: "50"
  chart1: Erzeugt
  chart2: verbraucht
  item1: Gosund_socket_05_Leistung
  item2: Gosund_socket_06_Leistung
  item3: Gosund_socket_05_Leistung
  item4: Gosund_socket_06_Leistung
  title: Power
Yaml Widget 2:

Code: Alles auswählen

component: widget:inverter
config:
  title: Power
  gauge1: Erzeugt
  gauge1max: "100"
  gauge2: Verbraucht
  gauge2max: "10"
  chart1: Erzeugt
  chart2: Verbraucht
  item1: Gosund_socket_05_Leistung
  item2: Gosund_socket_06_Leistung
  item3: Gosund_socket_05_Leistung
  item4: Gosund_socket_06_Leistung
  gauge1insidetext: lightgreen
  gauge2insidetext: teal
  countercircle1: orange
  countercircle2: pink
  bg_color1: linear-gradient(to bottom,#6fa8dc 0%,#ffe74c 100%)
  roundcorners: y
Yaml Widget 3:

Code: Alles auswählen

component: widget:inverter
config:
  title: Power
  gauge1: Erzeugt
  gauge1max: "100"
  gauge2: Verbraucht
  gauge2max: "10"
  chart1: Erzeugt
  chart2: Verbraucht
  item1: Gosund_socket_05_Leistung
  item2: Gosund_socket_06_Leistung
  item3: Gosund_socket_05_Leistung
  item4: Gosund_socket_06_Leistung
  gauge1insidetext: lime
  gauge2insidetext: lightblue
  countercircle1: orange
  countercircle2: purple
  bg_color1: transparent
  roundcorners: "1"
Yaml-Code Widget:

Code: Alles auswählen

uid: inverter
tags:
  - Original from Daniel and Denis
  - Background and Layout 'round Corners' from Peter
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
    - 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
    - description: Color Gauge1-InsideText
      label: Gauge1-InsideTextColor
      name: gauge1insidetext
      required: false
      type: TEXT
    - description: Color Gauge2-InsideText
      label: Gauge2-InsideTextColor
      name: gauge2insidetext
      required: false
      type: TEXT
    - description: Counter-Color Gauge2 -Circle
      label: Counter-Color Circle 1
      name: countercircle1
      required: false
      type: TEXT
    - description: Counter-Color Gauge2 -Circle
      label: Counter-Color Circle 2
      name: countercircle2
      required: false
      type: TEXT
    - description: e.x. linear-gradient(to bottom,#6fa8dc 0%,#ffe74c 100%), red, transparent or hex or rgb
      label: Background-Color
      name: bg_color1
      required: false
      type: TEXT
    - description: Round Corners ? "y" all others means sharp Corners
      label: Round Corners - Layout ?
      name: roundcorners
      required: false
      type: TEXT
timestamp: Jun 3, 2022, 11:13:37 PM
component: f7-card
config:
  class:
    - padding-bottom
  style:
    background: '=(props.bg_color1) ? props.bg_color1 : ""'
    background-position: down
    background-repeat: no-repeat
    background-size: cover
    border-radius: "=(props.roundcorners) ? 'var(--f7-card-expandable-border-radius)' : 'none'"
    font-size: medium
    height: auto
    margin: 10px
    noShadow: true
    padding: 0
  title: =props.title
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top
      slots:
        default:
          - component: f7-col
            config:
              class:
                - display-flex
                - flex-direction-column
                - align-content-space-around
              width: 25
            slots:
              default:
                - component: oh-gauge
                  config:
                    borderBgColor: '=(props.countercircle1) ? props.countercircle1 : "gray"'
                    borderColor: '=(props.gauge1insidetext) ? props.gauge1insidetext : "green"'
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
                    item: =props.item1
                    labelText: =props.gauge1
                    labelTextColor: '=(props.gauge1insidetext) ? props.gauge1insidetext : "green"'
                    max: =props.gauge1max
                    min: 0
                    type: semicircle
                    valueFontSize: 22
                    valueTextColor: '=(props.gauge1insidetext) ? props.gauge1insidetext : "green"'
                - component: oh-gauge
                  config:
                    borderBgColor: '=(props.countercircle2) ? props.countercircle2 : "gray"'
                    borderColor: '=(props.gauge2insidetext) ? props.gauge2insidetext : "red"'
                    borderWidth: 25
                    class:
                      - margin-top
                      - margin-bottom
                    item: =props.item2
                    labelText: =props.gauge2
                    labelTextColor: '=(props.gauge2insidetext) ? props.gauge2insidetext : "red"'
                    max: =props.gauge2max
                    min: 0
                    type: semicircle
                    valueFontSize: 22
                    valueTextColor: '=(props.gauge2insidetext) ? props.gauge2insidetext : "red"'
          - component: f7-col
            config:
              width: 75
            slots:
              default:
                - component: oh-chart
                  config:
                    chartType: ""
                    label: =props.chart1
                    period: 12h
                  slots:
                    dataZoom:
                      - component: oh-chart-datazoom
                        config:
                          type: inside
                    grid:
                      - component: oh-chart-grid
                        config:
                          containLabel: false
                    legend:
                      - component: oh-chart-legend
                        config:
                          bottom: 3
                          type: scroll
                    series:
                      - component: oh-time-series
                        config:
                          color: '=(props.gauge1insidetext) ? props.gauge1insidetext : "green"'
                          gridIndex: 0
                          item: =props.item3
                          name: =props.chart1
                          type: line
                          xAxisIndex: 0
                          yAxisIndex: 0
                      - component: oh-time-series
                        config:
                          color: '=(props.gauge2insidetext) ? props.gauge2insidetext : "red"'
                          gridIndex: 0
                          item: =props.item4
                          name: =props.chart2
                          type: line
                          xAxisIndex: 0
                          yAxisIndex: 0
                    tooltip:
                      - component: oh-chart-tooltip
                        config:
                          confine: true
                          smartFormatter: true
                    xAxis:
                      - component: oh-time-axis
                        config:
                          gridIndex: 0
                    yAxis:
                      - component: oh-value-axis
                        config:
                          gridIndex: 0
                          min: 0
                          name: Watt
Damit sollten aber dann die meisten Gestaltungsmöglichkeiten abgedeckt sein.
Alle Zeiten sind UTC+02:00
Seite 2 von 2

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de