Developing UI via file editor needs reboot on every change

[samturner3]

When I am trying to develop UI on a Lanbon L8, I need to reboot to see every change when editing the page in file editor.
When I ctrl+s and click reload pages, sometimes it updates however there is always artifacts from the previous render that is not updated.

Is this expected? Is there an easier way?
This means it takes forever to develop new screens especially since you need to work in x,y units and its not too intuitive to visualise just from looking at the code.

Side question, is the position x,y the actual pixels (so would be out of screen resolution) or our of 255 for each direction?

I had a look and cloned Simulator project for LVGL embedded GUI Library but not sure if this is something that could help? Ideally we would have our page file and have it simulated on our computer so we could quickly develop screens, then copy and paste onto the device once we were happy.
This would be useful especially when you have the device installed on the wall, rather than at your desk next to the computer.
Query how the device screenshots on the docs website got captured?

PS: is there a community place where we could share and colab our screen layouts? (beyond the examples in docs)

[fvanroie]

When I click reload pages, sometimes it updates however there is always artifacts from the previous render that is not updated.
Is this expected? Is there an easier way?

If you change the page, id or obj properties then you should use Clear Pages first. This makes sure all objects are removed first.
Use Reload Pages to update the objects with any of the other properties that were changed/added. It acts kinda like a merge changes.

I don't need to reboot the plate when I'm designing pages. I use a combination of the File Editor with Reload Pages and Clear Pages.
For small changes I also use the Serial or Telnet console to manually tweak an object property. Once I'm happy I add it to pages.jsonl.

Is the position x,y the actual pixels (so would be out of screen resolution) or our of 255 for each direction?

x and y are indeed in pixel coordinates of the screen resolution.

How the device screenshots on the docs website got captured?

From the Screenshot option in the Web UI. These are just BMP images shown in the browser, so Right-click and Copy/Save As... should work.

Is there a community place where we could share and colab our screen layouts? (beyond the examples in docs)

There is the Show and Tell section on this board. You can post jsonl and screenshots there.

I had a look and cloned Simulator project for LVGL embedded GUI Library but not sure if this is something that could help?

There is the option to run openHASP on the PC, but it is underdeveloped and missing some features. So it wouldn't be a true replacement to be used as a design environment...

[nagyrobi]

Yes, reload the corresponding integration in HA settings.

[fsadak]

Thank you for your answer.

I have another question regarding this subject. I am transferring the real time in %H:%M format and the current seconds in %S format to one of the two components I have specified on the screen, but the hour and minute information on the screen is updated when the time advances by one minute in HA, there is no problem with this, but the seconds are only updated along with it. How can I update the seconds in real time?

Best Regards...

[nagyrobi]

You need to see the refresh update period of the sensor or template you use in HA.

[fsadak]

Thank you for your reply. I have searched many sources but have not made any progress. I finally decided to remove the seconds section from the gui. Currently the clock on the screen refreshes every minute.

Best wishes...

[nagyrobi]

By default, HA refreshes every minute the templates.