基于 HTML5 WebGL 的 智慧楼宇能源监控系统
前言
21世纪,在能源危机和全球气候变暖的压力下,太阳能等可再生能源越来越受到关注,其中光伏建筑一体化逐渐成为绿色发展方式和生活方式,加强节能降耗,支持低碳产业和新能源、可再生能源发展,也已经成为国家战略,所以基于数据进行管理和监控的智慧楼宇能源系统已经成为了一种趋势。通过数据我们可以直观对建筑执行能耗量化管理以及效果评估,来控制降低建筑运营过程中所消耗的能量,最终降低建筑的运营成本,提高能源使用效率。今天就给大家带来一个采用 Hightopo 的 HT for Web 产品实现智慧楼宇的能耗监控系统。
系统预览
这个图中显示的是一个 2D 3D 结合而成的智慧楼宇的能源监控系统,主要对楼宇设备能耗变化进行实时监控,比如:空调、照明等。
代码实现
一、场景进入动画预览
对于 3D 建模下的楼宇建筑,加上一个好的开场动画效果,可以给用户带来良好的体验效果,所以我们可以对 3D 场景 修改它的 eye 和 center 的数值来达到漫游的效果。当然我们也可以借助管道去实现更加复杂的漫游效果,其本质也是通过改变 3D 场景的 eye 和 center 的数值。
实现动画代码如下:
//场景进入动画
flyToView(g3d, eye, center, cb, time) {
g3d.moveCamera(eye, center, {
duration: time ? time : 3000,
finishFunc: function() {
cb && cb();
}
});
}
二、大楼动画预览
在 3D 场景中,我们可以对通过对整个大楼模型节点的拆分,把需要做动画的大楼部分模型做成单独的节点,再通过给这些节点设置不同的 Tag(注:类似ID,在我们的场景中是唯一的)。然后就可以通过 Tag 获取到我们 3D 视图中的这个节点,再通过动画去修改该节点的 X 轴、Y 轴、以及 Z 轴的值,就可以做出这样的大楼变化效果。在我们的 3D 的三维坐标系中,X 轴正方向朝右,Y 轴正方向朝上,Z 轴的正方向朝向屏幕外,采用的是右手螺旋法则,想了解更多关于我们 3D 场景的细节 ,详见HT for Web 3D 手册章节。
实现动画代码如下:
//大楼动画1
buildAnim1(node, position, num, direction, cb, time) {
var x = node.getX(),
z = node.getY(),
y = node.getElevation();
this.anim2 = ht.Default.startAnim({
duration: time ? time : 3000,
finishFunc: function finishFunc() {
cb && cb();
},
action: function action(v) {
if (position === "Y") {
var positionY = y + num * v;
node.setElevation(positionY);
} else if (position === "X") {
if (direction === "lf" || direction === "ra") {
var positionX = x + num * v;
var positionY = z + num * v;
node.setX(positionX);
node.setY(positionY);
} else if (direction === "la") {
var positionX = x - num * v;
var positionY = z + num * v;
node.setX(positionX);
node.setY(positionY);
} else if (direction === "rf") {
var positionX = x + num * v;
var positionY = z - num * v;
node.setX(positionX);
node.setY(positionY);
}
} else if (position === "Z") {
var positionZ = z + num * v;
node.setY(positionZ);
}
}
});
}
通过以上的代码可以看出,我们可以动态传入我们需要的参数,然后在我们动画的 action 函数中根据我们传的参数进行判断需要哪一步动画,当然我们还有一个 finishFunc 函数。我们就可以通过这个结束动画去调用下一个动画。这样就可以实现动画一步步的效果,这样就可以把复杂的动画拆分成多个简单的小动画。
三、电梯动画预览
在这个智慧楼宇能源监控系统中,我们还可以可视化地实时监控电梯在楼层间的工作运行状态,并且能够准确地浏览每个电梯在楼层间的停留时间。
实现动画代码如下:
//电梯动画
elevatorAnim() {
var self = this;
var g3dDm = self.dm;
var elevatorNodes = g3dDm.getDataByTag("elevatorNodes");
// 电梯动画
var animateElevatorNodes = null;
var elevatorNodesArr = [];
elevatorNodes && elevatorNodes.eachChild(function (d) {
d.a('direction', 1);
elevatorNodesArr.push(d);
});
var randomElevator = function () {
animateElevatorNodes = [];
for (var i = 0; i < 3; i++) {
animateElevatorNodes.push(elevatorNodesArr[self.getRandomNumberByRange(0, 6)]);
}
};
randomElevator();
self.elevatorTask = {
interval: 100,
action: function (data) {
if (animateElevatorNodes.indexOf(data) > -1) {
var elevation = data.getElevation();
var nextElevation = elevation + data.a('direction') * 10;
if (nextElevation < 0 && data.a('direction') === -1) {
data.a('direction', 1);
}
if (nextElevation > 760 && data.a('direction') === 1) {
data.a('direction', -1);
}
data.setElevation(nextElevation);
}
}
};
g3dDm.addScheduleTask(self.elevatorTask);//开启动画
setInterval(randomElevator, 2000);
}
对于电梯的动画效果,我用的是 Hightopo 的调度来实现电梯的动画效果。那什么是调度呢?在 HT 中,调度就是先通过 DataModel 添加调度任务,DataModel 会在调度任务指定的时间间隔(interval)到达时遍历 3D 视图的 DataModel 视图下的所有图元回调调度任务的 action 函数,可在该函数中对传入的 Data 传入的图元做相应的属性修改达到动画效果。想了解更多调度信息,详见<HT for Web 调度手册>章节。
四、2D 面板展示以及数据绑定
在我们系统中我还搭建了 2D 场景,上面有曲线图以及柱状图以及各种数据面板可以直观的显示楼宇的能耗信息,让我们很方便的对楼宇执行能耗量化管理以及效果评估。对于曲线图们支持第三方 ECharts 嵌入的方式引入。
界面如图:
对于 2D 界面的数据绑定非常的简单。我们可以给 2D 面板上的图标设定 Tag ,然后通过对这个面板上绑定的属性进行修改。代码如下:
var powerModule = g2dDm.getDataByTag("powerModule");
powerModule.a({
// 此处名字为自己命名
"num1": self.getRandomNumberByRange(1000, 9999),
"num2": self.getRandomNumberByRange(1, 100),
"num3": self.getRandomNumberByRange(100, 999),
"num4": self.getRandomNumberByRange(100, 999),
});
powerModule.iv();
对于 2D 界面的数据绑定非常的简单,我们也可以通过获取接口的数据的方式动态绑定真实数据到 2D/3D 面板上。当然,如果只是 2D 场景上的文字,我们可以直接通过获取这个文字的节点 node ,然后通过 node.s("text","修改的内容"),即可对数据进行修改。
总结
在能源危机和全球气候变暖的压力下,可再生资源,减少能源消耗,走可持续发展道路已变得尤为重要,也是21世纪的必然趋势。通过能源监控系统,在这些丰富的曲线图、柱图等图表以及有趣生动的3D动画中,就可以直观、有效的传递出楼宇内部的能源变化,从而降低建筑的运营成本,有效的降低建筑用能,对于节能减排、保护环境具有重要的现实意义。
基于 HTML5 WebGL 的 智慧楼宇能源监控系统的更多相关文章
- 基于 HTML5 WebGL 的智慧楼宇三维可视化监控
前言 可视化的智慧楼宇在 21 世纪是有急迫需求的,中国被世界称为"基建狂魔",全球高层建筑数量位居首位,所以对于楼宇的监控是必不可少.智慧楼宇可视化系统更多突出的是管理方面的功能 ...
- 基于 HTML5 WebGL 的智慧楼宇可视化系统
前言 可视化的智慧楼宇在 21 世纪是有急迫需求的,中国被世界称为"基建狂魔",全球高层建筑数量位居首位,所以对于楼宇的监控是必不可少.智慧楼宇可视化系统更多突出的是管理方面的功能 ...
- 基于 HTML5 WebGL 的 3D 棉花加工监控系统
前言 现在的棉花加工行业还停留在传统的反应式维护模式当中,当棉花加下厂的设备突然出现故障时,控制程序需要更换.这种情况下,首先需要客户向设备生产厂家请求派出技术人员进行维护,然后生产厂家才能根据情况再 ...
- 基于 HTML5 WebGL 的民航客机飞行监控系统
前言 前些日子出差,在飞机上看到头顶的监控面板,除了播放电视剧和广告之外,还会时不时的切换到一个飞机航行的监控系统,不过整个监控系统让人感到有一点点的简陋,所以我就突发奇想制作了一个采用 HT for ...
- 基于 HTML5 WebGL 的故宫人流量动态监控系统
前言 在当代社会,故宫已经成为一个具有多元意义的文化符号,在历史.艺术.文化等不同领域发挥着重要的作用,在国际上也成为能够代表中国文化甚至中国形象的国际符号.近几年故宫的观众接待量逐年递增,年接待量已 ...
- 基于 HTML5 WebGL 的加油站 3D 可视化监控
前言 随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA.SC ...
- 基于 HTML5 WebGL 的智慧城市(一)
前言 中共中央.国务院在今年12月印发了<长江三角洲区域一体化发展规划纲要>(下文简称<纲要>),并发出通知,要求各地区各部门结合实际认真贯彻落实. <纲要>强调, ...
- 基于 HTML5 WebGL 的 3D 工控裙房系统
前言 工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇.中国工业物联网企业目前呈现两种发展形式并存状况:一方面是大型通讯.IT企业的布局:一方 ...
- 基于 HTML5 WebGL 的 3D 仪表数据监控
工控仪表重点发展基于现场总线技术的主控系统装置及智能化仪表.特种和专用自动化仪表:全面扩大服务领域,推进仪器仪表系统的数字化.智能化.网络化,完成 自动化仪表从模拟技术向数字技术的转变:推进具有自主版 ...
随机推荐
- 80 remove duplicates from sorted array 2
| 分类 leetcode | Follow up for "Remove Duplicates": What if duplicates are allowed at most ...
- 【教程向】配置属于自己的vim
新建Vim配置文件 Linux mkdir -/.vimrc 配置 常用设置 配置 功能 set number 设置行号 set systax on 高亮 colorscheme{主题} 设置颜色主题 ...
- 给你的Kubernetes集群建一个只读账户(防止高管。。。后)
给你的Kubernetes集群建一个只读账户 需求:我们知道搭完k8s集群会创建一个默认的管理员kubernetes-admin用户该用户拥有所以权限,有一天开发或测试的同学需要登录到k8s集群了解业 ...
- C++走向远洋——61(项目一、排序函数模板)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- Samtec 5G探索之路
序言:时代在发展,2020年5G作为元年.5G全程第五代移动通信技术(英语:5th generation mobile networks或5th generation wireless systems ...
- 7-3 jmu-python-回文数判断(5位数字) (10 分)
本题目要求输入一个5位自然数n,如果n的各位数字反向排列所得的自然数与n相等,则输出‘yes’,否则输出‘no’. 输入格式: 13531 输出格式: yes 输入样例1: 13531 输出样例1: ...
- py基础之模块与包
'''模块:当代码越来越多时,将所有代码放入一个文件中便会无法维护,所以放到多个文件中去,这样每一个py文件就是一个模块 包:模块越来越多时容易重名,便将模块放入不同的包中,每个包中必须有一个__in ...
- svg和css3创建环形渐变进度条
在负责的项目中,有一个环形渐变读取进度的效果的需求,于是在网上查阅相关资料整理一下.代码如下: <!DOCTYPE html> <html lang="en"&g ...
- [CSS]CSS Position 详解
一. CSS position 属性介绍 CSS中position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型.有static,relative,absolute和fixed四种取值 ...
- JZOJ 3505. 【NOIP2013模拟11.4A组】积木(brick)
3505. [NOIP2013模拟11.4A组]积木(brick) (File IO): input:brick.in output:brick.out Time Limits: 1000 ms Me ...