Home
Softono

Lovelace Flower Card

Open source TypeScript
476
Stars
49
Forks
1
Issues
5
Watchers
3 months
Last Commit

 About Lovelace Flower Card

Lovelace Flower Card to match the custom plant integration

Platforms

Web Self-hosted

Languages

TypeScript

Need Help Installing Lovelace Flower Card?

We provide expert installation service for this software. Our team will install, configure, and secure Lovelace Flower Card on your server. plans start at just $30.

Lovelace Flower Card

View on GitHub

🌸 Flower Card for Home Assistant

HACS Custom GitHub Release

A Lovelace card for displaying plant data from the Plant Monitor integration. Shows sensor readings, thresholds, and health status in a compact visual layout.

[!IMPORTANT] This card requires the Plant Monitor custom integration. It is not compatible with the built-in plant integration.


πŸ“‘ Table of Contents


πŸ“¦ Installation

Via HACS (recommended)

  1. Add this repo as a Custom Repository with type Dashboard
  2. Click Install in the "Flower Card" card in HACS
  3. Refresh the frontend (shift-reload your browser)

Manual Installation

  1. Download flower-card.js and place it in your <config>/www/ folder
  2. Go to Settings β†’ Dashboards β†’ Resources
  3. Add the resource:
    Url: /local/<path to>/flower-card.js
    Resource type: JavaScript Module
    
  4. Refresh the frontend

βš™οΈ Configuration

The card can be set up from the GUI:

GUI editor

Or via YAML:

type: custom:flower-card
entity: plant.my_plant

All Options

Option Type Default Description
entity string Required The plant entity ID
name string Entity name Custom display name
display_type string full Display mode: full or compact
hide_units boolean Based on display_type Hide value/unit next to bars
bars_per_row number Based on display_type Number of bars per row (1 or 2)
battery_sensor string β€” Entity ID of a battery sensor
show_bars list All Measurement bars to show
show_care list β€” Care guidance text boxes to show (details)
hide_species boolean false Hide the species name
hide_image boolean false Hide the plant image
extra_badges list β€” Additional icons (details)

Full Example

type: custom:flower-card
entity: plant.my_plant
name: "My Monstera"
display_type: full
battery_sensor: sensor.plant_sensor_battery
hide_species: false
hide_image: false
show_bars:
  - illuminance
  - humidity
  - moisture
  - conductivity
  - temperature
  - dli
show_care:
  - care_watering
  - care_sunlight
extra_badges:
  - entity: sensor.room_humidity
    icon: mdi:water-percent
  - entity: binary_sensor.window_open
    color_on: orange
    color_off: grey
Full card example

πŸ–ΌοΈ Display Types

Full (default)

type: custom:flower-card
entity: plant.my_plant
display_type: full

Compact

A smaller card layout with hidden units and single-column bars:

type: custom:flower-card
entity: plant.my_plant
display_type: compact
Compact card

Fine-Grained Overrides

The display type sets defaults you can override individually:

Setting Full Compact
hide_units false true
bars_per_row 2 1
# Compact header but 2 bars per row with units
type: custom:flower-card
entity: plant.my_plant
display_type: compact
bars_per_row: 2
hide_units: false

πŸ“Š Show Bars

Select which measurement bars to display:

show_bars:
  - moisture
  - temperature
  - illuminance

Available bars: moisture, temperature, conductivity, illuminance, humidity, dli, co2, soil_temperature


🌿 Care Info

Show OpenPlantbook care guidance as text boxes on the card. Select which fields to display:

show_care:
  - care_watering
  - care_sunlight
  - care_soil
  - care_pruning
  - care_fertilization

Available fields: care_watering, care_sunlight, care_soil, care_pruning, care_fertilization

Each selected field renders as a labeled text box β€” and only when the plant actually has that care attribute, so missing or empty fields are skipped automatically.

Note: Care text comes from OpenPlantbook via the plant integration. Existing plants need a species refresh before the care_* attributes appear (newly added plants get them automatically). You can confirm the data on your plant.… entity under Developer Tools β†’ States.


πŸ”‹ Battery Sensor

Add a battery indicator to the card header. The icon changes color based on level:

Level Color
>= 40% 🟒 Green
20–39% 🟠 Orange
< 20% πŸ”΄ Red
battery_sensor: sensor.plant_sensor_battery

Battery sensor


🏷️ Extra Badges

Add additional icons next to the battery icon β€” sensor values, binary states, action buttons, or static labels.

extra_badges:
  - entity: sensor.room_humidity
    icon: mdi:water-percent
  - entity: binary_sensor.grow_light_on
    icon: mdi:lightbulb
    color_on: yellow
    color_off: grey
  - entity: input_button.water_plant

For the full reference with all badge types and options, see EXTRA_BADGES.md.

Example card with all bars, various badges and care info

image

🎨 Other Options

Custom Name

name: "Living Room Monstera"

Hide Species / Image

hide_species: true
hide_image: true

β˜• Support


This card is a fork of thomasloven/lovelace-flower-card. After version 3.0.0 the card was largely rewritten; only the original design and layout have been kept.