Z-Wave graph (without the python)

NigelL · August 20, 2018, 2:26am

Okay, this is beyond what I know of dagre-d3 at the moment. I will have to look at it tomorrow.

Does it only happen when you use your external address?

If you’re comfortable doing so, would you mind messaging me the value of the data object assigned at line 103?

Put a break point on a line shortly after “var data=this.listNodes(this.hass);”
In the console, type in JSON.stringify(data)
Copy the resulting string and send it to me in a message

edif30 · August 20, 2018, 2:28am

The first js console error I get on my external url. Internal I get this

Uncaught TypeError: Cannot set property 'x' of undefined
    at HTMLElement.ready (zwavegraph2:128)
    at HTMLElement._enableProperties (properties-changed.js:315)
    at HTMLElement.connectedCallback (properties-mixin.js:203)
    at HTMLElement.connectedCallback (element-mixin.js:538)
    at Object.then (ha-panel-custom.js:75)

NigelL · August 20, 2018, 2:30am

You said it worked in Safari right? When you got that message just now about “Cannot set property ‘x’ of undefined” is that in safari? or your normal browser?

edif30 · August 20, 2018, 2:30am

Yea Safari is my backup or test. Chrome is what I mainly use. I just pinged you on HA Discord

And now for some reason, Safari is throwing the same error. All I did was remove those 2 lines and then reload both browsers. Safari came up once but looks like it didn’t load all the way. But I at least got something before.

NigelL · August 20, 2018, 2:38am

Okay, sorry to do this, but I have to head off (work in the morning).

Since the latest version doesn’t work for you, I would suggest trying the original post, or the one in #5 on this thread. If you can send me the results of the JSON.stringify then I can plug that into my system and see what’s going on.

Failing that, I might change libraries again

edif30 · August 20, 2018, 2:39am

No worries. We can try it again tomorrow as I’m gonna log off too. I tried the original post too and it doesn’t load either.

firstof9 · August 20, 2018, 11:25pm

This code worked perfectly fine for me in Chrome on Windows 10.
No restart of HA just swapped in the code and refreshed.

EDIT: Screenshot below

NigelL · August 21, 2018, 1:00am

Thanks for letting me know @firstof9

tom_l · August 21, 2018, 1:46am

I haven’t started with zwave yet but this look great. Any thought of making it a Hassio add-on?

NigelL · August 21, 2018, 4:02pm

Hi @tom_l I don’t use hassio myself so would have to set it up. I don’t think this would need to be packaged as an add-on though. I will try to take a look at next weekend see what I can do.

dwinnn · August 22, 2018, 6:10am

Works just fine in Hass.io for me. You can access the \config directory in Hass.io, then create the \panels directory and store the zwavegraph2.html file there.

tbrasser · August 22, 2018, 2:52pm

Nice, this is working perfectly.

Just a small network now, as the main z-wave network I manage (at my parents house) now goes via a Vera (so that it stays online when rebooting/updating HA, also so I can put the controller in a central location in the house).

Screenshot from current z-wave testing network:

NigelL · August 22, 2018, 4:59pm

Okay, I see I need to make a minimum width

joost · August 27, 2018, 6:35am

This is cool, thanks! Two suggestions: maybe revisit the green square/round legend icons. To me it looked like additional nodes or something, it took a few minutes before I realized it was a figure legend. And maybe also highlight the connecting nodes themselves, additional to the already highlighted arcs?

OmenWild · September 6, 2018, 3:58am

This is really cool. About half way through the 2nd rewrite I started thinking I should have written it this way, but I’m waaay better at Python than I am at JavaScript, so I kept on.

If you end up putting this in a GitHub repository (or the like) I’ll link to it from my GitHub page with a recommendation as it’s easier to configure, and the display layout is just a matter of tweaking until you get it the way you like.

My network is below, a couple comments.

You might try putting the battery powered devices on the right as it unclutters the layout a little.
The failed node (Sideyard Sensor) isn’t showing failed per your legend.
The black on green of the second layer is hard to read on my screen.
I find the straight connection lines easier to follow and really like the mouseover highlighting they do, not sure if the library you are using supports anything like that.

Mine (old school):

The new hotness:

Nice job!

NigelL · September 7, 2018, 5:22pm

Thanks very much for the feedback @omenwild I was really hoping you wouldn’t mind me taking your code and running a different way with it

Thanks for the suggestions, I will look at them this weekend. I really do need to setup a github repo at some point

tom_l · September 8, 2018, 2:28am

So far I only have a few devices to determine the sort of range I can expect in my house. This has been an invaluable tool. Thank you.

One question, I have renamed my nodes in the front end and restarted but I am still getting the default names showing up in the graph and the device card. Am I doing something incorrectly?

firstof9 · September 8, 2018, 3:28pm

That’s how it works, it’s using the “manufacturer name” + “product name” to populate the graph not the “node name”.

Likely an easy tweak to the code to use the node name instead. @NigelL would be the best to chime in on that tho.

tom_l · September 8, 2018, 3:37pm

Right-o, that’s why I asked. It looks like @OmenWild has done that in his example of “the new hotness”.

OmenWild · September 18, 2018, 12:30am

For the public record: I made no edits at all, just dropped it in place and loaded it. I’m on an older install still (0.75.1) if that makes a difference. Upgrading is on my short list, but my free time has been eaten by a new 3D printer lately. So much fun stuff to do, so little free time.