Introducing LVGL's UI editor (Preview of v0.1)

Announcements
21

Ohhh, yeees! Thank you for asking it. It’s possible via a feature that love the most. :blush:

It’s style binding: add/remove a style if a subject’s value is the same as a reference value. See the docs here.

So what you can do is:

  1. Store the currently selected language in a subject.
  2. Add a very simple observer callback in C code that calls lv_translation_set_language if the language subject’s value changes. See this about adding custom code.
  3. To change font either:
    • Create 3 styles with 3 different fonts and bind them like <bind_style subject="language" name="style_cjk" ref_value="2/">
    • OR: Let’s say you have an font called font_title. From this lv_font_t * font_title will be exported, meaning in the observer_callback you can easily change this pointer like font_title = font_title_cjk. Just don’t forget to call lv_obj_report_style_change(NULL).
22

Thanks for the suggestion! It looks like it could work using styles and subjects, so I’ll give it a try.

I have one more question.
When I try to make a component reusable so that it can accept either label_text or translation_tag as below, the translation_tag always takes priority. As a result, if I only specify label_text, it does not behave as expected.

Do you have any ideas on how to solve this?

Component definition:

<component>
    <api>
        <prop name="label_text" type="string" default="" />
        <prop name="label_translation_tag" type="string" default="" />
    </api>
    <view extends="lv_button">
        <lv_label text="$label_text" translation_tag="$label_translation_tag" />
    </view>
</component>

Usage:

<my_button label_text="normal text" />           <!-- NG -->
<my_button label_translation_tag="translation tag" />  <!-- OK -->
23

I see the problem. I simple solution would be if the translation tag is an empty string it would count as “not set” as well.

A hacky workaround could be to create 2 components:

  1. label
  2. translated_label

cc @AndreCostaaa

24

Thank you for looking into this.
I understand that, with the current version, splitting the component into two is the best solution.
I hope this will be improved in the near future.

25

I was able to switch the font style using the subject you suggested.
I have an additional question: I couldn’t figure out how to link the selected language in the LVGL Editor preview with the subject.
Is there any way to do this?

26

@AndreCostaaa has fixed it in this PR which was just merged.

1 Like