Event callback when external variable change

How-to
1

Description

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

ESP32 in Arduino IDE

What LVGL version are you using?

v 7.11

What do you want to achieve?

I would like to change color of the wifi symbol when value of the glolbal variable change.

What have you tried so far?

I tried to find some examples, but so far none of them point me to the right direction.

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:


bool online = 0; //global variable 

static void my_event_cb(lv_obj_t * obj, lv_event_t event)
{
  if (event == LV_EVENT_VALUE_CHANGED) {
    if (online != 0) {
      lv_obj_set_style_local_image_recolor(wifiLogo, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GREEN);
    } else {
      lv_obj_set_style_local_image_recolor(wifiLogo, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GRAY);
    }
  }
}

void drawWifiSymbol() {
  wifiLogo = lv_img_create(top, NULL);
  lv_img_set_src(wifiLogo, LV_SYMBOL_WIFI);
  lv_obj_align(wifiLogo, top,  LV_ALIGN_CENTER, 150, 0);
  //lv_obj_set_event_cb(wifiLogo, my_event_cb, LV_EVENT_VALUE_CHANGED, NULL);   /*Assign an event callback*/
  lv_obj_set_event_cb(wifiLogo, my_event_cb);   /*Assign an event callback*/
}

Thanks for any help.

2

I think the best way will be use label.

wifiLogo = lv_label_create(top, NULL);
lv_obj_align(wifiLogo, top,  LV_ALIGN_CENTER, 150, 0);
lv_label_set_text(wifiLogo, LV_SYMBOL_WIFI);


//when you need change icon color
lv_obj_set_style_local_text_color(wifiLogo, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, (online != 0)?LV_COLOR_GREEN:LV_COLOR_GRAY);
3

Ok, but this will be just one time change, right? Sorry, I probably not made it clear, that I want to recolor symbol if value of the variable change. So if I´m connected, it will be green and if I lost connection, it will be grey. That is the reason why I try it via event callback.

Thanks @spider_vc for you help.

4

you need process wifi status event like CONNECTED and DISCONNECTED and change label text color inside.

5

Thank you @spider_vc for your help. Your suggestion works.

I´m new to LVGL and I thought that I have to handle it LVGL-way and this simple way did not come up to my mind.

1 Like
6

Simple way is put this instructions inside main loop:

if ((WiFi.status() != WL_CONNECTED) ) {
   change wifi label colour here
   and call WiFi.reconnect(); if you want reconnect automatically // in wifi reconnect you can put default colour if connected
  }


or use a handler that change colours when status wifi change for example this:

void Wifi_disconnected(WiFiEvent_t event, WiFiEventInfo_t info){
  Serial.println("Disconnected from WIFI access point");
  Serial.print("WiFi lost connection. Reason: ");
  Serial.println(info.disconnected.reason);
  Serial.println("Reconnecting...");
  change label colours
  and call WiFi.reconnect(); if you want reconnect automatically
}
7

Thank you @gabriele_ponte , but I already had similar code, when I checked the issue as Solved :wink: .