项目中需要用到仪器仪表的界面来显示实时的采集信息值,于是便遍地寻找,参考了fusionchart和anychart之后,发现都是收费的,破解的又没有这些功能,只好作罢。之后又找遍了JQuery的插件,也没有找到,于是在灰心之时,Dojo的demo界面让我欣喜若狂:Graphics, Charting and Vizualization 看罢之后,就决定采用Dojo了。

基础知识概览

这篇文章,主要讲解如何利用Dojo原生的仪器仪表界面(Dojo有很强大的绘图功能,后期如果有机会,会分享自绘的仪器仪表界面),来通过Ajax实现采集的数据实时传送给仪表显示。

首先,开始编码之前,需要的东西就是DOJO包:Dojo Toolkit Release,下载之后解压出来,拷贝到项目中即可。项目文件很多,你不需要的功能可以自己去掉。这次我们使用的东西在Dojox包下面。

这里简单介绍下每个目录中的不同内容(如果有误,还请纠正):

dojo目录下的是支撑运行的基础类库定义。

dijit目录下则是众多的插件。

dojox目录下则是第三方自行开发的插件。

而这次我们得东西则是放在了dojox/dgauges目录下面,下面开始进入编码阶段。

操作步骤

首先,我们需要引入dojo.js:

<script src="Dojo/dojo/dojo.js" type="text/javascript" data-dojo-config="parseOnLoad: true, async:true"></script>

引入的时候,我加入了parseOnLoad和async两个config节点,对于前者,能够自动引入相关的js文件,无需一个一个的添加。对于后者则是开启异步模块加载。

然后,我们可以利用require关键字引入需要的资源文件:

require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/default/CircularLinearGauge", "dojox/dgauges/GaugeBase"])

再之后,我们就可以在画板上画出这个圆形仪表:

  function(ready, dom, CircularLinearGauge, GaugeBase) {
linearGauge = new CircularLinearGauge({value:publicVariable, animationDuration:1200}, dom.byId("CircularGauge"));
}

所需要的html代码仅仅是一个div而已:

<div id="CircularGauge"   style="width:200px;height:200px" ></div>

这样,当我们画出来的时候,就会出现如图所示的效果:

看上去是不是很容易呢?

但是,如何和Asp.net后台通过Ajax交互呢?

由于我比较喜欢Jquery,所以这里我决定采用Jquery的Ajax方式和Asp.net后台进行交互,请看代码:

 var TriggerBackendData=function(){
$.ajax({
url:'Ajax/GaugeManager.asmx/ReturnBusinessData',
type:'post',
contentType: "application/json", //from backend
dataType: "json", // send to backend
data:'{}',
success:function(result){
linearGauge.set("value", result.d);
linearGauge.refreshRendering();
},
error:function(data){
alert('Request Data Failure.');
}
});
}

由于是测试,所以在后台,我就简简单单返回来一个随机数字:

using System;
using System.ComponentModel;
using System.Web.Services; namespace DojoDaemon.Ajax
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class GaugeManager : System.Web.Services.WebService
{
[WebMethod]
public int ReturnBusinessData()
{
Random ran = new Random();
return ran.Next(, );
}
}
}

这样,在前台,当我们设定为3s更新一次界面的时候,我们就可以看到仪表忽左忽右的随着获取的数据动态的转动了,下面是完整的代码部分:

   require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/default/CircularLinearGauge", "dojox/dgauges/GaugeBase"],
function(ready, dom, CircularLinearGauge, GaugeBase) {
linearGauge = new CircularLinearGauge({value:publicVariable, animationDuration:1200}, dom.byId("CircularGauge"));
setInterval(TriggerBackendData, 3000);
});

更多图形

当然,系统中还自带了其他三种图形,我都一并列举到下面:

半圆形仪表:

    require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/classic/SemiCircularLinearGauge", "dojox/dgauges/GaugeBase"],
function(ready, dom, SemiCircularLinearGauge, GaugeBase) {
semiGauge = new SemiCircularLinearGauge({value:publicVariable, animationDuration:1200}, dom.byId("CircularGauge2")); setInterval(function() {
var randomValue = Math.floor((Math.random() * 100) + 1);
semiGauge.set("value", randomValue);
semiGauge.refreshRendering();
}, 1000);
});

横向刻度尺:

    require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/classic/HorizontalLinearGauge", "dojox/dgauges/GaugeBase"],
function(ready, dom, HorizontalLinearGauge, GaugeBase) {
horizontalGauge = new HorizontalLinearGauge({value:publicVariable,Maximum:120,Minimum:0,animationDuration:1200}, dom.byId("HGauge3")); setInterval(function() {
var randomValue = Math.floor((Math.random() * 100) + 1);
horizontalGauge.set("value", randomValue);
horizontalGauge.refreshRendering();
}, 1000);
});

纵向刻度尺:

     require(["dojo/ready", "dojo/dom", "dojox/dgauges/components/default/VerticalLinearGauge", "dojox/dgauges/GaugeBase"],
function(ready, dom, VerticalLinearGauge, GaugeBase) {
verticalGauge = new VerticalLinearGauge({value:publicVariable,Maximum:120,Minimum:0,animationDuration:1200}, dom.byId("VGauge4")); setInterval(function() {
var randomValue = Math.floor((Math.random() * 100) + 1);
verticalGauge.set("value", randomValue);
verticalGauge.refreshRendering();
}, 1000);
});

源码下载

点击这里下载源码

Asp.net与Dojo交互:仪器仪表实现的更多相关文章

  1. Prolog学习:基本概念 and Asp.net与Dojo交互:仪器仪表实现

    Asp.net与Dojo交互:仪器仪表实现 项目中需要用到仪器仪表的界面来显示实时的采集信息值,于是便遍地寻找,参考了fusionchart和anychart之后,发现都是收费的,破解的又没有这些功能 ...

  2. Asp.net--Ajax前后台数据交互

    转自:http://www.cnblogs.com/guolebin7/archive/2011/02/22/1961737.html 代码由前后台两部分组成: 前台:(新建一个Default.asp ...

  3. Asp.net 与 jsp 交互 (打开或跳转页面)

    //// 打开固定大小窗体 Response.Write("<script>window.open('Tree1_edit.aspx','child','width=300,he ...

  4. Asp.net与Flex交互测试记录

    一.利用asp.net为Flex提供数据服务,flex为前端表现. 二.flex通过三种方式四种代码实现来取数据.分别为     HttpService. WebService. RemoteObje ...

  5. 水电表/燃气表/压力表/传感器/仪器仪表等,超低功耗段码LCD液晶显示驱动IC-VKL144A/B 超低工作电流,36*4COM显示,替代PCF8551/MCP144/BU9792/9B92/BL55072B等

    煤气罐的使用安全隐患较大,现在大部分城市使用管道输送燃气,燃气表的计费大都是通过远程抄表的方式,或者充值的方式,为了让用户更好地了解自家燃气表的使用情况,需要一款液晶屏来显示燃气表的状态和用气量等信息 ...

  6. ASP.Net简单的交互案例

    控制器 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...

  7. [转]ASP.NET应用程序生命周期趣谈(一)

    这几天一直在看ASP.NET应用程序生命周期,真是太难了,我理解起来费了劲了,但偏偏它又是那么重要,所以我希望能给大家带来一篇容易理解又好用的文章来帮助学习ASP.NET应用程序生命周期.这篇就是了. ...

  8. .NET/ASP.NET Routing路由(深入解析路由系统架构原理)

    阅读目录: 1.开篇介绍 2.ASP.NET Routing 路由对象模型的位置 3.ASP.NET Routing 路由对象模型的入口 4.ASP.NET Routing 路由对象模型的内部结构 4 ...

  9. 关于asp.net与jquery ajax 的一些补充

    补充1:asp.net 与后台交互除了用之前写得$.ajsx()外 还可以直接使用$.get()  , $.post()等. 补充2:jquery 跨域请求 例如: JSONP 跨域: $.ajax( ...

随机推荐

  1. 【原】结构体包含CString类型成员变量出错的原理

    问题如下:我定义了如下的一个结构体: typedef struct{   CString csText;}MyStruct; 并有如下的程序段1:MyStruct * p=NULL;p=(MyStru ...

  2. 将struts源码导入eclipse

    预制条件和spring源码导入eclipse中一样,下面直接给出导入eclipse的步骤. 步骤: 1. 下载struts相应版本的源码 http://struts.apache.org/downlo ...

  3. Windows 编 程中的字符串

    (1)在win32编程中,如何使用string类型 #include <string> using namespace std; LPTSTR    lpCmdLine = L" ...

  4. 基于Ubuntu虚拟机安装edx-platform

    基于Ubuntu虚拟机安装edx-platform   一. 前提准备 1. 虚拟机中安装Ubuntu12.04,然后再使用Vagrant方式搭建开发环境,请确保这个虚拟机可以使用2GB的内存,否则容 ...

  5. Winpcap

    Winpcap网络开发库入门

  6. 最锋利的Visual Studio Web开发工具扩展:Web Essentials详解(转)

    Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境 ...

  7. 安装node.js+express for win7的Web开发环境配置

    1.安装 node.js. 进入官网的下载地址:http://www.nodejs.org/download/ . 选择Windows Installer或者选择Windows Installer ( ...

  8. redis watch multi exec 关系

    EXEC 执行所有事务块内的命令. 假如某个(或某些) key 正处于 WATCH 命令的监视之下,且事务块中有和这个(或这些) key 相关的命令,那么EXEC 命令只在这个(或这些) key 没有 ...

  9. xargs -n1 -t

    杀掉删除没有释放空间的进程 可以用如下命令,当然也可以写一个循环,不过这一条命令比循环简单 lsof  |grep  deleted  |awk '{print $2}' |xargs  -n1 -t ...

  10. ASP.NET URL伪静态重写实现方法

    ASP.NET URL伪静态重写实现方法 首先说下,ASP.NET URL伪静态只是将~/a_1.html指向到了~/a.aspx?ID=1,但a.aspx还是真实存在的,你不用./a_1.html来 ...