[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

[salopette]

@nurikk

But it did show color fields in the previous version, why is that gone now?

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

This seems to be fixed in the last version c702bad.

[salopette]

Now is back in part. With the Osram GU10, the color fields are there, but with the Osram e27 there aren't any. I cleaned browser cashe!

[LostJen]

Has anyone found a workaround for the endless wait if you access the page from behind a ssl enabled reverse proxy? Going straight to the IP it works, but the 'proper' dns name shows the ui, but no data with a spinning icon that never goes away.

[pedrolamas]

@LostJen my setup is as such (nginx with SSL pointing to z2m frontend), however I am using z2m via Docker, so that might make a difference!

Docker compose and nginx configuration are hosted here: https://github.com/pedrolamas/nanopineo2-docker-config/blob/master/docker-compose.yml

[joshuakoh1]

How do I upgrade the frontend? I've done a git pull of z2m but the frontend still has the missing last seen issue that was supposedly already fixed. https://github.com/nurikk/z2m-frontend/issues/72

[nurikk]

How do I upgrade the frontend? I've done a git pull of z2m but the frontend still has the missing last seen issue that was supposedly already fixed. nurikk/z2m-frontend#72

you can use zigbee2mqtt dev branch

[LostJen]

@LostJen my setup is as such (nginx with SSL pointing to z2m frontend), however I am using z2m via Docker, so that might make a difference!

Docker compose and nginx configuration are hosted here: https://github.com/pedrolamas/nanopineo2-docker-config/blob/master/docker-compose.yml

Well I went ahead and switched over to docker although it caused a few issues with permissions on log files when I had to delete the container and restart my service for the night routines. The next morning even the service had failed. Docker wouldn't work either so I ended up having to reflash my CC2652R. Then the docker build magically worked. However even though HA is happy and I have the local pages working fine, the reverse proxy still doesn't. Did you have to add any special redirections to your nginx site configuration file?

[pedrolamas]

@LostJen I use pretty much the same nginx settings for all my containers, they are described here.

Alongside those settings, I have these for SSL locally!

The SSL certificate is generated by a separate container running acme.sh.

[green-mini-pig]

There is an issue with ip4/ip6 at my raspberry. Connection to mqtt server is Ok (IPv4), but frontent bind to IPv6 [TCP *:8080 LISTEN] and I am unable to change it to IPv4.

Feature (or advice) request:

frontend:
  port: 8080
  host: 127.0.0.1 <= something like that, please

Thanks !

[green-mini-pig]

nginx works well this way (as per docs):

location / {
  proxy_pass http://localhost:81/;
  ...
}

but this gives message "Loading devices takes too long time. Consider reading documentation"

location /z2m/ {
  proxy_pass http://localhost:81/api;
  ...
}

Any way to make it working for /z2m/ ?

[nonflammable]

Feature request:

• show current version on Settings tab or Home screen
• add update button (+ new version info/changelog) + master/dev branch switch
• add progress bar when updating OTA firmware (% or/and ETA)

[sjorge]

add progress bar when updating OTA firmware (% or/and ETA) I think this is already implemented? I remember having one last time I updated a device.

[Matssa56]

Hey guys I can't seem to make the ingress work, I have the following in the logs: 20-11-03 17:39:37 ERROR (MainThread) [supervisor.api.ingress] Ingress error: Cannot connect to host 172.30.33.3:8099 ssl:default [Connect call failed ('172.30.33.3', 8099)] I'm using the edge version.

[ciotlosm]

@Matssa56 Ingress takes a few minutes to load, especially on rpi3 or older. Give it 5-10 minutes before you try loading the interface, just to make sure. It all depends also on the amount of other add-ons and their resource consumption.

[Matssa56]

@Matssa56 Ingress takes a few minutes to load, especially on rpi3 or older. Give it 5-10 minutes before you try loading the interface, just to make sure. It all depends also on the amount of other add-ons and their resource consumption.

Hi thanks for your help. I'm on a rpi4 with 4Gb of RAM, it can take it ;-) When accessing Deconz ingress or even ziggbee2mqttassistant it works fine and onlyy takes a few seconds.

Here, I'm getting a bad gateway error (502), which I don't have with other ingress stuff :S

////EDIT My bad, ingress didn't work cuz the whole addon didn't work (forgot to add the adapter stuff since I'm using Conbee stick). Nut yeah now it works but takes time to load (even though I didn't add any devices ^^)

[jarrah31]

How do I set includeRoutes to be true please?

My map view just has a collection of devices with no links between them, and when I press the refresh icon, the green box pop-up and logs say Starting network scan (includeRoutes 'false')

Thanks.

[nurikk]

How do I set includeRoutes to be true please?

My map view just has a collection of devices with no links between them, and when I press the refresh icon, the green box pop-up and logs say Starting network scan (includeRoutes 'false')

Thanks.

You don't need this property be enabled in order to render map.

[nurikk]

I'm currently working on migrating ui framework to material ui Development in very early stage, but already can experience upcoming look and feel. Feel free to install and give feedback npm install zigbee2mqtt-frontend@1

[salopette]

Hello, what's the right way to install this?

pi@raspberrypi:~ $ npm install zigbee2mqtt-frontend@1

or:

pi@raspberrypi:/opt/zigbee2mqtt $ npm install zigbee2mqtt-frontend@1

[sjorge]

The 2nd one

[salopette]

ok i made the second variant, but now there is a problem or conflict with the zigbee2mqtt update.

[salopette]

pi@raspberrypi:/opt/zigbee2mqtt $ sudo systemctl stop zigbee2mqtt pi@raspberrypi:/opt/zigbee2mqtt $ cp -R data data-backup pi@raspberrypi:/opt/zigbee2mqtt $ git checkout HEAD -- npm-shrinkwrap.json pi@raspberrypi:/opt/zigbee2mqtt $ git pull remote: Enumerating objects: 5, done. remote: Counting objects: 100% (5/5), done. remote: Total 5 (delta 4), reused 5 (delta 4), pack-reused 0 Entpacke Objekte: 100% (5/5), Fertig. Von https://github.com/Koenkk/zigbee2mqtt ee50fb4..21b8e01 dev -> origin/dev Aktualisiere ee50fb4..21b8e01 Fast-forward lib/extension/publish.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) pi@raspberrypi:/opt/zigbee2mqtt $ npm ci npm WARN prepare removing existing node_modules/ before installation npm ERR! cipm can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with npm install before continuing. npm ERR! npm ERR! npm ERR! Invalid: lock file's zigbee2mqtt-frontend@0.2.74 does not satisfy zigbee2mqtt-frontend@^1.0.2 npm ERR!

npm ERR! A complete log of this run can be found in: npm ERR! /home/pi/.npm/_logs/2020-11-11T16_35_52_802Z-debug.log pi@raspberrypi:/opt/zigbee2mqtt $

[sjorge]

You also need git checkout HEAD -- package.json before npm ci, and after you need to install the newer frontend again.

[salopette]

Thank you! You are my savior!

does the update script have to be adapted?

`#!/bin/bash -e

if [ -d data-backup ]; then echo "ERROR: Backup directory exists. May be previous restoring was failed?" echo "1. Save 'data-backup' and 'data' dirs to safe location to make possibility to restore config later." echo "2. Manually delete 'data-backup' dir and try again." exit 1 fi

echo "Stopping Zigbee2MQTT..." sudo systemctl stop zigbee2mqtt

echo "Creating backup of configuration..." cp -R data data-backup

echo "Updating..." git checkout HEAD -- npm-shrinkwrap.json git checkout HEAD -- package.json git pull

echo "Installing dependencies..." npm ci

echo "Restore configuration..." cp -R data-backup/* data rm -rf data-backup

echo "Starting Zigbee2MQTT..." sudo systemctl start zigbee2mqtt

echo "Done!"`

[sjorge]

Well package.json gets update because an updated package gets installed manually by running npm install zigbee2mqtt-frontend@1 but normall this won't happen, as we just run npm ci to sync what is described in package.json with the actually installed state,.. since this file in the repo there is now a merge conflict...

Which is to be expected I guess, you could also git stash and pop but then you miss updates done in the repo.

[salopette]

Ok, this is very complicated for me. I can not do it.

Can you uninstall the (pi @ raspberrypi: / opt / zigbee2mqtt $ npm install zigbee2mqtt-frontend @ 1) again and just like before: use port: 8080 in the configuratins.yaml

[jarrah31]

How do I set includeRoutes to be true please? My map view just has a collection of devices with no links between them, and when I press the refresh icon, the green box pop-up and logs say Starting network scan (includeRoutes 'false') Thanks.

You don't need this property be enabled in order to render map.

That's good to know, thanks.

Do you have any suggestions as to why my map isn't showing links between devices please? I'm using the latest 16.1 Z2M software if it helps.

[nurikk]

How do I set includeRoutes to be true please? My map view just has a collection of devices with no links between them, and when I press the refresh icon, the green box pop-up and logs say Starting network scan (includeRoutes 'false') Thanks.

You don't need this property be enabled in order to render map.

That's good to know, thanks.

Do you have any suggestions as to why my map isn't showing links between devices please? I'm using the latest 16.1 Z2M software if it helps.

Try to switch to dev branch

[jarrah31]

Turns out I needed to clear the browser cache because the IsASibling option now works.

[nurikk]

I've just merged few fixes for map. Kindly help me to test, if you see any oddness kindly attach screenshot and state from settings page.

And yes, this example map has very few links Before: After:

[sjorge]

Before:

After:

Not really an improvement

[sjorge]

here is what it looks like using graphv circle output: https://pkg.blackdot.be/cores/networkmap.png (large file!)

I'm using source routing, and most devices are nicely connected with routes aside from a few.

[pedrolamas]

I'd recon that the "circle" layout approach of the ha_zigbee2mqtt_networkmap is more adequate:

[nurikk]

A new map iteration is ready to test

[salopette]

A new map iteration is ready to test

Then only helps to update the page and reload the map.

zigbee2mqtt version 1.16.1-dev commit: 4c9dd74 coordinator type zStack3x0 coordinator revision 20201026 frontend version 0.2.83

[nurikk]

A new map iteration is ready to test

Then only helps to update the page and reload the map.

zigbee2mqtt version 1.16.1-dev commit: 4c9dd74 coordinator type zStack3x0 coordinator revision 20201026 frontend version 0.2.83

Would you mind to click "download state" link and attach it here?

[salopette]

https://cloud.mail.ru/public/1Ais%2F5NpdBEPSc

I've just tried again, but haven't been able to reproduce the bug.

[nurikk]

https://cloud.mail.ru/public/1Ais%2F5NpdBEPSc

I've just tried again, but haven't been able to reproduce the bug.

if there is no issue, can you attach screenshot how your map looks like?

[salopette]

[Anjerlaan]

• add update button (+ new version info/changelog) + master/dev branch switch

I have been playing around with the frontend. Looks very nice! Only at the settings page I have the following feedback:

LOG level select box:

• Selected is level not updated in configuration.yaml
• Selected level is not updated in front end select box
• Update button is missing
• Selected level in RAW file shows “info” but should be “debug

Network map:

During scan one device is reported with no LQI. And shown in map as not connected in network. But that is not true. It does have An LQI, according to device info and also in graphviz Network scan

[salopette]

Hi, can you take another look at the Seirene (SmartThings SZ-SRN12N), the state is not displayed.

sensor:

• platform: "mqtt" state_topic: "zigbee2mqtt/" availability_topic: "zigbee2mqtt/bridge/state" unit_of_measurement: "lqi" value_template: "{{ value_json.linkquality }}" icon: "mdi:signal"

THX!

[Anjerlaan]

@Koenkk, am I missing something or is it not possible to rename a group in the webbased front end?

[Koenkk]

@Anjerlaan check the groups tab:

[Anjerlaan]

@koenkk, I have version 1.16.2....here is the picture of my frontend - groups item....I don't see any modify icons

[salopette]

Try clearing your browser cache.

[ellnic]

Apologies if this is already in the pipeline or has been mentioned before, but is it possible to have a timeout for the network join? I almost left it open the other day as I got distracted by a call when pairing a device. A user definable timeout like the z2massistant had, would be great.

[kwetnico]

what is the procedure on a raspberry to install the latest version of Frontend without installing Z2M Dev. I am using the latest master version of Z2M (1.16.2) but Fronted is in 0.2.100? Thank you

[jonathan-gatard]

Hi ! On my browser the logs doesn't display correctly: The "INFO" line is red instead of blue.

[dirkclemens]

Hi all, as I wanna use the frontend either, I installed the latest dev docker image from docker pull koenkk/zigbee2mqtt:latest-dev but I am not able to get access to the front end. I configured the port in the configuration.yaml, but no success. I need the frontend hoping to be able to upload a new firmware to my new TuYa TS0601 thermostat (HY368). I get errors when initiating the OTA using the zigbee2mqttadmin frontend. Any hint? Thanks in advance