How enable / disable icon

RXX · March 4, 2020, 3:54pm

Description

hello everyone guys, how can I make the icon appear after the button is pressed, and that it would be deleted after the button is pressed again?

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

PC_Simulator

What do you want to achieve?

enable / disable icon

What have you tried so far?

if (event == LV_EVENT_CLICKED) {
lv_obj_t * icon = lv_img_create(lv_scr_act(), NULL);

	 switch(lv_btn_get_state(btn)) {



	 	 case LV_BTN_STYLE_REL:

	 	 case LV_BTN_STYLE_PR:
	 		printf("first ");
	 		lv_img_set_src(icon, &test_icon1);
	 		 break;
	 	 case LV_BTN_STYLE_TGL_REL:

	 	 case LV_BTN_STYLE_TGL_PR:
	 		 printf("second ");
	 		 lv_obj_del(icon);
	 		 break;
	 	 	default:
	 	 break;

	 	 	    }

  }

}

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*You code here*/

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%20%D0%BE%D1%82%202020-03-04%2017-58-19

embeddedt · March 4, 2020, 4:00pm

You should be able to use lv_obj_set_hidden on the icon. https://docs.littlevgl.com/en/html/object-types/obj.html#attributes

RXX · March 4, 2020, 4:00pm

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%20%D0%BE%D1%82%202020-03-04%2017-57-27

RXX · March 4, 2020, 4:06pm

ok,
i `am check it now

RXX · March 4, 2020, 4:11pm

I’m wildly sorry, I did not quite understand how to use …

RXX · March 4, 2020, 4:32pm

this function solves one problem, but does not get rid of another, after a while it will clog all the memory

embeddedt · March 4, 2020, 5:45pm

You are creating the icon every time you click the button (which means you keep allocating more memory). You should create it once and just change its visibility.

RXX · March 4, 2020, 6:47pm

But if I take it out, beyond the “if”, then the icon is not drawn

embeddedt · March 4, 2020, 6:49pm

You should create the icon once at the beginning of your program (wherever you are creating the button).

embeddedt · March 4, 2020, 6:49pm

If it still doesn’t work please provide a more complete code sample (e.g. the contents of your main function).

RXX · March 4, 2020, 6:54pm

Ok, I’ll test about tomorrow and write to you, thank you very much for the quick help)))

RXX · March 5, 2020, 12:32pm

/**
 * @file demo.c
 *
 */

/*********************
 *      INCLUDES
 *********************/
#include "demo.h"
#include "string.h"
#if LV_USE_DEMO

/*********************
 *      DEFINES
 *********************/

/**********************
 *      TYPEDEFS
 **********************/

/**********************
 *  STATIC PROTOTYPES
 **********************/
void demo_create(void);



static lv_obj_t * selected;


static void list_btn_event_handler_selected(lv_obj_t * , lv_event_t event);

#if LV_DEMO_SLIDE_SHOW
static void tab_switcher(lv_task_t * task);
#endif

/**********************
 *  STATIC VARIABLES
 **********************/
static lv_obj_t * chart;
static lv_obj_t * ta;
static lv_obj_t * kb;


static lv_style_t style_kb;
static lv_style_t style_kb_rel;
static lv_style_t style_kb_pr;

#if LV_DEMO_WALLPAPER
LV_IMG_DECLARE(img_bubble_pattern)
#endif


LV_IMG_DECLARE(test_icon1);


#define LV_COLOR_DARK_YELLOW 	LV_COLOR_MAKE(0xca, 0xca, 0x12)
#define LV_COLOR_ORANGE 	    LV_COLOR_MAKE(0xff, 0x66, 0x00)
#define LV_COLOR_GREEN	        LV_COLOR_MAKE(0x3c, 0xac, 0x47)
#define LV_COLOR_BLUE	        LV_COLOR_MAKE(0x30, 0x33, 0xff)
#define LV_COLOR_DARK_BLUE	    LV_COLOR_MAKE(0x00, 0x54, 0x85)
#define LV_COLOR_DEEPSKYBLUE 	LV_COLOR_MAKE(0xe8, 0xe7, 0xe6)
#define LV_COLOR_BUTTON_PR_GRAY LV_COLOR_MAKE(0xc4, 0xc4, 0xc4)
#define LV_COLOR_GRAY 			LV_COLOR_MAKE(0xc0, 0xc0, 0xc0)
#define LV_COLOR_DARK_GRAY 		LV_COLOR_MAKE(0x5a, 0x5a, 0x5a)
#define LV_COLOR_DARK_MEDIUMSEAGREEN 		LV_COLOR_MAKE(0x3c, 0xB3, 0x71)
#define LV_COLOR_TOMATO 		LV_COLOR_MAKE(0xFF, 0x63, 0x47)
#define LV_COLOR_DEEPSKYBLUE 		LV_COLOR_MAKE(0x00, 0xBF, 0xFF)
#define LV_COLOR_DEEPDARKGRAY 		LV_COLOR_MAKE(0x38, 0x38, 0x38)
/**********************
 *      MACROS
 **********************/

/**********************
 *   GLOBAL FUNCTIONS
 **********************/

/**
 * Create a demo application
 */

void demo_create(void)
{
	lv_coord_t hres = lv_disp_get_hor_res(NULL);
	lv_coord_t vres = lv_disp_get_ver_res(NULL);
	//set style
	static lv_style_t style_screen;
	lv_style_copy(&style_screen, &lv_style_plain);
	style_screen.body.main_color = LV_COLOR_DARK_YELLOW;
	style_screen.body.grad_color = LV_COLOR_DARK_GRAY ;
	lv_obj_set_style(lv_scr_act(), &style_screen);
	//set header
	static lv_style_t style_status_bar_bg;
	lv_style_copy(&style_status_bar_bg, &lv_style_plain);
	style_status_bar_bg.body.main_color = LV_COLOR_DARK_YELLOW;
	style_status_bar_bg.body.grad_color = LV_COLOR_DARK_YELLOW;
	style_status_bar_bg.body.padding.top = 0;
	style_status_bar_bg.body.padding.bottom = 0;
	style_status_bar_bg.body.opa = 0.3;
	style_status_bar_bg.text.color = LV_COLOR_WHITE;


	lv_obj_t * header;
	header = lv_obj_create(lv_scr_act(), NULL);
	lv_obj_set_size(header, hres, 80);
	lv_obj_set_style(header, &style_status_bar_bg);
	lv_obj_align(header, NULL, LV_ALIGN_IN_TOP_MID,0,0);

	lv_obj_t * status_bar = lv_obj_create(header, NULL);
	lv_obj_set_width(status_bar, lv_disp_get_hor_res(NULL));
	lv_obj_set_pos(status_bar, 0, 5);
	lv_obj_set_style(status_bar, &style_status_bar_bg);

	lv_obj_t * sym = lv_label_create(status_bar, NULL);
	lv_label_set_text(sym,  LV_SYMBOL_WIFI  LV_SYMBOL_BATTERY_FULL);//LV_SYMBOL_LIST
	lv_obj_align(sym, NULL, LV_ALIGN_IN_TOP_RIGHT, -LV_DPI/10, 0);



	lv_obj_t * clock = lv_label_create(status_bar, NULL);
	lv_label_set_text(clock,  "09:07");
	lv_obj_align(clock, NULL, LV_ALIGN_IN_TOP_LEFT, LV_DPI/10, 0);
	// second line
	static lv_style_t style_status_sec_bar_bg;
	lv_style_copy(&style_status_sec_bar_bg, &style_status_bar_bg);
	style_status_sec_bar_bg.text.font = &lv_font_roboto_22;

	//BODY BEGIN
	lv_style_t *sb = lv_page_create(lv_disp_get_scr_act(NULL), NULL);
	lv_page_set_sb_mode(sb, LV_SB_MODE_OFF);

	lv_page_set_style(sb, LV_PAGE_STYLE_BG, &lv_style_transp_tight);
	lv_page_set_style(sb, LV_PAGE_STYLE_SCRL, &lv_style_transp);

	/******************/
	lv_obj_t * cont;
	//Icons

	//Fonts
	lv_font_t *font_roboto_28 = &lv_font_roboto_28;
	lv_font_t *font_roboto_22 = &lv_font_roboto_22;
	lv_font_t *font_roboto_16 = &lv_font_roboto_16;
	lv_font_t *font_roboto_12 = &lv_font_roboto_12;
	//Colors
	lv_color_t *white = &LV_COLOR_WHITE;
	lv_color_t *deepsky = &LV_COLOR_DEEPSKYBLUE;

	selected1();




	if(hres > vres) {														// size of page
		        lv_obj_set_height(sb, vres - lv_obj_get_height(header));
		        lv_cont_set_fit2(sb, LV_FIT_TIGHT, LV_FIT_NONE);
		        lv_obj_align(sb, header, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 0);
		        lv_page_set_sb_mode(sb, LV_SB_MODE_OFF);
		    } else {
		        lv_obj_set_size(sb, hres, vres  - lv_obj_get_height(header));
		        lv_obj_align(sb, header, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 0);
		        lv_page_set_sb_mode(sb, LV_SB_MODE_OFF);
		    }


#if LV_DEMO_SLIDE_SHOW
	lv_task_create(tab_switcher, 3000, LV_TASK_PRIO_MID, tv);
#endif
}


/**********************
 *   STATIC FUNCTIONS
 **********************/
void selected1(void){
		selected = lv_obj_create(NULL, NULL);
		lv_scr_load(selected);

		lv_coord_t hres = lv_disp_get_hor_res(NULL);
		lv_coord_t vres = lv_disp_get_ver_res(NULL);
		static lv_style_t style_screen;
				lv_style_copy(&style_screen, &lv_style_plain);
				style_screen.body.main_color = LV_COLOR_DARK_YELLOW;
				style_screen.body.grad_color = LV_COLOR_DARK_GRAY ;
				lv_obj_set_style(lv_scr_act(), &style_screen);
				//set header
				static lv_style_t style_status_bar_bg;
				lv_style_copy(&style_status_bar_bg, &lv_style_plain);
				style_status_bar_bg.body.main_color = LV_COLOR_DARK_YELLOW;
				style_status_bar_bg.body.grad_color = LV_COLOR_DARK_YELLOW;
				style_status_bar_bg.body.padding.top = 0;
				style_status_bar_bg.body.padding.bottom = 0;
				style_status_bar_bg.body.opa = 0.3;
				style_status_bar_bg.text.color = LV_COLOR_WHITE;


				lv_obj_t * header;
				header = lv_obj_create(lv_scr_act(), NULL);
				lv_obj_set_size(header, hres, 80);
				lv_obj_set_style(header, &style_status_bar_bg);
				lv_obj_align(header, NULL, LV_ALIGN_IN_TOP_MID,0,0);

				lv_obj_t * status_bar = lv_obj_create(header, NULL);
				lv_obj_set_width(status_bar, lv_disp_get_hor_res(NULL));
				lv_obj_set_pos(status_bar, 0, 5);
				lv_obj_set_style(status_bar, &style_status_bar_bg);

				lv_obj_t * sym = lv_label_create(status_bar, NULL);
				lv_label_set_text(sym,  LV_SYMBOL_WIFI  LV_SYMBOL_BATTERY_FULL);//LV_SYMBOL_LIST
				lv_obj_align(sym, NULL, LV_ALIGN_IN_TOP_RIGHT, -LV_DPI/10, 0);
				const void *var_arrow_up = &arrow_up;
								const void *var_arrow_down = &arrow_down;
								const void *var_procent = &procent;
								const void *var_done = &done;
								const void *var_target = &target;
								const void *var_effect = &effective;
								const void *var_hum = &Humidity;
								const void *var_temp = &Temperature;
								const void *var_pres = &Presure;
								const void *var_unlock = &Unlock;
								const void *var_date = &Date;
								const void *var_batt = &Battery;
								const void *var_risk = &Risk;
								const void *var_flash = &Flash;
								const void *var_filter = &Filter;
								const void *var_ant = &Antenna;
								const void *var_ble = &Bleutooth;
								const void *var_wrench = &Wrench;
								const void *var_report = &Report;
								const void *var_ok = &Ok;
								const void *var_vol = &vol;
								const void *var_led = &led;
								const void *var_wifi = &wifi;
								const void *var_contrast = &contrast;
								const void *var_language = &language;
								const void *var_luminosity = &luminosity;
								
								const void *var_sleep_timer = &sleep_timer;
								const void *var_search = &search;
								const void *var_arrow_left = &arrow_left;
								const void *var_arrow_right = &arrow_right;
								const void *var_download = &download;

				// second line
				static lv_style_t style_status_sec_bar_bg;
				lv_style_copy(&style_status_sec_bar_bg, &style_status_bar_bg);
				style_status_sec_bar_bg.text.font = &lv_font_roboto_22;
				lv_obj_t * icon = lv_img_create(lv_scr_act(), NULL);





					//Fonts
					lv_font_t *font_roboto_28 = &lv_font_roboto_28;
					lv_font_t *font_roboto_22 = &lv_font_roboto_22;
					lv_font_t *font_roboto_16 = &lv_font_roboto_16;
					lv_font_t *font_roboto_12 = &lv_font_roboto_12;
					//Colors
					lv_color_t *white = &LV_COLOR_WHITE;
					lv_color_t *deepsky = &LV_COLOR_DEEPSKYBLUE;
				//	lv_img_set_src(icon2, &archive);
				//	lv_obj_align(icon2, status_bar, LV_ALIGN_IN_TOP_RIGHT,-10,30);
				//	lv_img_set_src(icon, &test_icon1);
				//	lv_obj_align(icon, status_bar, LV_ALIGN_IN_BOTTOM_RIGHT,-10, -5);
					//END of HEADER

					//BODY BEGIN
					lv_style_t *sb = lv_page_create(lv_disp_get_scr_act(NULL), NULL);
					lv_page_set_sb_mode(sb, LV_SB_MODE_OFF);
				//	lv_page_set_scrl_layout(sb, LV_LAYOUT_PRETTY);
					lv_page_set_style(sb, LV_PAGE_STYLE_BG, &lv_style_transp_tight);
					lv_page_set_style(sb, LV_PAGE_STYLE_SCRL, &lv_style_transp);

					lv_img_set_src(icon, &test_icon1);
						lv_obj_align(icon, status_bar, LV_ALIGN_IN_BOTTOM_RIGHT,-10, -5);

		label_create(header,"Hidden Menu",100,50,font_roboto_22, LV_COLOR_WHITE);

		buttons_create_selected(style_status_bar_bg, selected, "TEST",30,140,5);


		if(hres > vres) {														// size of page
				        lv_obj_set_height(sb, vres - lv_obj_get_height(header));
				        lv_cont_set_fit2(sb, LV_FIT_TIGHT, LV_FIT_NONE);
				        lv_obj_align(sb, header, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 0);
				        lv_page_set_sb_mode(sb, LV_SB_MODE_OFF);
				    } else {
				        lv_obj_set_size(sb, hres, vres  - lv_obj_get_height(header));
				        lv_obj_align(sb, header, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 0);
				        lv_page_set_sb_mode(sb, LV_SB_MODE_OFF);
				    }

}



 void img_button_create(lv_style_t style_status_sec_bar_bg,lv_obj_t * cont, const void *var_icon, int* x_pos, int * y_pos )
  {

 	 	lv_obj_t * btn1 = lv_btn_create(cont, NULL);
 	 	//	lv_obj_set_event_cb(btn1, event_handler);
// 	 	lv_btn_set_fit(btn1,LV_FIT_TIGHT);
 	 	lv_obj_set_size(btn1,60,55);
// 	 	lv_obj_align(btn1, NULL, LV_ALIGN_IN_BOTTOM_MID, x_pos, y_pos);
 	 	lv_obj_set_pos(btn1, x_pos,y_pos);
 	 	lv_obj_t *icon = lv_img_create(btn1, NULL);
 	 	//	lv_table_set_style(icon1, L_STYLE_BG,&lv_style_transp_tight);
 	 	lv_img_set_src(icon,var_icon);
 	 	lv_obj_set_pos(icon, 0,0);
  }


 void buttons_create_selected(lv_style_t style_status_sec_bar_bg,lv_obj_t * sb, char * name, int* x_pos, int * y_pos, int* rad )
    {
   	 	lv_obj_t * btn_label;
   	 	lv_obj_t * btn1 = lv_btn_create(sb, NULL);
   	 	//	lv_obj_set_event_cb(btn1, event_handler);
   	 	static lv_style_t style_btn_bg;
   	 	static lv_style_t style_btn_pr_bg;
   	 	lv_style_copy(&style_btn_bg, &style_status_sec_bar_bg);
   	 	style_btn_bg.body.main_color = LV_COLOR_DARK_YELLOW;
   	 	style_btn_bg.body.grad_color = LV_COLOR_DARK_YELLOW;
   	 	style_btn_bg.text.color = LV_COLOR_WHITE;
   	 	style_btn_bg.text.font = &lv_font_roboto_16;
   	 	style_btn_bg.body.opa = 255;
   	 	style_btn_bg.body.radius = rad;
   	 	lv_style_copy(&style_btn_pr_bg, &style_btn_bg);
   	 	style_btn_pr_bg.body.main_color = LV_COLOR_BUTTON_PR_GRAY;
   	 	style_btn_pr_bg.body.grad_color = LV_COLOR_BUTTON_PR_GRAY;
   	 	lv_btn_set_style(btn1,LV_BTN_STYLE_REL, &style_btn_bg);
   	 	lv_btn_set_style(btn1,LV_BTN_STYLE_PR, &style_btn_pr_bg);
   	 	lv_obj_set_event_cb(btn1, list_btn_event_handler_selected);


   	 	lv_obj_set_size(btn1, 120, 40);

 //  	 	lv_obj_align(btn1, NULL,  LV_ALIGN_IN_TOP_MID, x_pos, y_pos);
  	 	lv_obj_set_pos(btn1, x_pos,y_pos);

   	 	btn_label = lv_label_create(btn1, NULL);
   	 	lv_label_set_text(btn_label, name);
  // 	 	lv_obj_set_auto_realign(btn_label,true);
   	 	lv_obj_set_auto_realign(btn_label, true);
   	 	lv_obj_align(btn_label, NULL, LV_ALIGN_IN_TOP_MID, 0, 0);
   	 	lv_label_set_align(btn_label, LV_LABEL_ALIGN_CENTER);
    }



 void label_create(lv_obj_t * cont,char *title, int *x_pos,int *y_pos, const lv_font_t *font_lb, lv_color_t color)
   {
	 lv_style_t *style_lb = malloc(sizeof(lv_style_t));
	 lv_obj_t * label1 = lv_label_create(cont, NULL);
	 lv_label_set_text(label1, title);
	 lv_style_copy(style_lb, &lv_style_plain);
	 style_lb->text.color = color;
	 style_lb->text.font = font_lb;
	 lv_label_set_style(label1, LV_LABEL_STYLE_MAIN, style_lb);
	 lv_obj_set_pos(label1, x_pos,y_pos);

   }




static void list_btn_event_handler_selected(lv_obj_t * btn, lv_event_t event)
{

	if (event == LV_EVENT_CLICKED) {


		switch(lv_btn_get_state(btn)) {



	 	 case LV_BTN_STYLE_REL:

	 	 case LV_BTN_STYLE_PR:
	 		printf("first ");
	 		lv_obj_t * icon = lv_img_create(lv_scr_act(), NULL);
	 		lv_img_set_src(icon, &test_icon1);
	 		 break;
	 	 case LV_BTN_STYLE_TGL_REL:

	 	 case LV_BTN_STYLE_TGL_PR:
	 		 printf("second ");
	 		 lv_obj_del(icon);
	 		 break;
	 	 	default:
	 	 break;

	 	 	    }

  }

}


#if LV_DEMO_SLIDE_SHOW
/**
 * Called periodically (lv_task) to switch to the next tab
 */
static void tab_switcher(lv_task_t * task)
{
	static uint8_t tab = 0;
	lv_obj_t * tv = task->user_data;
	tab++;
	if(tab >= 3) tab = 0;
	lv_tabview_set_tab_act(tv, tab, true);
}
#endif


#endif  /*LV_USE_DEMO*/

RXX · March 6, 2020, 9:24am

I apologize for the stupid question where should I create an icon so that it can be seen in the whole program?
I tried to do this using the function … I succeeded in creating, but there is no hide or delete

My function
void icon_create()
{
lv_style_t *sb = lv_page_create(lv_disp_get_scr_act(NULL), NULL);
lv_page_set_sb_mode(sb, LV_SB_MODE_OFF);
lv_page_set_style(sb, LV_PAGE_STYLE_BG, &lv_style_transp_tight);
lv_page_set_style(sb, LV_PAGE_STYLE_SCRL, &lv_style_transp);

const void *var_ok = &Ok;
lv_obj_t *icon = lv_img_create(sb, NULL);
lv_img_set_src(icon,var_ok);
lv_obj_set_pos(icon, 0,0);

}

embeddedt · March 6, 2020, 3:34pm

You need to use a global variable for icon.

RXX · March 6, 2020, 3:42pm

Thancks very match)