Hello community! I’m trying to build a universal smart plug widget that shows daily consumption and actual consumption in a trendline.
This is the first release, so there could be some bugs or options to be fine tuned, so feel free to tell me what are issues you will find.
This widget looks into “Model” scheme, find some defined tags (described below) and automatically show/hide widget options.
This widget is part of a package of widgets that i would like to distribute. My idea is to develope a set of universal widgets suitable for everyone and usable for different brand devices.
First thing to be done is to configure a Group and set it as “PowerOutlet” as Semantic Class.
Then, you have to set its memebers as:
- Operating status:
Semantic Class → Status - Actual consumption:
Semantic Class → Measurement
Semantic Property —> Power - Daily consumption:
Semantic Class → Measurement
Semantic Property —> Energy
Non-Semantic Tags —> Daily
Maybe nothing too much different from the setup you already have.
Screenshots
Changelog
- none
Version 0.1
- initial release
Resources
uid: Universal_Smart_Plug_Card_Repeater
tags: []
props:
parameters:
- context: Text
label: Title of the card
name: plugTitle
required: false
type: TEXT
- context: item
description: Equipment Group for Smart Plug
label: Smart Plug Group
name: groupItem
required: true
type: TEXT
- defaultValue: "false"
description: Show/Hide shadow for the widget card
label: Widget shadow
name: boxshadow
required: false
type: BOOLEAN
timestamp: Oct 28, 2022, 2:29:57 PM
component: f7-card
config:
style:
background: "=themeOptions.dark === 'dark' ? rgb(40, 40, 40) : rgb(240, 240, 240)"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: "=props.boxshadow === true ? (themeOptions.dark === 'dark' ? '5px 5px 15px 1px rgba(240,240,240,0.5)' : '5px 5px 15px 1px rgba(35,35,35,0.5)') : '0px 0px 0px 0px rgba(0,0,0,0)'"
height: auto
margin-left: 5px
margin-right: 5px
slots:
default:
- component: f7-card-content
config: {}
slots:
default:
- component: oh-icon
config:
height: 50px
icon: iconify:game-icons:green-power
style:
color: rgb(89, 220, 111)
- component: f7-block
config:
style:
padding: 0
margin-left: 4em
top: 30px
position: absolute
slots:
default:
- component: Label
config:
style:
color: "=themeOptions.dark === 'dark' ? rgb(35, 35, 35) : rgb(240, 240, 240)"
font-size: 15px
font-weight: 500
text: =props.plugTitle
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.switchItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: switchItem
sourceType: itemsWithTags
itemTags: Switch,Power
slots:
default:
- component: f7-chip
config:
style:
background: "=items[loop.switchItem.name].state === 'ON' ? 'rgb(89, 220, 111)' : 'red'"
font-weight: 500
text: =items[loop.switchItem.name].state
- component: f7-block
config:
style:
padding: 0
top: 30px
right: 2em
position: absolute
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.switchItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: switchItem
sourceType: itemsWithTags
itemTags: Switch,Power
slots:
default:
- component: oh-toggle
config:
item: =loop.switchItem.name
color: green
style:
--f7-toggle-height: 15px
--f7-toggle-width: 30px
--f7-toggle-inactive-color: red
z-index: 98
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.powerItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: powerItem
sourceType: itemsWithTags
itemTags: Measurement,Power
slots:
default:
- component: f7-row
config: {}
slots:
default:
- component: oh-trend
config:
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(100%)
z-index: 98
trendGradient:
- rgb(89, 220, 111)
trendItem: =loop.powerItem.name
- component: f7-card-footer
config:
style:
background: rgb(153, 255, 187)
border-radius: 0 0 10px 10px
height: auto
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.opstateItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: opstateItem
sourceType: itemsWithTags
itemTags: Status
slots:
default:
- component: f7-row
config: {}
slots:
default:
- component: oh-icon
config:
height: 20px
icon: iconify:mdi:list-status
style:
color: rgb(106, 106, 106)
- component: Label
config:
style:
color: black
text: =items[loop.opstateItem.name].displayState
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.powerItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: powerItem
sourceType: itemsWithTags
itemTags: Measurement,Power
slots:
default:
- component: f7-row
config: {}
slots:
default:
- component: oh-icon
config:
height: 20px
icon: iconify:simple-line-icons:energy
style:
color: rgb(106, 106, 106)
- component: Label
config:
style:
color: black
text: =items[loop.powerItem.name].displayState
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: "(loop.energyItem.groupNames.indexOf(props.groupItem) >= 0) ? true : false"
for: energyItem
sourceType: itemsWithTags
itemTags: Measurement,Energy,Daily
slots:
default:
- component: f7-row
config: {}
slots:
default:
- component: oh-icon
config:
height: 20px
icon: iconify:icon-park-outline:database-power
style:
color: rgb(106, 106, 106)
- component: Label
config:
style:
color: black
text: =items[loop.energyItem.name].displayState
