Skip to content

Instantly share code, notes, and snippets.

@PRosenb

PRosenb/OH3_Solar_Energy_Summary.yaml

Created November 27, 2022 03:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PRosenb/a030a8b0b5feacd00d49a09ee147e1cd to your computer and use it in GitHub Desktop.
Save PRosenb/a030a8b0b5feacd00d49a09ee147e1cd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
OH3_Solar_Energy_Summary.yaml
uid: OH3_Solar_Energy_Summary
tags: []
props:
parameters:
- description: Title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Item Solar Production
label: Solar Production Item
name: itemSolarProduction
required: true
type: TEXT
- context: item
description: Home Consumption
label: Home Consumption Item
name: itemHomeConsumption
required: true
type: TEXT
- description: Icon Dimension in px, insert only the numeric value (default 100px, stay within 80px and 120px for best results)
label: Icon Dimension
name: iconDimension
required: false
- description: Border Radius, enter a numeric value from 0 to 100 (significant changes are visible from value between 40 and 70)
label: Border Radius
name: borderRadius
required: false
parameterGroups: []
timestamp: Nov 27, 2022, 1:59:01 PM
component: f7-card
config:
title: = props.title
slots:
content:
- component: f7-block
config:
style:
margin: 0
padding: 0
slots:
default:
- component: f7-block
config:
style:
--f7-block-font-size: 12px
--f7-theme-color: var(--f7-text-color)
display: flex
justify-content: space-between
margin: 0
padding: 0
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: f7-block
config:
style:
align-items: center
border: 2px solid teal
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
margin-top: 150px
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
slots:
default:
- component: oh-icon
config:
color: teal
height: 20px
icon: if:mdi:transmission-tower
- component: oh-link
config:
iconColor: purple
iconF7: "=((Number.parseInt(items[props.itemSolarProduction].state) - Number.parseInt(items[props.itemHomeConsumption].state)) > 0) ? 'arrow_left' : 'arrow_right'"
iconSize: 12px
style:
font-size: 12px
white-space: nowrap
text: = Math.abs(Number.parseInt(items[props.itemSolarProduction].state) - Number.parseInt(items[props.itemHomeConsumption].state)) + " W"
- component: Label
config:
text: Grid
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 1
slots:
default:
- component: Label
config:
text: Solar
- component: f7-block
config:
style:
align-items: center
border: 2px solid orange
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
slots:
default:
- component: oh-icon
config:
color: orange
height: 20px
icon: if:mdi:solar-power
- component: Label
config:
style:
font-size: 12px
text: = Number.parseInt(items[props.itemSolarProduction].state) + " W"
- component: f7-block
config:
style:
display: flex
height: 145px
justify-content: center
margin: 0
padding: 0
width: 100%
slots:
default:
- component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
height: auto
tag: svg
viewBox: 0 0 100 100
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M53,0 v15 c0,40 10,35 30,35 h20
fill: none
id: pathSolarHome
stroke: orange
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=(Number.parseInt(items[props.itemSolarProduction].state) > 0) ? true : false"
- component: f7-row
config:
fill: orange
r: 1
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=(Number.parseInt(items[props.itemSolarProduction].state) > 0) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#pathSolarHome"
- component: f7-row
config:
d: M47,0 v15 c0,40 -10,35 -30,35 h-20
fill: none
id: pathSolarGrid
stroke: purple
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=((Number.parseInt(items[props.itemSolarProduction].state) - Number.parseInt(items[props.itemHomeConsumption].state)) > 0) ? true : false"
- component: f7-row
config:
fill: purple
r: 1
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: "=((Number.parseInt(items[props.itemSolarProduction].state) - Number.parseInt(items[props.itemHomeConsumption].state)) > 0) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#pathSolarGrid"
- component: f7-row
config:
d: M0,55 H100
fill: none
id: pathGridHome
stroke: red
stroke-width: 1
tag: path
vector-effect: non-scaling-stroke
visible: "=((Number.parseInt(items[props.itemSolarProduction].state) - Number.parseInt(items[props.itemHomeConsumption].state)) > 0) ? false : true"
- component: f7-row
config:
fill: red
r: 1
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: "=((Number.parseInt(items[props.itemSolarProduction].state) - Number.parseInt(items[props.itemHomeConsumption].state)) > 0) ? false : true"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#pathGridHome"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
slots:
default:
- component: f7-block
config:
style:
align-items: center
border: 2px solid gray
border-radius: "=(props.borderRadius) ? props.borderRadius +'px' : '0px'"
display: flex
flex-direction: column
height: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
justify-content: center
margin-top: 150px
width: "=props.iconDimension ? Number(props.iconDimension)+'px' : '100px'"
slots:
default:
- component: oh-icon
config:
color: gray
height: 20px
icon: if:mdi:home
- component: Label
config:
style:
font-size: 12px
white-space: nowrap
text: = Number.parseInt(items[props.itemHomeConsumption].state) + " W"
- component: Label
config:
text: Home
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment