正點(diǎn)原子T100智能焊臺(tái)體驗(yàn),順便咱們來(lái)說(shuō)說(shuō)它的軟件菜單、界面切換如何來(lái)實(shí)現(xiàn)?

前陣子收到了正點(diǎn)原子贈(zèng)送的T100智能焊臺(tái)以及DS100數(shù)字示波器，目前經(jīng)過(guò)個(gè)人實(shí)際體驗(yàn)，總體感覺(jué)非常優(yōu)秀，如下：

1、正點(diǎn)原子T100智能焊臺(tái)體驗(yàn)

將T100智能焊臺(tái)做了一下簡(jiǎn)單組裝，然后開(kāi)啟了一波操作和焊接：

個(gè)人體驗(yàn)總結(jié)如下：

• 體積較小，便于外出攜帶界面操作簡(jiǎn)單，參數(shù)設(shè)置功能豐富升溫較快，控溫穩(wěn)定人性化的自動(dòng)休眠和待機(jī)功能維護(hù)保養(yǎng)簡(jiǎn)單

2、正點(diǎn)原子T100智能焊臺(tái)菜單框架

但是，作為軟件工程師，我更有興趣的是，它的界面是如何實(shí)現(xiàn)的？因?yàn)榻缑娌僮饕彩钦麄€(gè)產(chǎn)品中非常重要的一部分，如下：

Q1.界面切換的軟件設(shè)計(jì)思路

關(guān)于界面的切換的設(shè)計(jì)思想，可以參考如下文章：

C語(yǔ)言表驅(qū)動(dòng)法編程實(shí)踐(精華帖,建議收藏并實(shí)踐)

C語(yǔ)言映射表在嵌入式串口解析、UI設(shè)計(jì)中的應(yīng)用(值得收藏并實(shí)踐的精華帖)

Q2.多語(yǔ)言版本的軟件設(shè)計(jì)思路

如上，之前有小伙伴問(wèn)過(guò)我一個(gè)問(wèn)題，如何來(lái)設(shè)計(jì)多語(yǔ)言版本呢？正常面向全球出貨的電子產(chǎn)品，那么它一定逃不過(guò)多語(yǔ)言版本，不同國(guó)家由于語(yǔ)言不同，導(dǎo)致上面顯示的內(nèi)容不一樣，對(duì)于不同語(yǔ)言我們可以采用一個(gè)二維指針數(shù)組的方式來(lái)實(shí)現(xiàn)，第一維表示具體是哪國(guó)的語(yǔ)言，第二維表示具體要顯示什么內(nèi)容，例如：

const u8* Mulit_Language[3][LANGUAGE_NUM]=
{
  {
    "0.退出",
    "1.步進(jìn)設(shè)置",
    "2.休眠溫度",
    "3.休眠時(shí)間",
    "4.待機(jī)時(shí)間",
    "5.自動(dòng)關(guān)機(jī)",
    "6.參數(shù)選擇",
    "7.溫度校準(zhǔn)",
    "8.輸出電源",
    "9.輸出開(kāi)關(guān)",
    "10.蜂鳴器",
    "11.語(yǔ)言選擇",
    "12.恢復(fù)出廠",
  },
  {
    "0.Exit",
    "1.Step Set",
    "2.Sleep Temp",
    "3.Sleep Time",
    "4.Stdby Time",
    "5.Auto P_Off",
    "6.Param Sel",
    "7.Temp Calib",
    "8.Output Cur",
    "9.Output ON",
    "10.Beep ON",
    "11.Language",
    "12.Restore",
  },
  //后面還可以繼續(xù)拓展別的語(yǔ)言
};

Q3.滑動(dòng)菜單列表的軟件設(shè)計(jì)思路

先來(lái)觀察下這個(gè)界面包含什么信息：

最上面是帶填充色的標(biāo)題顯示，右邊是一個(gè)滾動(dòng)條，然后中間區(qū)域有一個(gè)指向當(dāng)前項(xiàng)的手的圖標(biāo)還有具體的字符串項(xiàng)，當(dāng)操作旋鈕時(shí)，對(duì)應(yīng)的項(xiàng)則被填充背景色，且對(duì)應(yīng)項(xiàng)的字符串的前景色也發(fā)生改變，根據(jù)這個(gè)思路，我們可以得到設(shè)計(jì)軟件應(yīng)該有的一些信息：

• 1.當(dāng)前選中的位置，它應(yīng)該是一個(gè)變量，可以改變2.這個(gè)菜單列表具體有多長(zhǎng)，包含了多少個(gè)菜單列表項(xiàng)3.選中的時(shí)候長(zhǎng)什么樣？沒(méi)有被選中的時(shí)候呢？4.選中的時(shí)候加載圖標(biāo)顯示，沒(méi)有被選中加載空?qǐng)D標(biāo)5.菜單列表項(xiàng)顯示的內(nèi)容，具體每一項(xiàng)要顯示什么東西6.當(dāng)選中這個(gè)菜單項(xiàng)以后，按確認(rèn)鍵后要觸發(fā)什么操作？7.菜單之間的切換，分級(jí)，列表的話就有前、后的關(guān)系8.滾動(dòng)條的實(shí)現(xiàn)，如何與列表信息關(guān)聯(lián)？

接下來(lái)，將這些信息就可以抽象為一個(gè)結(jié)構(gòu)體ListItem：

typedef struct ListItem
{   
  //菜單顯示時(shí)光標(biāo)位置
 int8_t  item_cursor; 
  //菜單包含項(xiàng)目數(shù)
 uint8_t item_count;
  //顯示菜單的狀態(tài) 是否選中
 uint8_t item_is_select;
  //菜單項(xiàng)目選中的ICO數(shù)據(jù)地址
 const uint8_t *item_ico_display; 
  //菜單項(xiàng)目沒(méi)選中的ICO數(shù)據(jù)地址
 const uint8_t *item_ico_un_display; 
  //菜單列表顯示的文本內(nèi)容
 const uint8_t *item_display_text;
  //跳轉(zhuǎn)到對(duì)應(yīng)的功能菜單
 void (*Jump_Menu)(void); 
  //切換到上一級(jí)菜單列表項(xiàng)
 struct ListItem* prev_item_list; 
  //切換到下一級(jí)菜單列表項(xiàng)
 struct ListItem* next_item_list; 
}List_Item_Typedef;

這里我們采用的是雙向鏈表的設(shè)計(jì)思想對(duì)這個(gè)菜單進(jìn)行維護(hù)和更新，根據(jù)這個(gè)結(jié)構(gòu)體，繼續(xù)完成一個(gè)菜單列表的控制函數(shù)與具體的結(jié)構(gòu)體變量還有滾動(dòng)條關(guān)聯(lián)起來(lái)即可，關(guān)于滾動(dòng)條我們需要單獨(dú)去設(shè)計(jì)一個(gè)控件，由于篇幅原因，這里就不實(shí)現(xiàn)了；詳細(xì)的設(shè)計(jì)過(guò)程寫(xiě)起來(lái)稍微有些復(fù)雜，我可以在后期單獨(dú)用小熊派出一個(gè)專(zhuān)題來(lái)實(shí)現(xiàn)這個(gè)過(guò)程，并進(jìn)行詳細(xì)的講解。

3、開(kāi)源的GUI框架

現(xiàn)在GUI框架設(shè)計(jì)趨向于成熟，有很多大神也在Github和Gitee上開(kāi)源了不少優(yōu)秀的GUI框架，經(jīng)過(guò)簡(jiǎn)單的移植(GUI是純軟件實(shí)現(xiàn)，只要硬件支持的操作就可以套用)，我們可以擁有很多基礎(chǔ)控件，比如按鈕，進(jìn)度條，圖標(biāo)，曲線等等，其中著名的有STemWin、LVGL、TouchGFX等等，但是針對(duì)正點(diǎn)原子T100焊臺(tái)，其實(shí)只需要能夠繪制單色的GUI框架即可，對(duì)于單色的GUI框架，我們?cè)诖a云上可以輕松找到：

還有類(lèi)似的：

針對(duì)單色顯示屏的 GUI 解決方案SimpleGUI

正點(diǎn)原子也有類(lèi)似的產(chǎn)品，界面與T100智能焊臺(tái)類(lèi)似，源代碼也是開(kāi)源的，詳情可以訪問(wèn)正點(diǎn)原子資料下載中心查看：

http://www.openedv.com/docs/tool/solder/solder.html

當(dāng)然，你還能搜索到更多相關(guān)的資源，通過(guò)學(xué)習(xí)這些資源你會(huì)發(fā)現(xiàn)，其實(shí)設(shè)計(jì)思想都差不多，只要掌握其中一個(gè)，了解其設(shè)計(jì)思想，相信有朝一日你也可以擼一個(gè)適合自己項(xiàng)目的GUI框架，關(guān)于菜單切換和界面實(shí)現(xiàn)，我之前也開(kāi)源了一些項(xiàng)目，如下，有興趣可自行學(xué)習(xí)或研究：

談?wù)勄度胧綉?yīng)用軟件人機(jī)界面開(kāi)發(fā)的菜單框架編寫(xiě)

開(kāi)源作品：基于RT-Thread 智慧農(nóng)業(yè)監(jiān)測(cè)系統(tǒng)產(chǎn)品級(jí)開(kāi)發(fā)

TencentOS tiny危險(xiǎn)氣體探測(cè)儀產(chǎn)品級(jí)開(kāi)發(fā)

基于TencentOS tiny云打印機(jī)&智能達(dá)特甲醛探測(cè)系統(tǒng)

4、開(kāi)源的T12烙鐵控制器

至于具體功能，比如焊臺(tái)里PID算法是怎么處理的，功能是如何交互的，在碼云上有位大佬，這位大佬現(xiàn)在還在讀研究生，但已經(jīng)能自己通過(guò)STM32把一把烙鐵給造出來(lái)了，詳細(xì)可以訪問(wèn)他的碼云參考他的設(shè)計(jì)思路：

https://gitee.com/Cai-Zi/STM32_T12_Controller?_from=gitee_search