Asp.net与Dojo交互:仪器仪表实现
项目中需要用到仪器仪表的界面来显示实时的采集信息值,于是便遍地寻找,参考了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交互:仪器仪表实现的更多相关文章
- Prolog学习:基本概念 and Asp.net与Dojo交互:仪器仪表实现
Asp.net与Dojo交互:仪器仪表实现 项目中需要用到仪器仪表的界面来显示实时的采集信息值,于是便遍地寻找,参考了fusionchart和anychart之后,发现都是收费的,破解的又没有这些功能 ...
- Asp.net--Ajax前后台数据交互
转自:http://www.cnblogs.com/guolebin7/archive/2011/02/22/1961737.html 代码由前后台两部分组成: 前台:(新建一个Default.asp ...
- Asp.net 与 jsp 交互 (打开或跳转页面)
//// 打开固定大小窗体 Response.Write("<script>window.open('Tree1_edit.aspx','child','width=300,he ...
- Asp.net与Flex交互测试记录
一.利用asp.net为Flex提供数据服务,flex为前端表现. 二.flex通过三种方式四种代码实现来取数据.分别为 HttpService. WebService. RemoteObje ...
- 水电表/燃气表/压力表/传感器/仪器仪表等,超低功耗段码LCD液晶显示驱动IC-VKL144A/B 超低工作电流,36*4COM显示,替代PCF8551/MCP144/BU9792/9B92/BL55072B等
煤气罐的使用安全隐患较大,现在大部分城市使用管道输送燃气,燃气表的计费大都是通过远程抄表的方式,或者充值的方式,为了让用户更好地了解自家燃气表的使用情况,需要一款液晶屏来显示燃气表的状态和用气量等信息 ...
- ASP.Net简单的交互案例
控制器 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...
- [转]ASP.NET应用程序生命周期趣谈(一)
这几天一直在看ASP.NET应用程序生命周期,真是太难了,我理解起来费了劲了,但偏偏它又是那么重要,所以我希望能给大家带来一篇容易理解又好用的文章来帮助学习ASP.NET应用程序生命周期.这篇就是了. ...
- .NET/ASP.NET Routing路由(深入解析路由系统架构原理)
阅读目录: 1.开篇介绍 2.ASP.NET Routing 路由对象模型的位置 3.ASP.NET Routing 路由对象模型的入口 4.ASP.NET Routing 路由对象模型的内部结构 4 ...
- 关于asp.net与jquery ajax 的一些补充
补充1:asp.net 与后台交互除了用之前写得$.ajsx()外 还可以直接使用$.get() , $.post()等. 补充2:jquery 跨域请求 例如: JSONP 跨域: $.ajax( ...
随机推荐
- 【原】结构体包含CString类型成员变量出错的原理
问题如下:我定义了如下的一个结构体: typedef struct{ CString csText;}MyStruct; 并有如下的程序段1:MyStruct * p=NULL;p=(MyStru ...
- 将struts源码导入eclipse
预制条件和spring源码导入eclipse中一样,下面直接给出导入eclipse的步骤. 步骤: 1. 下载struts相应版本的源码 http://struts.apache.org/downlo ...
- Windows 编 程中的字符串
(1)在win32编程中,如何使用string类型 #include <string> using namespace std; LPTSTR lpCmdLine = L" ...
- 基于Ubuntu虚拟机安装edx-platform
基于Ubuntu虚拟机安装edx-platform 一. 前提准备 1. 虚拟机中安装Ubuntu12.04,然后再使用Vagrant方式搭建开发环境,请确保这个虚拟机可以使用2GB的内存,否则容 ...
- Winpcap
Winpcap网络开发库入门
- 最锋利的Visual Studio Web开发工具扩展:Web Essentials详解(转)
Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境 ...
- 安装node.js+express for win7的Web开发环境配置
1.安装 node.js. 进入官网的下载地址:http://www.nodejs.org/download/ . 选择Windows Installer或者选择Windows Installer ( ...
- redis watch multi exec 关系
EXEC 执行所有事务块内的命令. 假如某个(或某些) key 正处于 WATCH 命令的监视之下,且事务块中有和这个(或这些) key 相关的命令,那么EXEC 命令只在这个(或这些) key 没有 ...
- xargs -n1 -t
杀掉删除没有释放空间的进程 可以用如下命令,当然也可以写一个循环,不过这一条命令比循环简单 lsof |grep deleted |awk '{print $2}' |xargs -n1 -t ...
- ASP.NET URL伪静态重写实现方法
ASP.NET URL伪静态重写实现方法 首先说下,ASP.NET URL伪静态只是将~/a_1.html指向到了~/a.aspx?ID=1,但a.aspx还是真实存在的,你不用./a_1.html来 ...