edgetx icon indicating copy to clipboard operation
edgetx copied to clipboard

refactor(color): Use LVGL styles and objects for UI, legacy cleanup

Open philmoz opened this issue 2 years ago • 29 comments

This is a big refactor of the color UI code - hopefully without breaking too much; but there are bound to be some teething problems.

Main goals:

  • Use LVGL styles and objects for UI
  • Consistency
  • Cleanup legacy code
  • Groundwork for 3.0

For the most part things should look pretty much the same; however there are a few UI changes to note.

Focus border has been made thicker to be more visible: Screenshot 2023-12-12 at 11 31 04 am

Text color on active item is PRIMARY1: Screenshot 2023-12-12 at 11 32 01 am

Tick marks on sliders display over slider bar: Screenshot 2023-12-11 at 5 26 03 pm

When editing screen layouts the selected widget has the solid border and the others have a dashed border: Screenshot 2023-12-11 at 4 25 18 pm

Topbar battery icon shows battery level as a colored bar - green >= 60%, amber 25% - 59%, red < 25% (these are LVGL, not theme colors): Screenshot 2023-12-11 at 4 23 32 pm

Timer widget count up/down bar uses an LVGL arc instead of a PNG image.: Screenshot 2023-12-11 at 4 24 10 pm

Guage widget % value moved to above the bar - LVGL has no equivalent to the invertRect() function previously used. Screenshot 2023-12-11 at 4 24 46 pm

philmoz avatar Dec 12 '23 01:12 philmoz

From the screenshots, a lot of this looks better. However, till will have to wait until we branch off for 2.10 for merge, given the amount of change involved.

@JimB40 I noticed in https://github.com/EdgeTX/edgetx/issues/3220 you never did anything for the mixer lines... any thoughts re: changing the active mixer line font color to PRIMARY1?

pfeerick avatar Dec 12 '23 02:12 pfeerick

Updated USB SD connected display: screen-2023-12-12-191605

philmoz avatar Dec 12 '23 08:12 philmoz

@philmoz looks good to me! Looks like tremendous amount of work!

raphaelcoeffic avatar Dec 12 '23 11:12 raphaelcoeffic

As of last commit this is now 18K smaller than current main on TX16S.

philmoz avatar Dec 13 '23 23:12 philmoz

Using one of the debug tools in LVGL it's possible to visualise the screen redraw/refresh overhead. In the videos below, LVGL changes the color of any screen area that is being redrawn.

2.9 - yikes!: https://github.com/EdgeTX/edgetx/assets/9474356/26149f2f-d7cc-4c3a-b9d9-daf25420d57e

2.10 main branch - better: https://github.com/EdgeTX/edgetx/assets/9474356/874db46c-eb3d-4312-bd28-3dcfa9a0de7f

This PR: https://github.com/EdgeTX/edgetx/assets/9474356/e9838ac8-3148-4cd6-bfd4-402d31efa682

Lua widgets still redraw every 100ms (or so) - we really need a better display API for Lua apps.

philmoz avatar Dec 16 '23 04:12 philmoz

So there will be a performance boost after this PR is applied?

Using one of the debug tools in LVGL it's possible to visualise the screen redraw/refresh overhead. In the videos below, LVGL changes the color of any screen area that is being redrawn.

richardclli avatar Dec 18 '23 04:12 richardclli

So there will be a performance boost after this PR is applied?

Well the CPU will be doing less work refreshing stuff so there should be some improvement. How much is hard to determine - there are some pages that take a while to build; but this is LVGL overhead so they don't change.

On my TX16S this PR feels more responsive overall; but that could be my imagination :)

philmoz avatar Dec 18 '23 04:12 philmoz

Hi @philmoz ,

Lua widgets still redraw every 100ms (or so) - we really need a better display API for Lua apps.

I have developed a lua lvgl binding. It's not 100% finished yet, but I would love to hear from your input to make it better.

The binding will be upgraded to lvgl v9 soon, which has been improved a bit for bindings using the new property APIs.

XuNeo avatar Dec 19 '23 04:12 XuNeo

I have developed a lua lvgl binding. It's not 100% finished yet, but I would love to hear from your input to make it better.

The binding will be upgraded to lvgl v9 soon, which has been improved a bit for bindings using the new property APIs.

Thanks, it is on my radar to look all - does it support lvgl 8.2?

philmoz avatar Dec 19 '23 04:12 philmoz

I have just pushed a fix to make it compatible with v8.2. Not fully tested but the basic function can work now.

XuNeo avatar Dec 19 '23 06:12 XuNeo

My RM TX16S with DE language freezes when trying to display the SD card contents. Key SYS--> Open SD card directory. Only by removing the battery can it be revived. Is this known?

3DRacer avatar Jan 04 '24 16:01 3DRacer

My RM TX16S with DE language freezes when trying to display the SD card contents. Key SYS--> Open SD card directory. Only by removing the battery can it be revived. Is this known?

Are you using the latest version of this PR? Does it happen with the current nightly version? Can you try a different SD card?

philmoz avatar Jan 04 '24 20:01 philmoz

My RM TX16S with DE language freezes when trying to display the SD card contents. Key SYS--> Open SD card directory. Only by removing the battery can it be revived. Is this known?

Are you using the latest version of this PR? Does it happen with the current nightly version? Can you try a different SD card?

  • yes, that is the version from January 4th. Same problem with previous versions of this PR
  • SD content view is fine with latest nightly fa12b27
  • My SD is a sandisk16GB, formatted in 4GB with 4KB cluster
  • With another SD 16GB with FAT32 standard formatting the channel also freezes

Note: The problem occurs with several themes. With the edgetx standard themes (tested with blue) the display of the SD card content works perfectly.

3DRacer avatar Jan 05 '24 06:01 3DRacer

In outputs put a positive or negative value in Subtrim, in various channels. moving a stick makes this effect

https://github.com/EdgeTX/edgetx/assets/7953406/eb82920e-6220-4c89-b664-3bcbd48170be

tonims1 avatar Jan 30 '24 11:01 tonims1

In outputs put a positive or negative value in Subtrim, in various channels. moving a stick makes this effect

Are you using the latest version of this PR?

philmoz avatar Jan 30 '24 19:01 philmoz

Yes. The last one..

tonims1 avatar Jan 30 '24 20:01 tonims1

Yes. The last one..

That's strange. I saw this quite a while ago and fixed it - at least I no longer have the issue on my TX16S (mk2) or EL18.

What is the VERS string in the System -> Version page? What radio are you using?

philmoz avatar Jan 30 '24 22:01 philmoz

@tonims1 Can you please try the latest update to see if the problem is fixed on your radio.

philmoz avatar Jan 31 '24 01:01 philmoz

My RM TX16S with DE language freezes when trying to display the SD card contents. Key SYS--> Open SD card directory. Only by removing the battery can it be revived. Is this known?

@3DRacer This should be fixed in the latest commit to this PR.

philmoz avatar Jan 31 '24 03:01 philmoz

@tonims1Pots provar l'última actualització per veure si el problema s'ha solucionat a la teva ràdio.

Now it works perfectly. I have a RM TX16. Another thing I have noticed is that when you want to change models in manage models it is slower than in the current version, only when there is the image of the model, only text works perfectly

tonims1 avatar Jan 31 '24 07:01 tonims1

Now it works perfectly. I have a RM TX16. Another thing I have noticed is that when you want to change models in manage models it is slower than in the current version, only when there is the image of the model, only text works perfectly

I haven't noticed any significant slowdown on my TX16S - if you have time can you create short videos showing the difference.

philmoz avatar Jan 31 '24 10:01 philmoz

https://github.com/EdgeTX/edgetx/assets/7953406/8a820799-3d23-448b-aad2-7e787fc322e4 Main 2.10

https://github.com/EdgeTX/edgetx/assets/7953406/7fee8470-bd00-4df9-b95f-692f4ab6180e PR 4407

tonims1 avatar Jan 31 '24 11:01 tonims1

My RM TX16S with DE language freezes when trying to display the SD card contents. Key SYS--> Open SD card directory. Only by removing the battery can it be revived. Is this known?

@3DRacer This should be fixed in the latest commit to this PR.

no freeze anymore. works fine. thanks

3DRacer avatar Jan 31 '24 19:01 3DRacer

@tonims1 Can you zip up your MODELS and IMAGES folders and upload them here please.

philmoz avatar Jan 31 '24 20:01 philmoz

@tonims1Podeu comprimir les vostres carpetes MODELS i IMATGES i penjar-les aquí, si us plau.

Here you have them. thank you 7tmp.zip

tonims1 avatar Feb 01 '24 07:02 tonims1

Here you have them. thank you 7tmp.zip

Thanks. The latest version should be better.

philmoz avatar Feb 01 '24 11:02 philmoz

Aquí els teniu. gràcies 7tmp.zip

Gràcies. L'última versió hauria de ser millor.

thank you. is better . now it works perfectly

tonims1 avatar Feb 01 '24 13:02 tonims1

can the "title scroll up" be part of this changes? as describe in https://github.com/EdgeTX/edgetx/issues/3667

offer-shmuely avatar Feb 19 '24 21:02 offer-shmuely

can the "title scroll up" be part of this changes? as describe in #3667

Not planned (by me) at this stage. I have not looked at it closely enough yet to say how feasible it will be.

philmoz avatar Feb 19 '24 23:02 philmoz

When editing screen layouts the selected widget has the solid border and the others have a dashed border: Screenshot 2023-12-11 at 4 25 18 pm

When you first go in, the first box has both dotted and solid border.

Topbar battery icon shows battery level as a colored bar - green >= 60%, amber 25% - 59%, red < 25% (these are LVGL, not theme colors): Screenshot 2023-12-11 at 4 23 32 pm

I do like this for the the default theme, but I wonder if it will become a problem for other themes... ie.. when the top bar is red or green...

I also like how there is now a "dimming" for disabled controls, and also when you touch/ENTER on controls (i.e. giving feedback).

In Model Setup, the fields for the model image and name are shorter... the former isn't such an issue, but the latter should be longer so you can see more of the name.

Other visual changes look fine. Performance wise, having just come from 2.10-rc2, this actually feels more sluggish. Also, when you are in the channel monitor, you can actually see the channel bars and text rebuilt, whereas 2.10 has no delay/artifacts.

pfeerick avatar Apr 03 '24 11:04 pfeerick