觸摸滑動條控件使用說明

一、項目概述

本項目基于單片機和RA8889/RA6809圖形處理芯片的TFT觸摸屏滑動條控件。該控件支持水平和垂直滑動條，可自定義外觀和行為，并支持回調函數進行值變化通知。

• 硬件平臺：51/ARM均可(測試時使用STC8H8K64U單片機)
• 圖形處理芯片（Micro GPU）：RA8889/RA6809
• 顯示屏：TFT（演示時采用分辨率1024x600）
• 觸摸屏：GT911電容觸摸屏
• 通信接口：SPI-4
  

二、目錄結構

滑動條控件_Release1.0/
├── main.c                    // 主程序示例文件
├── widget/                   // 控件相關文件
│   ├── slider.c              // 滑動條控件實現
│   └── slider.h              // 滑動條控件頭文件
├── touch/                    // 觸摸屏相關文件
│   ├── GT911.c               // GT911觸摸驅動實現
│   └── GT911.h               // GT911觸摸驅動頭文件
├── RA8889_01_Kernel/         // RA8889/RA6809圖形處理芯片相關文件
│   ├── RA8889_51.c           // RA8889基礎驅動
│   ├── RA8889_51.h           // RA8889基礎頭文件
│   ├── RA8889_API_51.c       // RA8889 API實現
│   ├── RA8889_API_51.h       // RA8889 API頭文件
│   ├── RA8889_MCU_IF.c       // RA8889與MCU接口實現
│   ├── RA8889_MCU_IF.h       // RA8889與MCU接口頭文件
│   ├── UserDef.h             // 用戶定義頭文件
│   ├── delay.c               // 延時函數實現
│   └── delay.h               // 延時函數頭文件
└── 其他項目文件...

三、如何移植

移植步驟

1. 復制必要文件到您的項目中：

   • 將widget文件夾（包含slider.c和slider.h）復制到您的項目中
   • 根據您的硬件配置，復制對應的觸摸屏驅動文件
   • 復制RA8889/RA6809圖形處理芯片核心庫文件，在RA8889_01_Kernel文件夾

2. 硬件接口配置：

   • 根據您的硬件設置，修改RA8889_MCU_IF.c和RA8889_MCU_IF.h中的MCU和RA8889/RA6809的通信接口定義
   • 必要時變更觸摸屏驅動，修改GT911.c和GT911.h中的接口配置

3. 更新頭文件包含路徑：

   • 在您的項目中更新所有包含路徑，確保編譯器能找到所有必要的頭文件

4. 初始化配置：

   • 參照main.c中的示例，初始化RA8889/RA6809圖形處理芯片
   • 初始化觸摸屏
   • 配置中斷和其他必要的硬件設置

四、API使用方法

1. 初始化

首先需要初始化滑動條控件系統：

Slider_Init();  // 初始化滑動條控件

2. 創建滑動條

使用Slider_Add函數創建一個新的滑動條控件：

unsigned char slider_id = Slider_Add(x,               // 滑動條x坐標y,               // 滑動條y坐標width,           // 滑動條寬度height,          // 滑動條高度forecolor,       // 前景色（已填充部分）backcolor,       // 背景色（軌道顏色）thumbcolor,      // 滑塊顏色orientation      // 方向：HORIZONTAL_SLIDER或VERTICAL_SLIDER
);

3. 配置滑動條參數

設置滑動條的值范圍和步進值：

Slider_Configure(slider_id,       // 滑動條IDinitial_value,   // 初始值min_value,       // 最小值max_value,       // 最大值step_value       // 步進值
);

4. 設置標簽

為滑動條添加標簽文本：

Slider_SetLabel(slider_id,		 // 滑動條ID"Brightness",	 // 標簽文本label_x,         // 標簽相對于滑動條的x偏移label_y,         // 標簽相對于滑動條的y偏移label_color      // 標簽顏色
);

5. 啟用和顯示控件

Slider_Enable(slider_id, TRUE);    // 啟用滑動條
Slider_Visible(slider_id, TRUE);   // 設置滑動條可見

6. 繪制滑動條

Slider_Draw(slider_id);  // 繪制滑動條

7. 設置回調函數

設置值變化時的回調函數：

void ValueChanged_Callback(void* slider, unsigned short value)
{// 處理值變化// slider指向SliderTypeDef結構體// value是當前值
}// 設置回調
Slider_SetCallback(slider_id, ValueChanged_Callback);

8. 處理觸摸事件

在觸摸中斷中獲取觸摸點并處理滑動條：

if(touch_flag == 1)
{if(TPR_Structure.TouchSta > 0)  // 確保有觸摸點{unsigned char triggered_slider = Slider_HandleTouch(TPR_Structure.x[0], TPR_Structure.y[0]);if(triggered_slider > 0)  // 確認滑動條被觸發{Slider_Process(triggered_slider, TPR_Structure.x[0], TPR_Structure.y[0]);}}
}

五、注意事項

1. 內存使用：

   • 滑動條控件數量由MAX_SLIDERS定義，默認為5個，可根據需要修改
   • 每個滑動條需要消耗一定的內存，請根據您的硬件資源合理配置

2. 顯示層配置：

   • 滑動條繪制在Layer1，再使用BTE復制到Layer0，請確保您的項目中正確配置了顯示層

3. 字體設置：

   • 滑動條使用RA8889/RA6809內建的字體，字體固定是12x24，如需更改，請修改slider.c中的字體設置

4. 觸摸事件：

   • 確保在觸摸中斷函數中正確調用GT911_Scan()來掃描觸摸點
   • 滑動條控件依賴于touch_flag來判斷是否有觸摸事件發生

5. 回調函數：

   • 回調函數應盡量簡短，不要在回調中執行耗時操作，以免影響界面響應

6. 顏色定義：

   • 控件默認顏色在slider.h中定義，可根據需要修改以適應您的界面風格

7. 硬件依賴：

   • 本控件依賴于RA8889/RA6809圖形處理芯片

六、實例示范

參考main.c中的示例代碼，了解如何創建和使用不同類型的滑動條控件：

// 初始化垂直滑動條
slider1_id = Slider_Add(800, 100, 50, 400, SLIDER_FILL_COLOR, SLIDER_TRACK_COLOR, SLIDER_THUMB_COLOR, VERTICAL_SLIDER);
Slider_Configure(slider1_id, 17, 0, 20, 1);
Slider_SetLabel(slider1_id, "Brightness", -30, 410, color16M_red);
Slider_Enable(slider1_id, TRUE);
Slider_Visible(slider1_id, TRUE);
Slider_SetCallback(slider1_id, Brightness_Changed);
Slider_Draw(slider1_id);// 初始化水平滑動條
slider2_id = Slider_Add(200, 200, 500, 50, SLIDER_FILL_COLOR, SLIDER_TRACK_COLOR, SLIDER_THUMB_COLOR, HORIZONTAL_SLIDER);
Slider_Configure(slider2_id, 75, 0, 100, 1);
Slider_SetLabel(slider2_id, "Volume", -(6*12+8), 10, color16M_blue);
Slider_Enable(slider2_id, TRUE);
Slider_Visible(slider2_id, TRUE);
Slider_SetCallback(slider2_id, Brightness_Changed);
Slider_Draw(slider2_id);

七、源碼下載

請看到視頻最后面

八、視頻介紹說明