eez-open / studio

Cross-platform low-code GUI and automation
https://www.envox.eu/studio/studio-introduction/
GNU General Public License v3.0
622 stars 101 forks source link

[LVGL] Add multilanguage support (i18n) #274

Open prasimix opened 1 year ago

mverch67 commented 5 months ago

I think basic multi language support would be quite easy to achieve as the text label "label" just would need to be generated as _("label")instead, so that lvgl's _(char*) function is called to translate the string. Either a simple checkbox to indicate translation or using the already available dropdown menu next to the text label could be used.

The localised strings are handled offline in .yml files and a node script is used to generate the C code. The include of "lv_i18n.h" can be manually added into screens.c settings.

Reference to lv_i18n: https://github.com/lvgl/lv_i18n

Reference to squareline studio's usage: https://docs.squareline.io/docs/multilanguage/

mvladic commented 5 months ago

We also need to add support through expressions. So you can write something like this:

T"Voltage: " + volt_var

Here syntax will be T"..." since this is already how we use it in EEZ-GUI and Dashboard projects.

mvladic commented 5 months ago

We should support LVGL YML format for lv_i18n.h:

mverch67 commented 5 months ago

I'd still like to propose to do this in two steps in case this project is low on developers: Step 1- add checkbox (or extend the dropdown) next to the label text and generate _("label") for lvgl C code Step 2- add _p("label", cnt) to UI and code generation as well as import/export YML files and YML code-generation

If the tiny little effort for step 1 is done right away it has the big advantage that migrants from squareline studio can use this feature as they did in the past without losing this functionality for their project. Step 1 is needed anyway and may not change much when developing step 2 at a later stage.

mvladic commented 5 months ago

I implemented Step 1 in the master.

In "Label", "Textarea", "Dropdown" and "Roller" widgets you can now select for "Text" and "Options" a new option called "Translated literal":

image image

Here is the project I used for testing:

https://github.com/eez-open/lvgl_test_translate_literal

Here is the place where I putted i18n files:

https://github.com/eez-open/lvgl_test_translate_literal/tree/master/src/i18n

I added following line to screens.c file template:

image

And added these lines in main.c.