GUI Relevanten, PaperUI, BasicUI, HabPanel ...
Moderatoren: seppy , udo1toni
gexle
Beiträge: 94Registriert: 16. Dez 2021 11:02
Answers: 0
Beitrag
von gexle 23. Aug 2022 08:57
Hallo
Frage kann man bei diesen Code die Oberflächen Farbe anpassen in Prozent?
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: Aug 21, 2022, 5:50:37 PM
component: f7-card
config:
title: =props.title
class:
- padding-bottom
style:
background-color: DarkKhaki
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: 4
type: scroll
dataZoom:
- component: oh-chart-datazoom
config:
type: inside
Also sowie hier
background: "linear-gradient(to top left, #6fa8dc 0%, #00FA9A 50%, #ffe74c 100%)"
Siehe dazu das Bild
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
peter-pan
Beiträge: 2573Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd
Beitrag
von peter-pan 24. Aug 2022 00:09
...schau mal
hier nach. Da findest du die Antwort
.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.2
openhabian
gexle
Beiträge: 94Registriert: 16. Dez 2021 11:02
Answers: 0
Beitrag
von gexle 24. Aug 2022 09:01
Hallo Peter
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
gexle
Beiträge: 94Registriert: 16. Dez 2021 11:02
Answers: 0
Beitrag
von gexle 24. Aug 2022 10:29
Hallo Peter
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
peter-pan
Beiträge: 2573Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd
Beitrag
von peter-pan 24. Aug 2022 13:17
...da bin ich jetzt echt überfragt
.
Bei mir ist das durchgängig gefärbt. Du hast doch meine Version des Widgets genommen !? Poste doch mal den Yaml-Code der Konfiguration.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.2
openhabian
gexle
Beiträge: 94Registriert: 16. Dez 2021 11:02
Answers: 0
Beitrag
von gexle 24. Aug 2022 21:17
Hallo Peter
gexle
Beiträge: 94Registriert: 16. Dez 2021 11:02
Answers: 0
Beitrag
von gexle 25. Aug 2022 08:01
Hallo Peter
Hier bitte
Code: Alles auswählen
uid: inverter_v_01
tags:
- Background and Layout 'round Corners' from Peter
- Original from Daniel and Denis
- https://community.openhab.org/t/oh3-graph-in-card-widget/119202/12
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/Chart 1 item
name: item1
required: true
type: TEXT
- context: item
description: Item in gauge
label: Gauge/Chart 2 item
name: item2
required: true
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: Aug 24, 2022, 10:40:01 AM
component: f7-card
config:
class:
- padding-bottom
- padding-left
style:
--f7-card-box-shadow: none
background: linear-gradient(to bottom,#6fa8dc 0%,#ffe74c 100%)
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.item1
name: =props.chart1
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
color: '=(props.gauge2insidetext) ? props.gauge2insidetext : "red"'
gridIndex: 0
item: =props.item2
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/Ampere/Volt
peter-pan
Beiträge: 2573Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd
Beitrag
von peter-pan 25. Aug 2022 11:53
Wenn ich das richtig sehe, entspricht das nicht exakt meinem "gepimpten" Widget. Es fehlt auf jeden Fall der Teil, mit dem man die Hintergrundfarbe ändern kann. Die Dialogbox ist zwar vorhanden, aber dieser Parameter, ist so:
Code: Alles auswählen
background: '=(props.bg_color1) ? props.bg_color1 : ""'
nicht vorhanden bzw. sieht bei dir so aus:
Code: Alles auswählen
background: linear-gradient(to bottom,#6fa8dc 0%,#ffe74c 100%)
Es wurden auch Umbenennungen (z.B.: Watt/Ampere/Volt) vorgenommen, deshalb kann ich auch nicht genau sagen, was da alles geändert wurde.
Hier also nochmal mein aktueller Yaml-Code für das Custom-Widget (nicht für die Konfiguration
)
Code: Alles auswählen
uid: inverter_v_01
tags:
- Background and Layout 'round Corners' from Peter
- Original from Daniel and Denis
- https://community.openhab.org/t/oh3-graph-in-card-widget/119202/12
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/Chart 1 item
name: item1
required: true
type: TEXT
- context: item
description: Item in gauge
label: Gauge/Chart 2 item
name: item2
required: true
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: Jul 1, 2022, 7:00:35 PM
component: f7-card
config:
class:
- padding-bottom
- padding-left
style:
--f7-card-box-shadow: none
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.item1
name: =props.chart1
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
color: '=(props.gauge2insidetext) ? props.gauge2insidetext : "red"'
gridIndex: 0
item: =props.item2
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
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.2
openhabian
gexle
Beiträge: 94Registriert: 16. Dez 2021 11:02
Answers: 0
Beitrag
von gexle 26. Aug 2022 08:50
Hallo Peter
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
peter-pan
Beiträge: 2573Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd
Beitrag
von peter-pan 26. Aug 2022 09:49
...sorry, dann weiss ich leider auch nicht weiter.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.2
openhabian
.
.