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

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

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

有了這個軟件，搞GUI界面就方便多了，保存的數(shù)據(jù)內容和實現(xiàn)的庫都是自己控制，占有空間比較少，而且有DIY的樂趣，您需要嗎？
我計劃近期開始編寫這個軟件，會經(jīng)常發(fā)布我的進度和實現(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)作的動力，否則容易半途而廢

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

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

放心，一定會設計出來

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

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

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

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

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

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

以上是昨天完成的內容，選給大家看看

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是用他們的庫移植，我這個更多的是一款編輯器，適用于你自己的庫，通過生成指令列表的形式，匹配你自己的庫函數(shù)。

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

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

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

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

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

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

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

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

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

單色圖文測試

改個顏色

加個指令，調試信息的內容變成你的指令了，并自動替換了一些坐標

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

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

單片機里，我的點陣顯示代碼如下

有人會問，文字雖然也是點陣的單色圖文，不同大小的文字要怎么處理？
這個比較簡單，加載單色圖文時是要設置長寬大小的，軟件只負責顯示，指令你可以改成顯示漢字或ASCII的指令，跟你的庫對應起來即可
功能慢慢完善吧，今天突破比較多了

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

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

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

今天把單色圖文的功能進一步完善，并增加了彩色圖片的功能，元順序功能已經(jīng)完成；針對單色圖文，我這里重點說明一下：
一、單色圖文，即是點陣圖或點陣文字，點陣圖和點陣文字均可以通過取模軟件生成數(shù)據(jù)；
二、單色圖文的數(shù)據(jù)，可以取模軟件生成的TXT或C文件數(shù)據(jù)，軟件會使用正則獲取0x開頭的文本，轉化為十六進制數(shù)據(jù)；
三、支持“垂直掃描，從上到下，再從左到右”或“水平掃描，從左到右，再從上到下”的取模數(shù)據(jù)；
四、點陣圖，要人工設置長寬尺寸；
五、點陣文字，在取模時直接把整體內容生成（要按順序），比如軟件要顯示“51單片機”，取模先取字符“51”保存，然后再取中文“單片機"保存，建立兩個”單色圖文“的元件，一個顯示51，一個顯示單片機；（正常單片機中，中文和字符是兩套驅動方式，因為它們字的寬度不一樣）；
六、如果要把中英文用一個”單色圖文“的元件來顯示，建議取模采用”垂直掃描，從上到下，再從左到右“取模方式，因為他們的高度是一致的，取模后，人工按順序合并，即把”51“的數(shù)據(jù)放在前面，后面再放”單片機“的數(shù)據(jù)；
七、目前暫不支持打亂順序的字庫顯示，會考慮增加此功能；
針對彩色圖片，這個功能單色屏不支持，16bit彩屏和24bit彩屏支持；
下圖是”單色圖文“和”彩色圖片“的測試（2倍顯示比例）

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

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

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

期待完善

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

謝謝分享期待完善

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

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

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

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

void DrawPoint(uint16_t x, uint16_t y, uint16_t color); // 畫點
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ù)結構體數(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ù)位置大小輸出點陣數(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庫字符顯示

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

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

期待完善

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

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

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

很有意義的研究，厲害！

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

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

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

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

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

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

工具：主要是顏色收藏和應用功能；

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)編好了，一直沒時間上來更新動態(tài)。今晚更新，有需要的請留郵箱

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

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

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

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

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

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

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

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

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

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

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

lsl3312004@126.com

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

有使用教程嗎？

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

什么錯誤？

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

這個是什么錯誤？

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

不能保存項目？

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

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

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

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

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

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

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

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

學習一下很好的構思 1549942696@qq.com

帳號		自動登錄	找回密碼
密碼			立即注冊

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

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

評分