前言
      一套完整的可视化操作交互上,必不可少 2D/3D 的融合,在上期我们介绍了有关 3D 场景的环视漫游、巡视漫游以及动画效果,还包括了冷站场景、热站场景以及智慧末端的实现原理,本期主要介绍关于 2D 图纸面板的动画效果以及面板视频的嵌入。通过 2D/3D 融合的体验,达成场景数据可视化的直观体现以及面板动画交互体验的舒适体验。
 
界面简介及效果预览
2D 面板缩放的动画切换过渡效果
      主要通过加载图纸后缩放动画展示面板以及冷站场景和热站场景之间的切换,通过 2D 面板缩放的动画切换过渡效果来实现这一效果。
加载图纸后缩放动画展示面板效果:
 
      冷站场景和热站场景之间的切换效果:
 
进度条展示效果
      在交互体验上,使得进度条的增减视效上有一种平滑的动画效果。
 
 
视频嵌入效果
      在智慧末端设备场景中点击摄像头交互后,弹出改设备场景的监控信息画面。
 
代码实现
一、 2D 面板缩放的动画切换过渡效果实现
      面板缩放的动画切换过渡效果主要是通过设置该图元锚点固定到要缩放的一方,然后通过控制该图元的缩放值来实现缩放效果,图元里的字体则是通过透明度的变化来实现渐变呈现的效果。以下通过标题的缩放动画来讲解实现的方法。
      首先将标题锚点设置为居中,即横锚点和纵锚点都为0:
tittle.setAnchor(x, y | {x:0.5,y:0.5})

此时的标题图元就会达到锚点居中的效果:

而此时我们只需把标题的横缩放值设置为0,而后再通过 HT 的动画对标题缩放值进行动画缩放,再通过动画改变标题名字的透明度,就会达到一种面板缩放的动画切换过渡效果。

tittle.scaleX(0);

动画的实现主要还是通过 HT 自带的 ht.Default.startAnim 动画函数,支持 Frame-Based 和 Time-Based 两种方式的动画。这里的实现采用了 Time-Based 的动画方式,当中的 esting 参数是用于让用户定义函数,通过数学公式控制动画, 如匀速变化、先慢后快等效果,可参考http://easings.net/,本案例是采用的先慢后快的实现方式。

而具体的实现伪代码如下:

// 标题动画
tittleAnim() {
const self = this;
const g2d = self.g2d;
const g2dDm = g2d.dm();
// 获取标题图元的横缩放值
let tittle_index = this.tittle.getScaleX();
// 缩放值动画执行入口
ht.Default.startAnim({
// 动画时间
duration: 300,
// 调用 Easing.js 里面 swing 的动画效果
easing: Easing.swing,
// 动画执行内容
action: (v, t) => {
// 通过修改标题横缩放值来实现动画效果
this.tittle.setScaleX(tittle_index + (1 - tittle_index) * v);
},
finishFunc: () => {
// 缩放值动画结束后执行标题名字透明度渐变显示动画
ht.Default.startAnim({
duration: 1000,
easing: Easing.swing,
action: (v, t) => {
// 通过修改标题名字透明度来实现动画效果
this.tittleName.eachChild(c => {
c.s('opacity', c.s('opacity') + (1 - c.s('opacity')) * v);
});
},
finishFunc: () => {
// 结束后调用执行下一个缩放值动画以及字体透明度动画
}
});
}
});
}

Easing.js 是自己封装的动画效果,如 swing 是由慢到快的摆动动画效果:

const Easing = {
swing: function (t) {
return ( -Math.cos(t * PI) / 2 ) + 0.5;
}
}
二、进度条展示效果的实现
通过封装了一个 setValueWithAnimation 的进度条动画,主要通过参数 (node, name, value, format):
  • node:为进度条图元结点;
  • name:传入的参数为进度条图元结点的属性名,一般为需要改变的进度值 precent, 取值范围为0~1;
  • value:根据传入的 name, 去改变对应的数值;
  • format:如有格式,则可改变新数值的格式;

主要的实现方法还是采用 HT 的 ht.Default.startAnim 动画函数,来实现新值 newValue 与旧值 oldValue 的差额range 动画实现。

setValueWithAnimation(node, name, value, format) {
let oldValue = node.a(name);
value *= 1;
let range = value - oldValue; ht.Default.startAnim({
duration: 1000,
easing: Easing.easeOutStrong,
action: (v, t) => {
let newValue = oldValue + range * v;
if (format) {
newValue = format(newValue);
}
node.a(name, newValue);
}
});
}

同样的,这里的动画效果也是引用 Easing.js 里 easeOutStrong 逐渐加快的效果:

const Easing = {
easeOutStrong: function (t) {
return 1 - (--t) * t * t * t;
}
}
三、视频嵌入效果的实现
      在实时监控系统中,主要常用的流媒体传输协议有:RTMPRTSPHLS 和 HTTP-FLV

RTMP (Real Time Messaging Protocol):实时消息传输协议,RTMP 协议中,视频必须是 H264 编码,音频必须是 AAC 或 MP3 编码,且多以 flv 格式封包。因为 RTMP 协议传输的基本是 FLV 格式的流文件,必须使用 flash 播放器才能播放。

RTSP (Real-Time Stream Protocol):RTSP 实时效果非常好,适合视频聊天、视频监控等方向。

HLS(Http Live Streaming):由 Apple 公司定义的基于 HTTP 的流媒体实时传输协议。传输内容包括两部分:1.M3U8 描述文件,2.TS 媒体文件。TS 媒体文件中的视频必须是H264编码,音频必须是 AAC 或 MP3 编码。数据通过 HTTP 协议传输。目前 video.js 库支持该格式文件的播放。

HTTP-FLV:本协议就是 http+flv,将音视频数据封装成FLV格式,然后通过http协议传输到客户端,这个协议大大方便了浏览器客户端播放直播视频流.目前 flv.js 库支持该格式的文件播放。

本实例中实现方式主要是双击 3D 场景中摄像机,弹出监控弹窗再载入本地资源的视频文件,而在实际应用项目场景中,我们可以灵活合理地运用以上的常用的流媒体传输协议来实现实时监控的效果。为了处理点击事件的交互,这里添加事件交互监听 mi 为 addInteractorListener的缩写,可了解 HT 交互监听的实现方式。

g3d.mi(e => {
const kind = e.kind;
// 双击结点的事件处理
if (kind === 'doubleClickData') {
// 双击的结点
let data = e.data;
// 获取双击结点的标签
let tag = data.getTag();
if (!tag) return;
// 如果结点标签为监控器
if (tag === 'monitor') {
// 监控面板显示
this.intelligentMonitoring.s('2d.visible', true);
// 载入本地资源视频流
this.video.a('videoURL', './storage/assets/media/video.mp4');
}
}
});
总结
      IBMS 智能化集成系统管理通过 2D 面板与 3D 场景的联动交互中,使得整个系统内容结构更加地直观与拟真。通过 2D 面板的事件监听处理下,3D场景对应地执行环视漫游、巡视漫游以及场景的切换,使其更有具人性化的操作。再加上 3D 场景中各种有趣的动画和 2D面板中的面板缩放动画以及进度条动画,丰富了可视化操作的特点,这也是在工业互联网必不可少的一环。
      介绍完 2D/3D 融合的IBMS 智能化集成系统场景以及面板的拟真直观的特点后,在本系统中最重要的两个要点:智慧楼宇管理系统、电梯监控系统 以及 停车场管理系统 将在下期的内容中为您详细的解读。
 
      2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA
      同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

基于 HTML5 WebGL 的楼宇智能化集成系统(二)的更多相关文章

  1. 基于 HTML5 WebGL 的楼宇智能化集成系统(一)

    前言       随着现代通信技术.计算机技术.控制技术的飞速发展,智能建筑已经成为现代建筑发展的主流.智能建筑是以建筑物为平台,兼备信息设施系统.信息化应用系统.建筑设备管理系统.公共安全系统等.集 ...

  2. 基于 HTML5 WebGL 的楼宇智能化集成系统(三)

    前言       2018年7月,信息化部印发了<工业互联网平台建设及推广指南>和<工业互联网平台评价方法>,掀起了 工业互联网 的浪潮,并成为热词写入了报告中.同为信息发展下 ...

  3. 基于 HTML5 + WebGL 实现 3D 挖掘机系统

    前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...

  4. 基于 HTML5 WebGL 的 CPU 监控系统

    前言 科技改变生活,科技的发展带来了生活方式的巨大改变.随着通信技术的不断演进,5G 技术应运而生,随时随地万物互联的时代已经来临.5G 技术不仅带来了更快的连接速度和前所未有的用户体验,也为制造业, ...

  5. 基于 HTML5 + WebGL 的 3D 太阳系系统

    前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...

  6. 基于 HTML5 WebGL 的医疗物流系统

    前言 物联网( IoT ),简单的理解就是物体之间通过互联网进行链接.世界上的万事万物,都可以通过数据的改变进行智能化管理.ioT 的兴起在医疗行业中具有拯救生命的潜在作用.不断的收集用户信息并且实时 ...

  7. 基于 HTML5 + WebGL 实现的垃圾分类系统

    前言 垃圾分类,一般是指按一定规定或标准将垃圾分类储存.分类投放和分类搬运,从而转变成公共资源的一系列活动的总称.分类的目的是提高垃圾的资源价值和经济价值,力争物尽其用.垃圾在分类储存阶段属于公众的私 ...

  8. 基于 HTML5 WebGL 的发动机 3D 可视化系统

    前言     工业机械产品大多体积庞大.运输成本高,在参加行业展会或向海外客户销售时,如果没有实物展示,仅凭静态.简单的图片说明书介绍,无法让客户全面了解产品,不仅工作人员制作麻烦,客户看得也费力.如 ...

  9. 基于 HTML5 WebGL 的地铁站 3D 可视化系统

    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...

随机推荐

  1. django 登录、注册

    一.登录 1.在blogapp同级目录下新建一个userapp python manage.py startapp users 目录结构如下: 2.在主项目urls.py中新建users的includ ...

  2. 程序员过关斩将-- 喷一喷坑爹的面向UI编程

    摒弃面向UI编程 为何喷起此次话题,因为前不久和我们首席架构师沟通,谈起程序设计问题,一不小心把UI扯进来,更把那些按照UI来编程的后台工程师也扯了进来.今天特意百度了一下(其实程序员应该去googl ...

  3. ubuntu下使用apt-get install安装软件的安装位置

    在ubuntu下使用 apt-get install 或 apt install 下载安装软件,软件下载及安装后的目录.: A.下载的软件的存放位置:/var/cache/apt/archives B ...

  4. 使用Github Packages功能上传nuget包到Github

    前几天微软收购npm的新闻对于软粉来收很是振奋.微软收购npm很可能是为了加强Github Packages.目前Github,Typescript,VSCode,npm这些开源社区的重磅工具全部都在 ...

  5. token iviewAdmin + php 登录验证解决方案

    思路: php 开启 Session 登录时 生成token,前端存下,然后每次走接口 验证下Session里的token和前端发过来的token是否一样. 遇到问题:后端 每次PHP Session ...

  6. 037.集群网络-Docker网络实现

    一 Docker网络 1.1 Docker网络类型 标准的Docker支持以下4类网络模式: host模式:使用--net=host指定. container模式:使用--net=container: ...

  7. Docker学习-私有仓库docker-registry的使用

    1.从docker官方仓库下载registry 2.将registry放进容器内 3.在官方下载镜像上传本地仓库 4.私有仓库docker-registry使用的常见问题 5.配置阿里云镜像加速器 假 ...

  8. Nginx双机主备(Keepalived实现)

    前言 首先介绍一下Keepalived,它是一个高性能的服务器高可用或热备解决方案,起初是专为LVS负载均衡软件设计的,Keepalived主要来防止服务器单点故障的发生问题,可以通过其与Nginx的 ...

  9. select_related prefetch_related

    # select_related与prefetch_related# # select_related帮你直接连表操作 查询数据 括号内只能放外键字段# # res = models.Book.obj ...

  10. P1361 小M的作物 【网络流】【最小割】

    题目描述 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子有1个(就是可以种一棵作物)(用1...n编号). 现在,第i种作物种植在A中种植可 ...