Mi Flora

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 :slight_smile:

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 :slight_smile:

Here is a picture:

image

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.
grafik

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.
5 Likes

Update: now supports analyzer chart action through clicking on the values

Update: some minor adjustments and added an example, how I use the widget as a popup/command options from a label card