前言

前些日子到手了一块raspberry pico和2.2寸屏ILI9341，想通过ILI9341显示屏让pico的实验做起来更加丰富多彩。下图是我的实验成果：

实验说明

实验中我使用的材料如下：

• raspberry pico
• 2.2寸屏ILI9341
• 滑动变阻器

实验预期效果

pico在2.2寸屏ILI9341显示一个量规实时显示滑动变阻器的数值。

接线

测试代码

/**
 * Copyright (c) 2008-2021 深圳百问网科技有限公司<http://lvgl.100ask.net>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
#include "pico/stdlib.h"
#include "hardware/adc.h"
#include "lvgl_src/lvgl.h"
#include "ili9341/ili9341.h"
#include "ili9341/lv_port_disp.h"

//extern void ili9341_init();
//extern void lv_port_disp_init(void);

static void lv_100ask_adc_gauge_anim(lv_obj_t * gauge, lv_anim_value_t value);
static void lv_100ask_widget_test_init(void);


static void lv_100ask_widget_test_init(void)
{
    lv_anim_t a;      // 表盘动画
    lv_anim_init(&a);

    lv_obj_t * adc_gauge = lv_gauge_create(lv_scr_act(), NULL);
    lv_gauge_set_range(adc_gauge, 0 ,3000);
	lv_gauge_set_critical_value(adc_gauge, 2400);  // 设置临界值，超过临界值部分的颜色为 scale_end_color
    lv_obj_set_drag_parent(adc_gauge, true);
    lv_obj_set_size(adc_gauge, 200, 200);
    lv_obj_align(adc_gauge, NULL, 0, 0, 0);
    lv_obj_set_style_local_margin_top(adc_gauge, LV_GAUGE_PART_MAIN, LV_STATE_DEFAULT, LV_DPX(30));
    lv_obj_set_style_local_value_font(adc_gauge, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_montserrat_14);	// 设置文字大小
    lv_obj_set_style_local_value_str(adc_gauge, LV_GAUGE_PART_MAIN, LV_STATE_DEFAULT, "ADC");
    lv_obj_set_style_local_value_align(adc_gauge, LV_GAUGE_PART_MAIN, LV_STATE_DEFAULT, LV_ALIGN_CENTER);
    lv_obj_set_style_local_value_ofs_y(adc_gauge, LV_GAUGE_PART_MAIN, LV_STATE_DEFAULT, LV_DPX(80));

    lv_obj_t * label = lv_label_create(adc_gauge, NULL);
    lv_obj_set_style_local_text_font(label, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_montserrat_10);             // 设置文字大小
    lv_obj_align(label, adc_gauge, LV_ALIGN_CENTER, 0, lv_obj_get_width(adc_gauge)/4);

    lv_anim_set_var(&a, adc_gauge);
    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)lv_100ask_adc_gauge_anim);
    lv_anim_set_values(&a, 0, 1);
    lv_anim_set_time(&a, 500);
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    lv_anim_start(&a);
}



/*
 *  函数名：   static void lv_100ask_adc_gauge_anim(lv_obj_t * gauge, lv_anim_value_t value)
 *  输入参数： 动画对象
 *  输入参数： 传递给动画的数据
 *  返回值：   无
 *  函数作用： 更新展示ADC检测值
*/
static void lv_100ask_adc_gauge_anim(lv_obj_t * gauge, lv_anim_value_t value)
{
    adc_select_input(0);
    uint adc_value = adc_read();
    //adc_value = f_value*1000;

    lv_gauge_set_value(gauge, 0, adc_value);

    char tmpchar[32] = {0};

    lv_snprintf(tmpchar, sizeof(tmpchar), "AD:%d\nVoltage:%f v", adc_value, (float)(adc_value * (3.3 / 4096)));

    lv_obj_t * label = lv_obj_get_child(gauge, NULL);
    lv_label_set_text(label, tmpchar);
    lv_obj_align(label, gauge, LV_ALIGN_IN_BOTTOM_MID, 0, -lv_obj_get_height(label));
    
}


int main() {
    stdio_init_all();

    // possibly set ili9341_config parameters if your pins/spi port don't match
	ili9341_init();
    
    lv_init();

    lv_port_disp_init();

    adc_init();

    // Make sure GPIO is high-impedance, no pullups etc
    adc_gpio_init(26);

    //lv_obj_t * scr = lv_obj_create(NULL, NULL);
    //lv_scr_load(scr);

    lv_100ask_widget_test_init();


    while (true) {
       sleep_ms(5);   /*Sleep for 5 millisecond*/
       lv_task_handler();
       lv_tick_inc(5);      /*Tell LVGL that 5 milliseconds were elapsed*/
    }
}

LVGL中文手册

lvgl官方的教程是英文的，这个是我在做项目时顺便做出来的中文教程站点(持续更新维护)，不仅仅只是照搬lvgl官方文档的翻译，同时总结了我们在实际开发中遇到的各种细节，让这个文档更加适合我们在实际开发中的需求。

• lvgl官方原版教程： https://docs.lvgl.io
• lvgl中文教程(中文手册)：http://lvgl.100ask.net