The zigzag panel is just blank

[TheZoker]

Describe the bug

The zigzag panel is just blank

My config looks like this:

panel_custom:
  - name: zigzag
    sidebar_title: Zigzag
    sidebar_icon: mdi:zigbee
    url_path: zigzag
    module_url: /local/zigzag/zigzag-panel.esm.js
    trust_external_script: true
    config:
      who: world
      zigzag:
        plugin-path: "/local/zigzag/plugins"
        plugin-data:
          type: "zha"
        plugin-layout:
          type: "d3"
        plugin-render:
          type: "three" 

I also tried pixi as render plugin, but same issue.

To Reproduce Steps to reproduce the behavior:

1. Go to zigzag panel

Expected behaviour Display panel

Browser console

Screenshots Blank panel:

The script is loaded:

This is what the html element looks like:

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 88

I also tried firefox, same issue

Home Assistant:

• Core: core-2021.1.4
• Supervisor: supervisor-2021.01.4
• OS: 5.10

Additional context none

[Samantha-uk]

Very odd! I would expect at the very least to see more info in the browser console, such as

I run OSX but note you're on Windows. I'll try to fire up a Windows VM on my Proxmox server to see if I can replicate what you are seeing. Just to check, you are using the latest files from https://github.com/Samantha-uk/one/tree/main/home-assistant/zigzag-panel/zigzag ?

[DrCoolzic]

I do not see the PixiJS 5.35.7 info? I have the following

[TheZoker]

@Samantha-uk Yes these are exactly the files I installed:

I have no clue, why there are no logs in the console....

Is there anything else I can check on my end?

[Samantha-uk]

I'm not sure what else you can check just now to be honest. I'm still building my Windows VM to try to replicate the issue you are seeing. Could you jump to the Zigzag discord so we can chat more interactively? https://discord.gg/SF7PnZDj

[Samantha-uk]

It took me a while to spot the issue, perhaps my mind was focused on the new 18Tb NAS that arrived a couple of hours ago! 😃 When I loaded your config in my system, I experienced exactly what you described, which was a good start (Don't we all hate issues that are hard to reproduce!)

In the Home Assistant configuration.yaml, it is vital that the name element reflects the Web Component name of whatever you want to load. For Zigzag, it's Web Component name is custom-panel-zigzag.

By changing your config as follows, it seemed to work OK here. Not working

panel_custom:
  - name: zigzag
 ...

Working

panel_custom:
  - name: custom-panel-zigzag
  ...

Could you try the same change on your system and let me know if the issue is resolved or persists?

[TheZoker]

Yes that was the issue. Thank you very much for your extensive help! I should be more careful when customizing code before trying the initial code 😅

PS: Have fun with you new NAS, these things are amazing 😄

[Samantha-uk]

Thank you. "Old NAS" Synology DS210+ ... circa 2010. 2Tb RAID 1

"New NAS TrueNAS VM on NUC: ZFS RAIDZ . 15Tb (With just 4 of 8 bays used)

Because ... I'm worth it! lol

And I need somewhere to keep Zigzag safe :)

[DrCoolzic]

Nice :O