Ok aber was macht Redraw??
Kann irgendwie was einbauen das man Hintergrundfarbe ändern kann??
Danke
Widget funktioniert nicht
- peter-pan
- Beiträge: 2564
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: Widget funktioniert nicht
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.
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
style:
background-color: lightblue
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
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian
-
- Beiträge: 94
- Registriert: 16. Dez 2021 11:02
Re: Widget funktioniert nicht
Dankeschön
-
- Beiträge: 94
- Registriert: 16. Dez 2021 11:02
Re: Widget funktioniert nicht
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
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
- peter-pan
- Beiträge: 2564
- Registriert: 28. Nov 2018 12:03
- Wohnort: Schwäbisch Gmünd
Re: Widget funktioniert nicht
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)
Widget 2: Hintergrund-Farbverlauf, Gauge und Texte coloriert, runde Ecken
Widget 3: Hintergrund transparent, Gauge und Texte coloriert, runde Ecken
Yaml Widget 1 :
Yaml Widget 2:
Yaml Widget 3:
Yaml-Code Widget:
Damit sollten aber dann die meisten Gestaltungsmöglichkeiten abgedeckt sein.
Widget 1: Standard, eckige KantenWidget 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
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
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"
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
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