[request] Display different node types with different colors

[DrCoolzic]

You are displaying the different type of nodes with différents icons (nice), But would it be possible to the display different node type with circles of different colors. This help when you are zoom out
For example:
Coordinator in blue
Router in yellow
End-device in green

[Samantha-uk]

Good call ... thank you!
At present, the colour (of a Zig ring) is either Green or Red, reflecting if the Zig is being reported (by ZHA) as available (or not), I plan to keep this the same.

The colour of Zags is based on the LQI value relating to ...
LQIThresholdLower = 100
LQIThresholdUpper = 200

In ZigZag v1 I had intended for a number of things to be user configurable, such as:
Colour of the different Zig types.
Icon for the different Zig types.
Thresholds for Zags and the associated colour.

I will look at adding this capability to ZigZag, initially by setting entries in the configuration.yml.

[DrCoolzic]

Not sure what "available" means here? Like an end device sleeping?

But if you want to keep this then you could use the following:

• not available red
• available
  -- Coordinator in blue
  -- Router in yellow
  -- End-device in green

For fun I have been looking at the code. As I said I have no knowledge of js ts and how the things are build!

https://github.com/Samantha-uk/one/blob/main/zigzag/modules/grapher/src/zig-widget.ts
I have found in line 51 that you are setting the color of the node based on availability? But this is not in what is used in HA.
so I have looked here
I have found in line 9937 of https://github.com/Samantha-uk/one/blob/main/home-assistant/zigzag-panel/zigzag/zigzag-panel.esm.js that in the ZigWidget constructor you define the color of the node to either success or error color.

this._node = this._renderPlugin.addNode(this._position, ZIG_RADIUS, this._height, this._zigD.zig.available ? `success_color` : `error_color`, [`zig`], this);

I have tried to replace the color with something else but without success :O . Just changing this line does not seems sufficient
The idea was to test available and device_type and set color accordingly ...

[DrCoolzic]

Well actually I am probably close to what I was trying to do. I just remembered that you have to clear the browser buffers.
So now all the circles are "black" because for test I have replaced sucess_color with yellow that does not seems to be defined the idea was to test device_type but I do not know the syntax in .js something like
this._ZigD;zig.device_type == "EndDevice" ? .....
also not sure what the .map is doing?

[Samantha-uk]

Not sure what "available" means here? Like an end device sleeping?

In fairness ... I'm not totally sure what criteria ZHA uses to determine this! I've posted on Discord to ask.

But if you want to keep this then you could use the following:

• not available red
• available
  -- Coordinator in blue
  -- Router in yellow
  -- End-device in green

For fun I have been looking at the code. As I said I have no knowledge of js ts and how the things are build!

Awesome! I first started playing with TypeScript back in June (or so). I found the learning curve to be on the steep side!
Before retraining as a Nurse, I'd the best part of 30 years in IT and had heavily used a variety of languages such as Pascal/C/C++/C# ... I dabbled a wee bit in java and had written perhaps ... 20 lines of code in javascript (It was all front end black magic to me)
TS is not (IMHO) an OO language like the clang family, and it's roots in javascript often left me scratching my head!
Years ago I led a project to convert a Pascal based financial services app to C, using a propriety multi-threaded core running on DOS, but I still struggle to totally understand the promise model of TS/JS.

Having said all of this, it has been great fun and if you are able to invest the time I suggest you may also find it an enjoyable journey.

And now to the colours thing.
ZZv1 was written as a home assistant add-on and I'd planned to introduce a lot of user customisation, this came a cropper with the lazy loading that HA introduced (Which meant I could not rely on various UX elements being available in the custom card editor)
The HA team rather liked ZZ and suggested that, if I ported it into ZHA it could become part of HA ... I was honoured! (I've ended up going a different route to see if I can support a much wider set of configurations, hence the plugin approach)

As part of that porting effort it was suggested that I should use HA theme colours as the basis of any rendering and I did this.

So colours are referred to using their home assistant name, and the actual values are loaded here https://github.com/Samantha-uk/one/blob/main/zigzag/modules/grapher/src/grapher.ts#L336-L374

As the main Zigzag code is no longer tightly coupled to HA, this should probably be refactored/moved/replaced.

[Samantha-uk]

Well actually I am probably close to what I was trying to do. I just remembered that you have to clear the browser buffers.
So now all the circles are "black" because for test I have replaced sucess_color with yellow that does not seems to be defined the idea was to test device_type but I do not know the syntax in .js something like
this._ZigD;zig.device_type == "EndDevice" ? .....
also not sure what the .map is doing?

I think it's displaying black as a default for colour names it does not recognise.
The set of colours is loaded as per my other comment and passed into a render plugin.
The name of one of the colours is expected in this code https://github.com/Samantha-uk/one/blob/main/zigzag/modules/render/plugins/pixijs/src/plugin-render-pixi.ts#L518-L529 for instance.

https://github.com/Samantha-uk/one/blob/main/zigzag/modules/render/core/src/iconhelper.ts is where the various icons are "converted" to SVG path data.

JS has this ... odd (to me!) way of allowing one to access an array entry using array.entrykey or array['entrykey'] and this is being used in ZZ.

[DrCoolzic]

Thanks
But is there a way to use a color like 'yellow' or just limited to predefined color?
How do you test equality device_type == "EndDevice" ? true_statement : false_statement ?

What do you think of the proposal

• not available red
• available
  -- Coordinator in blue
  -- Router in yellow
  -- End-device in green

[Samantha-uk]

Thanks
But is there a way to use a color like 'yellow' or just limited to predefined color?
How do you test equality device_type == "EndDevice" ? true_statement : false_statement ?

What do you think of the proposal

• not available red
• available
  -- Coordinator in blue
  -- Router in yellow
  -- End-device in green

At present I'm in the process of moving from using VSCode to NeoVim (So I'm for the moment finding it harder to navigate the Zigzag codebase), I'm running a new Mac Mini M1 and later today I'm expecting the arrival of the bits to build a 18Tb NAS (I'd like to drop my reliance on Apple Cloud & Dropbox) ... it's a busy day lol

However, I'm letting the colour change idea bubble away at the back of my mind, with the following goals.

1. Totally user configurable, but with sensible defaults. Ultimately user config via a nice UI but initially probably a json or yaml file.
2. Able to leverage any colour definitions in CSS so it can nicely integrate with HA. By that I mean either using one of the variety of ways that colours can be specified in CSS (Name/Hex/etc) but also being to reference using CSS custom properties (variables)

I am inclined to have the defaults as they were in Zigzagv1

I'm still undecided as to whether to assign the device type colours to the icon or to the background of the ring, need to consider an approach that also plays nicely with the 3D renderer.

[DrCoolzic]

Having the capability of placing the ZigBee nodes in a floorplan is a wonderful idea :) It will help in placing adequately the routers to build a good mesh.
Unify SW provide a similar capability where you first draw your floorplan then you place your access point to see if your Wifi coverage is good in your house

Very exciting. Pictures above is based on running SW? or just a mockup picture?

[Samantha-uk]

Having the capability of placing the ZigBee nodes in a floorplan is a wonderful idea :) It will help in placing adequately the routers to build a good mesh.
Unify SW provide a similar capability where you first draw your floorplan then you place your access point to see if your Wifi coverage is good in your house

Very exciting. Pictures above is based on running SW? or just a mockup picture?

It was a real (but undocumented) feature of ZZv1, basically importing an image and displaying it in the background.

It will most certainly appear in ZZv2 ... not sure when.

plugin-layout: At present is just D3 force vector thingie, but I intend a plugin that allows a user to specify co-ordinates for each Zig, basically a physical location.

With the plugin-render-three, I intend to allow for multiple floorplans ... to accommodate users with more than the one floor I have at home lol

However, I'm not quite sure yet how best to address this in the 2D plugin-render-pixi ...

[Samantha-uk]

This is a edited copy of the configurable items from ZZv1 that will likely be the basis for ZZv2.

{
  "iconColorCoordinator":"blue",
  "iconColorEndDevice":"red",
  "iconColorRouter":"orange",
  "iconColorUnknown":"grey",
  "iconNameCoordinator":"mdi:radio-tower",
  "iconNameEndDevice":"mdi:zigbee",
  "iconNameRouter":"mdi:router",
  "iconNameUnknown":"mdi:crosshairs-question",
  "colorLQIGood":"lightgreen",
  "colorLQIModerate":"darkorange",
  "colorLQIPoor":"crimson",
  "thresholdLowerLQI":"120",
  "thresholdUpperLQI":"220"
}

[DrCoolzic]

Great!

For multi floorplans may be an idea would be to provide a filter based on HA Areas.
floorplan 0 has areas kitchen, family, dinning ...
floorplan 1 has areas master bedroom, bathrom, ...

[Samantha-uk]

Great idea!
Also to allow a user to filter/select/focus on Zigs based on a name/area (Adds to the ever growing roadmap lol)

[DrCoolzic]

Questions on the graphic

• The different icons based on different node types: no problem
• The small icon for power / battery: no problem
• Next power type the mini icon indicates: primary function of node? What if node has multi sensor? For example the Aqara weather sensor (temp + lux + pressure) display as “?”
• On some nodes a third mini icon: what for?
• On left of power icon: the padlock indicates node is locked. What I understand if you move a node it gets lock when you release. Can be unlock by long press or “unlock all”. Auto layout move only unlock nodes.

Oddity

a link from ZC to ZR reports parent <-> sibling but another link from ZC to ZR shows sibling <-> sibling and link ZR to ZR shows sibling <-> sibling. Bug or ???

Mouse hover

Information is cryptic?

Hum actually mini icon seems related to [xxxx] values like [EXTENDED_COLOR_LIGHT] and "?" for undefine unknown ???
dont know where info coming from

[Samantha-uk]

I REALLY need to add the icon/colour legend to the documentation!

Zigbee endpoint info is both obscure (at times) and HUGE! (https://www.eetimes.com/zigbee-applications-part-5-addressing-within-the-node/)

At present only a few of the possible endpoints are mapped to specific mini-icons in ZZv2

I imagine that moving to a config file based approach would be best, as it would allow the community to add in new icons for various endpoints (Another one to add to the Roadmap). One issue tho is actually finding suitable icons. There are some SVG icons that just won't display properly in 3D (Something to do with how they their paths are specified I think)

The neighbour relationships are an oddity that I've yet to crack, I think there is a bug that does not show the two sides in plugin-render-pixi but even then, some of the relationship pairs do not match up.

[Samantha-uk]

By the way @DrCoolzic ... thank you for your feedback ... it is detailed, valuable and much appreciated in helping sort out some of the annoying ZZ issues! :)

[DrCoolzic]

Thanks for the documentation about Zigzag
Very interesting article
You're welcome I am learning a lot at the same time
And graphics look pretty nice :)

[DrCoolzic]

I imagine that moving to a config file based approach would be best, as it would allow the community to add in new icons for various endpoints (Another one to add to the Roadmap). One issue tho is actually finding suitable icons. There are some SVG icons that just won't display properly in 3D (Something to do with how they their paths are specified I think)

In deCONZ they use an XML file to describe the information for profiles and clusters look at chapter 10 of
https://www.dresden-elektronik.de/funk/software/deconz.html?file=files/dresden-elektronik/content/downloads/dokumente/funktechnik/deCONZ-BHB-en.pdf

The XML file used is here https://github.com/dresden-elektronik/deconz-rest-plugin/blob/master/general.xml

[andrus2049]

Thanks Samantha, very useful map, IMHO better than zha-map.

Now I'm only suggesting a new configuration option:

• hide off-line (i.e. no longer powered) devices from map.

I have a bunch of sonoff zigbee switches (mains powered) used for automating my Christmas lights.
But now Christmas time has past and all these devices have been put away, but I still see these switches (that were acting as repeaters) with all their connections, and so the map now is a bit too messy to view. The devices are colored in red, but I'd like to completely exclude them and their connections from the layout.

Thanks!

[DrCoolzic]

This is another filter option :)

[Samantha-uk]

Not sure what "available" means here? Like an end device sleeping?

The response I received on Discord (From the oracle of Zigbee stuff) is as follows:

So perhaps in Zigzag I should ignore it and use the last time seen to provide a more detailed "age" status ...

[DrCoolzic]

Thanks for the info

[DrCoolzic]

as per request #10
could be changed to:

Device background:

• not available : background = red
• available
  -- Coordinator: background in blue
  -- Router: background in yellow
  -- End-device: background in green

Device outline:

definable outline color based on floor
For example

• 1st floor: outline black
• 2nd floor: outline blue

[DrCoolzic]

Ok another proposal (sorry changes all the time :) )

** Device shape
select device shape based on available/type. For example

• coordinator: octagon
• router: circle
• end device: square
• not available: either a triangle with exclamation mark a stop sign

** Device background color
select background color based on some attribute.
For example select color based on floor level, on areas, ...

** Hiding devices
Possibility to filter devices on specific attribute:
For example hide devices not available (charismas device!), or devices on a different floor ...

** Shading devices
Possibility to shade devices based on attributes:
For example shade devices on a different floor (this allow to show all devices with focus for devices on a specific floor

[CumpsD]

Is there a way to disable/toggle the labels on the lines?