工业触屏系统开发经验分享

最近搞了个工业触屏电脑系统的开发，系统安装的是精简的WINXP系统。考虑到系统是精简的，如果直接使用WinForm技术可能有些功能使用不了，WPF就更不用说了。而且传统的C/S开发的部署、修改都是个问题，因此在B/S开发能够胜任的情况下，优先考虑B/S架构。

该系统技术上面比较简单，都是使用常规的技术进行开发。

下面罗列一下使用到的技术：

1、JavaScript（jQuery）

这个不用多说了，JavaScript编程是面向浏览器客户端的编程技术，浏览器与用户的交互操作都是通过JavaScript实现的。与数据库操作的部分，都使用了JQuery Ajax技术，实现无刷新操作。

2、JQuery Easy UI

使用了JQuery Easy UI的datagrid组件来实现列表的展示。以后系统升级会考虑使用bootstrap来实现。

3、MSChart

由于更加熟悉微软服务器端编程技术，统计图表部分我优先考虑使用了微软的MSChart组件。其实完全可以考虑使用更加丰富的客户端统计插件，比如ECharts（百度）、ExtJS等。

4、GDI+

由于该系统需要通过直观的图形看出虚拟物品与实物对应的关系，通过GDI+绘图技术就可以实现这个效果（这也是我们这个系统的最大特色之一）

5、其它JQuery 插件

 

其它一些小技巧：

1、浏览器全屏及无痕模式

我使用的是Chrome浏览器，它使用了WebKit内核，运行速度更快。

然后在Chrome浏览器的快捷方式的目标里面，添加如下设置：

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

将这个快捷方式拖到系统启动项里面，就可以实现开机自动全屏显示。

2、条形码登录系统

由于是触摸屏，没有输入键盘的操作，因此我们登录系统使用了条形码进行登录。

$(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函数为如上代码的封装