View on GitHub

homeassistant

Home Assistant Config for Home Kit Infused and Dwains Theme.

# Home Assistant Montitoring for Dwains-Theme
## Version 0.5 by noodlemctwoodle
### Please view the set up guide for this view on GitHub

- type: custom:dwains-flexbox-card
  padding: true
  items_classes: 'col-lg-6 col-md-6 col-sm-12 col-xs-12'
  cards:
    - type: horizontal-stack
      cards:

        - type: "custom:button-card"
          style: |
            ha-card {
              border-radius: 10px;
              box-shadow: 10px;
              background-position: center;
          entity: sensor.glances_homeassistant_containers_active
          name: Containers
          show_state: true
          show_name: true
          show_label: true
          show_icon: true
          styles:
            card:
              - background-size: contain
              - background-repeat: no-repeat
              - background-position: center
            icon:
              - width: 27%
              - margin-top: 1%


        - type: "custom:button-card"
          style: |
            ha-card {
              border-radius: 10px;
              box-shadow: 10px;
          entity: sensor.current_version
          show_state: true
          show_name: true
          show_label: true
          show_icon: true
          styles:
            card:
              - background-size: contain
              - background-repeat: no-repeat
              - background-position: center
            icon:
              - width: 27%
              - margin-top: 1%

    - type: vertical-stack
      cards:
        - type: horizontal-stack
          cards:

# ADB
            - type: "custom:button-card"
              style: |
                ha-card {
                  background: url('/local/images/lovelace-themes/dwains-theme/icons/adb.png');
                  border-radius: 10px;
                  box-shadow: 10px;
              entity: switch.adb_addon
              show_state: false
              show_name: false
              show_label: false
              show_icon: false
              styles:
                card:
                  - background-size: contain
                  - background-repeat: no-repeat
                  - background-position: center
              state:
                - value: 'off'
                  styles:
                    card:
                      - filter: grayscale(100%)
              custom_fields:
                switch: >
                  [[[
                    return `<ha-icon
                      style="width: 36px; height: 68px;">
                      </ha-icon>`
                  ]]]
              double_tap_action:
                action: call-service
                service: switch.toggle
                service_data:
                  entity_id: switch.adb_addon


# ESPHome
            - type: "custom:button-card"
              style: |
                ha-card {
                  background: url('/local/images/lovelace-themes/dwains-theme/icons/esphome.png');
                  border-radius: 10px;
                  box-shadow: 10px;
              entity: switch.esphome_addon
              show_state: false
              show_name: false
              show_label: false
              show_icon: false
              styles:
                card:
                  - background-size: contain
                  - background-repeat: no-repeat
                  - background-position: center
              state:
                - value: 'off'
                  styles:
                    card:
                      - filter: grayscale(100%)
              custom_fields:
                switch: >
                  [[[
                    return `<ha-icon
                      style="width: 36px; height: 68px;">
                      </ha-icon>`
                  ]]]
              double_tap_action:
                action: call-service
                service: switch.toggle
                service_data:
                  entity_id: switch.esphome_addon

# Glances
            - type: "custom:button-card"
              style: |
                ha-card {
                  background: url('/local/images/lovelace-themes/dwains-theme/icons/glances.png');
                  border-radius: 10px;
                  box-shadow: 10px;
              entity: switch.glances_addon
              show_state: false
              show_name: false
              show_label: false
              show_icon: false
              styles:
                card:
                  - background-size: contain
                  - background-repeat: no-repeat
                  - background-position: center
              state:
                - value: 'off'
                  styles:
                    card:
                      - filter: grayscale(100%)
              custom_fields:
                switch: >
                  [[[
                    return `<ha-icon
                      style="width: 36px; height: 68px;">
                      </ha-icon>`
                  ]]]
              double_tap_action:
                action: call-service
                service: switch.toggle
                service_data:
                  entity_id: switch.glances_addon

# Deconz
            - type: "custom:button-card"
              style: |
                ha-card {
                  background: url('/local/images/lovelace-themes/dwains-theme/icons/deconz.png');
                  border-radius: 10px;
                  box-shadow: 10px;
              entity: switch.deconz_addon
              show_state: false
              show_name: false
              show_label: false
              show_icon: false
              styles:
                card:
                  - background-size: contain
                  - background-repeat: no-repeat
                  - background-position: center
              state:
                - value: 'off'
                  styles:
                    card:
                      - filter: grayscale(100%)
              custom_fields:
                switch: >
                  [[[
                    return `<ha-icon
                      style="width: 36px; height: 68px;">
                      </ha-icon>`
                  ]]]
              double_tap_action:
                action: call-service
                service: switch.toggle
                service_data:
                  entity_id: switch.deconz_addon

        - type: vertical-stack
          cards:
            - type: horizontal-stack
              cards:

# Maria Db
                - type: "custom:button-card"
                  style: |
                    ha-card {
                      background: url('/local/images/lovelace-themes/dwains-theme/icons/mariadb.png');
                      border-radius: 10px;
                      box-shadow: 10px;
                  entity: switch.mariadb_addon
                  show_state: false
                  show_name: false
                  show_label: false
                  show_icon: false
                  styles:
                    card:
                      - background-size: contain
                      - background-repeat: no-repeat
                      - background-position: center
                    state:
                      - justify-self: right
                  state:
                    - value: 'off'
                      styles:
                        card:
                          - filter: grayscale(100%)
                  custom_fields:
                    switch: >
                      [[[
                        return `<ha-icon
                          style="width: 36px; height: 68px;">
                          </ha-icon>`
                      ]]]
                  double_tap_action:
                    action: call-service
                    service: switch.toggle
                    service_data:
                      entity_id: switch.mariadb_addon

# MQTT
                - type: "custom:button-card"
                  style: |
                    ha-card {
                      background: url('/local/images/lovelace-themes/dwains-theme/icons/mqtt.png');
                      border-radius: 10px;
                      box-shadow: 10px;
                  entity: switch.mosquitto_addon
                  show_state: false
                  show_name: false
                  show_label: false
                  show_icon: false
                  styles:
                    card:
                      - background-size: contain
                      - background-repeat: no-repeat
                      - background-position: center
                    state:
                      - justify-self: left
                  state:
                    - value: 'off'
                      styles:
                        card:
                          - filter: grayscale(100%)
                  custom_fields:
                    switch: >
                      [[[
                        return `<ha-icon
                          style="width: 36px; height: 68px;">
                          </ha-icon>`
                      ]]]
                  double_tap_action:
                    action: call-service
                    service: switch.toggle
                    service_data:
                      entity_id: switch.mosquitto_addon

# PHPMyAdmin
                - type: "custom:button-card"
                  style: |
                    ha-card {
                      background: url('/local/images/lovelace-themes/dwains-theme/icons/phpmyadmin.png');
                      border-radius: 10px;
                      box-shadow: 10px;
                  entity: switch.phpmyadmin_addon
                  show_state: false
                  show_name: false
                  show_label: false
                  show_icon: false
                  styles:
                    card:
                      - background-size: contain
                      - background-repeat: no-repeat
                      - background-position: center
                    state:
                      - justify-self: left
                  state:
                    - value: 'off'
                      styles:
                        card:
                          - filter: grayscale(100%)
                  custom_fields:
                    switch: >
                      [[[
                        return `<ha-icon
                          style="width: 36px; height: 68px;">
                          </ha-icon>`
                      ]]]
                  double_tap_action:
                    action: call-service
                    service: switch.toggle
                    service_data:
                      entity_id: switch.phpmyadmin_addon

# VSCode
                - type: "custom:button-card"
                  style: |
                    ha-card {
                      background: url('/local/images/lovelace-themes/dwains-theme/icons/vscode.png');
                      border-radius: 10px;
                      box-shadow: 10px;
                  entity: switch.vscode_addon
                  show_state: false
                  show_name: false
                  show_label: false
                  show_icon: false
                  styles:
                    card:
                      - background-size: contain
                      - background-repeat: no-repeat
                      - background-position: center
                    state:
                      - justify-self: left
                  state:
                    - value: 'off'
                      styles:
                        card:
                          - filter: grayscale(100%)
                  custom_fields:
                    switch: >
                      [[[
                        return `<ha-icon
                          style="width: 36px; height: 68px;">
                          </ha-icon>`
                      ]]]
                  double_tap_action:
                    action: call-service
                    service: switch.toggle
                    service_data:
                      entity_id: switch.vscode_addon


- type: vertical-stack
  cards:
    - type: custom:dwains-flexbox-card
      padding: true
      items_classes: 'col-lg-6 col-md-6 col-sm-12 col-xs-12'
      cards:
        - type: horizontal-stack
          cards:

          # Reload Lovelace
            - type: custom:button-card
              style: |
                ha-card {
                  background: var(--paper-card-background-color);
                  border-radius: 10px;
                  box-shadow: 10px;
                  font-weight: bold;
                  opacity: 0.8;
                }
              name: Reload
              icon: mdi:heart
              tap_action:
                action: call-service
                service: browser_mod.lovelace_reload

        # Take Home Assistant Snapshot
            - type: custom:button-card
              style: |
                ha-card {
                  background: var(--paper-card-background-color);
                  border-radius: 10px;
                  box-shadow: 10px;
                  font-weight: bold;
                  opacity: 0.8;
                }
              name: Snapshot
              icon: mdi:backup-restore
              tap_action:
                action: call-service
                service: hassio.snapshot_full

        # Restart Home Assistant
            - type: custom:button-card
              style: |
                ha-card {
                  background: var(--paper-card-background-color);
                  border-radius: 10px;
                  box-shadow: 10px;
                  font-weight: bold;
                  opacity: 0.8;
                }
              name: Restart
              icon: mdi:home-assistant
              tap_action:
                action: call-service
                service: homeassistant.restart
              confirmation: 
                text: 'Are you sure you want to restart Home Assistant?'

        # Reboot Home Assistant Host
            - type: custom:button-card
              style: |
                ha-card {
                  background: var(--paper-card-background-color);
                  border-radius: 10px;
                  box-shadow: 10px;
                  font-weight: bold;
                  opacity: 0.8;
                }
              name: Reboot
              icon: mdi:server-network
              tap_action:
                action: call-service
                service: hassio.host_reboot
              confirmation: 
                text: 'Are you sure you want to restart the host?'


        - type: horizontal-stack
          cards:

          # NVMe System Disk Free
            - type: custom:bar-card
              style: |
                :host {
                  --ha-card-background: var(--paper-card-background-color);
                  --ha-card-border-radius: 10px;
                  --ha-card-font-weight: bold;
                  --ha-card-opacity: 0.8;
                }
                ha-card {
                  font-size: 10px;
                  box-shadow: 10px;
                }
                bar-card-value {
                  font-size: 8px;
                }
              entities: 
                - entity: sensor.glances_homeassistant_etc_hostname_free
                  name: NVME System (Free)
              show_icon: true
              height: 57px
              stack: horizontal
              positions:
                name: inside
                value: inside
                icon: inside
              severity:
                - color: '#fa0505'
                  from: 0
                  to: 20
                - color: '#de4314'
                  from: 20
                  to: 100
                - color: '#d1861d'
                  from: 100
                  to: 150
                - color: '#d4c11c'
                  from: 150
                  to: 200
                - color: '#64c91c'
                  from: 200
                  to: 233
              direction: right
              tap_action: none
        # Disk Size (250GB)
              max: 233
              min: 0

        # SSD Data Disk Free
            - type: custom:bar-card
              style: |
                :host {
                  --ha-card-background: var(--paper-card-background-color);
                  --ha-card-border-radius: 10px;
                  --ha-card-font-weight: bold;
                  --ha-card-opacity: 0.8;
                }
                ha-card {
                  font-size: 10px;
                  box-shadow: 10px;
                }
                bar-card-value {
                  font-size: 8px;
                }
              entities: 
                - entity: sensor.glances_homeassistant_data_free
                  name: SSD Data (Free)
              show_icon: true
              height: 57px
              stack: horizontal
              positions:
                name: inside
                value: inside
                icon: inside
              severity:
                - color: '#fa0505'
                  from: 0
                  to: 20
                - color: '#de4314'
                  from: 20
                  to: 100
                - color: '#d1861d'
                  from: 100
                  to: 200
                - color: '#d4c11c'
                  from: 200
                  to: 400
                - color: '#64c91c'
                  from: 400
                  to: 687
              direction: right
              tap_action: none
        # Disk Size (750GB)
              max: 687
              min: 0

# System Temperatures Card
- type: vertical-stack
  cards:
    - type: custom:dwains-flexbox-card
      padding: true
      items_classes: 'col-lg-6 col-md-6 col-sm-12 col-xs-12'
      cards:
        - type: horizontal-stack
          cards:
        # CPU Temps
            - type: custom:mini-graph-card
              style: |
                ha-card {
                  background: var(--paper-card-background-color);
                  border-radius: 10px;
                  box-shadow: 10px;
                  font-weight: bold;
                  opacity: 0.8;
                }
              entities:
                - entity: sensor.glances_homeassistant_core_0_temp
                  name: CPU0
                - entity: sensor.glances_homeassistant_core_1_temp
                  name: CPU1
              name: Intel Core i3-7100U
              color_thresholds:
                - value: 40
                  color: "#4fcc29"
                - value: 50
                  color: "#f39c12"
                - value: 70
                  color: "#d35400"
                - value: 70
                  color: "#c0392b"
              hours_to_show: 1
              points_per_hour: 60
              update_interval: 10
              height: 122
              aggregate_func: max
              line_width: 2
              smoothing: false
              font_size: 65
              font_size_header: 9
              show:
                average: true
                extrema: true
              tap_action: none

        # Motherboard Temps
            - type: custom:mini-graph-card
              style: |
                ha-card {
                  background: var(--paper-card-background-color);
                  border-radius: 10px;
                  box-shadow: 10px;
                  font-weight: bold;
                  opacity: 0.8;
                }
              entities:
                - entity: sensor.glances_homeassistant_pch_skylake_1_temp
                  name: Motherboard
              name: Intel NUC NUC7i3BNH
              hours_to_show: 1
              points_per_hour: 60
              update_interval: 10
              height: 122
              aggregate_func: max
              line_width: 2
              smoothing: false
              font_size: 65
              font_size_header: 9
              show:
                labels: true
                average: true
                extrema: true
              color_thresholds:
                - value: 40
                  color: "#4fcc29"
                - value: 50
                  color: "#f39c12"
                - value: 70
                  color: "#d35400"
                - value: 70
                  color: "#c0392b"
              tap_action: none


# Resources 

        - type: horizontal-stack
          cards:
            - type: custom:swipe-card
              style: |
                :host {
                  --ha-card-box-shadow: 10px;
                }
              parameters:
                spaceBetween: 8
                touchEventsTarget: 'container'
                pagination:
                  type: 'bullets'
                  dynamicBullets: true

              cards:

                - type: vertical-stack
                  cards:
                    - type: horizontal-stack
                      cards: 

        # Host Machine CPU Used
                        - type: custom:mini-graph-card
                          style: |
                            ha-card {
                              background: var(--paper-card-background-color);
                              border-radius: 10px;
                              box-shadow: 10px;
                              font-weight: bold;
                              opacity: 0.8;
                            }
                          entities:
                            - entity: sensor.glances_homeassistant_cpu_used
                              name: System
                              color: '#14ff8d' # Light Green
                            - entity: sensor.glances_homeassistant_containers_cpu_used
                              name: Containers
                              color: '#0293fa' # Sky Blue
                          name: CPU Usage
                          icon: mdi:cpu-64-bit
                          hours_to_show: 7
                          points_per_hour: 60
                          update_interval: 10
                          height: 122
                          aggregate_func: max
                          line_width: 2
                          smoothing: false
                          font_size: 65
                          font_size_header: 9
                          show:
                            average: true
                            extrema: true
                          tap_action: none

        # Host Machine RAM Used
                        - type: custom:mini-graph-card
                          style: |
                            ha-card {
                              background: var(--paper-card-background-color);
                              border-radius: 10px;    
                              box-shadow: 10px;
                              font-weight: bold;
                              opacity: 0.8;
                            }
                          entities:
                            - entity: sensor.glances_homeassistant_ram_used
                              name: System
                              color: '#14ff8d' # Light Green
                            - entity: sensor.glances_homeassistant_containers_ram_used
                              name: Containers
                              color: '#0293fa' # Sky Blue
                          name: RAM Usage
                          hours_to_show: 7
                          points_per_hour: 60
                          update_interval: 10
                          height: 122
                          aggregate_func: max
                          line_width: 2
                          smoothing: false
                          font_size: 65
                          font_size_header: 9
                          show:
                            average: true
                            extrema: true
                          tap_action: none


                - type: vertical-stack
                  cards:
                    - type: horizontal-stack
                      cards: 

        # Home Assistant Database Size
                      - type: custom:mini-graph-card
                        style: |
                          ha-card {
                            background: var(--paper-card-background-color);
                            border-radius: 10px;
                            box-shadow: 10px;
                            font-weight: bold;
                            opacity: 0.8;
                          }
                        entities:
                          - entity: sensor.home_assistant_db_size
                            colour: '#17fa02' # Bright Green
                        name: Database Size
                        hours_to_show: 24
                        update_interval: 10
                        aggregate_func: max
                        height: 80
                        line_width: 2
                        smoothing: true
                        font_size: 65
                        font_size_header: 9
                        show:
                          average: true
                          extrema: true
                        tap_action: none


- type: vertical-stack
  cards:
    - type: custom:dwains-flexbox-card
      padding: true
      items_classes: 'col-lg-6 col-md-6 col-sm-12 col-xs-12'
      cards:
        - type: horizontal-stack
          cards:
# Internet Usage and Statistics 
            - type: custom:swipe-card
              parameters:
                spaceBetween: 8
                touchEventsTarget: 'container'
                pagination:
                  type: 'bullets'
                  dynamicBullets: true

              cards:

                - type: vertical-stack
                  cards:
                    - type: horizontal-stack
                      cards: 

        # Cloudflare Ping Times
                      - type: custom:mini-graph-card
                        style: |
                          ha-card {
                            background: var(--paper-card-background-color);
                            border-radius: 10px;
                            box-shadow: 10px;
                            font-weight: bold;
                          }
                        entities:
                          - entity: sensor.cloudflare_dns_ping
                            name: Cloudflare Ping
                        icon: mdi:speedometer-slow
                        hours_to_show: 24
                        points_per_hour: 60
                        update_interval: 10
                        height: 125
                        aggregate_func: max
                        line_width: 2
                        smoothing: false
                        font_size: 65
                        font_size_header: 9
                        tap_action: none
                        show:
                          average: true
                          extrema: true
                        color_thresholds:
                          - value: 12
                            color: "#29cf45"
                          - value: 16
                            color: "#e7ff14"
                          - value: 20
                            color: "#ff1414"

        # Google Ping Times
                      - type: custom:mini-graph-card
                        style: |
                          ha-card {
                            background: var(--paper-card-background-color);
                            border-radius: 10px;
                            box-shadow: 10px;
                            font-weight: bold;
                            opacity: 0.8;
                          }
                        entities:
                          - entity: sensor.google_dns_ping
                            name: Google Ping
                        icon: mdi:speedometer-slow
                        hours_to_show: 24
                        points_per_hour: 60
                        update_interval: 10
                        height: 125
                        aggregate_func: max
                        line_width: 2
                        smoothing: false
                        font_size: 65
                        font_size_header: 9
                        tap_action: none
                        show:
                          average: true
                          extrema: true
                        color_thresholds:
                          - value: 12
                            color: "#29cf45"
                          - value: 16
                            color: "#e7ff14"
                          - value: 20
                            color: "#ff1414"

                - type: vertical-stack
                  cards:
                    - type: horizontal-stack
                      cards: 

        # Speedtest.net Download
                        - type: custom:mini-graph-card
                          style: |
                            ha-card {
                              background: var(--paper-card-background-color);
                              border-radius: 10px;
                              box-shadow: 10px;
                              font-weight: bold;
                              opacity: 0.8;
                            }
                          entities:
                            - entity: sensor.speedtest_download
                          name: Download
                          hours_to_show: 24
                          points_per_hour: 60
                          update_interval: 10
                          height: 125
                          aggregate_func: max
                          line_width: 2
                          smoothing: false
                          font_size: 65
                          font_size_header: 9
                          tap_action: none
                          show:
                            average: true
                            extrema: true
                          color_thresholds:
                            - value: 300
                              color: "#29cf45"
                            - value: 200
                              color: "#e7ff14"
                            - value: 180
                              color: "#ff1414"

        # Speedtest.net Upload
                        - type: custom:mini-graph-card
                          style: |
                            ha-card {
                              background: var(--paper-card-background-color);
                              border-radius: 10px;
                              box-shadow: 10px;
                              font-weight: bold;
                              opacity: 0.8;
                            }
                          entities:
                            - entity: sensor.speedtest_upload
                          name: Upload
                          hours_to_show: 24
                          points_per_hour: 60
                          update_interval: 10
                          height: 125
                          aggregate_func: max
                          line_width: 2
                          smoothing: false
                          font_size: 65
                          font_size_header: 9
                          tap_action: none
                          show:
                            average: true
                            extrema: true
                          color_thresholds:
                            - value: 30
                              color: "#29cf45"
                            - value: 20
                              color: "#e7ff14"
                            - value: 10
                              color: "#ff1414"

        - type: vertical-stack
          cards:

            - type: horizontal-stack
              cards:
    # Internet Usage and Statistics 
                - type: custom:swipe-card
                  parameters:
                    spaceBetween: 8
                    touchEventsTarget: 'container'
                    pagination:
                      type: 'bullets'
                      dynamicBullets: true

                  cards:

                    - type: vertical-stack
                      cards:
                        - type: horizontal-stack
                          cards: 

                            - type: entities
                              items_classes: 'col-sm-12 col-xs-12'
                              style: |
                                ha-card {
                                  background: var(--paper-card-background-color);
                                  border-radius: 10px;
                                  box-shadow: 10px;
                                  font-weight: bold;
                                  opacity: 0.8;
                                }
                              show_header_toggle: false
                              entities:
                                - type: call-service
                                  name: Cast Camera
                                  icon: mdi:google-assistant
                                  service: cast.show_lovelace_view
                                  action_name: Cast to Display
                                  service_data:
                                    entity_id: media_player.living_room_display
                                    dashboard_path: 'lovelace'
                                    view_path: 'default_view'
                                - entity: sensor.count_device_trackers
                                  name: Unifi Connected Devices
                                  icon: mdi:wifi
                                  hide_if_unavailable: true
#                                - type: divider
                                - entity: automation.check_config_for_update
                                - type: weblink
                                  name: Donations
                                  url: https://www.buymeacoffee.com/noodlemctwoodle
                                  icon: mdi:coffee-outline

                    - type: vertical-stack
                      cards:
                        - type: horizontal-stack
                          cards: 

                            - type: entities
                              items_classes: 'col-sm-12 col-xs-12'
                              style: |
                                ha-card {
                                  background: var(--paper-card-background-color);
                                  border-radius: 10px;
                                  box-shadow: 10px;
                                  font-weight: bold;
                                  opacity: 0.8;
                                }
                              show_header_toggle: false
                              entities:
                              - sensor.updater_core
                              - sensor.updater_cli
                              - sensor.updater_audio
                              - sensor.updater_dns


                    - type: vertical-stack
                      cards:
                        - type: horizontal-stack
                          cards: 

                            - type: entities
                              items_classes: 'col-sm-12 col-xs-12'
                              style: |
                                ha-card {
                                  background: var(--paper-card-background-color);
                                  border-radius: 10px;
                                  box-shadow: 10px;
                                  font-weight: bold;
                                  opacity: 0.8;
                                }
                              show_header_toggle: false
                              entities:
                              - sensor.supervisor_updates
                              - binary_sensor.updater_addons
                              - binary_sensor.updater_hacs
                              - binary_sensor.updater_supervisor