Custom backgrounds

[sztupy]

I have recently made some updates to NSPanel Blueprint to allow easier swapping of the background images (among other updates allowing unattended HMI editing). You can check the PR over here: Blackymas/NSPanel_HA_Blueprint#2576

If this is a feature you might want to implement feel free to reach out I'm happy to fine tune the tooling to support this project as well.

[tpanajott]

Hey, thanks for reaching out! Seems awesome, om sure @cablesandcoffee would appreciate it. Is there a way to access the Nextion editor inside the docker via something like VNC? Would be an awesome feature.

[sztupy]

Yes, you can RDP into it (documenation at https://github.com/sztupy/nextion-editor-docker?tab=readme-ov-file#run-graphical-mode), although due to resolution differences any automation script you create via RDP needs some fine tuning when running in unattended mode, but there's some tooling for that as well.

[sztupy]

But if you just want to Nextion Editor without having a Windows box, to do some changes it is a viable alternative, although a bit slower than running it natively

[tpanajott]

But if you just want to Nextion Editor without having a Windows box, to do some changes it is a viable alternative, although a bit slower than running it natively

That's manageable as I'm using Linux and although I could probably get it running through wine I've not felt like doing all that hassle.

[cablesandcoffee]

This is cool! Smart initiative! I'm looking forward to test the docker thing, I have automated the image creation in our project with some gimp scripts so its really easy to recreate all the images with different backgrounds. But currently I do the replacing of images in nextion manually. Do I understand it correctly that there's some kind of tasker that is used to create mouse click in a specific order to replace all the images or how is that done?

[sztupy]

Exactly. For changing the images the following is done:

1. There's an error message saying that the video features are not supported, this will be dismissed
2. It will wait for the panel on the right hand side to get enabled. This usually signals the file is fully loaded
3. Right clicks on the Images tab, presses the down button 6 times (this will get to "Delete All"), then presses Enter and Yes on the confirmation dialog
4. Right clicks again on the Images tab, selects "Add".
5. In the open file dialog it will enter "pics/0.png" ... "pics/32.jpg" ... "pics/42.png" (the same files needed by NSPanel Blueprint), then press Enter
6. Waits for the import to finish (there will be a dialog that needs Okaying)
7. Press CTRL+S (save HMI)
8. Press Alt, then Enter twice (selects the menubar and then File -> TFT Output)
9. Confirms the dialog

And done. It tries to use Microsoft's UI Automation framework as much as possible so most steps are fairly stable, but occasionally it has to resort to manual clicks and keypresses, however I did manage to fine-tune it so it works quite well (usually gets it right 9 out of 10 times) for NSPanel Blueprint on a 10yr old mid-range PC, and works okayish on my Intel NUC where I run Home Assistant on (usually passes 2 out of 3 times)

The main change that would be needed for this project is to change the hardcoded filenames (0.png -> 42.png with 32 being a jpg as used by NSP Blueprint) to something that you would pass on in the parameters or auto-discovered in the input folder or something similar, the rest of the process should work just fine regardless the input HMI.

The other scripts have a couple additional ways of doing minor code changes, and even minor edits to the components as well. If you have something that needs manual updates maybe have a look at them.

I have not yet tried to check how well this would run under Github Actions, maybe some of the timings would need change, and I'm sure adding a couple retries would likely be beneficial. Here is another PR with a script that would show how to run the docker container and do retries: https://github.com/Blackymas/NSPanel_HA_Blueprint/pull/2578/files

[cablesandcoffee]

Oh nice sounds awesome. Yeah for us it should just be the amount of pictures that has to change. All our pictures are bmp and we have a lot more I think.

Okay I dont know much about Github actions but your saying it should be possible to use your docker container in a workflow as well? That would be super nice!

[sztupy]

The only requirement is that this only works on x86_64 platform right now, so no ARM unfortunately (not even ARM OSX with Rosetta enabled). Hopefully this will be fixed once Wine 11 and/or Box32 gets released, but Github actions should be fine.

[cablesandcoffee]

So as I see it the benefits are two:

1. Users can choose there own background pictures and get a new tft file with the chosen background.
2. Our own tft creations that we deliver in NSPM can be automated with the help of number 1 and Github Actions.

To achieve this the creation of the pictures must be taken care of as well. We are using a GIMP to create our pictures. Currently we change the background picture on the background layer, then run a GIMP script. After that we run some scripts to convert all the created pictures to bmp with some specific settings and change the names on all the pictures so they have the same number as in Nextion Editor. This process must be in this solution as well some how.

[sztupy]

Yes, I have made a proof of concept add-on for NSPanel Blueprint over here that does just that: https://github.com/sztupy/nextion-editor-docker/tree/main/hassio-nspanel-blueprint-generator It is very rudimentary, and only works on Home Assistant running on x86_64 (like an Intel NUC or similar), so not the best (as most HA installs run on ARM as far as I know), but it works for me, and I use to to generate different backgrounds to all of my panels at home.

For naming: they need to be named sequentally starting from 0, so 0.bmp, 1.bmp, etc, that's the only requirement. Exporting them from NSPanel will return them in this format anyway, regardless of what names you used when uploading them.