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
Code: Alles auswählen
component: widget:inverter_v_01
config:
bg_color1: linear-gradient(to bottom,#6fa8dc 0%,#ffe74c 100%)
chart1: Erzeugt
chart2: Verbraucht
countercircle1: orange
countercircle2: pink
gauge1: Erzeugt
gauge1insidetext: lightgreen
gauge1max: "100"
gauge2: Verbraucht
gauge2insidetext: teal
gauge2max: "10"
item1: Gosund_socket_05_Leistung
item2: Gosund_socket_06_Leistung
title: Power
roundcorners: x