[Experimental feature] Webbased frontend

[Koenkk]

This experimental feature allows to run a frontend straight from Zigbee2MQTT (so no additional setup is required). This frontend is developed by @nurikk, the source code can be found here: https://github.com/nurikk/z2m-frontend

To enable this, switch to the dev branch and add the following to your configuration.yam.

frontend:
  port: 8080

In case you find any issues in the frontend, report them here: https://github.com/nurikk/z2m-frontend/issues

[sjorge]

Initial impressions using firefox on macOS

• the padding is a bit tight see the left side.
• some of my devices are at half or less battery %, perhaps the battery icon could also reflect this.
• device/info page could perhaps link to the online docs, as they usually have pairing notes or even configuration notes.
• (not really a frontend thing but) perhaps we should update the product images so they have a transparent background
• product images are hotlinked from the main site, if you proxy the interface over ssl, you get mixed content warnings at best or they don't load at all. ==> fetch these in the background and cache them locally?
• perhaps the 'action' menu should just be 2 right aligned buttons
• log tail with maybe some color highlighting would be nice to have eventually too
• would be nice to have device_options editable via the settings tab
• per-device options would also be nice to have editable somewhere
• large networkmaps are... euhm useless

The group view is absolutely amazing!

Very promising start!

[sjorge]

The bind tab also no longer show the devices friendly name, the network address is still in the URL though, but would be nice to also have that visible.

[Westcott1]

Does using port 8080 conflict with Domoticz, when it's on the same RPi as Z2M?

[nurikk]

Does using port 8080 conflict with Domoticz, when it's on the same RPi as Z2M?

You can specify any port in configuration

[sjorge]

Sorting is working great, except for the power colomn.

[SAOPP]

Guys, as I understand it, the map is saved only for the current session in the browser?

[nurikk]

Guys, as I understand it, the map is saved only for the current session in the browser?

Yes, refresh page and you lose your data

[nurikk]

Sorting is working great, except for the power colomn.

What wrong with it?

[nurikk]

How do you find this way of showing logs? (only data from bridge/logging is shown)

[sjorge]

It doesn’t do anything.

I would have expected the battery and mains powered one to be grouped together. (Or ideally sort the battery ones on battery level)

~ sjorge

On 7 Sep 2020, at 05:12, John Doe notifications@github.com wrote:

 Sorting is working great, except for the power colomn.

What wrong with it?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[SAOPP]

Interesting... I don't have a logs menu. It's optional menu? And it can be turn on from configuration?

[nurikk]

Interesting... I don't have a logs menu. It's optional menu? And it can be turn on from configuration?

it's sneak peek from my dev environment, stay tuned :)

[nurikk]

It doesn’t do anything. I would have expected the battery and mains powered one to be grouped together. (Or ideally sort the battery ones on battery level) ~ sjorge … On 7 Sep 2020, at 05:12, John Doe @.***> wrote:  Sorting is working great, except for the power colomn. What wrong with it? — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

You should update dependencies, yesterday I've released update. It adds sorting by battery level

[nurikk]

Also upcoming touchlink page

[sjorge]

Also upcoming touchlink page

Oh how do you get the devices it detected? I was not aware z2m exposed that information, well i guess if you open the network for joining before doing the request you could see which ones publish a deviceJoined event.

[nurikk]

Also upcoming touchlink page

Oh how do you get the devices it detected? I was not aware z2m exposed that information, well i guess if you open the network for joining before doing the request you could see which ones publish a deviceJoined event.

This feature yet to be implemented, but in general it's just splitting this code and exposing via z2m https://github.com/Koenkk/zigbee-herdsman/blob/33d13a2fba4cc306d11398bf608293c2a6c7aa63/src/controller/touchlink.ts#L16

[sjorge]

So after some changes it could be publish under the zigbee2mqtt/bridge/config/touchlink/+ topic, that be nice.

[sjorge]

@nurikk Given I have a large network map, would you be interested in the the output? real output to work off or create tests from is always useful IMHO.

[netweaver1970]

very nice work! Any chance of having a linkable/proxyable config page from within HomeAssistant to get to the new Z2M GUI? I have Z2M, letsencrypt(incl NGINX rev. proxy) in separate containers so maybe an HA ingress based solution is needed? I prefer not to open up another endpoint straight via the NGINX reverse proxy, as the page doesn't have authentication. So using the authentication of HA would be nice/enough.

[netweaver1970]

I might have missed it but is there already an interface for binding/unbinding remotes to groups? That part of Z2M can also use some GUI love.

[sjorge]

Yes! If you view the remote’s details there is a binds tab, works pretty well.

~ sjorge

On 7 Sep 2020, at 17:10, netweaver1970 notifications@github.com wrote:

 I might have missed it but is there already an interface for binding/unbinding remotes to groups? That part of Z2M can also use some GUI love.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[nurikk]

I've published next release of frontend. Mostly bug fixes

https://github.com/nurikk/z2m-frontend/blob/master/CHANGELOG.md#0148-2020-09-08

[nurikk]

@nurikk Given I have a large network map, would you be interested in the the output? real output to work off or create tests from is always useful IMHO.

Yes, please! you can send me contents of bridge/response/networkmap (raw) ?

[sjorge]

@nurikk Given I have a large network map, would you be interested in the the output? real output to work off or create tests from is always useful IMHO.

Yes, please! you can send me contents of bridge/response/networkmap (raw) ?

https://gist.github.com/sjorge/332f92e691a2475590bdebaf7501b0d6

[sjorge]

Been playing with the latest release, touchlink doesn't seem to work but I think it's missing the above mentioned changes to z2m.

For the logs page:

• would be nice to have a dropdown to change the level on runtime (thats the default anyway, so the options can be on hte log page I think)
• scroll bar for each long record is a bit odd, perhaps have a global one for the whole log tab? makes it easier to compare values in two long lines too.

on the devices page

• sorting on power still broken for me
• icons still show 100% while most devices are between 85-50% battery left

on map page

• broken on firefox now, no button to request the map (works fine on safari)

[netweaver1970]

Yes! If you view the remote’s details there is a binds tab, works pretty well. ~ sjorge … On 7 Sep 2020, at 17:10, netweaver1970 @.***> wrote:  I might have missed it but is there already an interface for binding/unbinding remotes to groups? That part of Z2M can also use some GUI love.

I made a new group with a single IKEA bulb (LED1732G11), that seems to work nicely. But when trying to bind a Lumi/Aqara/Opple/Xiaomi WXKG06LM 1-gang wall switch to that new group, I'm not getting the OnOff cluster to select for binding. I'm only getting these ones : genBasic, genGroups, genIdentify, Scenes, genOta, genMultistateInput. Which one can be used to simply toggle the lightbulb? Or doesn't this switch allow direct binding?

Thanks.

[nurikk]

icons still show 100% while most devices are between 85-50% battery left

Hi, @sjorge ! Can you please send me your bridge/devices and bridge/+ (device statuses) dumps?

[sjorge]

icons still show 100% while most devices are between 85-50% battery left

Hi, @sjorge ! Can you please send me your bridge/devices and bridge/+ (device statuses) dumps?

I've updated the previous gist, not sure what oyu mean with device statuses dump though?

[nurikk]

icons still show 100% while most devices are between 85-50% battery left

Hi, @sjorge ! Can you please send me your bridge/devices and bridge/+ (device statuses) dumps?

I've updated the previous gist, not sure what oyu mean with device statuses dump though?

Everything that post into zigbee2mqtt/+ Example: zigbee2mqtt/0xabababababaab

[sjorge]

Everything that post into zigbee2mqtt/+ Example: zigbee2mqtt/0xabababababaab

Thats a whole lot of data/topics to dump, any device in particular you need? I could dump it all with mosquitto_sub -t zibgee2mqtt/+ but then it won't have the topics linked to it.

[nurikk]

Everything that post into zigbee2mqtt/+ Example: zigbee2mqtt/0xabababababaab

Thats a whole lot of data/topics to dump, any device in particular you need? I could dump it all with mosquitto_sub -t zibgee2mqtt/+ but then it won't have the topics linked to it.

You can use mosquitto_sub with -F flag, to output topic + payload https://mosquitto.org/man/mosquitto_sub-1.html#outputformat

[sjorge]

https://gist.github.com/sjorge/ec2fde7d03ad518e6d72f4fa15549b5d

[nurikk]

https://gist.github.com/sjorge/ec2fde7d03ad518e6d72f4fa15549b5d

Oh, I see now. Didn't expect that someone will use / in friendly name

[sjorge]

<room>/<device> or <room>/<group>/<device>

Makes it easy to get everything for a room or group.

[nurikk]

/ or // Makes it easy to get everything for a room or group. ~ sjorge […](#)

Yes, nice convention. Might start using it at my home:)

[nurikk]

hi, @sjorge I just released version 0.1.52 can you try to update dependencies and check sorting?

Also I've added implementations for touchlink scan/reset calls (identify still pending)

[sjorge]

Sorting on power now works! And LQI too, it even updates!

Maybe hide the last_seen colomn if we know it's not configured, which we do as the configuration page reflects that.

[nurikk]

I have update frontend version, kindly update dependencies to continue testing

https://github.com/nurikk/z2m-frontend/blob/master/CHANGELOG.md

[sjorge]

using the new touchlink stuff, if you identify a bulb and the immediately try to factory reset it, the command gives a timeout because the bulb still seems to be in the 'identifying' phase.

Maybe disable factory reset button for a few seconds to make sure the identify has finished.

[JasonSwindle]

My devices are missing icons or all white, and make the map harder to read. I wish I had ghost devices. :)

[sjorge]

Also 2x clicking on the scan button crashes the coordinator with

Zigbee2MQTT:error 2020-09-10 14:44:52: Request 'zigbee2mqtt/bridge/request/touchlink/scan' failed with error: 'SREQ '--> AF - interPanCtl - {"cmd":1,"data":[13]}' failed with status '(0xba: APS_NOT_ALLOWED)' (expected '(0x00: SUCCESS)')'

Then everything fails.

[nurikk]

My devices are missing icons or all white, and make the map harder to read. I wish I had ghost devices. :)

Icons are definitely there, but damn hard to see. Eventually we will update device icons

[nurikk]

Also 2x clicking on the scan button crashes the coordinator with

Zigbee2MQTT:error 2020-09-10 14:44:52: Request 'zigbee2mqtt/bridge/request/touchlink/scan' failed with error: 'SREQ '--> AF - interPanCtl - {"cmd":1,"data":[13]}' failed with status '(0xba: APS_NOT_ALLOWED)' (expected '(0x00: SUCCESS)')'

Then everything fails.

Fixed, try npm install zigbee2mqtt-frontend@0.1.54

[sjorge]

Looks like the device state tab is now broken

[Koenkk]

@sjorge @nurikk did some touchlink improvements, while a touchlink operation is in progress nothing else is allowed (also not a second touchlink operation).

[sjorge]

Seems more stable now, before the coordinator could crash, whoops doing a manual npm install seems to have broken my update script. I just need to reset packages.json and do npm cgi right to get back to whatever is in dev?

Edit: yep, seems so

[nurikk]

Looks like the device state tab is now broken

Yeah, broken after very big refactoring 👎 Fixed already, kindly update your dependencies

[sjorge]

Noticed few missing features:

• it's not possible to pass the ID for a group your creating
• readonly vs writable values seems like a lot of manual work, e.g. some sensors show temperature and humidity as writable, atleast for those sensors they aren't... can we auto detect this somehow?

[nurikk]

• readonly vs writable values seems like a lot of manual work, e.g. some sensors show temperature and humidity as writable, atleast for those sensors they aren't... can we auto detect this somehow?

Perhaps we can iterate over zigbee-herdsman-converters/devices.js find toZigbee records and extract writeable states from key attribute, this doable :)

• it's not possible to pass the ID for a group your creating

Any practical reason to do this?

[nurikk]

Btw, currently I'm working on big refactoring. If someone feeling adventurous enough, kindly help me to test frontend using next version

npm install zigbee2mqtt-frontend@0.2.1