Styling big network

[koenhendriks]

I recently moved and redid the entire house with Zigbee devices.

My problem now is that I've lost overview in the network map, it has become overpopulated. I tried changing the size but that didn't help with the crowded map.

I was wondering if anyone could help with the structure of the graph to create a better understandable view.

I'm using the following card settings:

type: 'custom:zigbee2mqtt-networkmap'
entity: sensor.zigbee2mqtt_networkmap
force: 3000
node_size: 16
font_size: 12
link_width: 2
height: 400
css: |
  :host {
    --zigbee2mqtt-networkmap-node-color: rgba(18, 120, 98, .7);
    --zigbee2mqtt-networkmap-node-fill-color: #dcfaf3;
    --zigbee2mqtt-networkmap-node-pinned-color: rgba(190, 56, 93, .6);
    --zigbee2mqtt-networkmap-link-color: rgba(18, 120, 98, .5);
    --zigbee2mqtt-networkmap-hover-color: #be385d;
    --zigbee2mqtt-networkmap-link-selected-color: rgba(202, 164, 85, .6);
    --zigbee2mqtt-networkmap-label-color: #127862;
    --zigbee2mqtt-networkmap-arrow-color: rgba(18, 120, 98, 0.7);
    --zigbee2mqtt-networkmap-node-coordinator-color: rgba(150, 0, 193, .7);
    --zigbee2mqtt-networkmap-node-router-color: rgba(0, 165, 255, .7);
  }

Any tips or help is greatly appreciated.

[azuwis]

Try decrease force, and use panel: true.

views:
  - title: Zigbee Network
    panel: true # this renders the first card on full width, other cards in this view will not be rendered
    cards:
      - type: custom:zigbee2mqtt-networkmap
        entity: sensor.zigbee2mqtt_networkmap
        force: 500 # decrease it to get smaller map if you have many devices

[koenhendriks]

Thanks for the advice!

I was hoping to avoid using a panel because i like having the controls of next to the map. There isn't anyway to setup the width of the card, is there?

[azuwis]

The width is controlled by Home Assistant frontend UI, not the custom card.

I think it's possible to use something like https://github.com/thomasloven/lovelace-card-mod, or develop a custom horizontal stack card(https://www.home-assistant.io/lovelace/horizontal-stack/), to achieve what you want, but that's out of the scope of this project.

[azuwis]

Try https://github.com/thomasloven/lovelace-layout-card grid layout.

[koenhendriks]

Thanks a lot! I will look into different styling options for the Home Assistant lovelace design.