Lovelace: irrigation-card (help needed)

Share your Projects! Dashboards & Frontend
1

Hi there brains trust.

I am trying to create a new card to represent an irrigation zone in my veggie patch.
The idea being that that I can create one card, and display it three times for each zone.

I have been able to create the card with static data, but am unable to get the card to display when I try and read the configuration items.

The error that I keep getting is:
19:47 Uncaught TypeError: Cannot read property ‘card_title’ of undefined

My lovelace-ui config has:
- type: vertical-stack
cards:
- type: “custom:irrigation-zone-card”
entity_title: sensor.zone_1_irrigation_status

Have tried to rename the config options, change where i read the options from, using just a text value (instead of a sensor).

No idea, but I am sure its something obvious. :slight_smile:

Have put the code on github, and happy to share as its finalised:

This is what the static version looks like:
sample

1 Like
2

Update:
Finally found the problem… Hope this helps someone else, as I was stumped for days.

First, In the setConfig function you need this:
setConfig(config) {
this._config = config;

secondly you can then reference the _config variable in the hass function:
const zone_title = this._config.zone_title;

I have cleaned up some of the code an put it in github.

This is what I have in my ui-lovelace.yaml:

  • icon: mdi:water
    title: Irrigation
    id: irrigation
    cards:
    • type: custom:irrigation-zone-card
      zone_title: Zone 1
      next_water: sensor.next_run_irrigation_zone_1
      last_water: sensor.last_run_irrigation_zone_1
      zone_status: sensor.zone_1_irrigation_status
      moisture_level: sensor.irrigation_zone_1_soil_moisture_level
      temperature: sensor.irrigation_zone_1_temperature
      light_level: sensor.irrigation_zone_1_light_level

and this what it looks like in action:
sample

Next step is to have a settings pane popup.
Then fix the css I think as it doesn’t scale quite properly on my mobile phone.

2 Likes
3

Excellent! I’d just pulled out the coding pad to start work on this when I saw your post. Giving it a try now, thanks @nmurden.

4

Looks great will be following to see how this progresses would definitely like to use it with my setup

5

Hi Nmurden,

That’s exactly what I was looking for,
Can you please share(upload) your ui-lovelace.yaml in GitHub.

Thanks.

6

Looks good :grinning: was just thinking of doing some things like this but this is 10x better

7

id like to use this with my rachio

8

I’m trying to find a way to display a timer showing the current time left on an active irrigation. Like a countdown thing…

9

You can use a timer.

10

Yes that one did the trick, just wondering if there is a way to remove the start/stop reset buttons…

2019-05-28_11-20-14

11

How are you displaying them in Lovelace?
I just use simple entities and I get this (it shows the time remaining counting down when active, not ‘Idle’).

image

12

oh that is a nicer view…what type of card is that? and what mdi icon are you using?

13

It is just a simple entities card…

      entities:
        - entity: sensor.cycle1_zone_being_watered
          icon: mdi:fountain
        - timer.cycle1_zone_duration
1 Like
14

Your - timer.cycle1_zone_duration is one timer? Because I have several timers (25mins, 45mins, 60mins)

I can’t seem to display the counter though…

  - platform: template
    sensors:
      rainbird_status:
        friendly_name_template: >-
          {% if states('switch.cedar_trees') == 'on' %}
            Cedar Trees
          {% elif states('switch.front_guest_room') == 'on' %}
            Front Guest Room
          {% elif states('switch.front_main') == 'on' %}
            Front Main
          {% elif states('switch.front_side') == 'on' %}
            Front Side
          {% else %}
            None
          {% endif %}
        value_template: >-
          {% if states('switch.cedar_trees') == 'on' %}
            {{ states.timer.rainbird_60.attributes.remaining }}
          {% elif states('switch.front_guest_room') == 'on' %}
            {{ states.timer.rainbird_25.attributes.remaining }}
          {% elif states('switch.front_main') == 'on' %}
            {{ states.timer.rainbird_45.attributes.remaining }}
          {% elif states('switch.front_side') == 'on' %}
            {{ states.timer.rainbird_45.attributes.remaining }}
          {% else %}
            None
          {% endif %}
15

Nevermind I got it working, thanks again!