Unifi device card

I try to port a card from Synology router to use with Unifi but without any luck.
here is the original code from Kris Bennett:

card:
  show_header_toggle: false
  title: Devices
  type: entities
filter:
  include:
    - attributes:
        scanner: SynologySrmDeviceScanner
      entity_id: device_tracker.*
      options:
        entities:
          - attribute: mac
          - attribute: ip_addr
          - icon: 'mdi:ethernet'
          - icon: 'mdi:wifi-strength-1'
          - icon: 'mdi:wifi-strength-2'
          - icon: 'mdi:wifi-strength-4'
          - icon: 'mdi:gamepad-variant-outline'
          - icon: 'mdi:cellphone-android'
          - icon: 'mdi:television'
          - icon: 'mdi:dlna'
          - icon: 'mdi:desktop-tower'
          - icon: 'mdi:nas'
          - icon: 'mdi:laptop-chromebook'
          - icon: 'mdi:tablet-android'
          - icon: 'mdi:cctv'
          - icon: 'mdi:printer'
          - icon: 'mdi:router-wireless'
        icon: 'mdi:devices'
        secondary_info:
          attribute: band
        show_state: false
        style: >
          {% set lMAC = 1 %} {% set lIP = 2 %} {% set iEthernet = 3 %} {% set
          iWiFiBad = 4 %} {% set iWiFiOK = 5 %} {% set iWiFiGood = 6 %} {% set
          iGame = 7 %} {% set iPhone = 8 %} {% set iTV = 9 %} {% set iDLNA = 10
          %} {% set iDesktop = 11 %} {% set iNAS = 12 %} {% set iLaptop = 13 %}
          {% set iTablet = 14 %} {% set iCamera = 15 %} {% set iPrinter = 16 %}
          {% set iRouter = 17 %}
          div.entity:nth-child({{lMAC}}),div.entity:nth-child({{lIP}}) {
            margin-right:0;
          } div.entity:nth-child({% if state_attr(config.entity, 'ip_addr') ==
          '' %}{{lIP}}{% else %}{{lMAC}}{% endif %}) {
            display: none !important;
            visibility: hidden !important;
            position: absolute !important;
          } .secondary {
            padding-left:16px;
          } {% if state_attr(config.entity, 'is_wireless') == false %}
          .secondary {
            visibility: hidden;
          } .secondary:before {
            content: 'Ethernet';
            visibility: visible;
          } {% else %} .secondary:after {
            content: ' (Level {% if state_attr(config.entity, 'mesh_node_id') == 0 %}1{% elif state_attr(config.entity, 'mesh_node_id') == 4 %}3{% elif state_attr(config.entity, 'mesh_node_id') == 3 %}4{% else %}?{% endif %})';
          } {% endif %}


          div.entity:nth-child({{iEthernet}}),div.entity:nth-child({{iWiFiBad}}),div.entity:nth-child({{iWiFiOK}}),div.entity:nth-child({{iWiFiGood}})
          {
            --mdc-icon-size: 16px;
            position: absolute;
            top: 8px;
            left: 50px;
            visibility: hidden;
          } div.entity:nth-child({% if state_attr(config.entity, 'is_wireless')
          == false %}{{iEthernet}}{% elif state_attr(config.entity,
          'rate_quality') == 'low' %}{{iWiFiBad}}{% elif
          state_attr(config.entity, 'rate_quality') == 'middle' %}{{iWiFiOK}}{%
          elif state_attr(config.entity, 'rate_quality') == 'high'
          %}{{iWiFiGood}}{% endif %}) {
              visibility: visible;
          } :host>state-badge {
            {% if state_attr(config.entity, 'dev_type') != 'others' and state_attr(config.entity, 'dev_type') != 'default' %}
              visibility: hidden;
            {% endif %}
          } div.entity:nth-child(n+{{iGame}}{# << This is the first icon for the
          device type #}) {
            position: absolute;
            top: 0px;
            left: 8px;
            visibility: hidden;
          } div.entity:nth-child({% if state_attr(config.entity, 'dev_type') ==
          'gamebox' %}{{iGame}}{% elif state_attr(config.entity, 'dev_type') ==
          'phone' %}{{iPhone}}{% elif state_attr(config.entity, 'dev_type') ==
          'tv' %}{{iTV}}{% elif state_attr(config.entity, 'dev_type') == 'dlna'
          %}{{iDLNA}}{% elif state_attr(config.entity, 'dev_type') == 'computer'
          %}{{iDesktop}}{% elif state_attr(config.entity, 'dev_type') == 'nas'
          %}{{iNAS}}{% elif state_attr(config.entity, 'dev_type') == 'notebook'
          %}{{iLaptop}}{% elif state_attr(config.entity, 'dev_type') == 'tablet'
          %}{{iTablet}}{% elif state_attr(config.entity, 'dev_type') == 'ipcam'
          %}{{iCamera}}{% elif state_attr(config.entity, 'dev_type') ==
          'printer' %}{{iPrinter}}{% elif state_attr(config.entity, 'dev_type')
          == 'router' %}{{iRouter}}{% endif %}) {
              visibility: visible;
          }
        type: 'custom:multiple-entity-row'
      state: home
sort:
  ignore_case: true
  method: name
type: 'custom:auto-entities'

and here is what I tried but with no luck:

card:
  show_header_toggle: false
  title: Devices
  type: entities
filter:
  include:
    - attributes:
        source_type: router
      entity_id: device_tracker.*
      options:
        entities:
          - attribute: mac
          - attribute: ip
          - icon: 'mdi:ethernet'
          - icon: 'mdi:numeric-2-box-outline'
          - icon: 'mdi:numeric-5-box-outline'
          - icon: 'mdi:gamepad-variant-outline'
          - icon: 'mdi:cellphone-android'
          - icon: 'mdi:television'
          - icon: 'mdi:dlna'
          - icon: 'mdi:desktop-tower'
          - icon: 'mdi:nas'
          - icon: 'mdi:laptop-chromebook'
          - icon: 'mdi:tablet-android'
          - icon: 'mdi:cctv'
          - icon: 'mdi:printer'
          - icon: 'mdi:router-wireless'
        icon: 'mdi:devices'
        secondary_info:
          attribute: radio
        show_state: false
        style: >
          {% set lMAC = 1 %} {% set lIP = 2 %} {% set iEthernet = 3 %} {% set
          iWiFi2GHZ = 4 %} {% set iWiFi5GHZ = 5 %} {% set
          iGame = 6 %} {% set iPhone = 7 %} {% set iTV = 8 %} {% set iDLNA = 9
          %} {% set iDesktop = 10 %} {% set iNAS = 11 %} {% set iLaptop = 12 %}
          {% set iTablet = 13 %} {% set iCamera = 14 %} {% set iPrinter = 15 %}
          {% set iRouter = 16 %}
          
          div.entity:nth-child({{lMAC}}),div.entity:nth-child({{lIP}}) {
            margin-right:0;
          } 
          
          div.entity:nth-child({% if state_attr(config.entity, 'ip') ==
          '' %}{{lIP}}{% else %}{{lMAC}}{% endif %}) {
            display: none !important;
            visibility: hidden !important;
            position: absolute !important;
          } 
          
          .secondary {
           padding-left:16px;
          } 
          
          
          {% if state_attr(config.entity, 'is_wired') == true %}
          .secondary {
            visibility: hidden;
          } 
          
          .secondary:before {
            content: 'Ethernet';
            visibility: vissible;
          } 
          {% endif %}


          div.entity:nth-child({{iEthernet}}),div.entity:nth-child({{iWiFi2GHZ}}),div.entity:nth-child({{iWiFi5GHZ}})
          {
            --mdc-icon-size: 16px;
            position: absolute;
            top: 8px;
            left: 50px;
            visibility: hidden;
          } 
          
          div.entity:nth-child({% if state_attr(config.entity, 'is_wired')
          == true %}{{iEthernet}}{% elif state_attr(config.entity,
          'radio') == 'ng' %}{{iWiFi2GHZ}}{% elif
          state_attr(config.entity, 'radio') == 'na' %}{{iWiFi5GHZ}}{% endif %}) {
              visibility: visible;
          } :host>state-badge {
            {% if state_attr(config.entity, 'dev_type') != 'others' and state_attr(config.entity, 'dev_type') != 'default' %}
              visibility: hidden;
            {% endif %}
          } div.entity:nth-child(n+{{iGame}}{# << This is the first icon for the
          device type #}) {
            position: absolute;
            top: 0px;
            left: 8px;
            visibility: hidden;
          } div.entity:nth-child({% if state_attr(config.entity, 'dev_type') ==
          'gamebox' %}{{iGame}}{% elif state_attr(config.entity, 'dev_type') ==
          'phone' %}{{iPhone}}{% elif state_attr(config.entity, 'dev_type') ==
          'tv' %}{{iTV}}{% elif state_attr(config.entity, 'dev_type') == 'dlna'
          %}{{iDLNA}}{% elif state_attr(config.entity, 'dev_type') == 'computer'
          %}{{iDesktop}}{% elif state_attr(config.entity, 'dev_type') == 'nas'
          %}{{iNAS}}{% elif state_attr(config.entity, 'dev_type') == 'notebook'
          %}{{iLaptop}}{% elif state_attr(config.entity, 'dev_type') == 'tablet'
          %}{{iTablet}}{% elif state_attr(config.entity, 'dev_type') == 'ipcam'
          %}{{iCamera}}{% elif state_attr(config.entity, 'dev_type') ==
          'printer' %}{{iPrinter}}{% elif state_attr(config.entity, 'dev_type')
          == 'router' %}{{iRouter}}{% endif %}) {
              visibility: visible;
          }
        type: 'custom:multiple-entity-row'
      state: home
sort:
  ignore_case: true
  method: name
type: 'custom:auto-entities'


@Alwin_Hummels did you manage to create any new card for Unifi? If yes, care to share?

1 Like

Not atm but I’ll try to pick it up asap for a second chance.