LVGL庫入門教程 - 顏色和圖像

来源:https://www.cnblogs.com/frozencandles/archive/2022/06/24/16407744.html
-Advertisement-
Play Games

程式包編譯安裝的步驟: 源代碼-->預處理-->編譯-->彙編-->鏈接-->執行 多文件:文件中的代碼之間,很可能存在跨文件依賴關係 編譯源碼的項目工具 使用相關的項目管理工具可以大大減少編譯過程的複雜度 根據源碼類型來對這些工具進行分類: C、C++的源碼編譯:使用 make 項目管理器 con ...


顏色

構造顏色

在 LVGL 中,顏色以結構 lv_color_t 表示。在最開始移植整個工程時,曾經在 lv_conf.h 中修改過顏色深度:

/*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
#define LV_COLOR_DEPTH 32

LVGL 會自動根據所選的顏色深度創建合適的顏色結構。在接下來幾處位置還有幾個與顏色有關的配置選項,可以參照註釋修改。

例如,16 位 big-endian 的顏色定義為:

typedef union {
    struct {
        uint16_t blue  : 5;
        uint16_t green : 6;
        uint16_t red   : 5;
    } ch;
    uint16_t full;
} lv_color16_t;
typedef lv_color16_t lv_color_t;

那麼就可以根據該結構創建合適的顏色值了:

lv_color_t orange = {
    .ch = {
        .red   = 0b11111,
        .green = 0b101001,
        .blue  = 0
    }
};

直接創建 RGB565 的顏色格式有點難以調色,不過可以借用以下函數從十六位顏色中生成合適的顏色值:

lv_color_t orange = lv_color_make(0xFF, 0xA5, 0);  // 從顏色通道創建
lv_color_t aqua = lv_color_hex(0x00FFFF);          // 從十六進位創建
lv_color_t lightgrey = lv_color_hex3(0xddd);       // 從十六進位簡寫創建

這些顏色在創建時,每種顏色通道的值都使用 0~255 表示即可,創建過程中會自動轉換為合適的顏色值。

LVGL 還提供了 HSV 格式的顏色支持,

lv_color_t red = lv_color_hsv_to_rgb(0, 100, 100);   // 從 HSV 顏色空間創建顏色
lv_color_hsv_t blue = lv_color_rgb_to_hsv(r, g, b);  // 將 RGB 顏色轉換為 HSV 顏色

除此之外,lv_color_t 、RGB 顏色、HSV 顏色之間也能互相轉換。


如果覺得 16 進位的顏色還是不夠直觀,還可以使用調色板功能。LVGL 提供了常用顏色的色值表示,可以直接使用、微調、混合這些顏色。

例如,以下直接調出了一個紫色:

lv_color_t purple = lv_palette_main(LV_PALETTE_PURPLE)

如果覺得預設的紫色太深或太淺的話,還可以在調色板中更改亮度:

lv_color_t dark_purple = lv_palette_darken(LV_PALETTE_PURPLE, 2)  // 調深兩級,最多可以調深或淺 4 級
lv_color_t light_purple = lv_color_lighten(purple, 60);  // 調淺一些,調到 255 就變成純白

甚至還可以將兩種顏色混合:

lv_color_t orange = lv_color_mix(red, yellow, 156);

比例的取值為 0~255 ,例如設定為 0 就是全紅,128 就是紅黃各占一半等。

可以將一個顏色類型直接應用到以下樣式屬性中:

屬性名 含義
bg_color 背景顏色
border_color 邊框顏色
outline_color 輪廓顏色
shadow_color 陰影顏色
text_color 文本顏色

以及上一節提到的直線和弧線顏色。

透明度

有時候兩個控制項間可能發生重疊,這個時候就可以給它們設置一個透明度。

透明度使用類型 lv_opa_t 表示,LVGL 預定義了幾個表示透明度的巨集:LV_OPA_TRANSP 表示完全透明,LV_OPA_COVER 表示完全不透明,其餘的 LV_OPA_10 ~ LV_OPA_90 整十表示的透明度依次遞減。

可以將透明度應用到以下樣式屬性中:

屬性名 含義
bg_opa 背景透明度
border_opa 邊框透明度
outline_opa 輪廓透明度
shadow_opa 陰影透明度
text_opa 文本透明度
opa 整體透明度

以及直線和弧線透明度。例如,以下創建了兩個部分重疊的控制項,併在一個的背景上加透明度:

static lv_style_t style_grass;
lv_style_init(&style_grass);
lv_style_set_opa(&style_grass, LV_OPA_30);
lv_obj_t* obj = lv_obj_create(lv_scr_act());
lv_obj_t* cover = lv_obj_create(lv_scr_act());
lv_obj_add_style(cover, &style_grass, 0);

這樣就可以看見被遮擋的控制項了:

註意需要給上層,即後創建的的控制項加透明度才會有這樣的效果。透明度其實就是為控制項重新調色,因此不是 32 位顏色的屏幕也可以使用透明度。

lv_opa_t 類型的本質就是 8 位無符號整數,因此可以自行創建一個透明度數值,設為 255 就代表完全透明;還可以將透明度應用到 lv_color_mix() 的第三個參數上。

漸變色

可以使用漸變色給控制項加上更美觀的效果。

只有背景顏色能設置漸變色。一個漸變色的效果由以下幾個屬性支配:

屬性名 含義
bg_color 主要顏色
bg_grad_color 漸變顏色
bg_grad_dir 漸變方向
bg_main_stop 漸變開始位置
bg_grad_stop 漸變結束位置
bg_dither_mode 渲染模式

當確定了漸變方向後,漸變從 bg_main_stop 位置開始,由 bg_color 過度到 bg_grad_color ,在 bg_grad_stop 位置結束。這裡的位置是由比例衡量的,漸變區域在每個方向都被劃分為 256 份,例如 128 代表中間位置,255 代表結束位置等。

例如,以下代碼:

lv_obj_t* obj01 = lv_obj_create(lv_scr_act());
lv_obj_set_style_bg_color(obj01, lv_palette_main(LV_PALETTE_BLUE), 0);
lv_obj_set_style_bg_grad_color(obj01, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_bg_grad_dir(obj01, LV_GRAD_DIR_HOR, 0);

漸變效果為水平方向從藍色一直漸變到紅色:

再如,以下代碼:

lv_obj_t* obj02 = lv_obj_create(lv_scr_act());
lv_obj_set_style_bg_color(obj02, lv_palette_main(LV_PALETTE_GREEN), 0);
lv_obj_set_style_bg_grad_color(obj02, lv_palette_main(LV_PALETTE_PURPLE), 0);
lv_obj_set_style_bg_grad_stop(obj02, 128, 0);
lv_obj_set_style_bg_grad_dir(obj02, LV_GRAD_DIR_VER, 0);

漸變效果為豎直方向從綠色一直漸變到紫色,但實際漸變區域只有上半部分:

還可以使用簡寫屬性 bg_grad 設置完整的漸變屬性。這種情況下,漸變使用結構 lv_grad_dsc_t 描述:

typedef struct {
    lv_gradient_stop_t stops[LV_GRADIENT_MAX_STOPS];
    uint8_t            stops_count;
    lv_grad_dir_t      dir    : 3;
    lv_dither_mode_t   dither : 3;
} lv_grad_dsc_t;

巨集 LV_GRADIENT_MAX_STOPS 決定了最大擁有的漸變顏色數,可以在 lv_conf_internal.h 大約 377 行修改該巨集的數量:

#ifndef LV_GRADIENT_MAX_STOPS
    #ifdef CONFIG_LV_GRADIENT_MAX_STOPS
        #define LV_GRADIENT_MAX_STOPS CONFIG_LV_GRADIENT_MAX_STOPS
    #else
        #define LV_GRADIENT_MAX_STOPS 3
    #endif
#endif

然後就可以自定義多種顏色的漸變了:

static lv_grad_dsc_t grad_sunset;
grad_sunset.stops[0] = (lv_gradient_stop_t){ .color = lv_palette_main(LV_PALETTE_RED), .frac = 96 };
grad_sunset.stops[1] = (lv_gradient_stop_t){ .color = lv_palette_main(LV_PALETTE_ORANGE), .frac = 128 };
grad_sunset.stops[2] = (lv_gradient_stop_t){ .color = lv_palette_main(LV_PALETTE_BLUE), .frac = 216 };
grad_sunset.stops_count = 3;
grad_sunset.dir = LV_GRAD_DIR_VER;
lv_obj_t* obj03 = lv_obj_create(lv_scr_act());
lv_obj_set_style_bg_grad(obj03, &grad_sunset, 0);

效果為:

顏色的其它內容

LVGL 還提供了許多處理顏色的濾鏡。可以使用樣式屬性 blend_mode 設置顏色和背景色的融合。例如,以下將控制項的顏色設置為背景色的反色:

lv_obj_set_style_blend_mode(obj03, LV_BLEND_MODE_SUBTRACTIVE, 0);

效果為:

註意邊框的顏色也變成反色了。

最後,LVGL 中還要一個控制項 color wheel ,可以快速創建一個顏色選擇器。它的預設表現形式為:

它類似於圓弧,並可以通過長按切換模式。可以使用函數 lv_colorwheel_get_rgb() 獲取當前選擇的顏色。

圖片

創建圖片

圖片可以以兩種方式存儲:一是作為一個數組之類的變數,二是通過二進位文件的形式存儲。由於還沒有介紹文件相關的內容,這裡僅介紹使用數組的方式來存儲並使用圖片。

LVGL 已經提供了線上圖片轉換器,可以直接在 https://lvgl.io/tools/imageconverter 將一般的 PNG 或 JPG 圖片轉換為符合要求的 C 語言對象:

註意轉換完成後得到的是一個完整的源文件,文件名同時也是圖片的變數名。以上唯一值的註意的一點是圖片所用的顏色格式,一般來說顏色格式可以分為以下幾類:

  1. True color :自動適配當前項目使用的顏色深度
  2. Indexed :從調色板創建較少的顏色數目
  3. Alpha only :單色圖像,只使用透明度
  4. Raw :使用圖像原本的顏色格式

最後一個 RBG565-A8 就不必多說了。值的註意的是,以上有一種叫“Chroma key” 的顏色格式,它對應 lv_conf.h 的第 42 行的配置,註釋是這樣說的:

/*Images pixels with this color will not be drawn if they are chroma keyed)*/
#define LV_COLOR_CHROMA_KEY lv_color_hex(0x00ff00)         /*pure green*/

更多有關於此的介紹可以閱讀維基百科 https://en.wikipedia.org/wiki/Chroma_key

轉換完成後,將得到的源文件添加到當前工程內,然後通過以下幾行代碼就可以顯示該圖像:

LV_IMG_DECLARE(lvgl_logo);
lv_obj_t* img01 = lv_img_create(lv_scr_act());
lv_img_set_src(img01, &lvgl_logo);

這裡第一個巨集的作用本質就是一個 extern 語句。顯示的效果為:

註意這裡在模擬器上創建的圖片是具有透明度的。

圖片的屬性

像直線和圓弧一樣,圖片對象也是有特殊的屬性的,不過比較少:

屬性 簡介
img_opa 圖片透明度
img_recolor 可以給圖片加上一層顏色濾鏡
img_recolor_opa 這層濾鏡的透明度

預設情況下,圖片控制項會自動調整寬度以適應圖片大小。如果控制項過小,那麼圖片的額外部分會被去除;如果控制項過大,那麼圖片會像地磚一樣重覆鋪開來填補剩下的區域。

可以通過 lv_img_set_offset_x(img, x_ofs) 與 y 軸對應的函數給圖片設置一個偏移量來修改顯示範圍。例如,可以通過偏移量結合控制項寬度來裁剪圖片:

lv_img_set_offset_x(img01, -2);
lv_img_set_offset_y(img01, -7);
lv_obj_set_size(img01, 74, 74);

這裡通過負值來將圖片向左上角偏移,從而框選出合適的區域:

圖片按鈕

最後再介紹一個內容,可以通過圖片來創建一個按鈕。這種情況下,需要準備三張圖片,分別描述按鈕的左邊、中間和右邊。

例如,以下準備圖片如下:

由於標簽的寬度是不確定的,因此中間的圖片必須是水平可平鋪的。將其轉換為對應的圖片格式後,可以通過以下代碼創建一個圖片按鈕:

lv_obj_t* imgbtn = lv_imgbtn_create(lv_scr_act());
lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_RELEASED, &imgbtn_left, &imgbtn_mid, &imgbtn_right);
lv_obj_t* label = lv_label_create(imgbtn);
lv_label_set_text(label, "Image Button");
lv_obj_set_style_img_recolor_opa(imgbtn, LV_OPA_30, LV_STATE_PRESSED);
lv_obj_set_style_img_recolor(imgbtn, lv_color_black(), LV_STATE_PRESSED);

註意在創建的過程中,將以上圖片應用到按鈕的普通狀態(即什麼事件都沒有的狀態)的外觀中。這裡通過給點擊事件加上一層深色的濾鏡使點擊時外觀可以發生改變:

這樣按鈕就可以變得很花哨了。

以上對於圖片的介紹比較簡單,不過也基本足以應付一般的使用場景了。更多細節可以參考官方文檔。

首發於:http://frozencandles.fun/archives/383

參考資料/延伸閱讀

https://docs.lvgl.io/master/overview/color.html

顏色參考文檔

https://docs.lvgl.io/master/overview/image.html
https://docs.lvgl.io/master/widgets/core/img.html

有關圖片及圖片控制項的完整使用描述


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • DevExpress提供了一個比較強大的圖形繪製工具,可以用於繪製各種圖形,如流程圖、組織機構圖等等,本篇隨筆介紹XtraDiagram.DiagramControl的使用,以及利用代碼對其屬性進行控制,以及利用圖形模具的自定義操作,實現一些簡單流程圖形的繪製和處理。 ...
  • 欄位的許可權控制,一般就是控制對應角色人員對某個業務對象的一些敏感欄位的可訪問性:包括可見、可編輯性等處理。本篇隨筆結合基於SqlSugar的開發框架進行的欄位控制管理介紹。 ...
  • 一、簡介 vmware為我們提供了三種網路工作模式,它們分別是:Bridged(橋接模式)、NAT(網路地址轉換模式)、Host-Only(僅主機模式)。 查看網路連接 打開vmware虛擬機,我們可以在選項欄的“編輯”->“虛擬網路編輯器”中看到VMnet0(橋接模式)、VMnet1(僅主機模式) ...
  • 安裝docker後,提示需要啟用hyper-v,在控制面板中勾選Hyper-v,然後重啟,更新快完成就提示無法完成功能配置,正在撤銷更改 解決方法 方法1 控制面板一個一個選 方法2 百度了n多內容,命令行什麼的都試了下,但是都沒有起作用.有說禁用了服務,看了下,確實是禁用了,但是開起來後還是不行. ...
  • 這玩意搞了我今天,直接裂開!系統更新根本解決不了 好在查了相關資料才知道,原來微軟在 Win10 的更新中,將搜索功能和語音助手 Cortana 進行了拆分,搜索成了一個獨立的功能,還好有外媒發現問題原因是 Bing 和 Cortana 集成造成,而且修複很簡單。 方法1 使用電腦管家修複; 方法2 ...
  • 四、Nginx 4.1、概述 4.1.1、介紹 Nginx是一款輕量級的Web伺服器/反向代理伺服器/電子右鍵(IMAP/POP3)代理伺服器。其特點是占有記憶體少,併發能力強,事實上Nginx的併發能力在同類型的網頁伺服器中表現較好,中國大陸使用Nginx的網站有:百度、就京東、新浪、網易、騰訊、淘 ...
  • 鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 CentOS 1.備份原來的源 在控制台輸入mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup備份原本的源 2、下載新的 CentOS-Bas ...
  • 鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 一、環境要求 系統版本:CentOS7.x版本 硬體配置:記憶體2GB以上 cpu2核以上 硬碟大於30G 集群網路配置:集群中所有伺服器內網必須互通,並且需要訪問外網來拉取鏡像 禁用swap分區 二、k8s基礎環境操作: 1、關閉防火牆: [ro ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...