工業觸屏系統開發經驗分享

最近搞了個工業觸屏電腦系統的開發，系統安裝的是精簡的WINXP系統。考慮到系統是精簡的，若是直接使用WinForm技術可能有些功能使用不了，WPF就更不用說了。並且傳統的C/S開發的部署、修改都是個問題，所以在B/S開發可以勝任的狀況下，優先考慮B/S架構。

該系統技術上面比較簡單，都是使用常規的技術進行開發。

下面羅列一下使用到的技術：

一、JavaScript（jQuery）

這個不用多說了，JavaScript編程是面向瀏覽器客戶端的編程技術，瀏覽器與用戶的交互操做都是經過JavaScript實現的。與數據庫操做的部分，都使用了JQuery Ajax技術，實現無刷新操做。

二、JQuery Easy UI

使用了JQuery Easy UI的datagrid組件來實現列表的展現。之後系統升級會考慮使用bootstrap來實現。

三、MSChart

因爲更加熟悉微軟服務器端編程技術，統計圖表部分我優先考慮使用了微軟的MSChart組件。其實徹底能夠考慮使用更加豐富的客戶端統計插件，好比ECharts（百度）、ExtJS等。

四、GDI+

因爲該系統須要經過直觀的圖形看出虛擬物品與實物對應的關係，經過GDI+繪圖技術就能夠實現這個效果（這也是咱們這個系統的最大特點之一）

五、其它JQuery 插件

 

其它一些小技巧：

一、瀏覽器全屏及無痕模式

我使用的是Chrome瀏覽器，它使用了WebKit內核，運行速度更快。

而後在Chrome瀏覽器的快捷方式的目標裏面，添加以下設置：

--incognito -kiosk http://www.baidu.com

將這個快捷方式拖到系統啓動項裏面，就能夠實現開機自動全屏顯示。

二、條形碼登陸系統

因爲是觸摸屏，沒有輸入鍵盤的操做，所以咱們登陸系統使用了條形碼進行登陸。

$(function () {  
     $("#<% =LoginId.ClientID%>").bind("input propertychange change", function () {  
          var value = $(this).val();  
          if (value.length == 10) {  
              $.post("Service/LoginHandler.ashx", { loginId: value }, function (data, status) {  
                   if (data == "success") {  
                       $.cookie("userid", value);  
                       window.location.href = "Main.aspx?userid=" + value;  
                   } else {  
                       $("#<%=LoginId.ClientID %>").focus().val("");  
                   }  
              });  
          }  
     });  
});  

光標默認在LoginId的文本框中，一旦使用條形碼閱讀器掃描條形碼就能夠將識別出的條形碼內容輸出到LoginId的文本框中，自動觸發propertychange事件，實現自動登陸。

此外，可使用以下方法判斷光標是否始終在LoginId這個文本框中。

var id = $("#<%=LoginId.ClientID %>");  
if (id != document.activeElement.id) {  
    $(id).focus();  
}  

能夠設置每隔2秒檢測一次：

setInterval("fresh()", 2000);//fresh函數爲如上代碼的封裝