Zigbee2mqtt: Lovelace custom card to show zigbee2mqtt network map

[azuwis]

zigbee2mqtt-networkmap

Lovelace Custom Card for Home Assistant to show the Zigbee2mqtt network map with vue-d3-network.

Demo

Home Assistant setup

Update Zigbee2mqtt to version 1.5.1 or later, earlier version may not work.

Download zigbee2mqtt-networkmap.js and put it into <config-directory>/www/ directory.

In configuration.yaml:

sensor:
  - platform: mqtt
    name: Zigbee2mqtt Networkmap
    # if you change base_topic of Zigbee2mqtt, change state_topic accordingly
    state_topic: zigbee2mqtt/bridge/networkmap/raw
    value_template: >-
      {{ now().strftime('%Y-%m-%d %H:%M:%S') }}
    # again, if you change base_topic of Zigbee2mqtt, change json_attributes_topic accordingly
    json_attributes_topic: zigbee2mqtt/bridge/networkmap/raw

Enable Lovelace YAML mode,
and in ui-lovelace.yaml:

resources:
  - url: /local/zigbee2mqtt-networkmap.js?v=0.6.0
    type: module

views:
  - title: Zigbee Network
    panel: true # this renders the first card on full width, other cards in this view will not be rendered
    cards:
      - type: custom:zigbee2mqtt-networkmap
        entity: sensor.zigbee2mqtt_networkmap
        # the following are optional:
        mqtt_base_topic: zigbee2mqtt # if you change base_topic of Zigbee2mqtt, change it accordingly
        force: 3000 # decrease it to get smaller map if you have many devices
        node_size: 16
        font_size: 12
        link_width: 2
        height: 400 # height of the card
        # use this css config or use whatever css tech to change look and feel,
        # the same variable can also be used in Home Assistant themes, see https://www.home-assistant.io/components/frontend/#defining-themes
        css: |
          :host {
            --zigbee2mqtt-networkmap-node-color: rgba(18, 120, 98, .7);
            --zigbee2mqtt-networkmap-node-fill-color: #dcfaf3;
            --zigbee2mqtt-networkmap-node-pinned-color: rgba(190, 56, 93, .6);
            --zigbee2mqtt-networkmap-link-color: rgba(18, 120, 98, .5);
            --zigbee2mqtt-networkmap-hover-color: #be385d;
            --zigbee2mqtt-networkmap-link-selected-color: rgba(202, 164, 85, .6);
            --zigbee2mqtt-networkmap-label-color: #127862;
            --zigbee2mqtt-networkmap-arrow-color: rgba(18, 120, 98, 0.7);
            --zigbee2mqtt-networkmap-node-coordinator-color: rgba(224, 78, 93, .7);
            --zigbee2mqtt-networkmap-node-router-color: rgba(0, 165, 255, .7);
          }

Upgrade

Replace <config-directory>/www/zigbee2mqtt-networkmap.js with new one, and
change version string in ui-lovelace.yaml:

resources:
  - url: /local/zigbee2mqtt-networkmap.js?v=0.6.0 # change `v=0.5.0` to `v=0.6.0`
    type: module

And then refresh the browser.

Changelog

[0.6.0] - 2019-12-02

• Fixed TypeError if device type is not available, thank @ChrisScheffler
• Support HACS

[0.5.0] - 2019-08-27

• Recalculate width/height on window resize
• Make the arrows sharper
• Use css variables to allow theming
• Allow config extra css styles

[0.4.0] - 2019-08-23

• Workaround empty map problem in Firefox.

[0.3.0] - 2019-08-22

• Filter all dead links.

[0.2.0] - 2019-08-22

• Filter links with address 0x0000000000000000.

[0.1.0] - 2019-08-15

• Initial release.

[nickrout]

Looks good, but I can’t get it to show anything…

[azuwis]

Which browser are you using? It does have problem with Firefox, was mainly tested on Google Chrome.

Does the demo work?

On Google Chrome, open Menu -> More tools -> Developer tools -> Console, and see if any error appears there.

Check state and attributes of sensor.zigbee2mqtt_networkmap on Home Assistant, go to Menu -> Developer tools -> STATES -> sensor.zigbee2mqtt_networkmap

[nickrout]

Yes your demo works, I’ll take a look at the other things you suggest tomorrow, bedtime now. And I am using chrome. And I have the sensor working.

[lassieee (Casper)]

Very nice! It didn’t seem to work for me at first. I didn’t give the card it’s own view, I integrated it in an existing view. The card remained empty. When I pressed refresh, it would say refreshing, but the card stayed empty. I was able to see the state and attributes of the sensor just fine.
When I gave your card it’s own view, the card seemed to be empty, but there was a green line in the upper part of the card. I was able to pull the partial circle (top left) down and it showed my networkmap
Really cool stuff. Thanks!!
I have about 45 zigbee devices, so the bottom screenshot has height:700 and force:500. Perhaps you can also implement the ability to configure the width?

edit: spell check

[sanyatuning (Balázs Sándor)]

I have the same issue

position bug with runtime error

[azuwis]

The width defaults to the width of card, you can use panel: yes to maximize it:

views:
  - title: Zigbee Network
    panel: yes
    cards:
      - type: custom:zigbee2mqtt-networkmap
        entity: sensor.zigbee2mqtt_networkmap

But the problem seems to be that the links are not generated correctly, can you please paste the whole attributes here or PM me, I’ll try to replicate and find the problem.

[azuwis]

Thank for the report, I’ll try to find the problem.

[nickrout]

I have a similar experience to @lassieee, but cannot get the map centered, it always seems to be off the left hand edge, and at most I can get a couple of entities in the view. What information would assist you?

[lassieee (Casper)]

I added panel: yes, and that does give me maximum width, but the map still starts in the upper left corner.

This is the best I can get it:

I added my state attributes to the git issue opened by @sanyatuning.

[azuwis]

The problem is these links with address 0x0000000000000000:

    {
      "sourceIeeeAddr": "0x0000000000000000",
      "targetIeeeAddr": "0x00124b00120231d0",
      "sourceNwkAddr": 65198,
      "lqi": 0,
      "depth": 255,
      "relationship": 3,
      "routes": []
    },
    {
      "sourceIeeeAddr": "0x0000000000000000",
      "targetIeeeAddr": "0x00124b00120231d0",
      "sourceNwkAddr": 61457,
      "lqi": 0,
      "depth": 255,
      "relationship": 3,
      "routes": []
    },

Screenshot with these links removed:

I’ll make a release which filter all these links later.

[prankousky]

Does this require additional lines in zigbee2mqtt configuration? I don’t see any map, but the demo map works fine. Mqtt topic has been adapted to my setup that works with autodiscovery. Still can’t see a map…

[azuwis]

If you change mqtt topic, you need to change following configs:

sensor:
  - platform: mqtt
    name: Zigbee2mqtt Networkmap
    state_topic: mqtt_topic/bridge/networkmap/raw
    value_template: >-
      {{ now().strftime('%Y-%m-%d %H:%M:%S') }}
    json_attributes_topic: mqtt_topic/bridge/networkmap/raw

And:

views:
  - title: Zigbee Network
    panel: yes
    cards:
      - type: custom:zigbee2mqtt-networkmap
        entity: sensor.zigbee2mqtt_networkmap
        mqtt_base_topic: mqtt_topic

Change mqtt_topic to your topic.

No need to change Zigbee2mqtt config.

[prankousky]

Thank you @azuwis

I did just that. My topic is home/zigbee2mqtt/ instead of zigbee2mqtt. This is what I changed both the sensor and view topic to as well. But there is nothing.

Just now I have tried subscribing to home/zigbee2mqtt/bridge/#, which will show multiple things (version, online status, …), but not anything that might have to do with the network map.

I also tried home/zigbee2mqtt/bridge/networkmap/#, which does not display anything. So unless there is something wrong with my zigbee2mqtt configuration, I don’t understand why I don’t see a map.

I have set logging to debug.

– UPDATE: now after double checking that I have set my settings as you described, there has been a change. Instead of constantly displaying “Refreshing…” , I eventually get a timestamp showing when the last update happened (currently this is 19:23 while the actual time is 19:28, so 5 minutes ago). But I still don’t see any map… but I assume there should be one…

[azuwis]

@nickrout @lassieee Please try v0.2.0, see the upgrade guide in REAME.md.

[azuwis]

Which Zigbee2mqtt version are you using?

Follow the guide of this post to check browser console message and sensor state:

Zigbee2mqtt: Lovelace custom card to show zigbee2mqtt network map

Which browser are you using? It does have problem with Firefox, was mainly tested on Google Chrome. Does the demo work? On Google Chrome, open Menu -> More tools -> Developer tools -> Console, and see if any error appears there. Check state and attributes of sensor.zigbee2mqtt_networkmap on Home Assistant, go to Menu -> Developer tools -> STATES -> sensor.zigbee2mqtt_networkmap [2019-08-16_14-02]

[nickrout]

Thank you, but the map is still “off the page”

{
  "nodes": [
    {
      "ieeeAddr": "0x00124b0012013c5a",
      "friendlyName": "0x00124b0012013c5a",
      "type": "Coordinator",
      "nwkAddr": 0,
      "status": "online",
      "scanfailed": []
    },
    {
      "ieeeAddr": "0x00158d00024def2d",
      "friendlyName": "Motion 1",
      "type": "EndDevice",
      "nwkAddr": 11703,
      "manufName": "LUMI",
      "modelId": "lumi.sensor_motion.aq2",
      "status": "online",
      "scanfailed": []
    },
    {
      "ieeeAddr": "0x00158d000278e63e",
      "friendlyName": "0x00158d000278e63e",
      "type": "EndDevice",
      "nwkAddr": 56720,
      "manufName": "LUMI",
      "modelId": "lumi.sensor_cube",
      "status": "online",
      "scanfailed": []
    },
    {
      "ieeeAddr": "0x00158d0002168d33",
      "friendlyName": "0x00158d0002168d33",
      "type": "Router",
      "nwkAddr": 11317,
      "manufName": "LUMI",
      "modelId": "lumi.plug",
      "status": "online",
      "scanfailed": [
        "lqi"
      ]
    },
    {
      "ieeeAddr": "0x00158d00020db88e",
      "friendlyName": "0x00158d00020db88e",
      "type": "EndDevice",
      "nwkAddr": 5523,
      "manufName": "LUMI",
      "modelId": "lumi.sens",
      "status": "online",
      "scanfailed": []
    },
    {
      "ieeeAddr": "0x00158d000126b7bf",
      "friendlyName": "0x00158d000126b7bf",
      "type": "Router",
      "nwkAddr": 59808,
      "manufName": "LUMI",
      "modelId": "lumi.plug",
      "status": "online",
      "scanfailed": [
        "lqi"
      ]
    }
  ],
  "links": [
    {
      "sourceIeeeAddr": "0x00158d00024def2d",
      "targetIeeeAddr": "0x00124b0012013c5a",
      "sourceNwkAddr": 11703,
      "lqi": 46,
      "depth": 1,
      "relationship": 1,
      "routes": []
    },
    {
      "sourceIeeeAddr": "0x00158d0002168d33",
      "targetIeeeAddr": "0x00124b0012013c5a",
      "sourceNwkAddr": 11317,
      "lqi": 21,
      "depth": 1,
      "relationship": 1,
      "routes": []
    },
    {
      "sourceIeeeAddr": "0xffffffffffffffff",
      "targetIeeeAddr": "0x00124b0012013c5a",
      "sourceNwkAddr": 59808,
      "lqi": 0,
      "depth": 1,
      "relationship": 1,
      "routes": []
    },
    {
      "sourceIeeeAddr": "0x00158d0001101cbb",
      "targetIeeeAddr": "0x00124b0012013c5a",
      "sourceNwkAddr": 27009,
      "lqi": 96,
      "depth": 1,
      "relationship": 1,
      "routes": []
    }
  ],
  "friendly_name": "Zigbee2mqtt Networkmap"
}

[azuwis]

The problem is that there are dead links in your case, e.g.:

    {
      "sourceIeeeAddr": "0x00158d0001101cbb",
      "targetIeeeAddr": "0x00124b0012013c5a",
      "sourceNwkAddr": 27009,
      "lqi": 96,
      "depth": 1,
      "relationship": 1,
      "routes": []
    }

Device with address 0x00158d0001101cbb does not exists in nodes.

These links can be filtered, but it should not be generated in the first place. We should report issue to Zigbee2mqtt.

[nickrout]

Yeah my zigbee2mqtt system is a little fubarred at present. I have a new co-ordinator and I should really start from scratch. Once I have z2m working properly, I’ll give this a go again.

[prankousky]

Thank you.

I am running 1.5.1 and coordinator 20190608. The demo somewhat works… I can see a network map, but it’s center is at the very left border (so I only see the right half unless I manually drag it). This is on Firefox, but it is at least displaying something (more than my local instance does, so while Firefox is not ideal, it does not seem to be the problem, either).

The state is unknown and the attributes are friendly_name: Zigbee2mqtt Networkmap.