一、前言
中科藍訊 BT8958B SDK 中移植了 LVGL 7.11.0 版本的圖形庫，筆者將在此基礎上跟大家分享一下指針錶盤界面的實現。
二、圖片資源的轉換與添加
首先需要進行圖片資源的轉換，可通過 LVGL 官網圖像轉換工具進行轉換。
- 進行圖像格式轉換
以將圖片轉換為源文件為例，源文件是以數組的形式存放圖片的像素顏色數據。以秒針圖片進行轉換為例，如圖 2-1 所示。
圖 2-1
需要注意的是，秒針圖片是帶有透明色的圖片，除了秒針部分，背景為透明色。LVGL 支持帶有不透明度的圖片的顯示，這裡的顏色格式需選擇 CF_TRUE_COLOR_ALPHA。CF_TRUE_COLOR 存儲RGB顏色，而 CF_TRUE_COLOR_ALPHA 是在此基礎上為每個像素添加一個字節的 Alpha 通道，用於存儲不透明度。
輸出格式選擇 C array 後就可以進行轉換，得到對應的 .c 文件。如圖 2-2 所示，LVGL 中以圖片數據類型結構體去存放對應的變量信息。
圖 2-2
- 進行圖片資源添加
將生成的 sec_150.c 文件複製到 SDK 中內部圖片資源的存放路徑 app\gui\lvgl_ui 下，接著將該文件添加到工程的對應位置。
在使用前需要對該圖片變量進行聲明，如圖 2-3 所示。
圖 2-3
三、LVGL圖像顯示
錶盤圖片資源的添加可參考上面的內容。首先進行錶盤圖片的顯示。如圖 3-1 所示，創建圖片對象進行顯示，圖片顯示的用法類似，此處先不展開說明。
圖 3-1
下面以秒針圖片顯示為例介紹 LVGL 的圖像顯示。如圖 3-2 所示，以錶盤圖片對象為父對象，創建子對象。接著設置圖片的顯示源，調用該圖片數組。接著設置對齊方式和偏移坐標，對齊方式設置 LV_ALIGN_CENTER，為中心對齊。
圖 3-2
圖片顯示效果如圖 3-3 所示。
圖 3-3
四、指針錶盤的簡單應用
- 圖片旋轉
接下來介紹通過圖片的旋轉去完成指針錶盤時間的顯示。LVGL 中可通過 lv_img_set_angle(img, angle) 函數對圖片對象進行旋轉。需注意的是，這裡角度精度為 0.1 度，例如需要設置 90 度時，對應的 angle 需設置 900。
- 設置旋轉軸驅點
默認情況下，旋轉的樞軸點是圖像的中心，可以根據圖片旋轉需要進行設置。可通過 lv_img_set_pivot(img, pivot_x, pivot_y) 函數進行設置。lv_img_set_pivot(img, 0, 0) 則是設置圖片旋轉的樞軸點為圖像的左上角。
- 應用
在 SDK 中可通過獲取 rtc_tm 結構體對應的變量值得到對應的時間值去計算角度，rtc_tm 結構體如圖 4-1 所示。
圖 4 -1
如圖 4-2 所示，首先進行時針、分針、秒針圖片對象旋轉中心的設置，下一步獲取對應的時間值，進行角度的計算，再設置旋轉角度即可。
圖 4-2
對於秒針圖像，每走一秒需旋轉 6 度。對於分針圖像，每走一分鐘也是需旋轉 6 度。而對於時針圖像，時針旋轉的角度為小時旋轉角度與分鐘旋轉角度的和，每走一小時，需旋轉 30 度，每走一分鐘，需旋轉 0.5 度。
顯示效果如圖 4-3 所示。
圖 4-3
五、結語
以上就是本篇文章的全部內容，感謝閱讀。
六、參考資料
LVGL 官方手冊 https://docs.lvgl.io/7.11/widgets/list.html#
評論