GithubHelp home page GithubHelp logo

dontinelli / plant-card Goto Github PK

View Code? Open in Web Editor NEW

This project forked from olen/lovelace-flower-card

0.0 0.0 0.0 868 KB

Lovelace Plant Card for FYTA and other sensors

Home Page: https://github.com/Olen/homeassistant-plant/

JavaScript 5.14% TypeScript 94.86%

plant-card's Introduction

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 category "Lovelace"
  • 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.

plant-card's People

Contributors

olen avatar actions-user avatar remkolems avatar marcokreeft87 avatar vincentkelleher avatar momuskk avatar thomasloven avatar robertalexa avatar hypfer avatar alexiri avatar dependabot[bot] avatar shkarlsson avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.