29 views

一個軟體的 UI 界面是非常重要的,這是軟體與用戶交互的介面,軟體功能即使再強大,但如果沒有清晰的 UI 界面,那也發揮不出軟體的功能,使得用戶體會不到軟體的優勢。今天痞子衡給大家介紹 pzh-py-com 的界面構建過程。

一、界面設計簡圖

在真正進入代碼設計 pzh-py-com 界面前,首先應該在紙上畫一個界面草圖,確定 pzh-py-com 界面應該有哪些元素構成,這些元素分別位於界面上什麼位置。下面是痞子衡畫的 pzh-py-com 的界面簡圖,界面主要包括三大部分:接收區、配置區、發送區,接收區用於顯示從串口接收到的數據;配置區用於配置串口參數;發送區用於編輯要從串口發送出去的數據。

200行Python代碼實現串口調試助手之界面構建

二、界面設計 wxPython組件圖

有了 pzh-py-com 的界面設計簡圖指導,下一步需要將設計簡圖解析成如下的 wxPython 組件圖,將簡圖裡的元素轉換成 wxPython 里的真實組件。這一步需要配合查閱 wxPython 相關手冊,了解 wxPython 有哪些組件。

有一個地方需要特別提醒的是,wxWrapSizer 里的控制項是從左到右自上而下排列的,有的時候為了排版,會故意插入一些無效的 wxStaticText 來佔位,下圖中便用了 4 個佔位的 wxStaticText(淺色框表示)。

200行Python代碼實現串口調試助手之界面構建

三、在 wxFormBuilder 里創作

有了 pzh-py-com 的界面設計 wxPython 組件圖,下面便可以在 wxFormBuilder 里照樣子創作出 pzh-py-com 的真正界面了。關於 wxFormBuilder 的使用可參考痞子衡另一篇文章 極易上手的可視化 wxPython GUI構建工具(wxFormBuilder)。

200行Python代碼實現串口調試助手之界面構建

四、使用生成的 Python 代碼

將 wxFormBuilder 生成的 python 代碼保存為 win.py 文件(其中 Frame class 名為 com_win),並存放於 //pzh-py-com//src 目錄下,此時需要另外新建一個名為 main 的主函數文件,並放在 //pzh-py-com//src 目錄下。其中 main 文件內容如下:

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 里並沒有實現具體功能,只有一個 hello world 列印的效果,此處只是演示界面已經創建成功,界面運行效果如下:

200行Python代碼實現串口調試助手之界面構建

至此,串口調試工具 pzh-py-com 誕生之界面構建痞子衡便介紹完畢了,掌聲在哪裡~~~

Share
Go Top