Hello guys,
i have a few of the miflora flower care plant monitors at home and figured I build something nice in the new main UI to monitor them. After setting them up with the list widget, I noticed that it got quite repetive and straining. So I decided to make a widget out of it.
That took much longer than just creating them all by hand … but I learned a lot 
So in the end, I looked at a lot of all the other fancy widgets doing a lot of things with the f7 card … so in that regard, my widget is more of a template for the stock list-widget. Hope it’s still ok to call it a widget
Here is a picture:
Features:
- item choosable for all channels of a miflora Sensor
- configure warning levels for the individual plant
- color changes depending on the values (blue - not enough, green - good, red - too much)
- icons change as well
- localization settings for all strings
Code
uid: widget_miFlora
tags: []
props:
parameters:
- description: Friendly Display name of your plant
label: plant name
name: name
required: true
type: TEXT
groupName: plant
- context: item
description: The miflora temperature item
label: Temperature
name: tempItem
required: true
type: TEXT
groupName: plant
- description: Minimum recommended temperature for your plant
label: Minimum temperature
name: tempMin
required: true
type: TEXT
groupName: plant
- description: Maximum recommended temperature for your plant
label: Maximum temperature
name: tempMax
required: true
type: TEXT
groupName: plant
- context: item
description: The miflora brightness item
label: brightness
name: brightItem
required: true
type: TEXT
groupName: plant
- description: Minimum recommended brightness for your plant
label: Minimum brightness
name: brightMin
required: true
groupName: plant
- description: Maximum recommended brightness for your plant
label: Maximum brightness
name: brightMax
required: true
type: TEXT
groupName: plant
- context: item
description: The miflora moisture item
label: Soil Moisture
name: moistItem
required: true
type: TEXT
groupName: plant
- description: Minimum recommended soil moisture for your plant
label: Minimum moisture
name: moistMin
required: true
type: TEXT
groupName: plant
- description: Maximum recommended soil moisture for your plant
label: Maximum moisture
name: moistMax
required: true
type: TEXT
groupName: plant
- context: item
description: The miflora fertility item
label: Soil Fertility
name: fertItem
required: true
type: TEXT
groupName: plant
- description: Minimum recommended soil fertility score for your plant
label: Minimum fertility score
name: fertMin
required: true
type: TEXT
groupName: plant
- description: Maximum recommended soil fertility score for your plant
label: Maximum fertility
name: fertMax
required: true
type: TEXT
groupName: plant
- context: item
description: The miflora battery level
label: Battery level
name: batteryItem
required: true
type: TEXT
groupName: plant
- context: item
description: Item with timestamp of the last miflora update, to be shown in the footer of the list
label: last update
name: lastUpdateItem
required: false
type: TEXT
groupName: plant
- description: Word for temperature
label: temperature
name: tempString
required: false
type: TEXT
groupName: localization
advanced: true
- description: Word for light/brightness
label: Light
name: lightString
required: false
type: TEXT
groupName: localization
advanced: true
- description: Word for soil moisture
label: moisture
name: moistString
required: false
type: TEXT
groupName: localization
advanced: true
- description: Word for soil fertility
label: fertility
name: fertString
required: false
type: TEXT
groupName: localization
advanced: true
- description: Word for battery
label: battery
name: batteryString
required: false
type: TEXT
groupName: localization
advanced: true
- description: String for 'Last Update'
label: Last Update
name: updateString
required: false
type: TEXT
groupName: localization
advanced: true
parameterGroups:
- name: localization
label: Localization Settings
description: Customize words and sentences
- name: plant
label: Plant Setup
description: link plant items and set limits
timestamp: Apr 8, 2021, 3:04:53 PM
component: f7-card
slots:
default:
- component: oh-list-card
config:
title: "=((!props.name) ? 'Unknown plant': props.name)"
footer: "='Last update: '+items[props.lastUpdateItem].displayState"
inlineLabels: true
mediaList: false
slots:
default:
- component: oh-label-item
config:
item: =(props.tempItem)
title: "=((!props.tempString) ? 'Temperature': props.tempString)"
icon: '=((items[props.tempItem].state < Number(props.tempMin) ? "f7:thermometer_snowflake" : ((items[props.tempItem].state >= Number(props.tempMax)) ? "f7:thermometer_sun" : "f7:thermometer" ) ))'
iconColor: '=((items[props.tempItem].state < Number(props.tempMin) ? "blue" : ((items[props.tempItem].state >= props.tempMax) ? "red" : "green" ) ))'
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.tempItem]
- component: oh-label-item
config:
item: =(props.brightItem)
title: "=((!props.lightString) ? 'Light': props.lightString)"
icon: '=((items[props.brightItem].state < Number(props.brightMin) ? "f7:light_min" : ((items[props.brightItem].state >= Number(props.brightMax)) ? "f7:sun_max_fill" : "f7:light_max" ) ))'
iconColor: '=(items[props.brightItem].state < Number(props.brightMin) ? "blue" : ((items[props.brightItem].state >= Number(props.brightMax)) ? "red" : "green" ) )'
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.brightItem]
- component: oh-label-item
config:
item: =(props.moistItem)
title: "=((!props.moistString) ? 'Moisture': props.moistString)"
icon: '=((items[props.moistItem].state < Number(props.moistMin) ? "f7:drop_triangle" : ((items[props.moistItem].state >= Number(props.moistMax)) ? "f7:drop_triangle_fill" : "f7:drop" ) ))'
iconColor: '=(items[props.moistItem].state < Number(props.moistMin) ? "red" : ((items[props.moistItem].state >= Number(props.moistMax)) ? "blue" : "green" ) )'
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.moistItem]
- component: oh-label-item
config:
item: =(props.fertItem)
title: "=((!props.fertString) ? 'Fertility': props.fertString)"
icon: '=((items[props.fertItem].state < Number(props.fertMin) ? "f7:arrow_uturn_down_circle" : ((items[props.fertItem].state >= Number(props.fertMax)) ? "f7:arrow_uturn_up_circle" : "f7:leaf_arrow_circlepath" ) ))'
iconColor: '=(items[props.fertItem].state < Number(props.fertMin) ? "blue" : ((items[props.fertItem].state >= Number(props.fertMax)) ? "red" : "green" ) )'
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.fertItem]
- component: oh-label-item
config:
item: =(props.batteryItem)
title: "=((!props.batteryString) ? 'Battery': props.batteryString)"
icon: '=((items[props.batteryItem].state> 25) ? "f7:battery_100" : ((items[props.batteryItem].state> 5) ? "f7:battery_25" : "f7:battery_0"))'
iconColor: '=((items[props.batteryItem].state> 50) ? "green" : (((items[props.batteryItem].state> 25) ? "yellow" : ((items[props.batteryItem].state> 5) ? "orange" : "red"))))'
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.batteryItem]
I now use this in combination with a standard oh-label widget. The label-widget just gives me a short overview of temperature/moisture as well as moisture trend and a color indicating whether it needs water or not.
A click on it then opens the above widget through the command options.
Example code snipped
- component: oh-label-card
config:
label: =(items.Pflanze1_Temperatur.state) + '°C ' +
items.Pflanze1_Bodenfeuchte.state + '%'
trendItem: Pflanze1_Bodenfeuchte
action: popup
actionModal: widget:widget_miFlora
actionModalConfig:
name: Calathea stromata
tempItem: Pflanze1_Temperatur
tempMin: "12"
tempMax: "32"
brightItem: Pflanze1_Beleuchtungsstarke
brightMin: "800"
brightMax: "20000"
moistItem: Pflanze1_Bodenfeuchte
moistMin: "15"
moistMax: "65"
fertItem: Pflanze1_Leitfahigkeit
fertMin: "350"
fertMax: "1000"
batteryItem: Pflanze1_Batterie
lastUpdateItem: Pflanze1_LastUpdate
title: Calathea
trendStrokeWidth: 3px
background: "=(( items.Pflanze1_Bodenfeuchte.state >= 15
&& items.Pflanze1_Bodenfeuchte.state <=65) ? 'lightgreen' :
'#FF5252' ) "
Hope this helps somebody, and for all the more experienced developers, I’d love some input on my further thoughts:
- I’d love to have the battery entry to disappear when there is more than x% of charge. I tried a “visible” parameter, but that doesn’t seem to work
- alternative: the battery icon could appear next to the plant or in the footer. But I believe I only have a chance to do that outside of the list widget?
- I cursed a lot when my color comparisons weren’t working at first. at some point I realized, that it’s because I’m doing a string comparison with < and > here. I first tried to set the property type to “Number”, but it seems only “text” and “boolean” work. had to read a few other widget sources to find that I can cast the string to number, but still wonder if this is the proper way?
- I’d also love to set a background picture for the whole list. I figured, this might be possible … right? The whole widget is a f7 card and the list widget is inside of it … so it should be possible to set a background for the f7 card?
- at some point I’d love to store the tresholds in items as well (for alarms), but i guess there is no way to send the property values to an items, right? Otherwise I’ll propably just create the static items for every plant.