Z-Wave graph (without the python)

I just want to say THANK YOU for your awesome… whatever this is.

I’ve been playing around with Home Assistant / Z-wave for a while, I can’t find a good way to display (thus, debug) my zwave network in the patst. In the past, I have look through OZW_Log.txt to get anything meaningful. Now, especially for simple status check after a Home Assistant server reboot, this graph serve the purpose perfectly.

Your graph is a god send. Again, Thank You

I followed all the directions but nothing loads. The side bar appears but I get this error in the developer tool log:

http://{server}:{port}/api/panel_custom/zwavegraph2.js:187:15 Uncaught ReferenceError: dagreD3 is not define

I tried refreshing, clearing the cache, adding locations to xml file, restarting HA, still have the same result.

Any idea on how to fix this?


Make sure you have the latest version of the html file. There have been numerous revisions posted in this thread.

1 Like

Thanks, must of clicked an older link. Working for me now!

Hi All,

Since yesterday I have a new Z-Wave Sigma USB stick. I went crazy about the Aeotec Gen5 one…
But now I only see this. No connections, nothing

There are lifelines etc… what can I do to solve this?

I have a Sigma ACC-UZB3-E-STA Stick bit it show as:

Z-Wave (Sigma Designs) Unknown: type=0003, id=0008

Can this be the problem as well?

I did a refresh on the Z-wave Host and now i see the neighbors…

Wonder if anyone could help I have a yale z wave lock and if i unlock manually i get a RTT of around 300ms but if i remoteely unlock via HA i get a RTT of over 1500ms most of the time around 1900ms and it take 6 seconds to update status.

I had this lock on smartthings and both the lock and the hub are about 20 m away with only 2 plaster board walls between. on smartthings was perfectly fine worksed instantly.

Any ideas?

Does it unlock when you push the unlock button in HA or is there a delay?

it unlocked instantly as soon as i push the button but the feedback is 6-8 seconds later.

if i unlock at the door physically it updates instantly in HA same with locking.

why it makes no sense if it was slow all the time maybe mesh issue but the fact it can communicate fast sometimes and i can reproduce issues 100% f the time has me stumped.

im surprised its not use one of the two switches as a hop as its directly between the lock and hub.

the zipato device is right next to the lock has no issues at all.

Is there anyway to have this panel display inside a view in lovelace so it doesnt need its own panel?

Does this work with external zwave controllers such as Vera? or does HA have to be doing the zwave control? (I use Vera)
I have the panel up but no nodes showing. Browser inspect shows an error in Safari: Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating ‘this.hass.dockedSidebar’). In Chrome: Uncaught (in promise) TypeError: Cannot read property ‘dockedSidebar’ of undefined.

Thoughts about this?




That has nothing to do with this graph, but it looks like the state of a sensor and some button you have on your lovelace ui are not on speaking terms.

Thank you, @firstof9 :slight_smile:


OK, so recently I spend quite a bit of time creating new theme for my HA and I wanted also other integrations/components to match aestetics of my theme. One of these components is Z-Wave graph :slight_smile:
On the screenshot below you can see what I achieved so far (OK, you might like or dislike color selection, but most important is to demonstrate what can be done):

For those brave enough to try it (and perhaps for @AdamNaj for integration into official add-on) here is how it is done:

  • I created new version of the latest zwavegraph2.html with lots of modification regarding colors coding. You will find full code at the bottom of this post.
  • This version have most of meaningfull hardcoded colors replaced with variables, following (more or less) HA theming standards. Not all colors are replaced, for some I did not found any use… perhaps some orphans from previous versions or color appearing in very special cases?
  • To manage allthese customized colors, I created template to be added to standard HA theme, giving you placeholde for all colors that can be changed this way - again full code is attached at he bottom of post.
  • To apply this mode you need to:
  1. Replace existing zwavegraph2.html with mine one. WATCHOUT: if official version gets updated you might loose these changes!!!
  2. Append theme color variables to your theme. You will find there some of variables poiting to standard HA colors and some that are hardcoded by me or pointing to other color variables I use in my theme in order to match overal color scheme I use. You should customize these to your like, otherwise you might receive some messy color scheme! I found quite a lot of shared themes do not use of of possible color selections that HA provides.
  3. Reload your theme (frontend.reload_themes or restart HA), clear browser cache and reload HA web page to enjoy result.

Some additonal coments:

  • For every theme you use you will need to append color scheme tempate related to this mod. Regular themes will not include appropriate variables!
    - Not all colors are customizable by variables, so can be themed. In particular color of header of legend on top (white on my screenshot) is coded in the way that I did not figured out how it can be changed… If you want to change this to something more appropriate to your theme, you need to change manually line 875 in zwavegraph2.html… Perhaps some java guru can help?
  • if you do not define any of required colors properly it will appear on the graph black… This is all or nothing solution!
  • In theme file I commented most of color variables, so you will know exaclty what element this color is responsible for. Some I left without coments, but I believe these are self explanatory by analogy.

So, to the specifics… updated zwavegraph.html and theme template can be found in fork I created on GitHub:

EDIT: Found the way to theme also legend header - updated code on GitHUb :slight_smile: So now zwavegraph is fully themable!



Thank you @mirekmal for the job done.
It seems really useful, but I think I’ve done something wrong as I don’t get the expected results. :sweat_smile:

I’m currently using Hass.io and here how I’ve proceeded :

  1. With the File editor, I have created a “panels” folder under “config/”.
  2. In this folder, I have also created a zwavegraph2.html file, and pasted your code in it.
  3. My config.yaml is :
  - name: zwavegraph2
    sidebar_title: ZWave Graph
    sidebar_icon: mdi:access-point-network
    url_path: zwave
  1. When I try to use your theme.yaml, the configuration check doesn’t pass. So I don’t use it.
  2. After a quick restart of HA (frontend.reload_themes doesn’t make anything), it seems to perfectly work. Except that I don’t see my USB stick (Sigmas Designs), or any connexions. And 2 nodes appear as unconnected but they are.

Has anyone already has this problem? Or can help to put me on the tracks ?

Hmm… hard to say… To be honest all what I did is was to take from original isntallation of this panel the source code, made a bit of trial and error investigations and put it back together into modified file that can handle themed colors instead if hardcoded one… So what I’d try to do is to follow original instructions how to install this panel and once it works to replace the original file with one I provided…
So… possible causes:

  • I see (but perhaps it is type in your post) that you put information of this panel into config.yaml insted of confiuration.yaml?
  • themes are tricky… my modification requires all of the color variables to be configured in valid theme, otherwise colors will be just black… I do not think there is any CSS inheritance here. But what is worrying is that configuration check does not pass. I do not think that themes are checked by configuration check, so to me it seems sometnig else is wrong.
  • Zwavegraph2 has nothing to do with actual Zwave configuration… it just takes some data from it as a source to crete network map. So if you have troubles with not seeing USB stick or nodes showing incorectly, this might rather indicate problems with Zwave configuration…

Thank you for your prompt reply.

I’ve tried with the previous version of the zwavegraph2.html (2.2) and with the first one, but without success.

Regarding your points:

  • I made a mistake, my config file’s name is configuration.yaml. I get confused with the folder’s name.
  • As I don’t see any black line or any black shape, I don’t think the “theme problem” is a “real” one.
  • Your last point comforts me in my first thought. I think there’s probably a problem into my Z-Wave configuration, and unfortunately this tool is not able to interface with it.

If anyone wants to work on this (found the problem / patch it), I’ll be glad to help and provide more information about my installation / set-up / config. But I’m afraid I can’t treat this by myself. :sweat_smile:

Take it easy, this is what the community is for :slight_smile:
But for start I’d suggest to start a new thread on forum, not to flood this one with what seems not relevant discussion to main topic of this one.

1 Like