Seite 1 von 2
[GELÖST] OH3 Charts in UI einbinden
Verfasst: 12. Nov 2022 20:28
von lenschith
Hallo zusammen,
ich hätte mal eine Frage zu den Charts die in OH3 erstellt werden können, diese sind ja mittlerweile auch brauchbar. Ich habe eine Chartsite erstellt dort sind die Charts auch schön eingebunden, nun würde ich aber gerne auf der Overview direkt eine Chart mit einbinden wollen ist das möglich?
Quasi in einem Widget das Chart. Leider konnte ich i Netz nichts brauchbares finden.
Screenshot 2022-11-12 202645.png
Gruß Lenschi
Re: OH3 Charts in UI einbinden
Verfasst: 13. Nov 2022 00:00
von peter-pan
..hier hab ich ein kleines Widget, das auch ein Chart enthält. Da musst du halt das was du nicht brauchst rausschmeissen:
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
Das sieht dann so aus:
2022-11-12_235714.jpg
Das Original-Widget findest du als Tag im Yaml-Code
Re: OH3 Charts in UI einbinden
Verfasst: 13. Nov 2022 00:49
von lenschith
Hallo Peter,
das hatte ich schon gefunden, aber eigentlich hätte ich einfach gerne das eingebunden das ich schon auf OH angelegt habe.
Re: OH3 Charts in UI einbinden
Verfasst: 13. Nov 2022 13:47
von peter-pan
Du bist doch so ein Tüftler. Eigentlich solltest du ja den Chart-Code (irgendwie) in das Widget reinkopieren können bzw. eine f7-Card drumherumbauen können.
Ich hab jetzt einfach mal den Chart-Teil von dem oberen Widget herauskopiert und stelle ihn hier rein:
Code: Alles auswählen
- 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
Wenn du den jetzt mal genauer anschaust, siehst du, wenn du ihn mit deinem Chart-code vergleichst, dass das doch fast der selbe Aufbau ist, oder ?
Ich habe zwar momentan noch etwas anderes zu erledigen, aber du hast mich da auf eine Idee gebracht, ich werde es mal bei Gelegenheit probieren. Natürlich braucht es die "Gauges" nicht.
Re: OH3 Charts in UI einbinden
Verfasst: 13. Nov 2022 16:44
von lenschith
Oh man, so einfach. Da muss man erst mal drauf kommen.
Screenshot 2022-11-13 164411.png
Vielen Dank.
Gruß Lenschi
Re: [GELÖST] OH3 Charts in UI einbinden
Verfasst: 13. Nov 2022 17:18
von peter-pan
lenschith hat geschrieben: ↑13. Nov 2022 16:44
Da muss man erst mal drauf kommen.
Gerne. Ich hab auch noch was in meinem "Fundus" gefunden. Ich habe das zwar auch nicht im Einsatz, aber vielleicht kannst du das auch noch gebrauchen:
Code: Alles auswählen
uid: z_test_CHART_Widget
tags: []
props:
parameters:
- description: Header of the cell
label: Header
name: header
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- context: item
label: Graph Item 1
name: graphItem1
required: false
type: TEXT
- label: Area 1 filled
name: area1filled
required: false
type: BOOLEAN
- context: item
label: Graph Item 2
name: graphItem2
required: false
type: TEXT
- label: Area 2 filled
name: area2filled
required: false
type: BOOLEAN
- context: item
label: Graph Item 3
name: graphItem3
required: false
type: TEXT
- label: Area 3 filled
name: area3filled
required: false
type: BOOLEAN
parameterGroups: []
timestamp: Oct 14, 2022, 2:58:12 PM
component: f7-card
config:
key: =Math.random() + items[props.graphItem1].state.split(" ")[0] + items[props.graphItem2].state.split(" ")[0] + items[props.graphItem3].state.split(" ")[0]
style:
background-color: rgba(0,0,0,0)
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
margin-left: 5px
margin-right: 5px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 18
style:
margin-right: 10px
visible: "=props.icon ? true : false"
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.header ? props.header : ''"
default:
- component: oh-chart
config:
options:
color:
- rgba(255,0,0,1)
- rgba(0,255,255,1)
- rgba(0,255,0,1)
period: W
slots:
grid:
- component: oh-chart-page
config:
containLabel: true
height: 85%
includeLabels: true
left: 20px
show: false
top: 16px
width: 95%
legend:
- component: oh-chart-legend
config:
bottom: 0px
show: true
type: scroll
series:
- component: oh-time-series
config:
areaStyle:
opacity: "=props.area1filled ? 0.2 : 0.0"
item: =props.graphItem1
markPoint:
data:
- name: Max
type: "=props.item1max ? 'max' : ''"
- name: Min
type: "=props.item1min ? 'min' : ''"
- name: Average
type: "=props.item1average ? 'average' : ''"
name: =props.graphItem1
smooth: true
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
areaStyle:
opacity: "=props.area2filled ? 0.2 : 0.0"
gridIndex: 0
item: =props.graphItem2
markPoint:
data:
- name: Max
type: "=props.item2max ? 'max' : ''"
- name: Min
type: "=props.item2min ? 'min' : ''"
- name: Average
type: "=props.item2average ? 'average' : ''"
name: =props.graphItem2
smooth: true
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
areaStyle:
opacity: "=props.area3filled ? 0.2 : 0.0"
item: =props.graphItem3
markPoint:
data:
- name: Max
type: "=props.item3max ? 'max' : ''"
- name: Min
type: "=props.item3min ? 'min' : ''"
- name: Average
type: "=props.item3average ? 'average' : ''"
name: =props.graphItem3
smooth: true
type: line
xAxisIndex: 0
yAxisIndex: 0
tooltip:
- component: oh-chart-tooltip
config:
confine: true
orient: vertical
show: true
smartFormatter: true
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
Die Hintergrundfarben, etc. lassen sich da leicht verändern. Genügend Anregungen kennst du ja aus meinen anderen Widgets.
Re: [GELÖST] OH3 Charts in UI einbinden
Verfasst: 13. Nov 2022 19:35
von lenschith
Ich möchte mir daraus gerne ein Widget basteln da ich immer wieder Charts habe. Aber irgendwie kann ich die Einheiten nicht mit props anzeigen lassen. Das wird dann immer als Text in den Graph geschrieben. Eine Idee wie ich das machen muss?
Screenshot 2022-11-13 193457.png
Code: Alles auswählen
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
name: =props.graph1unit
- component: oh-value-axis
config:
gridIndex: 0
name: W
Re: [GELÖST] OH3 Charts in UI einbinden
Verfasst: 13. Nov 2022 20:31
von peter-pan
.. Das geht leider nicht. Da hab ich schon im internationalen Forum geforscht und leider nichts gefunden. Es ist zwar schon eine Weile her, aber vielleicht gibt es zwischenzeitlich eine Möglichkeit. Eventuell hat sich Yannick Schaus etwas ausgedacht.
Momentan nur "händisch". Sorry
Re: [GELÖST] OH3 Charts in UI einbinden
Verfasst: 13. Nov 2022 20:37
von lenschith
Danke für die Info. Das ist aber sehr schade. wäre so cool gewesen.
https://community.openhab.org/t/configu ... s/137831/8
Re: [GELÖST] OH3 Charts in UI einbinden
Verfasst: 14. Nov 2022 00:18
von peter-pan
...ja da gibt's mehrere threads, die hierauf Bezug nehmen, ob nun von Yannick oder Justin. Leider reicht das wohl nicht im Moment.
https://community.openhab.org/t/iconcol ... r/137876/4
Warten wir's ab.