Zigbee2mqtt: show the networkmap in home assistant

Share your Projects!
1

I was looking for a simple solution to display the network map of zigbee2mqtt in hassio without the need of graphviz.
I found the great project viz.js and decided to write a simple custom_component with a service that updates and creates the corresponding files in my www folder.

map
map2373×1803 1.82 MB

Important: you have to clear the browsercache after each update
Instructions

  1. Download or clone https://github.com/rgruebel/ha_zigbee2mqtt_networkmap

  2. Copy “custom_components/zigbee2mqtt_networkmap” and content to your “custom_components” folder.

  3. Add the following to your configuration.yaml. It is possible to update the map directly via button. If you want to use this functionality you also have to activate the webhook component

     webhook:

 zigbee2mqtt_networkmap:
 
 panel_iframe:
   networkmap:
     title: 'Zigbee Map'
     url: '/local/community/zigbee2mqtt_networkmap/map.html'
     icon: 'mdi:graphql'

    You can set the graphviz engine via URL Parameter:
    map.html?engine=circo (Default: dot, Supported Engines)

  4. Restart Homeassistant

  5. Call the service “zigbee2mqtt_networkmap.update”

  6. Test if everything is working

Now you should create an automation which calls the service “zigbee2mqtt_networkmap.update” for example every 10 minutes:

  - id: update_networkmap
    alias: 'Zigbee Map aktualisieren'  
    hide_entity: true  
    trigger:
      platform: time_pattern
      minutes: '/10'
      seconds: 00
    action:
      service: zigbee2mqtt_networkmap.update
50 Likes
2

very nice! this can really helpfull to optimise and watch the network.

3

Please do!

4

Yes please .

5

Awsome! Please do

6

Ok, I’ll upload it tomorrow noon. :slight_smile:

7

i had some time left and added the instructions in the first post.
Let me know if it’s described clearly enough.

8

Works for me, although as I’m hosting and accessing hass on two different urls depending on where im accessing from the map only works from one of them.

Going to take a look and see if I can modify your script to call a docker container for graphviz (https://hub.docker.com/r/omerio/graphviz-server/), save that to a local file and use a local camera to show it

9

Works perfectly on my non HASS.io setup. :+1:

10

cant get it up an running on my hassio :frowning:
actually i noticed, that non of my custom components got loaded during server start :thinking:

11

@Robin you can use a relative path for the iframe source which makes it work better if your accessing from multiple locations

zigbee2mqtt_networkmap:
panel_iframe:
 networkmap:
   title: 'Zigbee Map'
   url: '/local/zigbee2mqtt_networkmap/map.html'
   icon: 'mdi:graphql'
1 Like
13

I just found out that, too :slight_smile:
I changed it in the first post.

14

Thanks a lot.
Works like a charm.
I used a weblink in lovelace instead and added it to a card

image

entities:
  - entity: sensor.bridge_state
    name: Zigbee2Mqtt Service
  - entity: switch.zigbee2mqtt_main_join
    name: Zigbee2Mqtt Join
  - entity: script.1546680345586
    name: Zigbee2Mqtt NetworkMap Update
    icon: 'mdi:graphql'
  - type: weblink
    name: Zigbee2Mqtt NetworkMap
    icon: 'mdi:graphql'
    url: /local/zigbee2mqtt_networkmap/map.html
title: Zigbee2Mqtt
type: entities
3 Likes
15

Does this mean there must be a new “custom_components” folder in the custom_components folder?
Like this

custom_components/custom_components/zigbee2mqtt_networkmap.py

and the same for www like this:

www/www/zigbee2mqtt_networkmap

16

No, use only the existing folders

1 Like
18

I’m having the same issue.

I’m using 3 other custom components with no problem, so I understand the general idea of where to put them.

Never mind. User error :slight_smile:

19

Perhaps a little improvement in the map.html file!?

  svg=document.body.appendChild(element);
  svg.style.width = "100%";

Besides the scaling i like this component very much!!

20

Another suggestion (as a laymen) would be the possibility of other layout engines, if that’s even the proper term.

My only real experience with Graphviz is this website. It looks like the network map it produces here is what that site calls the “dot” engine, while the “circo” engine provides a clearer (although more spread out) representation of the network in my opinion.

Feel free to ignore the suggestion though lol.

21

Yeah, scaling bothers me, too. I have already found the following project that I might want to integrate:
svg-pan-zoom
Example: http://ariutta.github.io/svg-pan-zoom/demo/inline.html

@Silicon_Avatar: i think the mentioned page uses the same library, so it shouldn’t be a problem

22

@Silicon_Avatar where was the problem? Maybe i did the same, i am still Not able to get it running :sweat: