如果有這樣的一款GUI軟件,你需要嗎?（持續(xù)更新....）

ID:471574 · 發(fā)表于 2024-6-14 13:43

最近在搞單片機(jī)編程，需要用到TFT彩屏，實(shí)現(xiàn)GUI界面，常規(guī)的操作有二個(gè)：一、用第三方的GUI軟件編輯界面，然后移植他們的庫；
二、自己寫庫，實(shí)現(xiàn)點(diǎn)陣圖、文字、彩圖、畫直線、畫圓、圓矩形等功能，在第三方圖形軟件里編輯好界面，然后獲取坐標(biāo)位置、大小，在自己的MCU程序一個(gè)個(gè)指令生成對(duì)應(yīng)的界面；
先說下這二種操作的優(yōu)缺點(diǎn)：第一種用第三方庫，比較簡便，移植需要先研究庫，一般庫功能比較全面，有些功能用不上，因此會(huì)浪費(fèi)比較多程序空間；
第二種方法要自己寫庫，第一次寫比較花時(shí)間，第二次就簡單多了。界面不太好編輯處理，每改動(dòng)一個(gè)坐標(biāo)就要在程序里更新，重新編譯，感覺非常不方便，也花時(shí)間。
于是，我在想，如果我設(shè)計(jì)一款軟件，功能如下：
一、支持點(diǎn)陣圖、文字、彩圖、畫直線、畫圓、圓矩形等繪圖，所見即所得，而且每個(gè)元件可以隨時(shí)單獨(dú)編輯和移動(dòng)位置；
二、支持不同屏幕大小設(shè)置、縮放功能；
三、支持單色屏、16色彩屏、24色彩屏；
四、支持多個(gè)畫面編輯，比如畫面一、畫面二......
五、支持點(diǎn)陣文字取模、單圖圖片取模、彩色圖片取模，輸出C或TXT文本，也支持輸出二進(jìn)制文件；
六、支第三方取模的數(shù)據(jù)，并顯示出來
七、支持自定義多個(gè)元件組合成一個(gè)元件，做成模板，在界面里復(fù)用。（比如你用一個(gè)圓加單色圖文，做成一個(gè)選項(xiàng)的按鈕模板。。。）
八、支持每個(gè)元件自定義函數(shù)格式，然后排版過程自動(dòng)把這個(gè)函數(shù)生成列表，可以自動(dòng)替換函數(shù)里的坐標(biāo)、大小、顏色等參數(shù)，把真實(shí)的值填入；
前面1-7項(xiàng)的功能主要是方便編輯GUI界面，第8個(gè)功能非常關(guān)鍵，因?yàn)榭梢宰远x函數(shù)格式，跟你自寫的庫的函數(shù)對(duì)應(yīng)起來，實(shí)現(xiàn)把生成的函數(shù)列表復(fù)制到你的MCU程序里，即可顯示一模一樣的屏幕畫面。
為了方便大家的理解，舉個(gè)例子：我要畫一條直線和一個(gè)圓，在軟件編輯好了，位置大小，并設(shè)置直線元件的自定義指令為DrawLine([X1], [Y1], [X2], [Y2], [FC]);//畫直線，也設(shè)置了圓形元件的自定義指令為DrawCircle([X], [Y],[R],[FC], [TM]);//畫圓 TM=[TM]: 0空心 1填充，這樣，我隨便移動(dòng)兩個(gè)元件的位置，最終會(huì)生成具有實(shí)際數(shù)據(jù)的指令：
DrawCircle(8, 8,5,0xF810, 0);//畫圓 TM=0: 0空心 1填充，
DrawLine(1, 27, 159, 27, 0x07FF);//畫直線
指令的先后順序跟兩個(gè)元件的先后順序有關(guān)，頂層的元件指令在后面。
這樣，我只要在MCU里程序也實(shí)現(xiàn)了對(duì)應(yīng)的方法，就可以把生成的指令復(fù)制過去，真正運(yùn)行起來了。當(dāng)然，如果是點(diǎn)陣或圖片，你要先取模好數(shù)據(jù)，在程序加入變量儲(chǔ)存。。。。。

有了這個(gè)軟件，搞GUI界面就方便多了，保存的數(shù)據(jù)內(nèi)容和實(shí)現(xiàn)的庫都是自己控制，占有空間比較少，而且有DIY的樂趣，您需要嗎？
我計(jì)劃近期開始編寫這個(gè)軟件，會(huì)經(jīng)常發(fā)布我的進(jìn)度和實(shí)現(xiàn)的編程思路，大家可以跟貼發(fā)意見

ID:276663 · 發(fā)表于 2024-6-14 15:07

我大概理解你說的是【串口屏】

ID:237471 · 發(fā)表于 2024-6-14 15:39

支持，這是造福大家的好事

ID:1064915 · 發(fā)表于 2024-6-14 20:33

找到創(chuàng)作的動(dòng)力，否則容易半途而廢

ID:471574 · 發(fā)表于 2024-6-14 22:43

joyb 發(fā)表于 2024-6-14 20:33
找到創(chuàng)作的動(dòng)力，否則容易半途而廢

放心，一定會(huì)設(shè)計(jì)出來

ID:471574 · 發(fā)表于 2024-6-14 22:46

IdeaMing 發(fā)表于 2024-6-14 15:07
我大概理解你說的是【串口屏】

不是串口屏，你當(dāng)成是可以DlY庫的GUI編輯軟件，我搞好一部分就會(huì)發(fā)出來

ID:471574 · 發(fā)表于 2024-6-15 08:45

昨天開始做了界面，主要完成GUI畫面的設(shè)置功能，如下圖

1、設(shè)計(jì)屏幕尺寸，“交換”是為了方便橫豎屏切換；
2、屏幕類型可以設(shè)置，單色屏、16bit彩屏、24bit彩屏；（16bit彩屏色彩RGB565）（24bit彩屏色彩RGB888）
3、默認(rèn)的顏色，前景色、背景色、選中色；背景色主要是為了模擬屏幕顯示效果，個(gè)人愛好。如果是彩屏，你要想能真正變成背景色的話，要實(shí)現(xiàn)填充色來做背景；前景色，對(duì)單色屏比較適用，或作為默認(rèn)元件的前景色；選中色，考慮后面的元件都是可選中并操作的，顯示選中的效果；
4、顯示倍數(shù)，主要是放大顯示效果，實(shí)際上屏幕及元件的像素還是1：1；
5、右邊是畫面管理的功能；
6、左下邊是計(jì)劃實(shí)現(xiàn)自定義函數(shù)的自動(dòng)生成列表功能，可以直接復(fù)制到你的MCU程序里代替畫面的生成過程；
7、右下邊是屏幕實(shí)時(shí)效果，還一些坐標(biāo)、大小等信息；
考慮每個(gè)項(xiàng)目都要保存屏幕的信息，我寫了一個(gè)GuiSetting的類，然后用Serializable允許它序列化，這樣就可保存到文件信息里，下次打開時(shí)還原屏幕設(shè)置的信息；其實(shí)用寫Ini文件的方法也是可行，但C#里的序列化和反序列化，非常方便把變量的值還原回來，不需要額外的很多處理；
下面是屏幕設(shè)置的類，大家看文字應(yīng)該很好理解對(duì)應(yīng)的信息。
namespace Gui_Designer
{
[Serializable]
public class GuiSetting
{
      public int width;
      public int height;
      public bool radMonoColor;
      public bool rad16bitColor;
      public bool rad24bitColor;
      public int guiscale;
      public Color BackColor;
      public Color ForeColor;
      public Color SelColor;
      public bool showGrid;
}
}
下面是屏幕1倍和3倍的縮放的效果，因?yàn)檫€沒有元件功能，還看不出元件的縮放，只能看到屏幕大小縮放了

以上是昨天完成的內(nèi)容，選給大家看看

ID:651494 · 發(fā)表于 2024-6-15 11:39

ZLG不是有這樣的GUI么？

ID:156220 · 發(fā)表于 2024-6-15 11:53

厲害了樓主，這樣的軟件很期待

ID:471574 · 發(fā)表于 2024-6-15 11:54

feeling1791 發(fā)表于 2024-6-15 11:39
ZLG不是有這樣的GUI么？

ZLG是用他們的庫移植，我這個(gè)更多的是一款編輯器，適用于你自己的庫，通過生成指令列表的形式，匹配你自己的庫函數(shù)。

ID:471574 · 發(fā)表于 2024-6-15 12:01

zyhlove813 發(fā)表于 2024-6-15 11:54
ZLG是用他們的庫移植，我這個(gè)更多的是一款編輯器，適用于你自己的庫，通過生成指令列表的形式，匹配你自 ...

另外ZLG更適合于專業(yè)搞GUI設(shè)計(jì)的人，需要對(duì)ZLG庫移植熟悉。如果是個(gè)人DIY或只想用自己寫庫的人，我設(shè)計(jì)的這個(gè)軟件就非常適合

ID:471574 · 發(fā)表于 2024-6-15 14:54

紫色的云發(fā)表于 2024-6-15 11:53
厲害了樓主，這樣的軟件很期待

有您的期待，是我創(chuàng)作的動(dòng)力源泉

ID:471574 · 發(fā)表于 2024-6-15 17:47

今天完成了元件的框架，并實(shí)現(xiàn)了單色圖文（即點(diǎn)陣圖片或文字）元件的基本功能；名稱：可以不填，填的話，自定義函數(shù)里，可以通過[N]來獲取；
參數(shù)：可以不填，填的話，自定義函數(shù)里，可以通過[P]來獲取；
指令：即自定義指令，有自定義指令，就會(huì)自動(dòng)替換指令里的內(nèi)容，生成符合你DIY庫里的函數(shù)格式；
類型：即元件類型，有單片圖文，彩色圖片、直線、圓形、矩形等
起點(diǎn)坐標(biāo)：即元件的放置位置
圖文大�。杭磮D文的長寬
填充/前景：就是單色圖文的背景，無背景時(shí)相當(dāng)于透明；有背景時(shí)，就成一個(gè)圖塊上顯示；

元件類型規(guī)劃如下

單色圖文測試

改個(gè)顏色

加個(gè)指令，調(diào)試信息的內(nèi)容變成你的指令了，并自動(dòng)替換了一些坐標(biāo)

為了實(shí)現(xiàn)元件的生成，自定義了一個(gè)基類，然后每種元件里實(shí)現(xiàn)各自功能

CMDOut 就是替換自定義函數(shù)的功能；DrawMe是實(shí)現(xiàn)顯示的功能，DrawSel是畫選中的小方格；
下面是單色圖文實(shí)現(xiàn)DrawMe顯示的代碼，其實(shí)跟單片機(jī)里實(shí)現(xiàn)一樣的思維。支持垂直和水平掃描

單片機(jī)里，我的點(diǎn)陣顯示代碼如下

有人會(huì)問，文字雖然也是點(diǎn)陣的單色圖文，不同大小的文字要怎么處理？
這個(gè)比較簡單，加載單色圖文時(shí)是要設(shè)置長寬大小的，軟件只負(fù)責(zé)顯示，指令你可以改成顯示漢字或ASCII的指令，跟你的庫對(duì)應(yīng)起來即可
功能慢慢完善吧，今天突破比較多了

ID:97678 · 發(fā)表于 2024-6-16 07:39

高手，真的很需要！加油�。�！

ID:471574 · 發(fā)表于 2024-6-17 20:54

今天把單色圖文的功能進(jìn)一步完善，并增加了彩色圖片的功能，元順序功能已經(jīng)完成；針對(duì)單色圖文，我這里重點(diǎn)說明一下：
一、單色圖文，即是點(diǎn)陣圖或點(diǎn)陣文字，點(diǎn)陣圖和點(diǎn)陣文字均可以通過取模軟件生成數(shù)據(jù)；
二、單色圖文的數(shù)據(jù)，可以取模軟件生成的TXT或C文件數(shù)據(jù)，軟件會(huì)使用正則獲取0x開頭的文本，轉(zhuǎn)化為十六進(jìn)制數(shù)據(jù)；
三、支持“垂直掃描，從上到下，再從左到右”或“水平掃描，從左到右，再從上到下”的取模數(shù)據(jù)；
四、點(diǎn)陣圖，要人工設(shè)置長寬尺寸；
五、點(diǎn)陣文字，在取模時(shí)直接把整體內(nèi)容生成（要按順序），比如軟件要顯示“51單片機(jī)”，取模先取字符“51”保存，然后再取中文“單片機(jī)"保存，建立兩個(gè)”單色圖文“的元件，一個(gè)顯示51，一個(gè)顯示單片機(jī)；（正常單片機(jī)中，中文和字符是兩套驅(qū)動(dòng)方式，因?yàn)樗鼈冏值膶挾炔灰粯樱?br /> 六、如果要把中英文用一個(gè)”單色圖文“的元件來顯示，建議取模采用”垂直掃描，從上到下，再從左到右“取模方式，因?yàn)樗麄兊母叨仁且恢碌模∧：�，人工按順序合并，即把�?1“的數(shù)據(jù)放在前面，后面再放”單片機(jī)“的數(shù)據(jù)；
七、目前暫不支持打亂順序的字庫顯示，會(huì)考慮增加此功能；
針對(duì)彩色圖片，這個(gè)功能單色屏不支持，16bit彩屏和24bit彩屏支持；
下圖是”單色圖文“和”彩色圖片“的測試（2倍顯示比例）

（1倍顯示比例，修改后可以完美縮放，坐標(biāo)值是按屏幕大小160x128來的，就是說無論放大多少，鼠標(biāo)位置都是正確的值，
X：0-159 ，Y：0-127，即在160x128屏幕內(nèi)）

明天我會(huì)先把我的單片機(jī)程序的代碼先放出來供參考，值得注意的，你不一定要用我的單片機(jī)代碼，完全用你自己的代碼也是可以完美使用本軟件，所以我這個(gè)軟件自定義函數(shù)功能是非常方便跟你自己的庫關(guān)聯(lián)起來的，這個(gè)是本軟件跟其他GUI軟件差異的地方。說實(shí)在，如果只兼容我自己的庫，我也可以把軟件做成跟其他GUI軟件一樣，自動(dòng)生成代碼，放到單片機(jī)運(yùn)行，但這樣就跟其他軟件一樣了，沒有必要。我相信大多數(shù)人，都喜歡自己寫庫，才有DIY的精神。
預(yù)計(jì)本周軟件的基本功能會(huì)完，大家有什么高端一點(diǎn)的GUI界面也可以發(fā)出來，我這邊挑戰(zhàn)一下，給大家看下生成的效果。本軟件基本功能完成后，計(jì)劃找3個(gè)志愿的網(wǎng)友，協(xié)助內(nèi)測一下軟件功能，歡迎報(bào)名。

ID:378108 · 發(fā)表于 2024-6-19 14:45

期待完善

ID:44037 · 發(fā)表于 2024-6-19 15:03

謝謝分享期待完善

ID:468878 · 發(fā)表于 2024-6-19 15:13

厲害厲害，支持一下。雖然我不怎么玩單片機(jī)了。

ID:471574 · 發(fā)表于 2024-6-19 17:29

今天先把我的單片機(jī)庫（GD32F103+ST7735S）放上來給大家參考一下，功能有不清楚的可以問我。主要顯示框架為：
ST7735硬件驅(qū)動(dòng)庫->Graphic畫圖庫 + FontData.h字體/圖片數(shù)據(jù)庫->GUI畫面顯示庫
庫說明：
1、ST7735硬件驅(qū)動(dòng)庫，針對(duì)不同的驅(qū)動(dòng)芯片替換底層驅(qū)動(dòng)
2、Graphic畫圖庫,實(shí)現(xiàn)不同的顯示指令，發(fā)數(shù)據(jù)給硬件；
3、FontData.h 字體/圖片數(shù)據(jù)庫,即把取模的數(shù)據(jù)封裝成結(jié)構(gòu)/數(shù)組，供顯示指令調(diào)用；
4、GUI畫面顯示庫,不同畫面的顯示指令，我的軟件生成的畫面自定義指令就是更新這個(gè)庫；
這個(gè)框架有個(gè)好處，硬件不同時(shí)，只改/換硬件驅(qū)動(dòng)庫，要增加指令功能時(shí)，只改Graphic畫圖庫，要改取模數(shù)據(jù)，更新FontData.h的結(jié)構(gòu)；增加修改畫面，改GUI畫面顯示庫；
目前Graphic畫圖庫支持如下功能
void Draw_SetTextSpace(uint16_t space); //設(shè)置字符的間隔
void Draw_SetOrigin(uint16_t x_pos,uint16_t y_pos); //設(shè)置相對(duì)原點(diǎn)坐標(biāo)
void Draw_SetFonts(Font_TypeDef HZ,Font_TypeDef ASCII,uint8_t index); //設(shè)置文字屬性

void DrawPoint(uint16_t x, uint16_t y, uint16_t color); // 畫點(diǎn)
void DrawLine(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color);  // 畫線
void DrawCircle(int xc, int yc,int r,uint16_t color, uint8_t fill);//畫圓
void DrawRect(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2,uint16_t color, uint8_t fill);//畫矩形
void DrawFill(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color); //填充區(qū)域
void DrawPic(uint16_t x,uint16_t y,uint16_t width,uint16_t height,const uint8_t pic[]);  //顯示填充彩色圖片
void DrawPicStruct(uint16_t x,uint16_t y,Picture_TypeDef pic);  //根據(jù)結(jié)構(gòu)體數(shù)據(jù)，顯示填充彩色圖片
void DrawPointData(const uint8_t *StrData, uint16_t x, uint16_t y, uint16_t sizex, uint16_t sizey, uint16_t fcolor, uint16_t bcolor, uint8_t TransparentMode); // 根據(jù)位置大小輸出點(diǎn)陣數(shù)據(jù)圖

void DrawStr(uint8_t *strText,Font_Combination fonts, uint16_t x, uint16_t y,uint16_t fcolor, uint16_t bcolor, uint8_t TransparentMode); //文字顯示（中英文混合）
void DrawHZ(uint8_t *strText,Font_TypeDef fontname, uint16_t x, uint16_t y,uint16_t fcolor, uint16_t bcolor, uint8_t TransparentMode);  //漢字顯示
void DrawAscii(uint8_t *strText,Font_TypeDef fontname, uint16_t x,uint16_t y,uint16_t fcolor,uint16_t bcolor, uint8_t TransparentMode); //ASCII字符顯示
void DrawNumber(long number,uint8_t pointnums,Font_TypeDef fontname,uint16_t x,uint16_t y,uint16_t fcolor,uint16_t bcolor,uint8_t TransparentMode); //數(shù)字顯示
void DrawAsc_ByTable(unsigned char *str,Font_TypeDef fontname,uint16_t x,uint16_t y,uint16_t fcolor,uint16_t bcolor, uint8_t TransparentMode); //通用ASCII庫字符顯示

大家有空先熟悉下吧，我抽時(shí)間再解說和優(yōu)化一下

ID:482794 · 發(fā)表于 2024-6-19 21:34

期待完善

ID:471574 · 發(fā)表于 2024-6-20 19:19

這兩天出差客戶這邊，在忙設(shè)備3D設(shè)計(jì)，軟件編程停了一下，本周基本功能可以如期

ID:774081 · 發(fā)表于 2024-6-21 13:39

很有意義的研究，厲害！

ID:471574 · 發(fā)表于 2024-6-28 08:23

軟件已經(jīng)編好了，一直沒時(shí)間上來更新動(dòng)態(tài)。今晚更新，有需要的請(qǐng)留郵箱

ID:471574 · 發(fā)表于 2024-6-28 20:14

終于完工了，完整的軟件界面如下：
畫面支持：單色屏、16bit彩屏，24bit彩屏，縮放，多畫面項(xiàng)目

元件支持：單色圖文、彩色圖片、直線、圓、矩形
直線、圓、矩形為指令動(dòng)態(tài)生成（可參考我的單片機(jī)Graphic庫），因此支持拖拉改變大小和點(diǎn)位；
多排列元件先后順序、可多選移動(dòng)、鎖定。。。。

指令庫為方便生成指令列表使用，每個(gè)人根據(jù)自己的庫函數(shù)來建立指令庫；

工具：主要是顏色收藏和應(yīng)用功能；

ID:433219 · 發(fā)表于 2024-6-29 08:27

樓煮，做穩(wěn)定后，再商品化，就是市面上的“串口屏”了，，，，

ID:97678 · 發(fā)表于 2024-7-3 07:24

我想要，可以發(fā)給我一份嗎？
1575046299@QQ.com

ID:125430 · 發(fā)表于 2024-7-8 16:46

樓主威武，大寫的服，佩服的五體投地！

ID:245466 · 發(fā)表于 2024-7-8 21:13

樓主的效率很高啊，這么快就搞出第一版了!

ID:97678 · 發(fā)表于 2024-7-9 07:51

zyhlove813 發(fā)表于 2024-6-28 08:23
軟件已經(jīng)編好了，一直沒時(shí)間上來更新動(dòng)態(tài)。今晚更新，有需要的請(qǐng)留郵箱

1575046299@qq.com 給我發(fā)一份。謝謝！

ID:641483 · 發(fā)表于 2024-7-9 12:34

zyhlove813 發(fā)表于 2024-6-28 20:14
終于完工了，完整的軟件界面如下：
畫面支持：單色屏、16bit彩屏，24bit彩屏，縮放，多畫面項(xiàng)目

樓主大神威武，這工具對(duì)我還在摸索的小白來說就是神器，如果方便的話麻煩給轉(zhuǎn)我一份：tinke@126.com 謝謝

ID:471574 · 發(fā)表于 2024-7-9 14:20

做了個(gè)字體取模工具，雖然網(wǎng)上有很多，自己練練手

ID:64089 · 發(fā)表于 2024-7-10 08:54

樓主膩害，說真的有時(shí)候也想自己搞，奈何水平有限，只能仰望，希望能得到一份，郵箱nsj21n@163.com，謝謝。

ID:935976 · 發(fā)表于 2024-7-11 17:01

樓主效率真高啊，我做東西都太慢，估計(jì)不熟的原因。

能發(fā)我一份嗎？謝謝！

lsl3312004@126.com

ID:97678 · 發(fā)表于 2024-7-13 14:55

有使用教程嗎？

ID:97678 · 發(fā)表于 2024-7-13 15:50

什么錯(cuò)誤？

ID:97678 · 發(fā)表于 2024-7-13 15:56

這個(gè)是什么錯(cuò)誤？

ID:97678 · 發(fā)表于 2024-7-13 16:32

不能保存項(xiàng)目？

ID:471574 · 發(fā)表于 2024-7-13 18:40

jovew 發(fā)表于 2024-7-13 15:56
這個(gè)是什么錯(cuò)誤？

你沒有添加單色圖文的數(shù)據(jù)

ID:712493 · 發(fā)表于 2024-7-13 20:23

zyhlove813 發(fā)表于 2024-6-20 19:19
這兩天出差客戶這邊，在忙設(shè)備3D設(shè)計(jì)，軟件編程停了一下，本周基本功能可以如期

軟件玩得那么好，沒想3D也這么厲害羨慕一下

ID:44037 · 發(fā)表于 2024-7-14 11:26

zyhlove813 發(fā)表于 2024-6-28 08:23
軟件已經(jīng)編好了，一直沒時(shí)間上來更新動(dòng)態(tài)。今晚更新，有需要的請(qǐng)留郵箱

學(xué)習(xí)一下很好的構(gòu)思 1549942696@qq.com

帳號(hào)		自動(dòng)登錄	找回密碼
密碼			立即注冊(cè)

久久久久久久999_99精品久久精品一区二区爱城_成人欧美一区二区三区在线播放_国产精品日本一区二区不卡视频_国产午夜视频_欧美精品在线观看免费

如果有這樣的一款GUI軟件,你需要嗎?（持續(xù)更新....）

評(píng)分