Skip to content

Custom-card "Device Tracker (Online or Offline ?)"

This card indicated whether a given device is online or offline using the Home Assistant device_tracker or the WoL-integration.

Preview
Turn on you device with WoL:
WoL Preview

Credits

Author: vncnt.dev - 2021 Version: 1.0.0

Changelog

1.1.1 Fix for UI Minimalist v1.0.1.
1.1.0 Support WoL
1.0.0 Initial release

Usage

- type: "custom:button-card"
  template: "custom_card_vncntdev_device_tracker"
  entity: switch.pc
  variables:
    custom_card_vncntdev_device_tracker_icon: mdi:desktop-mac
    custom_card_vncntdev_device_tracker_name: "PC"
    custom_card_vncntdev_device_tracker_status_as_name: true

- type: "custom:button-card"
  template: "custom_card_vncntdev_device_tracker"
  entity: device_tracker.raspberry4
  variables:
    custom_card_vncntdev_device_tracker_name: "Raspberry Pi 4"

Requirements

Setup the device tracker integration

if you want to use WoL: Setup WoL integration

Variables

Variable Example Required Explanation
entity device_tracker.pc true Icon of the Card
custom_card_vncntdev_device_tracker_name "PC" false Custom name of device
default: friendly name of device tracer
custom_card_vncntdev_device_tracker_status_as_name true true swap label and name?
default: false default: "mdi:server"
custom_card_vncntdev_device_tracker_icon mdi:desktop-mac false Icon of the Card
default: "mdi:server"
custom_card_vncntdev_device_tracker_color_online "var(--google-green)" false Color of icon if device is online
default: "var(--google-green)"
custom_card_vncntdev_device_tracker_color_offline "var(--google-red)" false Color of icon if offline
default: "var(--google-red)"

Template code

Template Code
vncntdev_card_device_tracer.yaml
---
custom_card_vncntdev_device_tracker:
  template: "card_generic"
  variables:
    custom_card_vncntdev_device_tracker_name:
    custom_card_vncntdev_device_tracker_status_as_name: false
    custom_card_vncntdev_device_tracker_icon: "mdi:server"
    custom_card_vncntdev_device_tracker_color_online: "var(--google-green)"
    custom_card_vncntdev_device_tracker_color_offline: "var(--google-red)"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_more_info"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              icon: "[[[return variables.custom_card_vncntdev_device_tracker_icon]]]"
              styles:
                icon:
                  - color: >
                      [[[
                          return (entity.state == "not_home" || entity.state == "off") ?
                          variables.custom_card_vncntdev_device_tracker_color_offline:
                          variables.custom_card_vncntdev_device_tracker_color_online;
                      ]]]
          item2:
            card:
              type: "custom:button-card"
              name: |
                [[[
                    if (!variables.custom_card_vncntdev_device_tracker_status_as_name) {
                      return variables.custom_card_vncntdev_device_tracker_name !== null?
                      variables.custom_card_vncntdev_device_tracker_name:
                      entity.attributes.friendly_name;
                    } else {
                      return (entity.state == "not_home" || entity.state == "off") ? "Offline" : "Online";
                    }
                ]]]
              label: |
                [[[
                    if (variables.custom_card_vncntdev_device_tracker_status_as_name) {
                      return variables.custom_card_vncntdev_device_tracker_name !== null?
                      variables.custom_card_vncntdev_device_tracker_name:
                      entity.attributes.friendly_name;
                    } else {
                      return (entity.state == "not_home" || entity.state == "off") ? "Offline" : "Online";
                    }
                ]]]

Note