[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]

https://gist.github.com/sjorge/1b3a28f38660a098444407884dd1178e

[nurikk]

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.

Yes, some issue here. Z2m republishes data to bridge/info with unchanged value. @Koenkk can you take a look on this?

[ginkage]

Hey, quick drive by after some quick testing. First of all, I love the GUI, really awesome work there! If I were to ask for one small feature though, that would be the ability to one-click (or even zero-click) unbind for devices from the default_bind_group. I had to jump through some hoops, learn how it all works and manually send an MQTT message in order to make my IKEA Switch bind to a group of lights. After that one message the rest worked pretty much automagically from the GUI, but I still think that this first unbind might as well be triggered by clicking the "bind" button. Hope it's not hard to implement. Kudos!

[nurikk]

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

Fixed, thanks

[JasonSwindle]

Can us poor souls who are still stuck on imperial temperature have an option to convert in the web interface from metric to imperial?

[felixstorm]

I also experience exactly the same problem as @lustyffh above: As soon as I set new_api to true, the log fills up very quickly (more than 100 messages per second) with Set last_seen to epoch, practically rendering the system unusable. As soon as I disable the new API again, everything is fine again (but the frontend does not work - probably this is excepted).

I am using the HA addon (both addon and z2m on version 1.15.0, CC2652 still on 20200417) and this was my config:

external_converters: []
devices: devices.yaml
groups: groups.yaml
homeassistant: true
permit_join: false
mqtt:
  base_topic: zigbee2mqtt
  server: 'mqtt://core-mosquitto'
  user: zigbee2mqtt
  password: xxx
serial:
  port: /dev/ttyACM0
advanced:
  log_level: info
  channel: 11
  pan_id: xx
  network_key:
    - xx
    - ...
    - xx
  report: true
  availability_timeout: 300
  availability_blocklist: []
  availability_passlist: []
  ext_pan_id:
    - xx
    - ...
    - xx
  last_seen: epoch
device_options: {}
blocklist: []
passlist: []
queue: {}
frontend:
  port: 8099
experimental:
  new_api: true

last_seen: epoch was not part of my z2m addon config, it seems to get added by z2m automatically and even if I explicitly set it to disable it is being set to epoch automatically again.

[ciotlosm]

Are you sure the config is writable by the add-on? The default add-on config does not include this setting

[felixstorm]

Are you sure the config is writable by the add-on? The default add-on config does not include this setting

@ciotlosm Yes, definitely (that had been my first speculation as well). I even removed the line from the generated configration.yaml and it appeared again right after a restart of the addon despite definitely not being part of my options.json. I even searched the code of the addon to see if anything is dealing with last_seen in a special way before I found out that z2m is apparently setting it itself (this by the way also happens if new_api is set to false, but then the log does not get flooded).

And if you search the code for the log line, you can see that it appears right after a set settings statement: settings.set(['advanced', 'last_seen'], message);

[filoor]

I did update my zigbee2mqtt to version "1.15.0-dev" and i have added frontend: port: 8080 experimental: new_api: true

to my config but i can not access the frontend on port 8080 only if I set new_api: false then the frontend will load without any data

I run my zigbee2mqtt on a raspberry pi.

[filoor]

I did update my zigbee2mqtt to version "1.15.0-dev" and i have added frontend: port: 8080 experimental: new_api: true

to my config but i can not access the frontend on port 8080 only if I set new_api: false then the frontend will load without any data

I run my zigbee2mqtt on a raspberry pi.

After waiting 10 min it works sorry

[sjorge]

@nurikk something is off with the color_hs color mapping.

The reds are off compared to color_xy.

However for example manuals setting red hue=0, sat=100 gives the correct result. But via the expose interface they are slightly more pink.

[nurikk]

@nurikk something is off with the color_hs color mapping.

The reds are off compared to color_xy.

However for example manuals setting red hue=0, sat=100 gives the correct result. But via the expose interface they are slightly more pink.

xy to rgb conversion has some gamma corrections, this is why colors can slightly differ. Recently I've made some fixes, so colors should match more closely. Anyway, it's more than enough to test your light bulbs after joining (I assume the main interface to interact with light will be smart home system)

https://github.com/Koenkk/zigbee-herdsman-converters/blob/f59cdcb918b95b309598284f9d122f3e0d7d9d0b/converters/utils.js#L44

[vidalpascual]

It's possible to use the frontend in the Docker version? I get a failure when try to expose 8080 port.

[pedrolamas]

@vidalpascual I'm using it right now! It depends on your whole system and docker stack, but might be worth trying a different port as you might have something else already on port 8080?

[vidalpascual]

@PedroLamas I'm an idiot... I have Z2M in host mode. I don't need to expose anything... get it running. :)

[andker87]

I have a problem with the nginx configuration suggested. if I use

location /api {
    proxy_pass         http://localhost:8080/api;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

it goes into conflict with Home Assistant's api, so home assistant does not start. if I change the location value the zigbee2mqtt page integrated in Home Assistant with panel_iframe remains empty

[sjorge]

@nurikk colors are now consistent between hs and xy! But some new bugs showed up:

• brightness slider broken, but % buttons do still work
• using the full color picker will change the color but immediately revert

[ellnic]

Thanks all for the great work :)

Would it be possible to add a section in the state tab of the Hue outdoor motion sensor to get current / change sensitivity as detailed here?

[sjorge]

Would it be possible to add a section in the state tab of the Hue outdoor motion sensor to get current / change sensitivity as detailed here?

That’s probably something that would automatically happen once those are exposed via #4466

[ellnic]

Oh, I hadn’t seen that. Thanks for pointing it out. 👍

[sjorge]

Another bug of sorts: If you open a device page and then remove the device, it will end up on the 'unknown device' message after a successful removal. Ideally it would redirect to the devices overview.

[kkellner]

I have an issue with last_seen. When first viewing the webbased frontend, all device's last_seen values are N/A. If I stay on the web view, devices start to update the last_seen with just now. But if I refresh the browser window, all devices go back to N/A.

I have last_seen: ISO_8601_local set in the advanced section of config.

Example:

[kennymc-c]

@kkellner I can also reproduce this error

[timoline]

https://github.com/nurikk/z2m-frontend/issues/18

I have an issue with last_seen. When first viewing the webbased frontend, all device's last_seen values are N/A. If I stay on the web view, devices start to update the last_seen with just now. But if I refresh the browser window, all devices go back to N/A.

I have last_seen: ISO_8601_local set in the advanced section of config.

Example:

[nurikk]

Another bug of sorts: If you open a device page and then remove the device, it will end up on the 'unknown device' message after a successful removal. Ideally it would redirect to the devices overview.

This isn't a bug, I like this behaviour because it's really helps me during firmware development (I'm constantly doing rejoin cycles with my development kit), just keep page open and it's renders again as soon as device has joined back to the network

[nurikk]

I have an issue with last_seen. When first viewing the webbased frontend, all device's last_seen values are N/A. If I stay on the web view, devices start to update the last_seen with just now. But if I refresh the browser window, all devices go back to N/A.

I have last_seen: ISO_8601_local set in the advanced section of config.

Example:

Option have to be enabled to fix this issue, may be @Koenkk can help to solve this?

device_options:
    retain: true

[nurikk]

@nurikk colors are now consistent between hs and xy! But some new bugs showed up:

• brightness slider broken, but % buttons do still work
• using the full color picker will change the color but immediately revert

Can you tell me more about brightness issue? For me it works fine

[sjorge]

This isn't a bug, I like this behaviour because it's really helps me during firmware development (I'm constantly doing rejoin cycles with my development kit), just keep page open and it's renders again as soon as device has joined back to the network

Can we add some padding to the text then? Now it's squashed against the side and top nav.

Can you tell me more about brightness issue? For me it works fine It working fine on firefox on macOS, but it's broken on firefox/safari on iOS...

I also noticed an odd issue with the colors mixer when changing the brightness on firefox on macOS. I will try to do a recording on the ipad too for the slighter once I figure out how.

Here is one on my mac for the color picker changing with brightness https://i.imgur.com/G2WGdX1.mp4 brightness in indeed part of the xy or hue/sat mix for colors, but I'd expect them to be consistent though.

[kkellner]

@nurikk I added the following but the behavior did not change. The last_seen is still lost upon UI refresh.

device_options:
    retain: true

[Koenkk]

Unknown last seen option has been fixed in the latest dev branch.

[hacker-cb]

Unknown last seen option has been fixed in the latest dev branch.

@Koenkk , so no need anymore to set device_options.retain: true, right? All should work without it?

[Koenkk]

Unknown last seen option has been fixed in the latest dev branch.

@Koenkk , so no need anymore to set device_options.retain: true, right? All should work without it?

yes

[filoor]

If I enable new_api: i will get high cpu usage and my zigbee2mqtt gets really slow :

i think because the amount off mqtt messages:

this is my config ` homeassistant: true permit_join: false mqtt: base_topic: zigbee2mqtt server: 'mqtt://192.168.0.9' serial: adapter: deconz experimental: new_api: true frontend: port: 8080 devices: devices.yaml groups: groups.yaml device_options: retain: false advanced: report: true log_level: info availability_timeout: 60 channel: 25 pan_id: 6755 network_key:

• 7
• 3
• 2
• 12
• 8
• 11
• 13
• 15
• 0
• 12
• 1
• 6
• 8
• 11
• 12
• 13 elapsed: true last_seen: epoch

[andker87]

I have a problem with the nginx configuration suggested. if I use

location /api {
    proxy_pass         http://localhost:8080/api;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

it goes into conflict with Home Assistant's api, so home assistant does not start. if I change the location value the zigbee2mqtt page integrated in Home Assistant with panel_iframe remains empty

Am I the only one with this issue? I cannot find any way to solve this problem.

[pedrolamas]

@andker87 the info you provided is not enough... Are you using Hass.io? If not, how are you launching Home Assistant? For docker stuff, can you provide the docker commands you are using to launch zigbee2mqtt, homeassistant, and nginx, or the equivalent docker-compose file?

[andker87]

@andker87 the info you provided is not enough... Are you using Hass.io?

I'm using HA core in venv. I think the problem is this: in the configuration provided to configure the reverse proxy, zigbee2mqtt needs to call domain:port/api, but domain:port/api is the same path that also uses home assistant, so it creates a conflict that does not allow HA boot. if in the location configuration of the reverse proxy I indicate location /z2m_api rightly it does not work, because the frontend makes the call to domain:port/api. probably I'm wrong, but I think it is necessary to vary the api path in /z2m_api at code level. I hope I have explained myself

[pedrolamas]

If the conflict is the zigbee2mqtt server port, you can change that in the config with something like:

frontend:
  port: 8081

That will fix any conflict with ports in use between HA and Zigbee2MQTT.

As for Nginx, if you are using HTTPS, the only way around that will be to use a different domain (hence why in the documentation you see server_name zigbee2mqtt.mydomain.com;)

[andker87]

If the conflict is the zigbee2mqtt server port, you can change that in the config with something like:

frontend:
  port: 8081

That will fix any conflict with ports in use between HA and Zigbee2MQTT.

As for Nginx, if you are using HTTPS, the only way around that will be to use a different domain (hence why in the documentation you see server_name zigbee2mqtt.mydomain.com;)

the problem is not the port, the problem is in the url. if I enable another nginx server it will not start because both servers use ports 80 and 443. if I understand correctly the purpose of the reverse proxy is to expose only one port (the 443 to be in https) and then to forward the calls according to the url called, for this I have enabled only 1 domain, in which I have inserted as main location home assistant, then the file editor etc... same thing I should do for zigbee2mqtt, but the path of the api conflicts with that of home assistant

[bartplessers]

Lovely! Just found out about this feature. Thanx a lot. First impression

• listview ("datatables"?): possible to provide a search box?

• map:

  • overwelming, and therefore (at this moment) not very usefull
  • buggy. changing selection at top changes also "zoomfactor" of map
  • switching tab messes up map (see attachments) from to

• for the moment not compatible with nginx? I have nginx running on another machine, handling reverse proxy & certificates. It must be possible to publish this frontend without any modification to nginx. Another addon "Zigbee2MqttAssistant" does is also, using ingress, so it should be possible here to!

• last seen not working?

But still: a very cool feature! looking forward to next version.

Kind regards, Bart Plessers

[Valen13776]

I am using SSL to access Home Assistant. When enabled in the addon conf

frontend:
  port: 8499
experimental:
  new_api: true

Going to the web UI, I get the error: 502: Bad Gateway. How to make SSL and Frontend friends?

[felixstorm]

I also experience exactly the same problem as @lustyffh above: As soon as I set new_api to true, the log fills up very quickly (more than 100 messages per second) with Set last_seen to epoch, practically rendering the system unusable. As soon as I disable the new API again, everything is fine again (but the frontend does not work - probably this is excepted).

Doing further troubleshooting, it looks like in my case the message flooding had been caused by zigbee2mqttassistant for whatever reason. I have stopped it now (won't need it anymore anyway) and up to now there are no more Set last_seen to epoch messages.

[felixstorm]

If I enable new_api: i will get high cpu usage and my zigbee2mqtt gets really slow :

i think because the amount off mqtt messages:

@filoor Do you have zigbee2mqttassistant running in parallel by any chance? For me, zigbee2mqttassistant was the source of all the messages and stopping it fixed it...

[deadly667]

I found one problem. Ota update button not working. One of my Ikeas got OTA update but when I click on OTA update it do nothing. Also in log there is no sign of any action nor error.

Running docker latest version. zigbee2mqttassistant stopped. I started zigbee2mqttassistant and with it I could run OTA update without any problem.

Edit:

this is in browser console

[nurikk]

I found one problem. Ota update button not working. One of my Ikeas got OTA update but when I click on OTA update it do nothing. Also in log there is no sign of any action nor error.

Running docker latest version. zigbee2mqttassistant stopped. I started zigbee2mqttassistant and with it I could run OTA update without any problem.

Edit:

this is in browser console

How do you open frontend? Is it any iframe if sandboxed environment?

[deadly667]

HomeAssistant Iframe. Yes, I can confirm that if I open it directly then update is started also I got confirm pop up.

So problem is if you use it in iframe.

[zfrank2601]

I installed a fresh ubuntu server 20.04 lts and checked out zigbee2mqtt. Then I configured my dongle, devices,mqtt, this is all working.

But experimental frontent stuck on loading and I dont see devices, networkmap not work. I see only the menu. Then I switch to dev-branch, the same problem? Any idea about the problem?

[joshuakoh1]

Would like to confirm that frontend works great except for the missing last seen value

https://github.com/nurikk/z2m-frontend/issues/72

[CSchlipp]

Not sure I saw it working before, but with "version": "1.15.0-dev" the color cannot be set/read from the WebUI. Instead, it prints an error "Unknown feature json(color)" with the value of the full JSON.

Is color not implemented in the UI or is this a regression to previous versions?

[salopette]

my Osram lamps are also no longer displayed correctly. Before there were color fields to switch!

[nurikk]

my Osram lamps are also no longer displayed correctly. Before there were color fields to switch!

This feature is still in design phase, yet to be implemented