【庆典三：项目速成设计】MCXN947-温度传感器动态显示

峰谷

本次设计一个传感器数据动态展示界面，并且添加时间信息。

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

1. void setup_scr_screen(lv_ui *ui)
   
2. {
   
3.         //Write codes screen
   
4.         ui->screen = lv_obj_create(NULL);
   
5.         lv_obj_set_size(ui->screen, 480, 320);
   
6.         lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);
   
7. 
   
8.         //Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
   
9.         lv_obj_set_style_bg_opa(ui->screen, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
   
10. 
    
11.         //Write codes screen_nxpChart
    
12.         ui->screen_nxpChart = lv_chart_create(ui->screen);
    
13.         lv_chart_set_type(ui->screen_nxpChart, LV_CHART_TYPE_LINE);
    
14.         lv_chart_set_div_line_count(ui->screen_nxpChart, 3, 5);
    
15.         lv_chart_set_point_count(ui->screen_nxpChart, 5);
    
16.         lv_chart_set_range(ui->screen_nxpChart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);
    
17.         lv_chart_set_axis_tick(ui->screen_nxpChart, LV_CHART_AXIS_PRIMARY_Y, 10, 5, 5, 4, true, 40);
    
18.         lv_chart_set_range(ui->screen_nxpChart, LV_CHART_AXIS_SECONDARY_Y, 0, 100);
    
19.         lv_chart_set_axis_tick(ui->screen_nxpChart, LV_CHART_AXIS_PRIMARY_X, 10, 5, 5, 4, true, 40);
    
20.         lv_chart_set_zoom_x(ui->screen_nxpChart, 256);
    
21.         lv_chart_set_zoom_y(ui->screen_nxpChart, 256);
    
22.         ui->screen_nxpChart_0 = lv_chart_add_series(ui->screen_nxpChart, lv_color_hex(0x000000), LV_CHART_AXIS_PRIMARY_Y);
    
23. #if LV_USE_FREEMASTER == 0
    
24.         lv_chart_set_next_value(ui->screen_nxpChart, ui->screen_nxpChart_0, 1);
    
25.         lv_chart_set_next_value(ui->screen_nxpChart, ui->screen_nxpChart_0, 20);
    
26.         lv_chart_set_next_value(ui->screen_nxpChart, ui->screen_nxpChart_0, 30);
    
27.         lv_chart_set_next_value(ui->screen_nxpChart, ui->screen_nxpChart_0, 40);
    
28.         lv_chart_set_next_value(ui->screen_nxpChart, ui->screen_nxpChart_0, 5);
    
29. #endif
    
30.         lv_obj_set_pos(ui->screen_nxpChart, 34, 24);
    
31.         lv_obj_set_size(ui->screen_nxpChart, 411, 273);
    
32.         lv_obj_set_scrollbar_mode(ui->screen_nxpChart, LV_SCROLLBAR_MODE_OFF);
    
33. 
    
34.         //Write style for screen_nxpChart, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    
35.         lv_obj_set_style_bg_opa(ui->screen_nxpChart, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
    
36.         lv_obj_set_style_bg_color(ui->screen_nxpChart, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
    
37.         lv_obj_set_style_bg_grad_dir(ui->screen_nxpChart, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
    
38.         lv_obj_set_style_border_width(ui->screen_nxpChart, 1, LV_PART_MAIN|LV_STATE_DEFAULT);
    
39.         lv_obj_set_style_border_opa(ui->screen_nxpChart, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
    
40.         lv_obj_set_style_border_color(ui->screen_nxpChart, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
    
41.         lv_obj_set_style_border_side(ui->screen_nxpChart, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
    
42.         lv_obj_set_style_radius(ui->screen_nxpChart, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
43.         lv_obj_set_style_line_width(ui->screen_nxpChart, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
    
44.         lv_obj_set_style_line_color(ui->screen_nxpChart, lv_color_hex(0xe8e8e8), LV_PART_MAIN|LV_STATE_DEFAULT);
    
45.         lv_obj_set_style_line_opa(ui->screen_nxpChart, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
    
46.         lv_obj_set_style_shadow_width(ui->screen_nxpChart, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
47. 
    
48.         //Write style for screen_nxpChart, Part: LV_PART_TICKS, State: LV_STATE_DEFAULT.
    
49.         lv_obj_set_style_text_color(ui->screen_nxpChart, lv_color_hex(0x151212), LV_PART_TICKS|LV_STATE_DEFAULT);
    
50.         lv_obj_set_style_text_font(ui->screen_nxpChart, &lv_font_montserratMedium_12, LV_PART_TICKS|LV_STATE_DEFAULT);
    
51.         lv_obj_set_style_text_opa(ui->screen_nxpChart, 255, LV_PART_TICKS|LV_STATE_DEFAULT);
    
52.         lv_obj_set_style_line_width(ui->screen_nxpChart, 2, LV_PART_TICKS|LV_STATE_DEFAULT);
    
53.         lv_obj_set_style_line_color(ui->screen_nxpChart, lv_color_hex(0xe8e8e8), LV_PART_TICKS|LV_STATE_DEFAULT);
    
54.         lv_obj_set_style_line_opa(ui->screen_nxpChart, 255, LV_PART_TICKS|LV_STATE_DEFAULT);
    
55. 
    
56.         //Write codes screen_label_1
    
57.         ui->screen_label_1 = lv_label_create(ui->screen);
    
58.         lv_label_set_text(ui->screen_label_1, "NXP MCXN947 Cool");
    
59.         lv_label_set_long_mode(ui->screen_label_1, LV_LABEL_LONG_WRAP);
    
60.         lv_obj_set_pos(ui->screen_label_1, 112, 6);
    
61.         lv_obj_set_size(ui->screen_label_1, 245, 23);
    
62. 
    
63.         //Write style for screen_label_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    
64.         lv_obj_set_style_border_width(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
65.         lv_obj_set_style_radius(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
66.         lv_obj_set_style_text_color(ui->screen_label_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);
    
67.         lv_obj_set_style_text_font(ui->screen_label_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);
    
68.         lv_obj_set_style_text_opa(ui->screen_label_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
    
69.         lv_obj_set_style_text_letter_space(ui->screen_label_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
    
70.         lv_obj_set_style_text_line_space(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
71.         lv_obj_set_style_text_align(ui->screen_label_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
    
72.         lv_obj_set_style_bg_opa(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
73.         lv_obj_set_style_pad_top(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
74.         lv_obj_set_style_pad_right(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
75.         lv_obj_set_style_pad_bottom(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
76.         lv_obj_set_style_pad_left(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
77.         lv_obj_set_style_shadow_width(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
78. 
    
79.         //Write codes screen_digital_clock_1
    
80.         static bool screen_digital_clock_1_timer_enabled = false;
    
81.         ui->screen_digital_clock_1 = lv_dclock_create(ui->screen, "11:25:50 AM");
    
82.         if (!screen_digital_clock_1_timer_enabled) {
    
83.                 lv_timer_create(screen_digital_clock_1_timer, 1000, NULL);
    
84.                 screen_digital_clock_1_timer_enabled = true;
    
85.         }
    
86.         lv_obj_set_pos(ui->screen_digital_clock_1, 289, 56);
    
87.         lv_obj_set_size(ui->screen_digital_clock_1, 130, 36);
    
88. 
    
89.         //Write style for screen_digital_clock_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    
90.         lv_obj_set_style_radius(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
91.         lv_obj_set_style_text_color(ui->screen_digital_clock_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
    
92.         lv_obj_set_style_text_font(ui->screen_digital_clock_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);
    
93.         lv_obj_set_style_text_opa(ui->screen_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
    
94.         lv_obj_set_style_text_letter_space(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
95.         lv_obj_set_style_text_align(ui->screen_digital_clock_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
    
96.         lv_obj_set_style_bg_opa(ui->screen_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
    
97.         lv_obj_set_style_bg_color(ui->screen_digital_clock_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
    
98.         lv_obj_set_style_bg_grad_dir(ui->screen_digital_clock_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
    
99.         lv_obj_set_style_pad_top(ui->screen_digital_clock_1, 7, LV_PART_MAIN|LV_STATE_DEFAULT);
    
100.         lv_obj_set_style_pad_right(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
     
101.         lv_obj_set_style_pad_bottom(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
     
102.         lv_obj_set_style_pad_left(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
     
103.         lv_obj_set_style_shadow_width(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
     
104. 
     
105.         //The custom code of screen.
     
106.         //Update current screen layout.
     
107.         lv_obj_update_layout(ui->screen);
     
108. 
     
109. }

复制代码

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

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

复制代码

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

1. static void add_data(lv_timer_t * timer)
   
2. {
   
3.     LV_UNUSED(timer);
   
4.     static uint32_t cnt = 0;
   
5.     lv_chart_set_next_value(chart, chart_ser1, lv_rand(20, 90));
   
6.     cnt++;   
   
7. }

复制代码

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

数字时钟的UI代码如下：

1.         //Write codes screen_digital_clock_1
   
2.         static bool screen_digital_clock_1_timer_enabled = false;
   
3.         ui->screen_digital_clock_1 = lv_dclock_create(ui->screen, "11:25:50 AM");
   
4.         if (!screen_digital_clock_1_timer_enabled) {
   
5.                 lv_timer_create(screen_digital_clock_1_timer, 1000, NULL);
   
6.                 screen_digital_clock_1_timer_enabled = true;
   
7.         }
   
8.         lv_obj_set_pos(ui->screen_digital_clock_1, 289, 56);
   
9.         lv_obj_set_size(ui->screen_digital_clock_1, 130, 36);
   
10. 
    
11.         //Write style for screen_digital_clock_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    
12.         lv_obj_set_style_radius(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
13.         lv_obj_set_style_text_color(ui->screen_digital_clock_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
    
14.         lv_obj_set_style_text_font(ui->screen_digital_clock_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);
    
15.         lv_obj_set_style_text_opa(ui->screen_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
    
16.         lv_obj_set_style_text_letter_space(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
17.         lv_obj_set_style_text_align(ui->screen_digital_clock_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
    
18.         lv_obj_set_style_bg_opa(ui->screen_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
    
19.         lv_obj_set_style_bg_color(ui->screen_digital_clock_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
    
20.         lv_obj_set_style_bg_grad_dir(ui->screen_digital_clock_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
    
21.         lv_obj_set_style_pad_top(ui->screen_digital_clock_1, 7, LV_PART_MAIN|LV_STATE_DEFAULT);
    
22.         lv_obj_set_style_pad_right(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
23.         lv_obj_set_style_pad_bottom(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
24.         lv_obj_set_style_pad_left(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
    
25.         lv_obj_set_style_shadow_width(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

复制代码

实物效果：

可以看到数字时钟正常运行，动态图表可以显示随机数，刷新时候无闪烁，非常不错！

接下来把开发板的I3C传感器数据采集过来，动态展示。

初始化相关的PIN脚：

1.     const port_pin_config_t port1_11_pinD3_config = {/* Internal pull-up/down resistor is disabled */
   
2.                                                      kPORT_PullDisable,
   
3.                                                      /* Low internal pull resistor value is selected. */
   
4.                                                      kPORT_LowPullResistor,
   
5.                                                      /* Fast slew rate is configured */
   
6.                                                      kPORT_FastSlewRate,
   
7.                                                      /* Passive input filter is disabled */
   
8.                                                      kPORT_PassiveFilterDisable,
   
9.                                                      /* Open drain output is disabled */
   
10.                                                      kPORT_OpenDrainDisable,
    
11.                                                      /* Low drive strength is configured */
    
12.                                                      kPORT_LowDriveStrength,
    
13.                                                      /* Pin is configured as I3C1_PUR */
    
14.                                                      kPORT_MuxAlt10,
    
15.                                                      /* Digital input enabled */
    
16.                                                      kPORT_InputBufferEnable,
    
17.                                                      /* Digital input is not inverted */
    
18.                                                      kPORT_InputNormal,
    
19.                                                      /* Pin Control Register fields [15:0] are not locked */
    
20.                                                      kPORT_UnlockRegister};
    
21.     /* PORT1_11 (pin D3) is configured as I3C1_PUR */
    
22.     PORT_SetPinConfig(PORT1, 11U, &port1_11_pinD3_config);
    
23. 
    
24.     const port_pin_config_t port1_16_pinF6_config = {/* Internal pull-up resistor is enabled */
    
25.                                                      kPORT_PullUp,
    
26.                                                      /* Low internal pull resistor value is selected. */
    
27.                                                      kPORT_LowPullResistor,
    
28.                                                      /* Fast slew rate is configured */
    
29.                                                      kPORT_FastSlewRate,
    
30.                                                      /* Passive input filter is disabled */
    
31.                                                      kPORT_PassiveFilterDisable,
    
32.                                                      /* Open drain output is disabled */
    
33.                                                      kPORT_OpenDrainDisable,
    
34.                                                      /* Low drive strength is configured */
    
35.                                                      kPORT_LowDriveStrength,
    
36.                                                      /* Pin is configured as I3C1_SDA */
    
37.                                                      kPORT_MuxAlt10,
    
38.                                                      /* Digital input enabled */
    
39.                                                      kPORT_InputBufferEnable,
    
40.                                                      /* Digital input is not inverted */
    
41.                                                      kPORT_InputNormal,
    
42.                                                      /* Pin Control Register fields [15:0] are not locked */
    
43.                                                      kPORT_UnlockRegister};
    
44.     /* PORT1_16 (pin F6) is configured as I3C1_SDA */
    
45.     PORT_SetPinConfig(PORT1, 16U, &port1_16_pinF6_config);
    
46. 
    
47.     const port_pin_config_t port1_17_pinF4_config = {/* Internal pull-up resistor is enabled */
    
48.                                                      kPORT_PullUp,
    
49.                                                      /* Low internal pull resistor value is selected. */
    
50.                                                      kPORT_LowPullResistor,
    
51.                                                      /* Fast slew rate is configured */
    
52.                                                      kPORT_FastSlewRate,
    
53.                                                      /* Passive input filter is disabled */
    
54.                                                      kPORT_PassiveFilterDisable,
    
55.                                                      /* Open drain output is disabled */
    
56.                                                      kPORT_OpenDrainDisable,
    
57.                                                      /* Low drive strength is configured */
    
58.                                                      kPORT_LowDriveStrength,
    
59.                                                      /* Pin is configured as I3C1_SCL */
    
60.                                                      kPORT_MuxAlt10,
    
61.                                                      /* Digital input enabled */
    
62.                                                      kPORT_InputBufferEnable,
    
63.                                                      /* Digital input is not inverted */
    
64.                                                      kPORT_InputNormal,
    
65.                                                      /* Pin Control Register fields [15:0] are not locked */
    
66.                                                      kPORT_UnlockRegister};
    
67.     /* PORT1_17 (pin F4) is configured as I3C1_SCL */
    
68.     PORT_SetPinConfig(PORT1, 17U, &port1_17_pinF4_config);               

复制代码

1. static void add_data(lv_timer_t * timer)
   
2. {
   
3.      static double temperature;
   
4.       LV_UNUSED(timer);
   
5.       P3T1755_ReadTemperature(&p3t1755Handle, &temperature);
   
6.       lv_chart_set_next_value(chart, chart_ser1, temperature);
   
7. }

复制代码

用手触摸温度传感器，数据动态变化。

至此完成了第一个基于GUI Guider设计的温度传感器采集展示小项目。

阅读全文

NXP管管

先完成一个小目标

峰谷

NXP管管 发表于 2024-12-10 16:12
先完成一个小目标