【换取逻辑分析仪】MCXN947-传感器动态采集模板设计-电子产品世界论坛

这些小活动你都参加了吗？快来围观一下吧！>>

电子产品世界 » 论坛首页 » 活动中心 » 板卡试用 » 【换取逻辑分析仪】MCXN947-传感器动态采集模板设计

共1条 1/1 1 跳转至页

【换取逻辑分析仪】MCXN947-传感器动态采集模板设计

王工电子

菜鸟

2024-12-09 11:10:42 打赏

只看楼主 1楼

本帖评测板卡：FRDM-MCXN947 我要申请

在上一篇GUI guider的使用基础上，本次设计一个传感器数据动态展示界面，并且添加时间信息。

生成针对KEIL工具链的代码，然后再打开工程。在setup_scr_screen.c源文件里面可以看到UI相关组件的代码。

void setup_scr_screen(lv_ui *ui)
{
	//Write codes screen
	ui->screen = lv_obj_create(NULL);
	lv_obj_set_size(ui->screen, 480, 320);
	lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);

	//Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_nxpChart
	ui->screen_nxpChart = lv_chart_create(ui->screen);
	lv_chart_set_type(ui->screen_nxpChart, LV_CHART_TYPE_LINE);
	lv_chart_set_div_line_count(ui->screen_nxpChart, 3, 5);
	lv_chart_set_point_count(ui->screen_nxpChart, 5);
	lv_chart_set_range(ui->screen_nxpChart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);
	lv_chart_set_axis_tick(ui->screen_nxpChart, LV_CHART_AXIS_PRIMARY_Y, 10, 5, 5, 4, true, 40);
	lv_chart_set_range(ui->screen_nxpChart, LV_CHART_AXIS_SECONDARY_Y, 0, 100);
	lv_chart_set_axis_tick(ui->screen_nxpChart, LV_CHART_AXIS_PRIMARY_X, 10, 5, 5, 4, true, 40);
	lv_chart_set_zoom_x(ui->screen_nxpChart, 256);
	lv_chart_set_zoom_y(ui->screen_nxpChart, 256);
	ui->screen_nxpChart_0 = lv_chart_add_series(ui->screen_nxpChart, lv_color_hex(0x000000), LV_CHART_AXIS_PRIMARY_Y);
#if LV_USE_FREEMASTER == 0
	lv_chart_set_next_value(ui->screen_nxpChart, ui->screen_nxpChart_0, 1);
	lv_chart_set_next_value(ui->screen_nxpChart, ui->screen_nxpChart_0, 20);
	lv_chart_set_next_value(ui->screen_nxpChart, ui->screen_nxpChart_0, 30);
	lv_chart_set_next_value(ui->screen_nxpChart, ui->screen_nxpChart_0, 40);
	lv_chart_set_next_value(ui->screen_nxpChart, ui->screen_nxpChart_0, 5);
#endif
	lv_obj_set_pos(ui->screen_nxpChart, 34, 24);
	lv_obj_set_size(ui->screen_nxpChart, 411, 273);
	lv_obj_set_scrollbar_mode(ui->screen_nxpChart, LV_SCROLLBAR_MODE_OFF);

	//Write style for screen_nxpChart, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_bg_opa(ui->screen_nxpChart, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_nxpChart, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen_nxpChart, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_width(ui->screen_nxpChart, 1, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_opa(ui->screen_nxpChart, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_color(ui->screen_nxpChart, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_border_side(ui->screen_nxpChart, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_nxpChart, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_width(ui->screen_nxpChart, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_color(ui->screen_nxpChart, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_line_opa(ui->screen_nxpChart, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_nxpChart, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write style for screen_nxpChart, Part: LV_PART_TICKS, State: LV_STATE_DEFAULT.
	lv_obj_set_style_text_color(ui->screen_nxpChart, lv_color_hex(0x151212), LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_nxpChart, &lv_font_montserratMedium_12, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_text_opa(ui->screen_nxpChart, 255, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_width(ui->screen_nxpChart, 2, LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_color(ui->screen_nxpChart, lv_color_hex(0xe8e8e8), LV_PART_TICKS|LV_STATE_DEFAULT);
	lv_obj_set_style_line_opa(ui->screen_nxpChart, 255, LV_PART_TICKS|LV_STATE_DEFAULT);

	//Write codes screen_label_1
	ui->screen_label_1 = lv_label_create(ui->screen);
	lv_label_set_text(ui->screen_label_1, "NXP MCXN947 Cool");
	lv_label_set_long_mode(ui->screen_label_1, LV_LABEL_LONG_WRAP);
	lv_obj_set_pos(ui->screen_label_1, 112, 6);
	lv_obj_set_size(ui->screen_label_1, 245, 23);

	//Write style for screen_label_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_border_width(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_radius(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_label_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_label_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_opa(ui->screen_label_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_label_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_label_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_digital_clock_1
	static bool screen_digital_clock_1_timer_enabled = false;
	ui->screen_digital_clock_1 = lv_dclock_create(ui->screen, "11:25:50 AM");
	if (!screen_digital_clock_1_timer_enabled) {
		lv_timer_create(screen_digital_clock_1_timer, 1000, NULL);
		screen_digital_clock_1_timer_enabled = true;
	}
	lv_obj_set_pos(ui->screen_digital_clock_1, 289, 56);
	lv_obj_set_size(ui->screen_digital_clock_1, 130, 36);

	//Write style for screen_digital_clock_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_radius(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_digital_clock_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_digital_clock_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_opa(ui->screen_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_digital_clock_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_digital_clock_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen_digital_clock_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_digital_clock_1, 7, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//The custom code of screen.
	//Update current screen layout.
	lv_obj_update_layout(ui->screen);

}

在上段代码的倒数第二行，增加如下代码，来动态更新图表数据。

	chart = ui->screen_nxpChart;
	chart_ser1 = ui->screen_nxpChart_0;
	lv_chart_set_update_mode(ui->screen_nxpChart,LV_CHART_UPDATE_MODE_SHIFT);     //设置循环刷新
	lv_timer_create(add_data, 1, NULL);

本段代码创建了一个LVGL的内部定时间，单位是毫秒。该回调函数的实现如下：

static void add_data(lv_timer_t * timer)
{
    LV_UNUSED(timer);
    static uint32_t cnt = 0;
    lv_chart_set_next_value(chart, chart_ser1, lv_rand(20, 90)); 
    cnt++;   
}

这样就可以使用随机数来验证图表是否能正常刷新显示。

数字时钟的UI代码如下：

	//Write codes screen_digital_clock_1
	static bool screen_digital_clock_1_timer_enabled = false;
	ui->screen_digital_clock_1 = lv_dclock_create(ui->screen, "11:25:50 AM");
	if (!screen_digital_clock_1_timer_enabled) {
		lv_timer_create(screen_digital_clock_1_timer, 1000, NULL);
		screen_digital_clock_1_timer_enabled = true;
	}
	lv_obj_set_pos(ui->screen_digital_clock_1, 289, 56);
	lv_obj_set_size(ui->screen_digital_clock_1, 130, 36);

	//Write style for screen_digital_clock_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
	lv_obj_set_style_radius(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_digital_clock_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_digital_clock_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_opa(ui->screen_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_digital_clock_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_digital_clock_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen_digital_clock_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_digital_clock_1, 7, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

实物效果：

4EDA2BF6-E333-4510-972A-B822DD4A991A-11113-000000D00F51572B.gif

共1条 1/1 1 跳转至页

发新帖

每日签到

有奖活动
【有奖活动】分享技术经验，兑换京东卡
话不多说，快进群！
请大声喊出：我要开发板！
【有奖活动】EEPW网站征稿正在进行时，欢迎踊跃投稿啦
奖！发布技术笔记，技术评测贴换取您心仪的礼品
打赏了！打赏了！打赏了！

打赏帖
【换取逻辑分析仪】-硬件SPI驱动OLED屏幕被打赏36分
Let'sdo第3期任务合集被打赏50分
换逻辑分析仪+Verilog三态门被打赏27分
换逻辑分析仪+Verilog多输出门被打赏24分
【分享评测，赢取加热台】使用8051单片机驱动WS2812被打赏40分
【换取逻辑分析仪】rtthread添加RRH62000传感器驱动-基于野火启明6M5被打赏48分
换逻辑分析仪+Verilog多输入门被打赏27分
【换取逻辑分析仪】基于ESP32和LVGL的音频数据动态显示系统被打赏48分
与电子爱好者谈读图四被打赏50分
Let‘s do 第三季 [电子测光表] 基础任务和进阶任务成果展示被打赏50分

热门分类
STM32	MCU
通讯及无线技术	物联网技术
电子DIY	板卡试用
基础知识	软件与操作系统
我爱生活	小e食堂

EEPW论坛

【换取逻辑分析仪】MCXN947-传感器动态采集模板设计

回复