Description
Hi, I want to create a simple login screen with a label and a field where I can enter a PIN. Everything goes according to my plan until I try to style the password field.
After adding a new style and linking it to the field, the entire screen turns white. After a few clicks on the screen, in random situations, the input field suddenly appears, and additionally, the background is visible somewhere underneath. I can’t really understand what’s going on."
What MCU/Processor/Board and compiler are you using?
ESP WPROOM 32 esp32 3248s035c
horizontal 480x320
What do you want to achieve?
I want to style my password input
What have you tried so far?
Im still looking for solving, im wondering if the issue might be related to version 9.2.0
Code to reproduce
void ui_init() {
// Initialize base style for the screen
lv_style_t style_base;
lv_style_init(&style_base);
lv_style_set_border_width(&style_base, 0);
lv_obj_t *screen = lv_obj_create(lv_scr_act()); // Get the active screen
lv_obj_set_size(screen, 480, 320); // Set screen size
lv_obj_center(screen); // Align screen to the center
lv_obj_add_style(screen, &style_base, LV_PART_MAIN);
lv_obj_clear_flag(screen, LV_OBJ_FLAG_SCROLLABLE);
// Load background image
LV_IMAGE_DECLARE(img_bg);
lv_obj_t *main_bg = lv_image_create(screen);
lv_image_set_src(main_bg, &img_bg);
lv_obj_align(main_bg, LV_ALIGN_CENTER, 0, 0);
// Create label
lv_obj_t *user_label = lv_label_create(screen);
lv_label_set_text(user_label, "Welcome BRO");
static lv_style_t style;
lv_style_init(&style);
lv_style_set_text_color(&style, lv_color_hex(0xFFFFFF));
lv_style_set_text_font(&style, &lv_font_montserrat_24);
lv_obj_add_style(user_label, &style, LV_PART_MAIN);
lv_obj_align(user_label, LV_ALIGN_CENTER, 0, -30);
// Initialize the style for the TextArea
static lv_style_t style_textarea;
lv_style_init(&style_textarea);
// Set the properties of the TextArea style
lv_style_set_border_width(&style_textarea, 2);
lv_style_set_border_color(&style_textarea, lv_color_hex(0xFFFFFF));
lv_style_set_radius(&style_textarea, 0);
lv_style_set_bg_color(&style_textarea, lv_color_hex(0x000000)); // Black background
lv_style_set_bg_opa(&style_textarea, LV_OPA_COVER); // Set fully opaque background
// Create the TextArea for PIN input
lv_obj_t *user_password = lv_textarea_create(screen);
lv_obj_align(user_password, LV_ALIGN_CENTER, 0, 20); // Align in the center
lv_textarea_set_placeholder_text(user_password, "PIN"); // Set placeholder text
lv_obj_set_size(user_password, 200, 40); // Set size of the TextArea
// Apply the style to the TextArea
lv_obj_add_style(user_password, &style_textarea, LV_PART_MAIN); // Apply the style
}
If i ll comment this, it’s ok but it’s not what i want.
// Initialize the style for the TextArea
// static lv_style_t style_textarea;
// lv_style_init(&style_textarea);
// Set the properties of the TextArea style
// lv_style_set_border_width(&style_textarea, 2);
// lv_style_set_border_color(&style_textarea, lv_color_hex(0xFFFFFF));
// lv_style_set_radius(&style_textarea, 0);
// lv_style_set_bg_color(&style_textarea, lv_color_hex(0x000000)); // Black background
// lv_style_set_bg_opa(&style_textarea, LV_OPA_COVER); // Set fully opaque background
// Create the TextArea for PIN input
lv_obj_t *user_password = lv_textarea_create(screen);
lv_obj_align(user_password, LV_ALIGN_CENTER, 0, 20); // Align in the center
lv_textarea_set_placeholder_text(user_password, "PIN"); // Set placeholder text
lv_obj_set_size(user_password, 200, 40); // Set size of the TextArea
// Apply the style to the TextArea
// lv_obj_add_style(user_password, &style_textarea, LV_PART_MAIN); // Apply the style
Screenshot and/or video
Here u can see how it’s look like. As i told if i ll toch sometimes the input shown.
