佛山企業(yè)做網(wǎng)站拉新充場app推廣平臺
目錄
1.簡介
1.1功能介紹
1.2技術棧介紹
1.3演示視頻
1.4硬件介紹
2.軟件設計
2.1智能家居UI設計
2.2.main函數(shù)
3.結(jié)尾（附網(wǎng)盤鏈接）
1.簡介
此文章并不是教程，只能當作筆者的學習分享，只會做一些簡單的介紹，其他的各位結(jié)合著代碼和運行現(xiàn)象自己分析吧，相信通過函數(shù)名和注釋，基本上是不難看懂代碼的，其中涉及到的一些技術棧，也請各位學習到的時候多查閱資料。
本篇的內(nèi)容為嵌入式Linux應用層的一個綜合性比較強的項目，結(jié)尾會將源碼放在網(wǎng)盤中開源出來，筆者能力有限，只是簡單的把功能實現(xiàn)了，代碼開源供大家一起交流學習，有什么好的建議，請各位一定不吝賜教！！！
1.1功能介紹
項目包括了四個app：
1.云平臺的調(diào)試窗口，用于查看訂閱主題所下發(fā)的數(shù)據(jù)，另一個為輸入Json格式的數(shù)據(jù)來控制STM32單片機上的外設。
2.智能家居的界面，有4個圖片按鈕用于控制STM32板子上的LED燈、門（舵機）、蜂鳴器，量計分別為溫度、濕度和亮度的值，同樣是STM32獲取發(fā)布到云平臺的。
3.通過一個攝像頭模塊做的一個相機功能，可以拍照、錄像，以及查看拍攝的照片，和播放錄制視頻的回放。
4.簡易的音樂播放器：能夠切換歌曲，以及暫停播放音樂。
1.2技術棧介紹
雖然項目簡單，但是所涉及到的技術棧還是比較雜，我簡單在此列出：
?1.LVGL庫用于繪制UI。
2.MQTT協(xié)議，連接阿里云平臺與STM32通訊。
3.alsa庫用于音頻處理。
4.LED、BEEP
5.V4L2 攝像頭應用編程
1.3演示視頻
【開源】嵌入式Linux應用層物聯(lián)網(wǎng)小項目|通過MQTT協(xié)議與STM32通訊_嗶哩嗶哩_bilibili
1.4硬件介紹
硬件使用的是正點原子的阿爾法開發(fā)板，芯片是IMX6U，類似開發(fā)板應該都可以運行。
2.軟件設計
2.1智能家居UI設計
主要的內(nèi)容就是創(chuàng)建了4個開關按鍵分別對應STM32的LED、舵機、蜂鳴器的控制，第4個空調(diào)的按鍵還沒有去完善它。以及3個度量針，用于顯示STM32上傳傳感器數(shù)據(jù)，對應溫度、濕度和光度。
#include "ui_app_smarthome.h"lv_anim_t temp_anim, light_anim, humi_anim;
lv_obj_t *temp_bar = NULL, *light_bar = NULL, *humi_arc = NULL;
lv_obj_t *temp_bar_label, *light_bar_label, *humi_arc_label;
g_sensor_t g_sensor;extern void *mqtt_handle;
extern char *pub_topic;void ui_draw_contrl_bar(lv_coord_t x, lv_coord_t y, const char *t_lab, const char *b_lab, const lv_img_dsc_t *img, const lv_color_t value)
{ui_draw_backgroud_bar(x, y, 170, 180, value);lv_obj_t *top_lab = lv_label_create(lv_scr_act());lv_label_set_text(top_lab, t_lab);static lv_style_t top_lab_style;lv_style_init(&top_lab_style);lv_style_set_text_font(&top_lab_style, &lv_font_montserrat_16); // 設置字體lv_style_set_text_color(&top_lab_style, lv_color_hex(MY_UI_COLOR_BLUE)); // 設置字體顏色lv_obj_add_style(top_lab, &top_lab_style, LV_PART_MAIN);lv_obj_align(top_lab, LV_ALIGN_TOP_LEFT, x + 30, y + 20);lv_obj_t *img_light_obj = lv_img_create(lv_scr_act());lv_img_set_src(img_light_obj, img);lv_obj_set_size(img_light_obj, 64, 64);lv_obj_align(img_light_obj, LV_ALIGN_TOP_LEFT, x + 15, y + 55);lv_obj_t *button_lab = lv_label_create(lv_scr_act());lv_label_set_text(button_lab, b_lab);static lv_style_t button_lab_style;lv_style_init(&button_lab_style);lv_style_set_text_font(&button_lab_style, &lv_font_montserrat_16); // 設置字體lv_style_set_text_color(&button_lab_style, lv_color_hex(MY_UI_COLOR_BLACK)); // 設置字體顏色lv_obj_add_style(button_lab, &button_lab_style, LV_PART_MAIN);lv_obj_align(button_lab, LV_ALIGN_TOP_LEFT, x + 30, y + 140);
}static lv_obj_t *slider_label;
static void slider_event_cb(lv_event_t *e)
{lv_obj_t *slider = lv_event_get_target(e);char buf[8];lv_snprintf(buf, sizeof(buf), "%d°C", (int)lv_slider_get_value(slider));lv_label_set_text(slider_label, buf);lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_TOP_MID, 25, 65);
}static void smarthome_light_btn_cb(lv_event_t *e)
{int res;char *pub_payload = "{\"LED\":1}";lv_event_code_t code = lv_event_get_code(e);lv_obj_t *obj = lv_event_get_target(e);if (code == LV_EVENT_VALUE_CHANGED){LV_UNUSED(obj);LV_LOG_USER("State: %s\n", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "On" : "Off");res = aiot_mqtt_pub(mqtt_handle, pub_topic, (uint8_t *)pub_payload, (uint32_t)strlen(pub_payload), 0);if (res < 0){printf("aiot_mqtt_sub failed, res: -0x%04X\n", -res);return -1;}}
}static void smarthome_door_btn_cb(lv_event_t *e)
{int res;char *pub_payload = "{\"door\":2}";lv_event_code_t code = lv_event_get_code(e);lv_obj_t *obj = lv_event_get_target(e);if (code == LV_EVENT_VALUE_CHANGED){LV_UNUSED(obj);LV_LOG_USER("State: %s\n", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "On" : "Off");res = aiot_mqtt_pub(mqtt_handle, pub_topic, (uint8_t *)pub_payload, (uint32_t)strlen(pub_payload), 0);if (res < 0){printf("aiot_mqtt_sub failed, res: -0x%04X\n", -res);return -1;}}
}static void smarthome_beep_btn_cb(lv_event_t *e)
{int res;char *pub_payload = "{\"beep\":3}";lv_event_code_t code = lv_event_get_code(e);lv_obj_t *obj = lv_event_get_target(e);if (code == LV_EVENT_VALUE_CHANGED){LV_UNUSED(obj);LV_LOG_USER("State: %s\n", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "On" : "Off");res = aiot_mqtt_pub(mqtt_handle, pub_topic, (uint8_t *)pub_payload, (uint32_t)strlen(pub_payload), 0);if (res < 0){printf("aiot_mqtt_sub failed, res: -0x%04X\n", -res);return -1;}}
}void ui_smarthome_create_contrl_switch(void)
{lv_obj_t *light_sw;light_sw = lv_switch_create(lv_scr_act());lv_obj_set_size(light_sw, 60, 40);lv_obj_align(light_sw, LV_ALIGN_TOP_LEFT, 240, 80);lv_obj_add_event_cb(light_sw, smarthome_light_btn_cb, LV_EVENT_ALL, NULL);lv_obj_t *door_sw;door_sw = lv_switch_create(lv_scr_act());lv_obj_set_size(door_sw, 60, 40);lv_obj_align(door_sw, LV_ALIGN_TOP_LEFT, 430, 80);lv_obj_add_event_cb(door_sw, smarthome_door_btn_cb, LV_EVENT_ALL, NULL);lv_obj_t *beep_sw;beep_sw = lv_switch_create(lv_scr_act());lv_obj_set_size(beep_sw, 60, 40);lv_obj_align(beep_sw, LV_ALIGN_TOP_LEFT, 240, 280);lv_obj_add_event_cb(beep_sw, smarthome_beep_btn_cb, LV_EVENT_ALL, NULL);lv_obj_t *air_slider = lv_slider_create(lv_scr_act());lv_bar_set_range(air_slider, 16, 30);lv_obj_set_size(air_slider, 10, 120);lv_obj_align(air_slider, LV_ALIGN_TOP_LEFT, 450, 290);lv_obj_add_event_cb(air_slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);slider_label = lv_label_create(lv_scr_act());lv_label_set_text(slider_label, "16°C");lv_obj_align_to(slider_label, air_slider, LV_ALIGN_OUT_TOP_MID, 25, 65);
}static void set_temp(void *bar, int32_t temp)
{lv_bar_set_value(bar, temp, LV_ANIM_ON);// 更新溫度標簽的文本if (temp_bar_label != NULL){char temp_str[32];snprintf(temp_str, sizeof(temp_str), "%d°C", temp);lv_label_set_text(temp_bar_label, temp_str);}
}static void set_light(void *bar, int32_t light)
{lv_bar_set_value(bar, light, LV_ANIM_ON);// 更新溫度標簽的文本if (light_bar_label != NULL){char light_str[32];snprintf(light_str, sizeof(light_str), "%dlux", light);lv_label_set_text(light_bar_label, light_str);}
}static void set_humi(void *arc, int32_t humi)
{lv_arc_set_value(arc, humi);// 更新溫度標簽的文本if (humi_arc_label != NULL){char humi_str[32];snprintf(humi_str, sizeof(humi_str), "%d%%", humi);lv_label_set_text(humi_arc_label, humi_str);}
}static void temp_update_callback(lv_timer_t *timer)
{// 讀取新的溫度值int32_t new_temp = (int32_t)g_sensor.temp_value;// printf("new_temp = %d\n", new_temp);int32_t cur_temp = lv_bar_get_value(temp_bar);// printf("cur_temp = %d\n", cur_temp);// 更新動畫的目標值lv_anim_set_values(&temp_anim, cur_temp, new_temp);// 啟動動畫lv_anim_start(&temp_anim);
}static void light_update_callback(lv_timer_t *timer)
{int32_t new_light = (int32_t)g_sensor.light_value;// printf("new_light = %d\n", new_light);// // 檢查light_bar對象是否有效// if (light_bar == NULL) {// printf("Error: light_bar is NULL\n");// return;// }int32_t cur_light = lv_bar_get_value(light_bar);// printf("cur_light = %d\n", cur_light);// 更新動畫的目標值lv_anim_set_values(&light_anim, cur_light, new_light);// 啟動動畫lv_anim_start(&light_anim);
}static void humi_update_callback(lv_timer_t *timer)
{int32_t new_humi = (int32_t)g_sensor.humi_value;printf("new_humi = %d\r\n", new_humi);if (humi_arc == NULL){printf("Error: humi_arc is NULL\n");return;}int32_t cur_humi = lv_arc_get_value(humi_arc);printf("cur_humi = %d\r\n", cur_humi);// 更新動畫的目標值lv_anim_set_values(&humi_anim, cur_humi, new_humi);lv_anim_start(&humi_anim);
}void create_temp_update_timer(void)
{lv_timer_create(temp_update_callback, 5000, NULL); // 每5秒更新一次
}void create_light_update_timer(void)
{lv_timer_create(light_update_callback, 5000, NULL); // 每5秒更新一次
}void create_humi_update_timer(void)
{lv_timer_create(humi_update_callback, 5000, NULL); // 每5秒更新一次
}void ui_smarthome_create_rec_data(void)
{/* 1.溫度計UI */static lv_style_t temp_scr_act;lv_style_init(&temp_scr_act);lv_style_set_bg_opa(&temp_scr_act, LV_OPA_COVER);lv_style_set_bg_color(&temp_scr_act, lv_palette_main(LV_PALETTE_RED));temp_bar = lv_bar_create(lv_scr_act());lv_obj_add_style(temp_bar, &temp_scr_act, LV_PART_INDICATOR);lv_obj_set_size(temp_bar, 20, 150);lv_obj_align(temp_bar, LV_ALIGN_TOP_LEFT, 600, 90);lv_bar_set_range(temp_bar, 0, 40);// 動畫設置lv_anim_init(&temp_anim);lv_anim_set_exec_cb(&temp_anim, (lv_anim_exec_xcb_t)set_temp);lv_anim_set_time(&temp_anim, 1000); // 動畫時間1秒lv_anim_set_var(&temp_anim, temp_bar);lv_anim_set_repeat_count(&temp_anim, 0); // 只執(zhí)行一次LV_IMG_DECLARE(img_temp_48);lv_obj_t *temp_img = lv_img_create(lv_scr_act());lv_img_set_src(temp_img, &img_temp_48);lv_obj_align_to(temp_img, temp_bar, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);lv_obj_set_size(temp_img, 48, 48);temp_bar_label = lv_label_create(lv_scr_act());lv_label_set_text(temp_bar_label, "0°C");// 創(chuàng)建一個樣式并設置字體大小static lv_style_t temp_label_style;lv_style_init(&temp_label_style);lv_style_set_text_font(&temp_label_style, &lv_font_montserrat_24); // 設置字體// 將樣式應用到標簽lv_obj_add_style(temp_bar_label, &temp_label_style, LV_PART_MAIN);// 對齊標簽到溫度條lv_obj_align_to(temp_bar_label, temp_bar, LV_ALIGN_OUT_TOP_MID, 0, 0);// 創(chuàng)建定時器更新溫度create_temp_update_timer();/* 2.亮度計UI */static lv_style_t light_scr_act;lv_style_init(&light_scr_act);lv_style_set_bg_opa(&light_scr_act, LV_OPA_COVER);lv_style_set_bg_color(&light_scr_act, lv_palette_main(LV_PALETTE_YELLOW));light_bar = lv_bar_create(lv_scr_act());lv_obj_add_style(light_bar, &light_scr_act, LV_PART_INDICATOR);lv_obj_set_size(light_bar, 20, 150);lv_obj_align(light_bar, LV_ALIGN_TOP_LEFT, 680, 90);lv_bar_set_range(light_bar, 0, 200);lv_anim_init(&light_anim);lv_anim_set_exec_cb(&light_anim, (lv_anim_exec_xcb_t)set_light);lv_anim_set_time(&light_anim, 1000); // 動畫時間1秒lv_anim_set_var(&light_anim, light_bar);lv_anim_set_repeat_count(&light_anim, 0); // 只執(zhí)行一次LV_IMG_DECLARE(img_light_48);lv_obj_t *light_img = lv_img_create(lv_scr_act());lv_img_set_src(light_img, &img_light_48);lv_obj_align_to(light_img, light_bar, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);lv_obj_set_size(light_img, 48, 48);light_bar_label = lv_label_create(lv_scr_act());lv_label_set_text(light_bar_label, "0lux");// 創(chuàng)建一個樣式并設置字體大小static lv_style_t light_label_style;lv_style_init(&light_label_style);lv_style_set_text_font(&light_label_style, &lv_font_montserrat_24); // 設置字體// 將樣式應用到標簽lv_obj_add_style(light_bar_label, &light_label_style, LV_PART_MAIN);// 對齊標簽到溫度條lv_obj_align_to(light_bar_label, light_bar, LV_ALIGN_OUT_TOP_MID, 0, 0);create_light_update_timer();/* 3.濕度計UI */static lv_style_t humi_scr_act;lv_style_init(&humi_scr_act);// 創(chuàng)建一個圓弧對象humi_arc = lv_arc_create(lv_scr_act());lv_obj_add_style(humi_arc, &humi_scr_act, LV_PART_MAIN);lv_obj_set_size(humi_arc, 150, 150); // 設置圓弧的尺寸lv_obj_align(humi_arc, LV_ALIGN_TOP_LEFT, 580, 320); // 設置圓弧的位置lv_arc_set_range(humi_arc, 0, 100); // 設置圓弧的范圍，比如0到100的亮度值lv_arc_set_bg_angles(humi_arc, 135, 45); // 設置背景圓弧的角度范圍lv_arc_set_angles(humi_arc, 0, 0); // 設置當前值的圓弧角度lv_arc_set_value(humi_arc, 0);lv_obj_remove_style(humi_arc, NULL, LV_PART_KNOB); /*Be sure the knob is not displayed*/// 設置指示器樣式static lv_style_t arc_indicator_style;lv_style_init(&arc_indicator_style);lv_style_set_line_color(&arc_indicator_style, lv_palette_main(LV_PALETTE_YELLOW)); // 設置線條顏色為黃色lv_style_set_line_width(&arc_indicator_style, 8); // 設置線條寬度lv_obj_add_style(humi_arc, &arc_indicator_style, LV_PART_INDICATOR); // 將指示器樣式應用到圓弧LV_IMG_DECLARE(img_humi_48);lv_obj_t *humi_img = lv_img_create(lv_scr_act());lv_img_set_src(humi_img, &img_humi_48);lv_obj_align_to(humi_img, humi_arc, LV_ALIGN_OUT_BOTTOM_MID, 0, -40);lv_obj_set_size(humi_img, 48, 48);humi_arc_label = lv_label_create(lv_scr_act());lv_label_set_text(humi_arc_label, "0%");static lv_style_t humi_label_style;lv_style_init(&humi_label_style);lv_style_set_text_font(&humi_label_style, &lv_font_montserrat_24); // 設置字體lv_obj_add_style(humi_arc_label, &humi_label_style, LV_PART_MAIN);lv_obj_align_to(humi_arc_label, humi_arc, LV_ALIGN_OUT_TOP_MID, 0, 75);// 設置動畫lv_anim_init(&humi_anim);lv_anim_set_var(&humi_anim, humi_arc);lv_anim_set_exec_cb(&humi_anim, (lv_anim_exec_xcb_t)set_humi);lv_anim_set_time(&humi_anim, 1000); // 動畫時間1秒lv_anim_set_repeat_count(&humi_anim, 0); // 只執(zhí)行一次create_humi_update_timer();printf("humi_arc created successfully: %p\n", (void *)humi_arc);
}void ui_app_smarthome(void)
{// ui_app_clear_area();clear_area(0, 0, 800, 480, lv_color_hex(MY_UI_COLOR_DEEP_WHITE));ui_left_app_bar(20, 70);lv_obj_t *img = lv_img_create(lv_scr_act());lv_img_set_src(img, &img_smarthome_on);lv_obj_align(img, LV_ALIGN_TOP_LEFT, 32, 180);lv_obj_t *mid_label = lv_label_create(lv_scr_act());lv_label_set_text(mid_label, "SmartHome");static lv_style_t mid_label_style;lv_style_init(&mid_label_style);lv_style_set_text_font(&mid_label_style, &lv_font_montserrat_24); // 設置字體lv_style_set_text_color(&mid_label_style, lv_color_hex(MY_UI_COLOR_BLACK)); // 設置字體顏色lv_obj_add_style(mid_label, &mid_label_style, LV_PART_MAIN);lv_obj_align(mid_label, LV_ALIGN_TOP_MID, 0, 20);ui_draw_contrl_bar(160, 70, "off", "light", &img_light, lv_color_hex(MY_UI_COLOR_WHITE));ui_draw_contrl_bar(350, 70, "off", "door", &img_door, lv_color_hex(MY_UI_COLOR_WHITE));ui_draw_contrl_bar(160, 270, "off", "beep", &img_beep, lv_color_hex(MY_UI_COLOR_WHITE));ui_draw_contrl_bar(350, 270, "off", "air", &img_kongtiao, lv_color_hex(MY_UI_COLOR_WHITE));ui_smarthome_create_contrl_switch();ui_smarthome_create_rec_data();
}2.2.main函數(shù)
ui_app_smarthome()函數(shù)在ui_main.c中被調(diào)用，當用戶點擊其圖片按鈕，才會切換到此app下。
void ui_page_main(void)
{destroy_previous_objects();lv_obj_set_style_bg_color(lv_scr_act(), lv_color_hex(MY_UI_COLOR_DEEP_WHITE), LV_PART_MAIN);ui_left_app_bar(20, 70);if (app_index == UI_APP_YUNPINTAI){ui_app_yunpintai();}else if (app_index == UI_APP_SMARTHOME){ui_app_smarthome();}else if (app_index == UI_APP_CAMERA){ui_app_camera();}else if (app_index == UI_APP_MUSIC){ui_app_music();}
}void *ds_ui_page_thread(void *args)
{ui_page_main();// setup_time_update();while (1){lv_task_handler();usleep(5000);}return NULL;
}3.結(jié)尾（附網(wǎng)盤鏈接）
鏈接：百度網(wǎng)盤 請輸入提取碼
提取碼：2jia
--來自百度網(wǎng)盤超級會員V5的分享