我的簡易 Linux 程式 WEB UI 框架

程式的 UI 一直是我的弱項,長期一直在 Linux 上工作,用的都是命令模式介面,很少要自己去寫 GUI 的東西。Windows 上反而是少寫命令模式的程式,至少會用 QT 或 Excel Form 去拉個簡單的東西出來,改善使用者介面。

讓客戶麻煩,終究會得到報應

最近接了一個案子,是在 Linux 下的一些作業。果不期然,要完成指定的功能,又是要敲一堆指令。本來打算叫案主小心一點照文件打就好了,後來發現連自己都記不住這麼多命令了。

叫客戶下這麼多命令,我想到時還是搞死自己,三不五時來找我說又不能跑了,或命令下錯搞爛整個系統…

就用 WEB 當介面吧

突然靈光一閃,就用 WEB 來當做 UI 吧。在 WWW 剛起來的那幾年,人人都要架個烘培雞,HTML在怎麼樣多少會寫一點。Button, Submit, Hyperlink, Input, Frameset 就可以構成一個堪用的 UI 了。雖然相當的陽春簡陋,但有總是沒有好,而且開發也是相當快速。

WEB UI 畫面

為了往後快速套用,就寫下這篇文章,並留下這個 HTML+CGI (Shelll script) 的框架,以利往後快速套用了。下載檔案請參考文末連結。

透過上面命令,在Ubuntu內安裝 busybox ,並以busybox使用內建的 web server,就可以來執行起這套框架了。

檔案 / 程式簡易說明

index.html

index.html 利用了過時的 frameset 框架,將畫面分為左邊的 “left” 與右邊的 “mainWindow” 視窗。left 主要是來顯示選單與button,而mainWindow是來顯示結果的。

left 會載入 cgi-bin/mgmt 程式,並且會將 buttons.html 的內容顯示出來。由於left是執行 cgi-bin/mgmt,所於其根目錄是位於 cgi-bin 下面的,這點要注意。

buttons.html

本頁主要是用來呈現畫面左側的選單畫面,裡面包含了

  • 一個submit form
  • 以Link執行CGI
  • 下載文字檔
  • 顯示文字檔
  • 上傳檔案
  • 忙碌動畫

 

忙碌動畫主要是在 div 區塊內顯示一個動畫,再以另一個 javascript 檔案來控制其顯示與否。這個動畫功能目前測試只能在 Firefox 上執行,Chrome 似忽沒有效果,這就待以後再研究了。

mgmt

 

mgmt 本質上是一個 shell script的CGI程式,是左側功能選單的主程式,也處理來自 form submit 的要求。而html的程式碼則是,透過 cat ../buttons.html 來達成模組化的檔案區分。

upload.cgi

檔案上傳的處理程式

urlcgi

 

簡易的 shell script CGI 範例,以 hyperlink 的方式來執行。

結語

透過WEB來提供Linux程式簡單的UI,算是一個快速又有彈性的做法,缺點當然就是畫面醜了點。不過以一個工程範例或簡易案子,也算是足夠了 (沒魚蝦也好)。

附件

以 WEB+CGI (Shell Script) 為主體的程式UI框架

Leave a Reply