TWM564758U - 面板控制系統 - Google Patents

Abstract

本創作提出一種面板控制系統，包含：一顯示面板，以及一處理裝置，與該顯示面板連接。其中該處理裝置包含一圖形化介面程式，圖形化介面程式包含：一介面元件視窗，包含複數個介面元件；以及一介面編輯視窗，與該介面元件視窗連接；其中每一個介面元件包含一元件指令視窗、一元件參數視窗及一元件屬性視窗，該元件指令視窗包含複數個原始元件指令，該複數個原始元件指令拖曳至該元件參數視窗形成複數個元件參數指令，該元件屬性視窗包含複數個元件屬性指令。

Description

面板控制系統

本創作係關於一種面板控制系統，尤指一種透過圖形化介面為編輯方法的面板控制系統。

在程式設計過程中，圖形化使用者介面（GraphiCal user interface，簡稱GUI）通常是利用呼叫作業系統提供的應用程式介面（Application Program Interface, API）來實現，且通常需要結合種程式語言之輔助文字。目前結合GUI之程式幾乎都是將GUI之屬性、多種程式語言與程式本身結合在一起，不但會影響程式的執行效率，使程式本身的可讀性降低，且難以維護。

舉例來說，一旦程式完成編譯後，任何GUI或多種程式語言輔助文字的修改皆需重新編譯程式本身，因此非常不便。另外，不同作業系統提供的API各不相同，適用於一作業系統之GUI程式碼不一定適用於另一作業系統。再者，圖形化介面的編程通常需要開啟多個應用程式，且多種程式語言的語法不盡相同，得記憶眾多文字指令，可能造成使用者產生語法邏輯上的錯誤。

因此，開發出一種面板控制系統，以簡化指令語法的複雜度，實屬必要。

有鑑於此，本創作之目的在於提出一種圖形化介面的面板控制系統。

基於上述目的，本創作提出一種面板控制系統，包含：一顯示面板；以及一處理裝置，與該顯示面板連接，其中該處理裝置包含一圖形化介面程式，該圖形化介面程式包含：一介面元件視窗，包含複數個介面元件；以及　一介面編輯視窗，與該介面元件視窗連接，該介面編輯視窗編輯該複數個介面元件；其中每一個介面元件包含一元件指令視窗、一元件參數視窗及一元件屬性視窗，該元件指令視窗包含複數個原始元件指令，該複數個原始元件指令拖曳至該元件參數視窗形成複數個元件參數指令，該元件屬性視窗包含複數個元件屬性指令。

本創作更提出一種面板控制系統的編輯方法，包含以下步驟：啟動該處理裝置並執行該圖形化介面程式；從該介面元件視窗拖曳至少一介面元件至該介面編輯視窗中；點選該介面編輯視窗中的該至少一介面元件，並於該元件指令視窗拖曳該複數個原始元件指令至該元件參數視窗形成複數個元件參數指令；點選該介面編輯視窗中的該至少一介面元件，並於該元件屬性視窗編輯該至少一介面元件的該複數個元件屬性指令；以及將該介面編輯視窗的視窗畫面顯示於該顯示面板。

以上對本創作的簡述，目的在於對本創作之數種面向和技術特徵作一基本說明。創作簡述並非對本創作的詳細表述，因此其目的不在特別列舉本創作的關鍵性或重要元件，也不是用來界定本創作的範圍，僅為以簡明的方式呈現本創作的數種概念而已。

為能瞭解本創作的技術特徵及實用功效，並可依照說明書的內容來實施，茲進一步以如圖式所示的較佳實施例，詳細說明如後：

本創作為一種面板控制系統，透過單一視窗結合所有開發程序，並搭配使用圖形化的編輯介面，以改善操作不同程序編成的不方便。

請參考圖一所示，其為本創作較佳實施例之面板控制系統示意圖。面板控制系統1包含：一顯示面板10；以及一處理裝置20，與該顯示面板10連接，其中該處理裝置包含一圖形化介面（Graphical user interface, GUI）程式200，該圖形化介面程式200包含：一介面元件視窗210，該介面元件視窗210包含複數個介面元件212（可參照圖二）。一介面編輯視窗220，該介面編輯視窗220與該介面元件視窗210連接，用以編輯該複數個介面元件212；其中每一個介面元件212包含一元件指令視窗230a、一元件參數視窗230b及一元件屬性視窗240，該元件指令視窗230a包含複數個原始元件指令232a（可參照圖二），該複數個原始元件指令232a被使用者拖曳至該元件參數視窗230b以形成複數個元件參數指令232b（可參照圖二），該元件屬性視窗240包含複數個元件屬性指令242。

其中該圖形化介面程式200更包含一外部介面元件視窗250及一編輯顯示視窗260，該外部介面元件250視窗用以載入至少一外部介面元件252（可參照圖二），該編輯顯示視窗260用以顯示至少一縮小介面編輯視窗222（可參照圖二）。

上述之顯示面板10可以是薄膜電晶體液晶顯示器（Thin film transistor liquid crystal display, TFT-LCD）或有機發光二極體（Organic Light-Emitting Diodes）顯示器，且搭配有控制板及電阻／電容式觸控面板（touch pane），顯示面板10的尺寸通常為2吋至15吋，其主要應用包含有工業儀器設備、醫療儀器或是GPS導航、咖啡機、洗衣機等白色家電、能源系統、充電樁、POS（Point of Sales）系統、自動販賣機或停車場收費機等工業等級產品應用。

上述之處理裝置20可以是行動裝置、桌上型／手提電腦、個人數位助理（Personal Digital Assistant, PDA）或遊戲機(video game console)，亦可是其他嵌入式主機。

請同時參考圖二，其為本創作較佳實施例之圖形化介面程式示意圖。在本實施例中，該圖形化介面程式200包含：一介面元件視窗210、一介面編輯視窗220、一元件指令視窗230a、一元件參數視窗230b、一元件屬性視窗240、一外部介面元件視窗250以及一編輯顯示視窗260，且上述的所有視窗皆呈現於單一的圖形化介面中，以提升該圖形化介面程式200開發的便利性。

其中該介面元件視窗210，包含有複數個介面元件212，該複數個介面元件212可以是預設的數字（如0、10、20、30等）、預設的文字（如時速、血壓、脈搏等）或預設的圖像（如汽車時速表、脈搏折線圖、開關圖像、時鐘圖像等），使用者可依據自身需求將所需的至少一介面元件212拖曳至介面編輯視窗220進行介面元件212的編輯。

若使用者欲使用外部的文字、數字或圖像等，可透過該外部介面元件視窗250載入至少一外部介面元件252，並依相同方式將至少一外部介面元件252拖曳至介面編輯視窗220進行外部介面元件252的編輯。

在介面編輯視窗220中，使用者可依據自身需求喜好，將至少一外部介面元件252或至少一介面元件212拖曳至介面編輯視窗220中的任一位置，並點選該介面編輯視窗220中的該至少一介面元件212，即可於元件指令視窗230a中編輯設定該至少一介面元件212的該複數個原始元件指令232a，該複數個原始元件指令232a的編輯方式是將該複數個原始元件指令232a拖曳至該元件參數視窗230b，以形成複數個元件參數指令232b。亦可點選該介面編輯視窗220中的該至少一介面元件212，並於元件屬性視窗240中編輯設定該至少一介面元件212的該複數個元件屬性指令242。

同樣地，點選該介面編輯視窗220中的該至少一外部介面元件252，即可於元件指令視窗230a中編輯設定該至少一外部介面元件252的該複數個外部原始元件指令232a’，該複數個外部原始元件指令232a’的編輯方式是將該複數個外部原始元件指令232a’拖曳至該元件參數視窗230b，以形成複數個外部元件參數指令232b’。亦可點選該介面編輯視窗220中的該至少一外部介面元件252，並於元件屬性視窗240中編輯設定該至少一外部介面元件252的該複數個外部元件屬性指令242’。

在本實施例中，元件屬性視窗240中所編輯的複數個元件屬性指令242，包含點選的該至少一介面元件212的大小、該至少一介面元件212的顏色、該至少一介面元件212的字型等，且上述大小、顏色、字型的編輯方式皆是以勾選或下拉式選單作選擇，也就是元件屬性視窗240的所有參數編程皆不需文字逐一輸入，以避免人為錯誤。同樣地，元件屬性視窗240中所編輯的複數個外部元件屬性指令242’，包含點選的該至少一外部介面元件252的大小、該至少一外部介面元件252的顏色、該至少一外部介面元件252的字型等，且上述大小、顏色、字型的編輯方式同樣皆是以勾選或下拉式選單作選擇。

在本實施例中，元件指令視窗230a中所編輯的複數個原始元件指令232a，為點選的該至少一介面元件212的原始元件指令232a（即習知的程式碼），該複數個原始元件指令232a的編輯方式是將該複數個原始元件指令232a拖曳至該元件參數視窗230b，以形成複數個元件參數指令232b。值得注意的是，該複數個原始元件指令232a、該複數個元件參數指令232b及該複數個元件屬性指令242為依據至少一程式碼邏輯所形成的一圖形化拼圖，且圖形化拼圖還可用不同顏色區分，即不同的函式與參數所對應的圖形化拼圖形狀及顏色亦不相同，元件參數指令232b彼此的連接關係需對應到合理的圖形化拼圖中，才可以順利地讓介面編輯視窗220的視窗畫面傳送至顯示面板10。

同樣的，元件指令視窗230a中所編輯的複數個外部原始元件指令232a’，為點選的該至少一外部介面元件252的外部原始元件指令232a’（即習知的程式碼），該複數個外部原始元件指令232a’的編輯方式是將該複數個外部原始元件指令232a’拖曳至該元件參數視窗230b，以形成複數個外部元件參數指令232b’。值得注意的是，該複數個外部原始元件指令232a’、該複數個外部元件參數指令232b’及該複數個外部元件屬性指令242’為依據至少一程式碼邏輯所形成的一圖形化拼圖，且圖形化拼圖還可用不同顏色區分，即不同的函式與參數所對應的圖形化拼圖形狀及顏色亦不相同，外部元件參數指令232b’彼此的連接關係需對應到合理的圖形化拼圖中，才可以順利地讓介面編輯視窗220的視窗畫面傳送至顯示面板10，且透過圖形化拼圖與顏色的形狀，能讓使用者不需要記憶繁雜的文字指令，避免錯誤產生。

其中該圖形化介面程式200更包含一指令偵錯模組（圖未示），用以偵測該元件參數視窗230b的該複數個元件參數指令232b或該複數個外部元件參數指令232b’的邏輯語法是否有誤（即該複數個元件參數指令232b或該複數個外部元件參數指令232b’的圖形化拼圖形狀無法相對應），同時主動顯示合適圖形化拼圖形狀的元件參數指令232b或外部元件參數指令232b’供使用者參考。

在編輯顯示視窗260中，可顯示目前使用中的所有縮小介面編輯視窗222，當使用者開啟一個以上的介面編輯視窗220進行畫面的編輯，編輯顯示視窗260即可顯示所有的縮小介面編輯視窗222，方便使用者任意切換介面編輯視窗220進行編輯。

在本實施例中，該圖形化介面程式200還包含一資料結構（圖未示），用以儲存圖形化介面程式200內建的該複數個原始元件指令232a、複數個元件參數指令232b及該複數個元件屬性指令242，也可以儲存外部載入的該複數個外部原始元件指令232a’、複數個外部元件參數指令232b’及該複數個外部元件屬性指令242’，當往後需要使用類似的指令或參數，即可從資料結構中呼叫相關的指令或參數。其中該資料結構為樹狀資料結構，該樹狀資料結構可以是資料夾或資料庫等。

請同時參考圖三所示，其為本創作較佳實施例之顯示面板示意圖。顯示面板10還包含一通訊單元110、一圖形處理單元120、一記憶體單元130、一顯示單元140以及一電源控制單元150。

該通訊單元110與該圖形化介面程式200連接，用以接收圖形化介面程式200所傳送的一資源檔案，該資源檔案包含介面編輯視窗220中每一個介面元件212的原始元件指令232a、元件參數指令232b及元件屬性指令242，也包含介面編輯視窗220中每一個外部介面元件252的外部原始元件指令232a’、外部元件參數指令232b’及外部元件屬性指令242’。更進一步而言，該通訊單元110還可與其他外部裝置30進行連接，連接的方式不限於有線連接或遠端無線連接，其目的是使用者得以遠距離方式監控該顯示面板10。

該圖形處理單元120與該通訊單元110連接，用以接受處理該資源檔案，並將上述每一個介面元件212的元件參數指令232b及元件屬性指令242，與每一個外部介面元件252的部元件參數指令232b’及外部元件屬性指令242’，轉換成一圖形畫面後傳送至該顯示單元140。請同時參考圖四，其為本創作較佳實施例之顯示面板實際顯示圖形畫面示意圖，該顯示單元140接收並顯示該圖形畫面，其中該圖形畫面是與該圖形化介面程式200中的介面編輯視窗220的視窗畫面一致，並包含介面編輯視窗畫面220中的每一個介面元件212及外部介面元件252。其中該顯示單元140為薄膜電晶體液晶顯示器（Thin film transistor liquid crystal display, TFT-LCD）或有機發光二極體（Organic Light-Emitting Diodes）顯示器。

該記憶體單元130與該圖形處理單元120連接，用以儲存該資源檔案及該圖形畫面，當往後接收到相同的資源檔案，即可由記憶體單元130即時的轉換成對應的圖形畫面，而不需透過該圖形處理單元重新處理以節省處理時間。該電源控制單元150與該顯示單元140連接用以打開或關閉該顯示面板10的電源。

請參考圖五所示，其為本創作較佳實施例之面板控制系統的編輯方法流程圖。面板控制系統的方法步驟包含：在步驟S01中，啟動該處理裝置並執行該圖形化介面程式200。在步驟S02中，從介面元件視窗210拖曳至少一介面元件212至該介面編輯視窗220中。在步驟S03中，點選該介面編輯視窗中220的該至少一介面元件212，並於該元件指令視窗230a拖曳該複數個原始元件指令232a至該元件參數視窗230b形成複數個元件參數指令232b。在步驟S04中，點選該介面編輯視窗220中的該至少一介面元件212，並於該元件屬性視窗240編輯該至少一介面元件212的該複數個元件屬性指令242。以及在步驟S05中，將該介面編輯視窗220的視窗畫面顯示於該顯示面板10。

其中在步驟S02到S04中，使用者還可拖曳從外部介面元件視窗250載入的至少一外部介面元件252至至該介面編輯視窗220中，點選該介面編輯視窗中220的該至少一外部介面元件252，並於該元件指令視窗230a拖曳該複數個外部原始元件指令232a’至該元件參數視窗230b形成複數個外部元件參數指令232b’。同時，點選該介面編輯視窗220中的該至少一外部介面元件252，並於該元件屬性視窗240編輯該至少一外部介面元件252的該複數個外部元件屬性指令242’。

上述面板控制系統的圖形化介面（包含介面元件視窗包含的複數個介面元件、外部介面元件視窗載入的外部介面元件、元件指令視窗的複數個元件指令及複數個元件參數）皆是以圖像方式呈現，尤其數個元件指令及複數個元件參數以拼圖形狀與顏色表示語法連接的邏輯，使用者不須額外記憶文字指令，可避免錯誤產生並簡化語法檢查的複雜度。

惟以上所述者，僅為本創作之較佳實施例而已，當不能以此限定本創作實施之範圍，即依本創作申請專利範圍及說明內容所作之簡單變化與修飾，皆仍屬本創作涵蓋之範圍內。

1‧‧‧面板控制系統

10‧‧‧顯示面板

110‧‧‧通訊單元

120‧‧‧圖形處理單元

130‧‧‧記憶體單元

140‧‧‧顯示單元

150‧‧‧電源控制單元

20‧‧‧處理裝置

200‧‧‧圖形化介面程式

210‧‧‧介面元件視窗

212‧‧‧介面元件

220‧‧‧介面編輯視窗

222‧‧‧縮小介面編輯視窗

230a‧‧‧元件指令視窗

232a‧‧‧原始元件指令

232a’‧‧‧外部原始元件指令

230b‧‧‧元件參數視窗

232b‧‧‧元件參數指令

232b’‧‧‧外部元件參數指令

240‧‧‧元件屬性視窗

242‧‧‧元件屬性指令

242’‧‧‧外部元件屬性指令

250‧‧‧外部介面元件視窗

252‧‧‧外部介面元件

260‧‧‧編輯顯示視窗

30‧‧‧外部裝置

圖一為本創作較佳實施例之面板控制系統示意圖。

圖二為本創作較佳實施例之圖形化介面程式示意圖。

圖三為本創作較佳實施例之顯示面板示意圖。

圖四為本創作較佳實施例之顯示面板實際顯示圖形畫面示意圖。

圖五為本創作較佳實施例之面板控制系統的編輯方法流程圖。

Claims (9)

1. 一種面板控制系統，包含： 一顯示面板；以及 一處理裝置，與該顯示面板連接，其中該處理裝置包含一圖形化介面程式，該圖形化介面程式包含： 　一介面元件視窗，包含複數個介面元件；以及 　一介面編輯視窗，與該介面元件視窗連接，該介面編輯視窗編輯該複數個介面元件； 　其中每一個介面元件包含一元件指令視窗、一元件參數視窗及一元件屬性視窗，該元件指令視窗包含複數個原始元件指令，該複數個原始元件指令被拖曳至該元件參數視窗形成複數個元件參數指令，該元件屬性視窗包含複數個元件屬性指令。
2. 如請求項1所述之面板控制系統，其中該圖形化介面程式更包含一外部介面元件視窗，該外部介面元件視窗載入至少一外部介面元件。
3. 如請求項1所述之面板控制系統，其中該圖形化介面程式更包含一編輯顯示視窗，該編輯顯示視窗顯示至少一縮小介面編輯視窗。
4. 如請求項1所述之面板控制系統，其中該複數個原始元件指令、該複數個元件參數指令及該複數個元件屬性指令為依據至少一程式碼邏輯所形成的一圖形化拼圖。
5. 如請求項1所述之面板控制系統，其中該圖形化介面程式更包含一指令偵錯模組，用以偵測該元件參數視窗的該複數個元件參數指令。
6. 如請求項1所述之面板控制系統，其中該圖形化介面程式更包含一資料結構，該資料結構儲存該複數個原始元件指令、該複數個元件參數指令及該複數個元件屬性指令。
7. 如請求項1所述之面板控制系統，其中該顯示面板更包含一通訊單元、一圖形處理單元、一記憶體單元、一顯示單元以及一電源控制單元；其中該通訊單元與該圖形化介面程式連接，該圖形處理單元與該通訊單元連接，該記憶體單元與該圖形處理單元連接，該顯示單元與該圖形處理單元連接，該電源控制單元與該顯示單元連接。
8. 如請求項7所述之面板控制系統，其中該顯示面板為一觸控面板。
9. 如請求項7所述之面板控制系統，其中該顯示單元為薄膜電晶體液晶顯示器(Thin film transistor liquid crystal display,TFT-LCD)或有機發光二極體(Organic Light-Emitting Diodes)顯示器。