UI Widget: MiFlora/FlowerCare plant sensor

Add-on Marketplace UI Widgets
1

The code for the widget I demoed during my tour of the UI for the Virtual Meetup in December 2020. It provides a card for displaying temperature, humidity, luminosity measurements along with the battery status for a plant sensor. This widget can then be made the default standalone widget for the parent Group item (Equipment) representing the sensor.

image

Prerequisites

It will assume your items to have this naming scheme:

  • {props.item}_Temperature
  • {props.item}_Moisture
  • {props.item}_Light
  • {props.item}_Battery

{props.item} being the name of the group (Equipment) item, it’s assumed the Points will have this name as a prefix.

You can make adjustments as necessary, in particular maybe you want that background image to be hosted locally in the /static place of your instance instead of being pulled from the internet.

Code

uid: flowercare
tags: []
props:
  parameters:
    - description: The name of the sensor
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: The FlowerCare equipment group (prefix of the point item names)
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
component: f7-card
slots:
  default:
    - component: f7-block
      config:
        style:
          min-height: 200px
          background: url(https://camo.githubusercontent.com/2ebc574c32ccfd79a3781ecd48b22f5298c9d996a95279934c37cdd0cdce88b5/68747470733a2f2f7869616f6d692d6d692e636f6d2f75706c6f6164732f636b2f7869616f6d692d666c6f7765722d6d6f6e69746f722d3030312e6a7067)
          background-size: cover
          background-position: right bottom
          display: flex
          flex-direction: column
          align-items: start
      slots:
        default:
          - component: Label
            config:
              text: =props.title
              iconF7: sun_min
              style:
                color: black
                text-shadow: 0px 0px 3px white
                margin: 5px
                font-weight: bold
                text-transform: uppercase
          - component: oh-link
            config:
              text: =items[props.item + '_Temperature'].state
              action: analyzer
              actionAnalyzerItems: =[props.item + '_Temperature']
              iconF7: thermometer
              iconSize: 24
              color: black
              style:
                font-size: 24px
                text-shadow: 0px 0px 3px white
          - component: oh-link
            config:
              text: =items[props.item + '_Moisture'].displayState
              action: analyzer
              actionAnalyzerItems: =[props.item + '_Moisture']
              iconF7: drop
              color: black
              style:
                text-shadow: 0px 0px 3px white
                margin-left: 2px
          - component: oh-link
            config:
              text: =items[props.item + '_Light'].displayState
              action: analyzer
              actionAnalyzerItems: =[props.item + '_Light']
              iconF7: sun_min
              color: black
              style:
                text-shadow: 0px 0px 3px white
                margin-left: 2px
          - component: oh-icon
            config:
              state: =items[props.item + '_Battery'].state.split('.')[0]
              icon: batterylevel
              height: 30
              style:
                filter: grayscale()

See it in action here (around 1:32:00):

7 Likes
2

Hi @ysc,
your job on the new UI is amazing and force me to immediate jump to OH3 and create a new UI to replace the Habpanel !!
I like a lot your new cards based on Semantic classes, but I have a question:
Is any way to navigate to a Group using these cards?
I.e. can I set an action to an oh-button in order to navigate to an “equipment” using the card which I found in the Equipment section instead of the standard card? Same for Location ?
Thanks
Lorenzo

3

You mean open a popup with the group members?
Yes, that’s the group action.
You just have to set
action: group
and
actionGroupPopupItem: <the name of your group>
and that’s all. You can put it in a oh-button, oh-link and the like.

4

Thanks @ysc,
I mean instead to open the standard one as you wrote above, I would like to open the semantic one (the one automatically generate in the “Equipment” tab) which have a different and better Layout
Regards
Lorenzo

5

Then, no, sorry, these cards are generated with some special logic to rebuild your model that the other pages don’t have.

6

In your widget you use

background: url(https://camo.githubusercontent.com/2ebc574c32ccfd79a3781ecd48b22f5298c9d996a95279934c37cdd0cdce88b5/68747470733a2f2f7869616f6d692d6d692e636f6d2f75706c6f6164732f636b2f7869616f6d692d666c6f7765722d6d6f6e69746f722d3030312e6a7067)

How do I reference local artwork or images? I’ve got a .jpg file that currently sits in /html/graphics/Aqara-Sensor-1.jpg but I can’t get it to load.

Are there any naming conventions that need to be applied? Lower case file names, no spaces etc?

7

try static/graphics/Aqara-Sensor-1.jpg

8

Perfect, thanks