Right To Left Layout for objects and container

sjpw · February 13, 2021, 8:11am

Before posting

Hello

Description

I design a multi-language GUI, for Right To Left language’s need to align right, each object and their container
i remember, i saw a lvgl example for this reason but i don’t remember example name and where i saw, i searched but found nothing,
Anyway

let me know if there is an example
show me the changing code
thanks in advance

What MCU/Processor/Board and compiler are you using?

VS Simulator

What LVGL version are you using?

7.10.0

What do you want to achieve?

Right To Left layout changing

// No code;

i have this:

but need these:

embeddedt · February 13, 2021, 2:32pm

I believe enabling LV_USE_BIDI and then calling lv_obj_set_base_dir(obj, LV_BIDI_DIR_RTL) should work.

sjpw · February 14, 2021, 8:48am

Thank you.
It’s very usefull.
ALSO i changed font for ddlist and add a string to it:

    lv_obj_add_style(ddlist, LV_OBJ_PART_MAIN,  &style_Language);
    lv_obj_add_style(ddlist, LV_DROPDOWN_PART_MAIN, &style_Language);
    lv_obj_add_style(ddlist, LV_DROPDOWN_PART_LIST, &style_Language);
    lv_obj_add_style(ddlist, LV_DROPDOWN_PART_SELECTED, &style_Language);
    lv_obj_add_style(ddlist, LV_DROPDOWN_PART_SCROLLBAR, &style_Language);
    lv_obj_add_style(ddlist, _LV_OBJ_PART_REAL_LAST, &style_Language);

    lv_obj_set_style_local_value_str(ddlist, LV_SWITCH_PART_BG, LV_STATE_DEFAULT, "سلام");
    lv_obj_set_style_local_value_str(ddlist, LV_SWITCH_PART_BG, LV_STATE_DEFAULT, "Hello");
"Hello");

BUT it shoe’s only English character, and for “سلام” show’s just nothing, currently i use an label,
is there any tip/trick for this my little problem?

//-------------------------------------------------------------
Now
i have this:

    lv_cont_set_layout(cont1, LV_LAYOUT_COLUMN_LEFT);

    lv_obj_align(label_type, ui.ddlist_key_type, LV_ALIGN_OUT_LEFT_MID, -5, 0);

Result is:
111

    lv_cont_set_layout(cont1, LV_LAYOUT_COLUMN_LEFT);
    lv_obj_align(label_type, ui.ddlist_key_type, LV_ALIGN_OUT_RIGHT_MID, 5, 0); // Changed

Result is:
222

    lv_cont_set_layout(cont1, LV_LAYOUT_COLUMN_RIGHT); // Changed
    lv_obj_align(label_type, ui.ddlist_key_type, LV_ALIGN_OUT_RIGHT_MID, 5, 0);

Result is:
333

Now question is:
every time i create an object, i should check the language setting and set:
LV_BIDI_DIR_RTL / LV_BIDI_DIR_LTR
LV_LAYOUT_COLUMN_RIGHT / LV_LAYOUT_COLUMN_LEFT
LV_ALIGN_OUT_RIGHT_MID / LV_ALIGN_OUT_LEFT_MID
for every single object or there is a better WaY??

embeddedt · February 14, 2021, 1:47pm

Did you set value_font on style_Language as well or just text_font?

Note: please check what parts you are applying styles to. Right now you have base object and switch parts in use, even though you’re applying these styles to a dropdown.

I am not sure as I don’t really use the RTL feature in my projects. However, I think @amirgon or @kisvegabor would know.

amirgon · February 14, 2021, 1:54pm

You set the root object base dir, and the direction would be inherited by each child object you add to it, unless explicitly specified otherwise.

sjpw · February 14, 2021, 5:30pm

Thank’s a lot,
but i cant find any documentation about lv_obj_set_style_local_value_str

sjpw · February 14, 2021, 5:30pm

Thank you.

embeddedt · February 14, 2021, 6:29pm

In the spot where you are setting the custom font, you must be setting the text_font property. What I am suggesting is to change value_font in that location as well (just copy the line and change text_font to value_font).

sjpw · February 15, 2021, 5:31am

Thanks

sjpw · February 15, 2021, 7:22am

 static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_text_font(&style, LV_STATE_DEFAULT, &lv_font_dejavu_16_persian_hebrew);//change font
    lv_style_set_value_font(&style, LV_STATE_DEFAULT, &lv_font_dejavu_16_persian_hebrew);//change font

    lv_obj_t* ddlist = lv_dropdown_create(ui.tab1, NULL);
    lv_obj_add_style(ddlist, LV_OBJ_PART_MAIN, &style);
    lv_obj_add_style(ddlist, LV_DROPDOWN_PART_MAIN, &style);
    lv_obj_add_style(ddlist, LV_DROPDOWN_PART_LIST, &style);
    lv_obj_add_style(ddlist, LV_DROPDOWN_PART_SELECTED, &style);
    lv_obj_add_style(ddlist, LV_DROPDOWN_PART_SCROLLBAR, &style);

    lv_dropdown_set_options(ddlist, "   آبی   \n   قرمز  \n   سبز   ");
    lv_obj_set_width(ddlist, 150);
     lv_obj_set_pos(ddlist, 80, 20 + 35 + 70);
    lv_dropdown_set_selected(ddlist, 0);

    lv_dropdown_set_show_selected(ddlist, false);
    lv_dropdown_set_text(ddlist, "سلام");

result is a exploded:
Is there any problem in my code?

But i did this:

  lv_dropdown_set_text(ddlist, " ");//a blank
    lv_obj_set_style_local_value_str(ddlist, LV_SWITCH_PART_BG, LV_STATE_DEFAULT, "سلام");
    lv_obj_set_style_local_value_align(ddlist, LV_SWITCH_PART_BG, LV_STATE_DEFAULT, LV_ALIGN_IN_RIGHT_MID);
    lv_obj_set_style_local_value_ofs_x(ddlist, LV_SWITCH_PART_BG, LV_STATE_DEFAULT, -5);
    lv_dropdown_set_show_selected(ddlist, false);

Result is OK: 122

in first place how i change my code to display correct string by using:

    lv_dropdown_set_text(ddlist, "سلام");

amirgon · February 15, 2021, 8:27am

Looks like a bug in LVGL.
Worth opening an issue on GitHub.

sjpw · February 15, 2021, 8:34am

Thanks a lot.

sjpw · February 16, 2021, 4:42am

I still have problem with alignment

   lv_obj_set_base_dir(ui.tab2, LV_BIDI_DIR_RTL);
    lv_obj_t* contA = lv_cont_create(ui.tab2, NULL);
    lv_obj_t* contB = lv_cont_create(ui.tab2, NULL);
    lv_obj_t* contC = lv_cont_create(ui.tab2, NULL);

    lv_obj_set_size(contA, 150, 50);
    lv_obj_set_size(contB, 150, 150);
    lv_obj_set_size(contC, 150, 250);

    lv_obj_align(contA, NULL, LV_ALIGN_IN_TOP_LEFT, 10, 120);
    lv_obj_align(contB, contA, LV_ALIGN_OUT_RIGHT_TOP, 0, 0);
    lv_obj_align(contC, contB, LV_ALIGN_OUT_RIGHT_MID, 0, 0);

these 3 container’s aligned for LTR languages,

after changing to RTL i want to auto alignment for these container to change those position

is there any variable to say to LVGL for auto change its alignment?
or i should do it manually?

sjpw · February 17, 2021, 8:00am

Please let me know if there is any problem with my question.
@embeddedt

embeddedt · February 17, 2021, 1:39pm

I wasn’t sure, so I didn’t answer.

I think you have to do it manually, but again I don’t use RTL so I can’t say for sure.

kisvegabor · February 17, 2021, 2:12pm

Hi,

The automatic changes in layout and alignments are not supported now. I think it’d be misleading to align to the left when you type LV_ALIGN_IN_RIGHT_TOP.

FYI, in v8 the layouts operate with the START and END keywords, and their meaning is changed according to the base dir.

sjpw · February 18, 2021, 6:15pm

Thank you.

sjpw · February 18, 2021, 6:18pm

Thank you.
good job.