Visualization pixi render not working with chrome

[DrCoolzic]

I installed the panel, but I only see the header containing "ZOOM TO FIT", "AUTO LAYOUT" and "UNLOCK ALL". But there is no content.

OS: Windows 10 version 2004 (19041.685) - 64 bit Browsers tested: Chrome / Edge / Opera With plugin_render type pixi : no content other than 3 commands on top With plugin_render type three : Display works see https://community.home-assistant.io/t/zigzag-panel-showing-no-graph/263918

Here is the console content Zigzag [plugin] ℹ Looking for /local/zigzag/plugins/plugin-data-zha.esm.js. zigzag-wc.esm.js:6872 Zigzag [plugin] ✅ loaded /local/zigzag/plugins/plugin-data-zha.esm.js. zigzag-wc.esm.js:6869 Zigzag [plugin] ℹ Looking for /local/zigzag/plugins/plugin-layout-d3.esm.js. zigzag-wc.esm.js:6872 Zigzag [plugin] ✅ loaded /local/zigzag/plugins/plugin-layout-d3.esm.js. zigzag-wc.esm.js:6869 Zigzag [plugin] ℹ Looking for /local/zigzag/plugins/plugin-render-pixi.esm.js. zigzag-wc.esm.js:6866 Zigzag [plugin] ‼ unable to load plugin /local/zigzag/plugins/plugin-render-pixi.esm.js due to Error: WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.. core.es.js:9796 Uncaught (in promise) Error: WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support. at Function.Renderer.create (core.es.js:9796) at autoDetectRenderer (core.es.js:9969) at new RenderPlugin (zigzag-render.esm.js:6272) at Module.createPlugin (zigzag-render.esm.js:6606) at zigzag-wc.esm.js:9554

[DrCoolzic]

Also tested with Edge browser seems to be the same problem? Zigzag [plugin] ℹ Looking for /local/zigzag/plugins/plugin-data-zha.esm.js. zigzag-wc.esm.js:6872 Zigzag [plugin] ✅ loaded /local/zigzag/plugins/plugin-data-zha.esm.js. zigzag-wc.esm.js:6869 Zigzag [plugin] ℹ Looking for /local/zigzag/plugins/plugin-layout-d3.esm.js. zigzag-wc.esm.js:6872 Zigzag [plugin] ✅ loaded /local/zigzag/plugins/plugin-layout-d3.esm.js. zigzag-wc.esm.js:6869 Zigzag [plugin] ℹ Looking for /local/zigzag/plugins/plugin-render-pixi.esm.js. zigzag-wc.esm.js:6866 Zigzag [plugin] ‼ unable to load plugin /local/zigzag/plugins/plugin-render-pixi.esm.js due to Error: WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.. core.es.js:9796 Uncaught (in promise) Error: WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support. at Function.Renderer.create (core.es.js:9796) at autoDetectRenderer (core.es.js:9969) at new RenderPlugin (zigzag-render.esm.js:6272) at Module.createPlugin (zigzag-render.esm.js:6606) at zigzag-wc.esm.js:9554 Renderer.create @ core.es.js:9796 autoDetectRenderer @ core.es.js:9969 RenderPlugin @ zigzag-render.esm.js:6272 createPlugin @ zigzag-render.esm.js:6606 (anonymous) @ zigzag-wc.esm.js:9554 async function (async) firstUpdated @ zigzag-wc.esm.js:11068 firstUpdated @ zigzag-panel.ts:38 async function (async) firstUpdated @ zigzag-panel.ts:13 performUpdate @ zigzag-wc.esm.js:2168 _enqueueUpdate @ zigzag-wc.esm.js:2104 async function (async) _enqueueUpdate @ zigzag-wc.esm.js:2098 requestUpdateInternal @ zigzag-wc.esm.js:2070 initialize @ zigzag-wc.esm.js:1922 initialize @ zigzag-wc.esm.js:2629 UpdatingElement @ zigzag-wc.esm.js:1686 LitElement @ zigzag-wc.esm.js:2561 ZigzagWC @ zigzag-wc.esm.js:11052 ZigzagPanel @ lit-element.js:67 (anonymous) @ VM6:1 (anonymous) @ chunk.fd676b7a45305bcf907b.js:1 (anonymous) @ chunk.fd676b7a45305bcf907b.js:1 Promise.then (async) value @ chunk.fd676b7a45305bcf907b.js:1 value @ chunk.fd676b7a45305bcf907b.js:1 performUpdate @ app.e45b0549.js:10297 _enqueueUpdate @ app.e45b0549.js:10297 async function (async) _enqueueUpdate @ app.e45b0549.js:10297 requestUpdateInternal @ app.e45b0549.js:10297 initialize @ app.e45b0549.js:10297 C @ app.e45b0549.js:10297 r @ chunk.fd676b7a45305bcf907b.js:1 (anonymous) @ VM6:1 value @ app.e45b0549.js:39363 value @ app.e45b0549.js:39363 _currentLoadProm.l.then._currentLoadProm @ app.e45b0549.js:39363 Promise.then (async) value @ app.e45b0549.js:39363 performUpdate @ app.e45b0549.js:10297 _enqueueUpdate @ app.e45b0549.js:10297 async function (async) _enqueueUpdate @ app.e45b0549.js:10297 requestUpdateInternal @ app.e45b0549.js:10297 set @ app.e45b0549.js:10297 commit @ app.e45b0549.js:10297 commit @ app.e45b0549.js:10297 update @ app.e45b0549.js:10297 commitTemplateResult @ app.e45b0549.js:10297 commit @ app.e45b0549.js:10297 a @ app.e45b0549.js:10297 H.render @ app.e45b0549.js:10297 update @ app.e45b0549.js:10297 performUpdate @ app.e45b0549.js:10297 _enqueueUpdate @ app.e45b0549.js:10297 async function (async) _enqueueUpdate @ app.e45b0549.js:10297 requestUpdateInternal @ app.e45b0549.js:10297 set @ app.e45b0549.js:10297 commit @ app.e45b0549.js:10297 commit @ app.e45b0549.js:10297 update @ app.e45b0549.js:10297 commitTemplateResult @ app.e45b0549.js:10297 commit @ app.e45b0549.js:10297 update @ app.e45b0549.js:10297 commitTemplateResult @ app.e45b0549.js:10297 commit @ app.e45b0549.js:10297 a @ app.e45b0549.js:10297 H.render @ app.e45b0549.js:10297 update @ app.e45b0549.js:10297 performUpdate @ app.e45b0549.js:10297 _enqueueUpdate @ app.e45b0549.js:10297 async function (async) _enqueueUpdate @ app.e45b0549.js:10297 requestUpdateInternal @ app.e45b0549.js:10297 set @ app.e45b0549.js:10297 value @ app.e45b0549.js:44533 async function (async) value @ app.e45b0549.js:44533 handleEvent @ app.e45b0549.js:10297 boundHandleEvent @ app.e45b0549.js:10297 x @ app.e45b0549.js:10297 E @ app.e45b0549.js:10297 w @ app.e45b0549.js:10297 (anonymous) @ app.e45b0549.js:10297 _propertiesChanged @ app.e45b0549.js:10297 _flushProperties @ app.e45b0549.js:10297 _flushProperties @ app.e45b0549.js:10297 _invalidateProperties @ app.e45b0549.js:10297 _setProperty @ app.e45b0549.js:10297 Object.defineProperty.set @ app.e45b0549.js:10297 locationChanged @ app.e45b0549.js:40448 V @ app.e45b0549.js:10297 w @ app.e45b0549.js:10297 @ app.e45b0549.js:10297 _propertiesChanged @ app.e45b0549.js:10297 _flushProperties @ app.e45b0549.js:10297 _flushProperties @ app.e45b0549.js:10297 _invalidateProperties @ app.e45b0549.js:10297 _setProperty @ app.e45b0549.js:10297 Object.defineProperty.set @ app.e45b0549.js:10297 _computeRoutePath @ app.e45b0549.js:41607 V @ app.e45b0549.js:10297 w @ app.e45b0549.js:10297 @ app.e45b0549.js:10297 _propertiesChanged @ app.e45b0549.js:10297 _flushProperties @ app.e45b0549.js:10297 _flushProperties @ app.e45b0549.js:10297 _invalidateProperties @ app.e45b0549.js:10297 (anonymous) @ app.e45b0549.js:10297 _propertiesChanged @ app.e45b0549.js:10297 _flushProperties @ app.e45b0549.js:10297 _flushProperties @ app.e45b0549.js:10297 _invalidateProperties @ app.e45b0549.js:10297 _setProperty @ app.e45b0549.js:10297 Object.defineProperty.set @ app.e45b0549.js:10297 _urlChanged @ app.e45b0549.js:40448 (anonymous) @ app.e45b0549.js:10297 fire @ app.e45b0549.js:10297 _globalOnClick @ app.e45b0549.js:40448 (anonymous) @ app.e45b0549.js:10297 Show 43 more frames from Library code

[DrCoolzic]

I think I have the latest plugin-render-pixi.esm.js dated 06/01/2021 23:06 size 4220 Ko Got them using GitHub desktop on https://github.com/Samantha-uk/one.git

[DrCoolzic]

https://pixijs.io/examples/#/demos-basic/container.js run correctly

[Samantha-uk]

Thank you @DrCoolzic. That should be the latest plugin for pixi. I'm going to modify it so the plugin version number is displayed when it loads so we can remove any question.

[Samantha-uk]

@DrCoolzic ... sorry it has taken so long, my build system broke (it turns out as a result of an update to one of the packages I depend on). I've updated plugin-render-pixi so it now prints its version upon loading so we can be sure you've the right version.

You should see this in your console

Zigzag [plugin-render-pixi] ℹ plugin:plugin-render-pixi v0.1.3 api v1.0.0

Please let me know the outcome.

[DrCoolzic]

Unfortunately I will not be able to test zigzag in the next days. I have reported a bug on ZHA network construction https://github.com/home-assistant/core/issues/44954 and therefore I do not have ZHA running anymore. I am currently performing some tests using deCONZ. It will probably take few days before I reconstruct my network using ZHA. As soon as I am ready I will let you know

[Samantha-uk]

When I last looked at deCONZ it did not seem to provide zag info, otherwise I would actively develop a plugin-data-deconz

[DrCoolzic]

deCONZ alone has the capability to display zags (even if less pretty that what you are doing :) )

[Samantha-uk]

True. After some digging I see that the deCONZ C++ library exposes neighbor info (Used for Zags) (https://phoscon.de/deconz-cpp/d1/d77/node_8h_source.html).

When I had a play with their REST API some months ago, I could see nothing exposing neighbor info, the REST documentation still shows nothing ... however in the source there appears to be a request that looks like it would return neighbor info // GET /api/<apikey>/lights/<id>/connectivity.

Do you still have a deCONZ setup operational? Perhaps we could give it a try? Also, it may make sense to move this to the Zigzag Discord forum.

[DrCoolzic]

With the new version it now display the graph but was still slightly offset. So I cleared Chrome cache and restarted it and it works

[MattWestb]

@Samantha-uk I think the querying the neighbour table is default disabled and have one button for "LQI" in the GUI for activating the scan . Its recommended not having it running then its slowing down the network and the host in the log run.

[DrCoolzic]

Probably not your problem but some nodes/link are not displayed in the graph. FYI please read https://github.com/home-assistant/core/issues/44954#issuecomment-761596713

[Samantha-uk]

@Samantha-uk I think the querying the neighbour table is default disabled and have one button for "LQI" in the GUI for activating the scan . Its recommended not having it running then its slowing down the network and the host in the log run.

I think the neighbour scan in ZHA/Zigpy defaults to about 4 hours, but it is possible to specify a shorter period by adding the following to your configuration.yaml

zha:
 zigpy_config:
   topology_scan_period: 20

I recall that this (20 minutes) is the minimum time that zigpy allows at present.

I shall investigate if I can add a scan neighbours now button ...

[Samantha-uk]

Probably not your problem but some nodes/link are not displayed in the graph. FYI please read home-assistant/core#44954 (comment)

Nods. I've the same issue for some nodes in my mesh, I think it is battery based nodes that experience this ... I suspect they are sleepy devices. However, my understanding of the Zigbee specification (heavy & complex) is that their parent nodes should cache their relationship so that they can store & forward any messages for their children. I'm looking into it ...

[MattWestb]

Our S-UK i still running your classic 1 (not one) and it was depending on scans being done by zha-map. But I think then the ZHA-visualising was implemented in ZHA its being done in ZHA. I was trying disabling (renaming) zha-map but was not getting any links in ZigZag so i was enabling it again and can triggering neighbour scans with HA services and lits looks working good. I dont knowing if the two functions is doing bad things in the system but i think its only @Adminiuga that is knowing that. One thing with the AH service from zh-map is that the system is canceling the scan if doing it to frequently (for not blocking the network with unnecessary communications).

You supposed "network scan" button sound being one great thing in the GUI but the time restriction is making it little tricky getting it working well (with novice users). If its possible reading the cooldown time for the network scan from ZHA / zigpy and graying the botun out and perhaps the remaining cooldown time being displayed wold being great but perhaps not possible.

[DrCoolzic]

If understand correctly the problem is that scanning the network uses a lot of resources just to be ready to display the graph correctly. If this is the case it is bad as user will only look at the network graph in case of problem or during construction of the network. Therefore it probably make sense to only scan on demand. But as @MattWestb is mentioning a novice user should not have to worry about details. But I like the idea of having a scan button that need to be pushed in order to display the graph. Other option would be to scan when a user load the Zigzag network graph (if possible?)...

[MattWestb]

For normal user cases is no problem but some users having over 200++ devices then its being more problematic with the communication and therefore its the system limiting the scans.

The system is doing their schedule and its OK but then you is doing changes like adding, moving and repairing devices its can being good getting the map updated by user interaction.

The maps is one visualization of the network but all LQI and active links is not real time thing and its being made as one tool for helping the user getting one picture of its there network and understanding it better.

If implanting one real good real time monitoring visual map then the is getting large performance problem also in smaller system.

[Samantha-uk]

I really would like to get near real time updates in ZigZag, the use case is when someone is trying to track down a network comms issue that may be affected by either the position of a Zig or interference from other systems (WiFi etc).

My goal would be for Zigzag to receive these updates in near real time and refresh the display (with perhaps some visual indication that a Zig/Zag has changed). I would dearly love to incorporate some of the sort of data feed that one might see in WireShark ... but that is a ways off at present.

At present, I'm working towards this by building Bedrock, which will be a Deno based docker add-in for HA (I don't want to have to learn python lol) ... a little like the approach that nodeRed takes. The plan is for it to do the "heavy-lifting" of scanning/etc and just provide an event feed to Zigzag.

Even with a large Zigbee mesh I don't feel (from my reading) that more frequent "status" scans are likely to add a huge amount of traffic ... but we shall see ... if rather than doing a full mesh sweep, a single problem Zig was targeted for such requests it would likely be very low.

[MattWestb]

Lady S you have great imagination !!!

My experience of deCONZ and little larger network with continuous pulling the router for the neighbor table is going to killing the network in the radio layer and / or in the host side if running for longer times.

But I think doing like deCONZ (have on button LQI) for doing one intens pulling in combination with time limit (so the user cant leaving it on and "forgetting it") is one go and worth to trying if interest. Perhaps with one red warning with the danger if stressing the network.

One more interesting thing its that all router device (at least zigbee 3 ones) can also scanning the radio channels and reporting it back to the system but i dont knowing how the impact of the system is being then doing that. Taking one look on https://github.com/zigpy/zigpy-znp#energy-scan its describing energy scan doing on TI coordinator (the coordinator is technically one normal router with the trust center rolle). If knowing the current zigbee channel being used and then collecting all energy scans from the routers in the mesh its can being very nice visualised and making it possible finding some bad or god matrix that is better for the system. And perhaps clicking on one router and getting energy scans "live" in the GUI.

Then radio interference can being very nasty and tricky to pinning out i think its can being one great tool for user to solving this kind of problem.

Do you have trying listening on music with one bluetooth headset and using the microwave oven ? Very likely you getting the head set compleet disconnected and with luck only very bad "hacked" music (BT is using the same frequencies and zigbee but is using jumping channels so its more "immune" for interference).