[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

[SteveEdson]

When trying to delete a group from the admin (that previously existed, and then was removed from the config, I get the error:

zigbee2mqtt    | Zigbee2MQTT:error 2020-09-14 22:44:05: Request 'zigbee2mqtt/bridge/request/group/remove' failed with error: 'message.trim is not a function'

[nurikk]

When trying to delete a group from the admin (that previously existed, and then was removed from the config, I get the error:

zigbee2mqtt    | Zigbee2MQTT:error 2020-09-14 22:44:05: Request 'zigbee2mqtt/bridge/request/group/remove' failed with error: 'message.trim is not a function'

Hi! Can you share detailed steps to reproduce? Step by Step

[Kryzek]

Should I be able to connect this from other host or just from localhost? I get "Invalid Host header" when trying to connect from another host. Didn't figure how to allow access from other hosts.

[nurikk]

Frontend version has been updated, kindly update your dependencies or just npm install zigbee2mqtt-frontend@0.2.2

[sjorge]

The labels are wrong in my iPhone, look ok on desktop. https://share.icloud.com/photos/02R-3y2hsm-myaTSZ41lBaf5w

Also no tooltip as there is no hover action, having the percentage next to the power icon if battery would be nice too.

[sjorge]

Looks like the bind target for existing binds no longer gets shown

I also noticed there are no timestamps with the log entries on the logs page, which makes it hard to track down when certain things happened.

[nurikk]

Hi, @sjorge! Both issues are fixed. Thanks for testing! Kindly update to latest frontend version to proceed with tests.

npm install zigbee2mqtt-frontend@0.2.3

[sjorge]

binds looking good again, mobile view still has wrong labels though.

[SteveEdson]

When trying to delete a group from the admin (that previously existed, and then was removed from the config, I get the error:

zigbee2mqtt    | Zigbee2MQTT:error 2020-09-14 22:44:05: Request 'zigbee2mqtt/bridge/request/group/remove' failed with error: 'message.trim is not a function'

Hi! Can you share detailed steps to reproduce? Step by Step

• Create a group in the configuration.yaml with devices.
• Remove the devices
• Comment out the group configuration
• In the web dashboard, I see the following:

Clicking the remove button results in the error

2020-09-16 13:02:24: Request 'zigbee2mqtt/bridge/request/group/remove' failed with error: 'message.trim is not a function'

[nurikk]

binds looking good again, mobile view still has wrong labels though.

I don't get youy about mobile view, can you attach screenshots?

[sjorge]

binds looking good again, mobile view still has wrong labels though.

I don't get youy about mobile view, can you attach screenshots?

Is the posted link not working?

The labels are wrong in my iPhone, look ok on desktop. https://share.icloud.com/photos/02R-3y2hsm-myaTSZ41lBaf5w

Also no tooltip as there is no hover action, having the percentage next to the power icon if battery would be nice too.

[nurikk]

binds looking good again, mobile view still has wrong labels though.

I don't get youy about mobile view, can you attach screenshots?

Is the posted link not working?

The labels are wrong in my iPhone, look ok on desktop. https://share.icloud.com/photos/02R-3y2hsm-myaTSZ41lBaf5w Also no tooltip as there is no hover action, having the percentage next to the power icon if battery would be nice too.

link works, but this how it looks like since 0.2.3

[sjorge]

Weird, still looks wrong for me but I am on 0.2.3

[nurikk]

Weird, still looks wrong for me but I am on 0.2.3

try new build 0.2.4 and private mode

[sjorge]

Weird, still looks wrong for me but I am on 0.2.3

try new build 0.2.4 and private mode

Still broken, but I think I know why. The last seen column is hidden for me on desktop because I do not have this enabled. But it shows on mobile. If you remove that label everything lines up.

[nurikk]

Weird, still looks wrong for me but I am on 0.2.3

try new build 0.2.4 and private mode

Still broken, but I think I know why. The last seen column is hidden for me on desktop because I do not have this enabled. But it shows on mobile. If you remove that label everything lines up.

Aha, got it! Your fix in 0.2.5

[sjorge]

Fields order/labels look good now.

Still no way to get the tooltip for the battery icon though, perhaps:

• add the % next to the icon (mobile only?)
• switch back to text only for mobile
• use a fancy color gradient of green to red so you have a better idea of the % based on color (seems a lot of work and not useful for color blind people)

[nurikk]

Fields order/labels look good now.

Still no way to get the tooltip for the battery icon though, perhaps:

• add the % next to the icon (mobile only?)
• switch back to text only for mobile
• use a fancy color gradient of green to red so you have a better idea of the % based on color (seems a lot of work and not useful for color blind people)

Zigbee device isn't an android phone, why do you want this percentage so badly?)

[sjorge]

Mostly just those <10% (or those on battery_low)

So I know which ones to replace.

~ sjorge

On 17 Sep 2020, at 10:11, John Doe notifications@github.com wrote:

 Fields order/labels look good now.

Still no way to get the tooltip for the battery icon though, perhaps:

add the % next to the icon (mobile only?) switch back to text only for mobile use a fancy color gradient of green to red so you have a better idea of the % based on color (seems a lot of work and not useful for color blind people) Zigbee device isn't an android phone, why do you want this percentage so badly?)

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

[nurikk]

Mostly just those <10% (or those on battery_low) So I know which ones to replace. ~ sjorge … On 17 Sep 2020, at 10:11, John Doe @.***> wrote:  Fields order/labels look good now. Still no way to get the tooltip for the battery icon though, perhaps: add the % next to the icon (mobile only?) switch back to text only for mobile use a fancy color gradient of green to red so you have a better idea of the % based on color (seems a lot of work and not useful for color blind people) Zigbee device isn't an android phone, why do you want this percentage so badly?) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Okay, you've got it :) on < 10% you'll see it. Update to 0.2.6

[sjorge]

Works great! both on mobile and desktop.

Can we make the icon flash red too? Then we'd be consistent but still have visual queue for low battery. And maybe also trigger it when a device sends the low_battery payload too? That way it also works for device that report that. (As some don't report a 0-100 value but just low_battery, although I have none of those currently)

[Koenkk]

@SteveEdson could you provide the debug logging of https://github.com/Koenkk/zigbee2mqtt/issues/4266#issuecomment-693359841 ?

To enable debug logging set in configuration.yaml:

advanced:
  log_level: debug

[nurikk]

Works great! both on mobile and desktop.

Can we make the icon flash red too? Then we'd be consistent but still have visual queue for low battery. And maybe also trigger it when a device sends the low_battery payload too? That way it also works for device that report that. (As some don't report a 0-100 value but just low_battery, although I have none of those currently)

Bells and whistles are always welcome to contribute 😀

[blakadder]

There are CSS ways to round corners on image and filter them to adapt to darker themes - https://moduscreate.com/blog/dark-mode-images/

[ciotlosm]

This is now working with latest edge version of the Home Assistant add-on using ingress if people want to test is easier. Thanks to @nurikk for the quick fix.

[lolorc]

Hi, I'm liking it more and more ! :-)

Groups could have some kind of a more visible separation, I was adding a device to a group but I had to check twice if I was adding it to the good group.

On the main list, could offline devices be marked as such ?

Thanks

[nurikk]

I've implemented rudimentary endpoints/clusters viewer. Perhaps might be useful for developers

[Koenkk]

To prevent a breaking change in the future (on a release version) and since the next release will be soon (1 oct.) I've made the frontend non experimental. For existing users this will be a breaking change and they need to update their config from:

experimental:
  new_api: true
  frontend:
    port: 8080

to

frontend:
  port: 8080
experimental:
  new_api: true

Pining @ciotlosm as I believe the addon also needs adjustment for this.

[ciotlosm]

@Koenkk Add-on updated. It now uses:

frontend:
  port: 8099
experimental:
  new_api: true

8099 is the default ingress port in Home Assistant. Users can still customise it if they wish. Changes are available in latest Edge version of the add-on.

[ciotlosm]

@Koenkk will you increase the major version to 2? Would be nice to have a major version jump with the new frontend and the many changes.

[Koenkk]

@ciotlosm no, Zigbee2MQTT follows semver, a bump in major version indicates a breaking change which is not the case. Todays release will be 1.15.0

[sjorge]

A few more small things I found today...

• the device list for groups should be sorted on friendly_name instead of device_id
• maybe pre-select ep1 for the endpoint, as it looks like it's nearly always 1

[nurikk]

A few more small things I found today...

• the device list for groups should be sorted on friendly_name instead of device_id
• maybe pre-select ep1 for the endpoint, as it looks like it's nearly always 1

Good points will add them to the backlog

[sjorge]

Actually we can probably always do a best efford guess for the correct endpoint. Usually only one endpoint will have the genScenes, genOnoff, genLevelCtrl attributes, and we have that info as we show it on the device page.

[ciotlosm]

@Koenkk @nurikk It seem the new frontend is taking some time to load. One user reported up to 5 minutes until it was available after add-on was started. Is there any message when it completes the startup for the frontend? Could there be potential memory spikes with this new feature for users?

[ciotlosm]

"Loading, please wait" for the last 10 mins. I have 8 devices.

I have 39 and it loads fine for me on a RPI3. The problem at startup (which for me is around 1 minute from add-on start, and 40 seconds from pm2 process starting node) is getting

502: Bad Gateway

and

20-10-01 17:08:46 ERROR (MainThread) [supervisor.api.ingress] Ingress error: Cannot connect to host 172.30.33.2:8099 ssl:default [Connection refused]

If you're using the add-on, make sure you set new_api: true in your options as the documentation states..

[InvertedMinor]

How do you access the frontend if zigbee2mqtt in home assistant is applied as a container https://github.com/danielwelch/hassio-zigbee2mqtt ?

[ciotlosm]

Use the show in sidebar ingress method specified in the docs https://github.com/danielwelch/hassio-zigbee2mqtt/blob/master/zigbee2mqtt/DOCS.md

[InvertedMinor]

Use the show in sidebar ingress method specified in the docs https://github.com/danielwelch/hassio-zigbee2mqtt/blob/master/zigbee2mqtt/DOCS.md

THNX!

[kennymc-c]

Using a Nginx reverse proxy with the configuration mentioned in the wiki including basic auth I also only see "Loading, please wait". As soon as I deactivate Basic Auth, the page loads normally.

EDIT: The problem seems to occur only in Safari. According to Nginx Log there is a repeated 401 error for /api. Even after deleting the saved login data or using a safari private browsing window. On iOS I get error 304 for different pages like runtime, main or scripts. But this also happens with basic auth disabled.

[vecjh]

Hi, I'm on the release 1.15.0. Tried to turn on frontend but get the following constant notification in the log and frontend. And this is despite the fact that epoch was enabled before. Also. setting it to disable and restarting z2m results in config change back to epoch. Any ideas where it stuck?

info  2020-10-01 16:36:50: Set last_seen to epoch
info  2020-10-01 16:36:50: Set last_seen to epoch
info  2020-10-01 16:36:50: Set last_seen to epoch
info  2020-10-01 16:36:50: Set last_seen to epoch
info  2020-10-01 16:36:50: Set last_seen to epoch
info  2020-10-01 16:36:50: Set last_seen to epoch
info  2020-10-01 16:36:50: Set last_seen to epoch
info  2020-10-01 16:36:50: Set last_seen to epoch
info  2020-10-01 16:36:50: Set last_seen to epoch

[sjorge]

Using the new exposed interface, clicking some colors like green and purple result the actualy color box to be a different shade of the selected color. I've seen this for both trådfri, hue and innr.

[timoline]

I've implemented rudimentary endpoints/clusters viewer. Perhaps might be useful for developers

nice...Maybe move it to its own tab? Not sure it is something for the about tab

[sjorge]

Unknown feature | color_hs{"brightness":254,"color":{"hue":0,"saturation":100,"x":0.6982,"y":0.2982},"color_mode":1,"linkquality":47,"state":"OFF","color_temp":555}
-- | --

Showed up on the exposes tab after enabling exposing color_hs for some innr bulbs

[nldroid]

Web frontend looks pretty nice. One detail. When i switch tabs and go back to the map, i get this:

[pedrolamas]

@Koenkk In regards to the nginx configuration in the docs the ssl directive is considered obsolete and should be replaced with the ssl parameter on the listen directive instead (context here)

So instead of

server {
    listen      443 http2;
    listen      [::]:443 http2;

    ssl on;
    ...

It should be:

server {
    listen      443 ssl http2;
    listen      [::]:443 ssl http2;
    ...

[nurikk]

Unknown feature | color_hs{"brightness":254,"color":{"hue":0,"saturation":100,"x":0.6982,"y":0.2982},"color_mode":1,"linkquality":47,"state":"OFF","color_temp":555}
-- | --

Showed up on the exposes tab after enabling exposing color_hs for some innr bulbs

Hi! May I ask you to share your devices data? The best way to do this is using wbsocat

websocat ws://192.168.1.200:8080/api > out.file.json

[sjorge]

Unknown feature | color_hs{"brightness":254,"color":{"hue":0,"saturation":100,"x":0.6982,"y":0.2982},"color_mode":1,"linkquality":47,"state":"OFF","color_temp":555}
-- | --

Showed up on the exposes tab after enabling exposing color_hs for some innr bulbs

Hi! May I ask you to share your devices data? The best way to do this is using wbsocat

websocat ws://192.168.1.200:8080/api > out.file.json

websocat doesn't exist/build for my platform, can I get you the info using mosquitto_sub ?

I found another bug too, when changing the log level in settings, it applies but the UI stays locked on 'info', so it's not possible to restore to the info level or see what the actual log level i.

[nurikk]

Unknown feature | color_hs{"brightness":254,"color":{"hue":0,"saturation":100,"x":0.6982,"y":0.2982},"color_mode":1,"linkquality":47,"state":"OFF","color_temp":555}
-- | --

Showed up on the exposes tab after enabling exposing color_hs for some innr bulbs

Hi! May I ask you to share your devices data? The best way to do this is using wbsocat

websocat ws://192.168.1.200:8080/api > out.file.json

websocat doesn't exist/build for my platform, can I get you the info using mosquitto_sub ?

I found another bug too, when changing the log level in settings, it applies but the UI stays locked on 'info', so it's not possible to restore to the info level or see what the actual log level i.

Mosquito and websoket api are using slightly different data structure. Are there any another websoket clients for your platform?

[sjorge]

Well thats not good, this was when running it on my mac using port forwarding to get to the websocket.

thread 'main' panicked at 'called `Result::unwrap()` on an `Err` value: Os { code: 22, kind: InvalidInput, message: "Invalid argument" }', /root/.cargo/registry/src/github.com-1ecc6299db9ec823/tokio-signal-0.2.7/src/unix.rs:118:57