Z-Wave graph (without the python)

bruert · September 22, 2020, 10:00pm

Many Thanks.

sparkydave · September 23, 2020, 1:06am

Awesome work mate! Thank you

curt7000 · September 23, 2020, 1:26am

works great! Thank you!

BornToKill · September 24, 2020, 7:33pm

Dear,

Same issue on my iOS companon/browser. Maybe cross domains issue ?
When i access to the URL from safari it works (js is visible) but not from iOS app or nabucasa remote.

Companion :

Browser :

My conf is OK but still not working.

Johnyyy · September 25, 2020, 10:33am

is this wroking if i have all my zwaves connected to a gateway (telldus). Telldus is connected to HA.
Or must every zwave unit be directly connected to HA?

AdamNaj · September 25, 2020, 11:34am

It only lists devices connected using the old/original zwave integration.

cybergrimes · September 25, 2020, 2:54pm

I was getting the “Unable to load custom panel from http://ipaddress/config/www/zwavegraph3.js” until I realized the “name: z-wave-graph-panel” was not configurable. I had changed it from “zwavegraph2” to “zwavegraph3”, as soon as I corrected that it solved the problem for me.

Thanks for publishing this @AdamNaj

ocean12 · September 26, 2020, 6:12pm

Its working on my system. I don’t know if the last update of iOS and OSX solved the problem or the update of HASS.

eip-daemon · September 27, 2020, 4:05am

I’m not quite following this. Can you elaborate on what you did to get this working on iOS?

ocean12 · September 27, 2020, 8:36am

I update all to the latest versions.
iOS version 14.0.1
Home Assistant App version 2020.6.2

osx version 10.15.7
Safari version 14.0

BornToKill · September 27, 2020, 10:55am

Ok so issue occurs when I am at home and don’t use nabucasa remote UI. Will continue investigations.

dror-israel · September 29, 2020, 2:04am

I can’t seem to make it work.
Followed the instructions and restarted.
I get a blank page.
In log I get this:

Logger: frontend.js.latest.202009182
Source: components/system_log/__init__.py:193
First occurred: 4:47:08 AM (4 occurrences)
Last logged: 4:54:48 AM

http://192.168.1.xxx:8123/local/zwavegraph3.js:6:1 Uncaught SyntaxError: Unexpected token '<'

Mariusthvdb · September 29, 2020, 8:48pm

just found this, and a huge +1 to that, thanks @AdamNaj

mirekmal · October 2, 2020, 11:11am

I updated @AdamNaj new version of panel with theming capability. You can find updated file on my fork:

gist.github.com

https://gist.github.com/mirekmal/5db25d58737c046db3d25de991c6f1b7

configuration.yaml

panel_custom:
  - name: zwavegraph2
    sidebar_title: Z-Wave Graph
    sidebar_icon: mdi:access-point-network
    url_path: zwave

theme.yaml

# Z-Wave Graph specific colors to be added to theme
  zwave-background-color: var(--primary-background-color)           # main window bacground color
  zwave-group-background-color: var(--secondary-background-color)   # grouped devices background color
  zwave-group-border-color: var(--light-background)                 # border of group rectangle
  zwave-group-label-color: var(--primary-text-color)                # color of group label
  zwave-zoom-highlight-color: var(--primary-color)                  # zoom area bacground color - not identified yet
  zwave-zoom-border-color: var(--light-background)                  # zoom area border color - not identified yet
  zwave-legend-header-color: var(--primary-text-color)              # text of legend header - not know yet how to implement
  zwave-legend-item-color: var(--secondary-text-color)              # legend item text color (not for node colors)
  zwave-node-hub-background-color: var(--light-background)          # zwave hub background color

This file has been truncated. show original

zwavegraph2.html

<!--   
  https://gist.github.com/AdamNaj/cbf4d792a22f443fe9d354e4dca4de00
  Version 1.0:
    - based on the brilliant code by @NigelL - with cosmetic changes mostly about clarity and shaping of nodes based on their function
  Version 2.0: (02 July 2019)
    - you can now pan the graph by dragging it
    - you can now zoom the graph with your mouse wheel
    - the graph initially is scaled to fill the full screen width
    - added minimap to visualize which part of the graph you can see at the oment on the screen
    - added 2 more tree layouts (click on the top-legend) - they didn't necessarily help me make the graph more manageable for me, but may be useful to others in their topology

This file has been truncated. show original

There are more than three files. show original

Please follow standard procedure to install pane as described in documentation and then only replace original filewith one that I provided (only zwavegraph3.js from my repository to be used). zwavegraph2.html is only for use with older versions on HA.
Additionally theme.yaml file provides all theming variables that are used by this panel (as detailed in my previous post).

sender · October 2, 2020, 11:18am

Wow! that really looks good! Is there any plan to do this on QT openzwave?

mirekmal · October 2, 2020, 12:38pm

Well, this is question to @AdamNaj! He is the brain behind this panel I just did some search and replace work to add theme support…

sender · October 2, 2020, 1:58pm

@AdamNaj, Am I talking to the brains? Is there any plan/chance this will be so beautifully available to QT Openzwave?

darthrater · October 6, 2020, 4:13pm

@AdamNaj,

I get a blank page as well, with this error in the log.

2020-10-06 12:05:35 ERROR (MainThread) [frontend.js.latest.202009182] http://10.10.0.1:8123/local/zwavegraph3.js:6:1 Uncaught SyntaxError: Unexpected token ‘<’

AdamNaj · October 7, 2020, 11:43am

@mirekmal happy to accept a pull request, one problem I haven’t figured out though - which is why I haven’t added it yet - what happens if someone adds the panel but didn’t have the color variables in their theme? We cannot show it all black in such a case, there needs to be some kind of fallback to default colors.

AdamNaj · October 7, 2020, 11:46am

I’ll definitely look into it once the QT Openzwave matures and gets released at which point I’ll be able to start using it and port this. That is, assuming there will still be a point to this diagram and the information will be available in Home Assistant.
I haven’t been tracking it, maybe they have something similar already there?