LVGLでイメージボタン

イメージボタンが押されているときの見た目の判別をつけるためにアウトラインを設定

LV_IMG_DECLARE(testiii);
lv_obj_t * img1 = lv_imgbtn_create(lv_scr_act());
lv_imgbtn_set_src(img1, LV_IMGBTN_STATE_RELEASED,  &testiii, 0, 0); //画像の設定(押されていないとき)
lv_imgbtn_set_src(img1, LV_IMGBTN_STATE_PRESSED,  &testiii, 0, 0);  //画像の設定(押されているとき)
lv_obj_set_pos(img1, 100, 100);
lv_obj_set_size(img1,64,64);  //サイズWidth,Height
static lv_style_t style;
lv_style_init(&style);
lv_style_set_outline_width(&style,2); //アウトラインの太さ
lv_style_set_outline_color(&style,lv_color_black());  //アウトラインの色
lv_obj_add_style(img1, &style,LV_STATE_PRESSED);  //イメージボタンの押されているときのスタイルにアウトラインのスタイルを設定

画像をlvgl用に変換するツール
https://lvgl.io/tools/imageconverter
そのままだと初期値代入部分で構文エラーが出るので少し書き直す

const lv_img_dsc_t testiii = {
  .header = {
    .cf = LV_IMG_CF_TRUE_COLOR,
    .always_zero = 0,
    .reserved = 0,
    .w = 64,
    .h = 64,
  },
  .data_size = 4096 * LV_COLOR_SIZE / 8,
  .data = testiii_map,
};