天天看點

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

一、環境介紹

主要MCU: STM32F103ZET6

STM32程式開發IDE: keil5

STM32程式風格:  采用寄存器方式開發,注釋齊全,執行效率高,友善移植

硬體包含:  一塊STM32F103ZET6開發闆、一個3.5寸TFT電阻觸摸顯示屏(使用的是正點原子的3.5寸電阻觸摸屏)

工程完整源碼下載下傳位址:  

https://download.csdn.net/download/xiaolong1126626497/19671518

前言:STemwin圖形界面庫比較吃記憶體的,一般跑圖形界面庫都需要配一塊SRAM,M3系列官方推薦頻率是72MHZ(目前也是可以超頻的),界面不是非常複雜,重新整理要求不是特别高的情況下,跑起來還是不錯的。

這篇文章主要講解Stemwin的移植與基本使用。

下面示例圖是為了講解STemwin基本用法,做的界面兩個例子。 QQ應用的界面完成之後加上網卡就可以完成區域網路之間多個裝置之間聊天了。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

二、 STemwin介紹

2.1 emWin介紹

emWin是由德國SEGGER公司開發,可為圖形LCD設計提供進階支援,極大簡化了LCD設計。為恩智浦ARM微控制器使用者免費提供的emWin圖形庫。

在國内做嵌入式系統的大部分都使用emwin,其簡單來說就是一套圖形庫。

做電子硬體開發,常常要為設計一個良好的UI傷透腦筋,寫很多的代碼也不盡人意,還要不斷調試,emwin正是解決這種使用者界面需求的圖形庫,隻要在你的設計中嵌入這種圖形庫,就能很友善使用裡面的子產品化設計,既能提高設計界面圖形品質,還大大的減少開發時間。

SEGGER公司的産品

     Segger微控制器股份有限公司開發與釋出軟體開發工具及ANSI C軟體元件(中間件)給嵌入式系統使用并應用在許多工業應用中,如通信、醫療儀器、消費性電子産品、汽車工業及工業自動化裝置。

EmWin是SEGGER公司設計用來提供一個有效率的、與處理器與顯示控制器無關的、可應用在任何圖形顯示器的圖形使用者界面.

J-Link是SEGGER公司為支援仿真ARM核心晶片推出的仿真器。

emOS是SEGGER公司開發的一個實時作業系統,使用最小的資源提供一個完整的多任務系統,被設計應用在許多難處理的即時應用當中。

emFile是SEGGER公司開發的嵌入式檔案系統,支援FAT12、FAT16及FAT32。已經在保持最高速的前提下,優化了emFile,使之在RAM和ROM裡占最小的存儲器空間

embos/ip是Segger開發的嵌入式TCP/IP程式驅動庫。它是一個與中央處理器架構無關、且高效能的TCP/IP驅動庫,在速度上、功能上及最小結構上已經做了最佳的優化。

emUSB 是Segger開發的嵌入式USB協定棧。采用ANSI C的格式撰寫,具有大批量通信傳輸和內建諸如MSD、CDC或HID裝置類等特點。

拓展資料:

嵌入式系統無疑是目前最熱門最有發展前途的IT應用領域之一。

嵌入式系統用在一些特定專用裝置上,通常這些裝置的硬體資源(如處理器、存儲器等)非常有限,并且對成本很敏感,有時對實時響應要求很高等。特别是随着消費家電的智能化,嵌入式更顯重要。像我們平常見到的手機、PDA、電子字典、可視電話、VCD/DVD/MP3 Player、數字相機(DC)、數字錄影機(DV)、U-Disk、機頂盒(Set Top Box)、高清電視(HDTV)、遊戲機、智能玩具、交換機、路由器、數控裝置或儀表、汽車電子、家電控制系統、醫療儀器、航天航空裝置等等都是典型的嵌入式系統。

Keil軟體

Keil公司是一家業界領先的微控制器(MCU)軟體開發工具的獨立供應商。

Keil公司由兩家私人公司聯合營運,分别是德國慕尼黑的Keil Elektronik GmbH和美國德克薩斯的Keil Software Inc。Keil公司制造和銷售種類廣泛的開發工具,包括ANSI C編譯器、宏彙程式設計式、調試器、連接配接器、庫管理器、固件和實時作業系統核心(real-time kernel)。

Keil 官網雖然沒有釋出中文版本,但是Keil 系列軟體卻被中國80%以上的軟硬體工程師使用,但凡與電子相關的專業,都會開始從單片機和計算機程式設計開始學習,而學習單片機自然會用到Keil 軟體。國内由米爾科技、億道電子、英倍特提供Keil 的銷售和技術支援服務,他們是ARM公司合作夥伴,也是國内領先的嵌入式解決方案提供商。

2.2 UCGUI與STemwin介紹

說起UCGUI得先從UCOS說起,在國内做嵌入式系統的,開始入門OS的時候,大家應該都會選擇uC/OS,主要是因為代碼開源且資料衆多。由于uC/OS的原因大家也一定接觸了uC/GUI的嵌入式圖形軟體庫。其實uC/Gui的核心代碼并不是Micrium公司開發的,而是Segger公司為Micrium公司定制的圖形軟體庫,當然也是基于Segger公司的emwin圖形軟體庫開發的。所有說uC/GUI和emwin的使用方法沒有差別。

在以前較舊的版本程式中uC/Gui的源代碼是開源的(可以在網上能夠找到),但是新版本的程式emWin和uC/gui隻對使用者提供庫檔案,是不開源的。

Segger 除了向Micrium公司提供定制的uC/GUI版本,還向其他的IC廠家提供定制服務,比如: 向ST 公司出售了emWin 的版權,進而ST公司也得到了定制版的emWin,然後改了名字叫 STemWin。當使用者在 STM32 晶片上使用 emWin 軟體庫時,是不需要向 emWin 或 ST 公司付費的。還有NXP公司也使用了emWin的圖形庫,大家使用NXP晶片的時候同樣也不需要支付費用。

總而言之,uC/GUI和STemWin都是 Segger 公司的 emWin 産品,而且它們的版本編号是統一的,如 uC/GUI 目前最新版本命名為uC-GUI V5.24, STemWin 最新版本命名為STemWin Library V5.24,emWin 最新版本則為 emWin V5.24,是以,要比較這三個軟體庫功能上的差別,隻需要看它們的版本号就可以了。

在選擇的時候,雖然功能上沒有差別,但因為版權付費問題,在實際使用時就需要根據自己的平台來選擇。如果我們使用的是 STM32 開發平台,自然我們選擇的是STemWin;如果我們使用的是NXP的平台,我們就是用為NXP定制的emwim。

在使用特定的平台,我們也需要選擇定制的emWin,在STemWin裡有一個檢測機制确定代碼所運作的平台,若是 STM32 晶片,則運作正常,若非 STM32 晶片,就不能正常使用了。同樣,NXP也是一樣的機制。

如果使用的晶片沒有授權emWin的版權,可以推薦使用UCGUI。

emWin官方下載下傳位址:

https://www.segger.com/emwin.html

STemWin官方下載下傳位址:

https://www.st.com/en/embedded-software/stm32cubef1.html

GCGUI官網下載下傳位址:

https://www.micrium.com/

2.3 為什麼要學習圖形界面架構?

很多産品需要人機互動,人機互動大多數是通過LCD來完成的,是以就需要我們在應用中設計LCD互動界面,簡單的UI界面我們可以自己寫代碼完成,但是比較複雜、絢麗的界面自己來做就比較困難了。STemWin中提供了很多的控件,我們可以使用這些控件來完成複雜的界面設計。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

2.4 emwin下載下傳位址

emwin下載下傳位址:

https://www.segger.com/downloads/emwin/
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

三、STemwin基本移植(不帶作業系統)

3.1 擷取keil軟體自帶的emwin庫

在keil軟體的安裝目錄下,自帶了emwin的所有資料,适合NXP(恩智浦)單片機使用。

路徑: \ARM\Segger\emWin

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

3.2 下載下傳STemwin圖形界面庫

STemwin适合在ST意法半導體的晶片上使用,Stemwin的資料包可直接在ST官網上進行下載下傳。

ST意法半導體官網首頁位址:

https://www.st.com

下面是下載下傳的步驟截圖: 

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

3.3 添加STemwin檔案到工程

移植之前,需要先準備一個帶LCD屏驅動、觸摸屏驅動的完整Keil工程。

(1) 在工程目錄下建立一個ST_EMWIN檔案夾,用于存放STEMWIN相關的檔案

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

(2) 拷貝的目錄

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

inc檔案夾從下載下傳的包裡直接拷貝過來,不做任何修改。

Config檔案夾裡留下以下檔案:

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

Lib目錄下留下以下檔案: (不帶OS的庫檔案)

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

(3) 在keil軟體裡建立一個新的分組,用于存放STemwin檔案。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

(4) 添加頭檔案路徑

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

3.4 屏蔽沒有用到的LCDConf.h頭檔案

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

3.5 修改GUIConf.h檔案

GUIConf.h是STemwin的核心配置檔案,主要配置作業系統、觸摸屏、最大視窗的支援。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

3.6 修改GUIConf.c檔案

GUIConf.c檔案配置STemwin運作時需要的記憶體,如果使用了SRAM外擴記憶體,可以将數組定義在外部的SRAM空間。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

3.7 修改GUIDRV_Template.c檔案

GUIDRV_Template.c檔案是LCD屏的驅動模闆檔案,需要根據自己的LCD屏驅動進行修改。

主要修改的函數是:  畫點函數、讀點函數。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

3.8 修改LCDConf_FlexColor_Template.c檔案

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

GUIDRV_Template_API 變量是在GUI.h的167行定義。

GUI_TOUCH_Calibrate函數是在GUI.h的

3.9 增加觸摸屏底層接口代碼

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

這4個函數原型在GUI.h檔案的1404行聲明。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

在GUIDRV_Template.c檔案下面增加這4個觸摸屏的接口函數。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

3.10 添加GUI_X.c檔案

觸摸屏底層函數增加之後,再次編譯。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

這4個函數,在GUI_X.c檔案裡定義,需要将GUI_X.c檔案添加到工程中。

GUI_X.c檔案路徑: \en.stemwin\STemWin_Library_V1.2.0\Libraries\STemWinLibrary532\OS\GUI_X.c

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

将GUI_X.c檔案拷貝到工程目錄下的ST_EMWIN\Config目錄下。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

3.11 定時器提供時間基準與輪詢觸摸屏

在STemwin的GUI_X.c檔案裡,帶有GUI_X_Delay()延時函數,該延時函數是通過OS_TimeMS變量來計算延時的時間,如果需要使用該延時函數,就需要在自己工程的硬體定時器裡1ms的頻率自增OS_TimeMS變量,提供時間基準。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

需要使用觸摸屏,就需要定期調用GUI_TOUCH_Exec()函數,每秒100次的頻率調用。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

3.13 對移植結果進行基本測試

進行GUI架構初始化之前,需要先開啟CRC時鐘校驗。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

運作效果如下:

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

3.13 測試SEGGER官方DEMO代碼

SEGGER官方提供的DEMO代碼,在ST意法半導體的官網上下載下傳的包裡沒有提供,需要去SEGGER官方提供的emwin包裡擷取。在keil軟體的安裝目錄下,有完整的emwin包,可以找到DEMO代碼。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

将GUIDemo檔案夾全部拷貝到工程目錄下,并将裡面所有的.c檔案加到工程中。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

四、STemwin基本運用

4.1 GUIBuilder軟體使用

GUIBulider是emwin官方出的軟體,每個版本的emwin都有其對應版本的。

GUIBulider軟體,控件非常齊全,熟練使用 GUIBulider在使用emWin設計GUI界面的時候會起到事半功倍的效果,使用這款軟體就不需要我們自己用C語言編寫界面了,可以在 GUIBulider 中設計好界面,然後導出C程式,十分的友善。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

GUIBulider生成的代碼隻是一個界面架構,程式執行的邏輯代碼需要使用者自己填充。

邏輯代碼比如: 按下按鍵做什麼,松開按鍵做什麼等等,這些需要使用者自己設計。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

4.2 STemwin外置中文字庫設定

(1) 制作GBK中文字庫

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

制作好的字庫效果:

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

字庫制作好之後,可以通過檔案系統+SD将字庫檔案燒寫到闆載的W25Q64 FLASH裡指定位置,友善後續調用。

(2) 制作ASCII 碼字庫

上面制作了GBK中文字庫,這裡還需要制作尺寸一樣的ASCII碼字庫,友善顯示與中文大小相同的英文字母和标點符号。

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~

注意: 最前面有個空格。  一共95個資料。

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

存放到程式裡的隻能放 12号字型、16号字型、24号字型。  太大的字型Keil軟體存放不了。

超出了24号的字型,可以像GBK中文字庫一樣存放到FLASH W25Q128裡,使用的時候在去讀取資料,這樣就不會占用CPU本身的FLASH空間。

(3) 制作好的字庫檔案清單

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

(4) 添加ASCII碼字庫和GBK字庫的支援

先将字庫的必要檔案添加到工程中:  (如果用不到這麼多字型可以自己添加要使用的大小)

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

#define GUI_FONTTYPE_PROP_USER      \

 GUIPROP_X_DispChar,               \

 (GUI_GETCHARDISTX*)GUIPROP_X_GetCharDistX,                 \

 GUIMONO_GetFontInfo,                \

 GUIMONO_IsInFont,                   \

 (GUI_GETCHARINFO *)0,             \

 (tGUI_ENC_APIList*)0

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)
STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

QQ登入界面(中文顯示)

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

QQ登入框點選登入按鈕之後登入成功的效果​​

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

​​

4.3 實體按鍵操作界面控件

GUI_SendKeyMsg()函數:  向一個指定的按鍵發送一個狀态消息。

函數原型:  void GUI_SendKeyMsg(int Key, int Pressed);

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

示例:

STemwin圖形庫移植與運用(基于STM32)(完成QQ界面設計、區域網路聊天)

繼續閱讀