Posts DIY Irrigation Controller: Lovelace User Interface
Post
Cancel

DIY Irrigation Controller: Lovelace User Interface

Disclosure: This article may contain affiliate links. If you decide to make a purchase, I'll make a small commission at no extra cost to you.

Irrigation Controller Part 2

While my the Irrigation Controller can be manually started and stopped with physical buttons, the primary user interface was always intended to be built in Lovelace.

Reliability

Before I describe how I created the interface I have great news! In the 2 months since I put the controller into service it has been rock solid! At the moment the Uptime is up to 248 hours since the last time it restarted. The only times it has been restarted has been once to upload a tweak to my ESPHome code, and the second one was for a neighborhood-wide power outage!!! :)

Building A User Interface

Each Zone consists of the following:

  1. Manual on/off switch.
  2. Status Display showing: Is It Running, Next Scheduled Time, and Time Remaining.
  3. Scheduler: field to enter a comma separated list of times, and a slider to select the runtime in minutes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
type: vertical-stack
cards:
  - type: markdown
    style: |
      ha-card {
        background: none;
        box-shadow: none;
        letter-spacing: 0.06em;
        margin: 0 0 -1em 0;
        padding: 0;
      }
    content: |-
      **🌱 Drip System**

- type: entities
  show_header_toggle: false
  entities:
    - type: custom:paper-buttons-row
      buttons:
        - entity: switch.irrigation_zone1
          name: Start Cycle
          state_icons:
            "off": mdi:play
            "on": mdi:stop
          style:
            button:
            background: lightgray
            border-radius: 9999px
            font-weight: bold
          state_styles:
            "off":
              button:
                color: red
              ripple:
                color: red
            "on":
              button:
                color: green
              ripple:
                color: green

    - type: custom:text-divider-row
      text: Status

    - type: custom:multiple-entity-row
      entity: binary_sensor.irrigation_zone1
      name: 💧 Watering
      icon: "[[icon]]"
      show_state: false
      secondary_info:
        entity: binary_sensor.irrigation_zone1
        name: ""
      entities:
        - entity: sensor.irrigation_zone1_next
          name: ⏭️ Next
        - entity: sensor.irrigation_zone1_remaining
          name: ⏳ Remaining
          unit: min

        - type: custom:fold-entity-row
          head:
            type: custom:text-divider-row
            text: Scheduler
          entities:
            - type: custom:text-input-row
              entity: input_text.irrigation_zone1_times
            - entity: sensor.irrigation_zone1_duration
              name: Duration in Minutes
              icon: mdi:timer-sand
            - type: custom:slider-entity-row
              entity: input_number.irrigation_zone1_duration
              full_row: true
              hide_state: true

Controller Status

At the bottom I include “glance” sensors displaying the status of the controller.

1
2
3
4
5
6
7
8
  - type: glance
    entities:
      - entity: binary_sensor.irrigation_controller_status
        name: Status
      - entity: sensor.irrigation_controller_uptime
        name: Uptime
      - entity: sensor.irrigation_controller_wifi_signal
        name: WiFi Signal

Let me know if you have any questions.