zigbee2mqtt-frontend
zigbee2mqtt-frontend copied to clipboard
nurikk
Device Images Transparency
Is your feature request related to a problem? Please describe. Nice Web Front End! I have some feedback which may enhance the user experience of the Web Front End UI
Describe the enhancement you'd like
- Is it possible to make the Device Pictures transparent PNG, instead of white BG? I know there are of course tonnes of images to convert, but maybe image software like photoshop can convert it in batch mode? This way they have more contrast in the Dark Theme mode (see example picture below)
- Why does the (top) menu item "Zigbee2mqtt", point to the same page as the Devices link? Is it an idea to use this menu item to link to the Z2M page (https://www.zigbee2mqtt.io) or Github page? This way in case of questions or bugs, users can go straight away to the Z2M support/github pages Maybe this link is already somewhere in the Web Front End, but I didn't find it yet And add a picture like
Or your own created Web Front End logo
- As i Know, the pictures are comming from zigbee2mqtt.io. I tried to convert these pictures to png, but it was rejected by koenkk. In zigbee2mqtt.io only *.jpg with 150x150px are allowed.
Images with transparent background is a good idea and better looking, though as Burki24 said, the images are from zigbee2mqtt.io. Maybe there should be a separate repo with images that later can med merged with zigbee2mqtt.io? @Koenkk needs to take a decision I think. I am willing to help with the cropping! :)
Most images come from https://github.com/Koenkk/zigbee2mqtt.io/tree/master/public/images/devices indeed (+- 1800 images).
I'm not sure if making all background transparent is a good idea, it will be hard to see black devices when using the black theme (e.g. https://www.zigbee2mqtt.io/devices/GL-C-008P.html)
Most images come from https://github.com/Koenkk/zigbee2mqtt.io/tree/master/public/images/devices indeed (+- 1800 images).
I'm not sure if making all background transparent is a good idea, it will be hard to see black devices when using the black theme (e.g. https://www.zigbee2mqtt.io/devices/GL-C-008P.html)
There for you need 2 sets of images...for the dark and light theme...in the css you can switch the set
Most images come from https://github.com/Koenkk/zigbee2mqtt.io/tree/master/public/images/devices indeed (+- 1800 images).
I'm not sure if making all background transparent is a good idea, it will be hard to see black devices when using the black theme (e.g. https://www.zigbee2mqtt.io/devices/GL-C-008P.html)
There for you need 2 sets of images...for the dark and light theme...in the css you can switch the set
Oh no not two sets 😬
@Koenkk black devices will be less visible of course, but will it be that bad? I mean white devices do look good on white background? It is possible to put a white shadow around the darker devices but I don't think it's necessary
@T-IOOO
I mean white devices do look good on white background?
Yes, since all products use white backgrounds by default so they are made for that.
I'm willing to experiment with this, but there should definitely be an automated way to do this. Going through 1800+ images isn't feasible.
I think, it will be possible to have black devices on black ground. Also, if they are original placed on white beckground. And also it will be possible to change that within a batch.
But it will be much easier to change from *.jpg to *.png and leave the backgrpund transparent.
@Koenkk
I'm willing to experiment with this, but there should definitely be an automated way to do this. Going through 1800+ images isn't feasible.
Do you think, it will be possible to change from jpg to png? If so, I will transform all existent pictures to png with transparent background.
@Burki24
Do you think, it will be possible to change from jpg to png?
I don't see why that would be a problem
@Koenkk
I don't see why that would be a problem
Great, so I will start to transform all available pictures from jpg to png, erasing the coloured background. Maybe need 2 days for that. If I finished, we can replace the pictures. Is that okay for you?
@Burki24 only if there is an automated way to erase the white background. Note that I manually add images for new supported devices in every release (+- 50 images), having to make all background transparent means a lot of additional work. Maybe something like https://clay-atlas.com/us/blog/2020/11/28/python-en-package-pillow-convert-background-transparent/ could do it
batch conversion of .jpg will not be good at all since some of the images are heavily compressed and therefore will leave ugly white artifacts. White devices would also be affected and render them invisible. I find it possible to manually go through 1800+ images and google up better highres images and crop them. Many devices uses same images. Few willing souls will do it! 😊
batch conversion of .jpg will not be good at all since some of the images are heavily compressed and therefore will leave ugly white artifacts. White devices would also be affected and render them invisible. I find it possible to manually go through 1800+ images and google up better highres images and crop them. Many devices uses same images. Few willing souls will do it! 😊
It belongs to the way, how to erase the background. If you make an erase with a smooth border, the border of the device placed in the picture will get an antaliasis effect. What I need to check, if there is a batch converter, able to do it automaticly. Maybe, you're right to change the existant pictures will not be that problem. But for the future, there we have to ad an instruction for all people expanding the converter and devices what form of pictures are allowd (like now: jpg, 150x150px). Something like *.png, 150x150px cleared background.
Eventually color depth, too. That will have an important impact regarding file-size and loading speed.
If it possible I would recommend to have higher images resolutions, then we can have nice crisp images even on retina, using @2x
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
![stale[bot] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hello. How did the discussion end? There are many of us who want to have transparent pictures of only 1800 images two people are 900, 5 people are 360. I like the idea of nurikk to increase the resolution. Let's break it down into parts and everyone will do their job. You just need to decide on the size. I think it would be a good idea to switch from JPG to PNG. None of us have 1800 devices, there are so rare ones that 1-2 people have. but there are common types of xiaomi that everyone has. Koenkk can upload new pictures with a non-transparent background but in PNG format and we will redo them gradually, something similar happened with translation into different languages, after scrolling through the pages, untranslated words appeared in the translation tab, and everyone could go in and fix it. When a picture appears without cropping, you can also go in and replace it with a cropped one. this process will probably be long, but gradually all the icons will be replaced. My idea is that if a user has 50 devices and 2 opaque devices, then everyone will want to fix the opaque image for their project and thus help the community. Also, so that there would be no control, you can appoint someone as a moderator so that he revises the picture for compliance with the standard, can correct it and add it completely, or if, for example, they sent 2 versions of pictures of the same device, then choose a better one.
P/S. I think it could be like a master/dev switch. This operation can start hidden with the jpg/png switch, and when ready to switch to general availability
I started, drew my devices, PNG, 256x256 https://github.com/xrust83/iconz2m
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
Does anyone really need this? the library contains several hundred png images 512*512 pixels. every time an update of zigbee2mqtt is released and new device support is added, I provide illustrations of these pictures. picture names change picture names in zigbee2mqtt only jpg is replaced by png, if you are interested in this topic you can add support for these pictures in frontend zigbee2mqtt. I will continue to monitor the relevance of updates
https://github.com/xrust83/iconz2m
Does anyone really need this? the library contains several hundred png images 512*512 pixels. every time an update of zigbee2mqtt is released and new device support is added, I provide illustrations of these pictures. picture names change picture names in zigbee2mqtt only jpg is replaced by png, if you are interested in this topic you can add support for these pictures in frontend zigbee2mqtt. I will continue to monitor the relevance of updates
https://github.com/xrust83/iconz2m
yes mate, we're discussing adoption and would really love to adopt your image database
Great news, I'm glad my work was needed. I will update it, if everything goes well in the future, help to set up automatic merging of pictures