大家好,我是痞子衡,是正經(jīng)搞技術(shù)的痞子。今天痞子衡給大家介紹的是串口調(diào)試工具pzh-py-com誕生之界面構(gòu)建。
一個(gè)軟件的UI界面是非常重要的,這是軟件與用戶交互的接口,軟件功能即使再?gòu)?qiáng)大,但如果沒有清晰的UI界面,那也發(fā)揮不出軟件的功能,使得用戶體會(huì)不到軟件的優(yōu)勢(shì)。今天痞子衡給大家介紹pzh-py-com的界面構(gòu)建過程。
一、界面設(shè)計(jì)簡(jiǎn)圖
在真正進(jìn)入代碼設(shè)計(jì)pzh-py-com界面前,首先應(yīng)該在紙上畫一個(gè)界面草圖,確定pzh-py-com界面應(yīng)該有哪些元素構(gòu)成,這些元素分別位于界面上什么位置。下面是痞子衡畫的pzh-py-com的界面簡(jiǎn)圖,界面主要包括三大部分:接收區(qū)、配置區(qū)、發(fā)送區(qū),接收區(qū)用于顯示從串口接收到的數(shù)據(jù);配置區(qū)用于配置串口參數(shù);發(fā)送區(qū)用于編輯要從串口發(fā)送出去的數(shù)據(jù)。
二、界面設(shè)計(jì)wxPython組件圖
有了pzh-py-com的界面設(shè)計(jì)簡(jiǎn)圖指導(dǎo),下一步需要將設(shè)計(jì)簡(jiǎn)圖解析成如下的wxPython組件圖,將簡(jiǎn)圖里的元素轉(zhuǎn)換成wxPython里的真實(shí)組件。這一步需要配合查閱wxPython相關(guān)手冊(cè),了解wxPython有哪些組件?! ∮幸粋€(gè)地方需要特別提醒的是,wxWrapSizer里的控件是從左到右自上而下排列的,有的時(shí)候?yàn)榱伺虐?,?huì)故意插入一些無效的wxStaticText來占位,下圖中便用了4個(gè)占位的wxStaticText(淺色框表示)。
三、在wxFormBuilder里創(chuàng)作
有了pzh-py-com的界面設(shè)計(jì)wxPython組件圖,下面便可以在wxFormBuilder里照樣子創(chuàng)作出pzh-py-com的真正界面了。關(guān)于wxFormBuilder的使用可參考痞子衡另一篇文章 極易上手的可視化wxPython GUI構(gòu)建工具(wxFormBuilder)。
四、使用生成的Python代碼
將wxFormBuilder生成的python代碼保存為win.py文件(其中Frame class名為com_win),并存放于\pzh-py-com\src目錄下,此時(shí)需要另外新建一個(gè)名為main的主函數(shù)文件,并放在\pzh-py-com\src目錄下。其中main文件內(nèi)容如下:
import wx
import sys, os
import win
class mainWin(win.com_win):
def clearRecvDisplay( self, event ):
event.Skip()
def openClosePort( self, event ):
event.Skip()
def clearSendDisplay( self, event ):
event.Skip()
def sendData( self, event ):
self.m_textCtrl_recv.Clear()
self.m_textCtrl_recv.SetValue('hello world')
if __name__ == '__main__':
app = wx.App()
main_win = mainWin(None)
main_win.SetTitle(u"JaysPyCOM v0.1.0")
main_win.Show()
app.MainLoop()
main.py里并沒有實(shí)現(xiàn)具體功能,只有一個(gè)hello world打印的效果,此處只是演示界面已經(jīng)創(chuàng)建成功,界面運(yùn)行效果如下:
至此,串口調(diào)試工具pzh-py-com誕生之界面構(gòu)建痞子衡便介紹完畢了,掌聲在哪里~~~