/lovelace-flower-card

Lovelace Flower Card to match the custom plant integration

Primary LanguageTypeScript

Flower Card

This fork of the flower-card depends on this Plant component: https://github.com/Olen/homeassistant-plant

The card can be set up from the GUI (requires version 3.0.0)

image

YAML-config

You can also select what bars you want to show for each card

type: custom:flower-card
entity: plant.my_plant
show_bars:
- illuminance
- humidity
- moisture
- conductivity
- temperature
- dli
battery_sensor: sensor.demo_battery
  • Battery sensor

You can optionally add a battery sensor to be displayed in the card.

image

The sensor will change color based on the state of the battery:

  • >= 40%: Green
  • 20 - 39%: Orange
  • < 20%: Red

Dependencies

  1. Custom Plant integration (https://github.com/Olen/homeassistant-plant)

Installation

hacs_badge

This can be installed manually or through HACS

Via HACS

  • Add this repo as a "Custom repository" with type "Lovelace"
    • Click HACS in your Home Assistnat
    • Click Frontend
    • Click the 3 dots in the top right corner and select "Custom Repositories"
    • Add the URL to this github repository and type "Dashboard"
  • Click "Install" in the new "Flower Card" card in HACS.
  • Wait for install to complete
  • You should not need to restart Home Assistant, but will probably need to refresh the frontend and/or "shift-reload" to refresh the browser cache.

Manual Installation

1: Download the file flower-card.js and add it to somewhere in your <config>/www/ folder in HA

2: Click your profile picture in the bottom left corner -> Turn on Advanced Mode.

3: Go to Configuration -> Lovelace Dashboards -> Resources -> press the + (lower right corner of screen) and add the following information:

  Url: /local/<path to>/flower-card.js
  Resource type: JavaScript Module

image

4: Press Create afterwards to add the new resource.

5: You should not need to restart Home Assistant, but will probably need to refresh the frontend and/or "shift-reload" to refresh the browser cache.

Disclaimer

I looked into several forks of the original card https://github.com/thomasloven/lovelace-flower-card. Some forks were very interesting and I edited several of those source codes changes into my own new fork. Credits to those original authors. After version 3.0.0 the card was more or less completely rewritten, and only the design and layout of the original card has been kept.