c++可视化界面_新基建的福音:智慧楼宇可视化监控系统引领智能化新时代

d9122f87a4a6687d155abe6150ca45e8.png

前言

智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前 工业互联网 大背景下受到很大关注。目前 智慧楼宇可视化监控 的主要优点包括:

  • 智慧化 -- 智慧楼宇是一个生态系统,像人一样拥有感知能力、自我判断能力以及控制能力。
  • 绿色化 -- 绿色建筑在耗能、产能以及能源管理方面实现绿色化,楼宇安防实现绿色化监控。
  • 运行成本可控制 -- 基于可持续发展的要求,现代建筑、商业建筑需运行50年以上,建筑在运行过程中能源消耗巨大,如何降低运营成本降低,使建筑在低碳、环保的状态下健康运行。

衣食住行往往是不可或缺,而楼宇建设一直是社会发展进步的一块基点。以往的管理方式,需要细致地划分各个模块的实施,但各个模块又相对独立,在管理成本上和人力投入上都耗费了许多的精力。现如今在科技日益发展的道路上,我们历经了 工业互联网 的浪潮,又顺应了 5G 新时代、新基建 的发展,工业4.0 不单势在必行,而是已经步步落实。通过技术发展的经验总结,我们可以在互联网实施多样化行业可视化系统监控管理方案,智慧楼宇可视化系统亦是如此,通过一套完备的子系统串联,整理出可视化在线管理系统的集合,极大提升了管理能力和节省劳动力的投入。

be12677f24119e0e403de7d84f73b45e.png

传统的 智慧楼宇/楼宇自动化/楼宇安防/智慧园区 常会采用 BIM(建筑信息模型 Building information modeling)软件,如 Autodesk 的 Revit 或 Bentley 这类建筑和工程软件,但这些 BIM 建模模型的数据往往过于庞大臃肿,绝大部分细节信息对楼宇自控意义不大,反而影响拖累了行业 Web SCADAWeb 组态监控的趋势,所以我们采用以 HightopoHT for Web 产品轻量化 HTML5/WebGL 建模的方案,实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果。

本篇文章通过对智能建筑的建模,页面动画效果的实现,以及页面主要功能点进行阐述,帮助我们了解如何使用 HT 实现一个简单的智慧楼宇可视化监控,以及帮助我们了解智慧楼宇,楼宇自动化的优势。

预览地址:基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控 http://www.hightopo.com/demo/ht-smart-building/

界面简介及效果预览

界面通过 2d 图纸叠加在 3d 场景上来实现 2d 界面 与 3d 场景的融合,2d 界面通过自动布局的机制实现了手机端与电脑端的响应式呈现。

界面初始化效果

f7cc0f71b441887e16f7b82a4f897430.gif

界面初始化过程中的动画包括地面路径的实时渲染,楼层的展开,楼层的辉光扫描,楼层报警点动态水波,楼层监测数据面板的实时变化等等。

监控界面效果

40a1b864624fcf2a132adadb5cbf5061.gif

监控界面包括:

  1. 人员进入大厦的实时监控,面板中动态刷新人员进入大厦的头像以及当前大厦人数等实时信息。
  2. 大厦电梯运行情况实时监控,系统中展示电梯当前的运行位置以及是否在运行等信息。
  3. 大厦某个具体楼层监控数据的实时监控,通过柱状图的形式展示了当前楼层具体信息的大小。
  4. 大厦管道的实时监控,展示了当前智能建筑所有管道的运行情况。

智能建筑建模

该 3d 场景中所有的模型均为线段和六面体搭建,相比较通过 3d Max 建模然后通过 obj 导入来说场景中的三角面会少很多,更加的轻量化,例如场景中建筑的楼层,通过 ht.Shape 类绘制,该类中记录着楼层 points 点的信息以及 segmentsht.List 类型的线段数组信息,segments 代表着点的连接方式,用于告诉 ht.Shape 利用点的信息来绘制二次贝塞尔曲线或者三次贝塞尔曲线或者直线等信息,相关具体说明请参考 HT for Web 的[形状手册],以下为绘制单层的截图:

c54e0bea9cf96aeb2e89d5897523fe27.png

通过上图可以知道构建完一层模型之后其它几层模型均为相同的,只是 y 轴的数值不同,通过叠加几层之后便可形成一幢大楼的轮廓。如果用户需要搭建智慧园区,智慧楼宇等场景,完全可以使用这种基于 HTML5/WebGL 建模的方案,减少考虑使用 BIM 建模模型。场景中的管道以及背景地图路线都为点连线之后构成,只是通过修改线的颜色粗细或者进行贴图来修改线或者面的样式,场景中的电梯为一个颜色为黄色的简单六面体,电梯线也为一条线段而已,所以场景中的模型都是轻量化的建模,使 3d 场景运行渲染的更加流畅,提升用户体验。

场景关键动画代码分析

1. 地图路线动画代码分析

通过上述智能建筑建模的分析我们可以知道线路都是为点与点之间进行连线而生成,所以当我们绘制完地图的路径之后可以得到所有点的信息,假如直线 AB 为地图中的某一条线段,那么我们可以知道点 A 以及点 B 的点的坐标,之后我们可以计算 AB 线段上任意一点 C 的点的坐标,然后通过连接 A 点与 C 点来形成一条与 AB 线段位置方向相同但是大小比 AB 线段短的线,直到 AC 线段的长度等于 AB 线段长度之后再进行下一条路径动画的绘制,以下为关键伪代码展示:

// currentIndex 为当前路径绘制到的点的索引 

通过上述代码可以知道我们获取到了 currentPoints 以及 currentSegments 的信息了,之后便要计算在 fromPoint(A点) 与 toPoint(B点) 连线上点的坐标,即 C 点,以下为计算 C 点的关键伪代码:

// addLength 为每次增加的线段长度值,该程序中使用 500 即每次长度增加 500

以下为动画代码执行流程图

434ac8e768edd994426837fe263a10d8.png

以下为绘制一条路线动画的截图:

c7c49b663b29c53399ffe33151014383.gif

程序中通过向量的计算方式来不断获取 C 点的坐标,当然也可以用其它方式来计算 C 点的坐标。

2. 水波以及扫描动画代码分析

705bb7c4796e5ccc1a4978b3d5014238.gif

水波以及扫描动画都是通过 HT 提供的修改图标矩形框信息 api 来进行控制,通过调度的方式不断修改图标矩形框大小来产生水波以及扫描的动画效果,调度的具体用法可以参考 HT for Web 的[调度手册],以下为水波动画的关键伪代码:

// waterWaveNodes 所有水波节点

下图为水波在 2d 中的截图:

91bc3f98f045832d231b80330ad4101f.gif

3. 数字变化动画代码分析

从程序的截图中可以看到在 2d 面板以及 3d 场景中都有数字在动态的变化,这部分主要通过数据绑定动态来修改数值的大小,关于数据绑定可以参考 HT for Web 的[数据绑定手册],也是通过调度来不断修改数值的大小,程序中我封装了产生随机数的代码,用于每次产生随机数之后绑定到对应的节点上,以下为修改 2d 面板上数字的变化伪代码:

// numNode(1-7) 为 2d 面板中对应数字的节点

通过以上代码可以知道修改数值是通过修改节点的 attr 以及 style 对象的某个属性值来动态变化数值,当然在程序中 2d 面板可能还会隐藏,此时该调度任务就不需要执行,可以调用 removeScheduleTask 方法来移除此调度任务。

4. 柱状图高度动画代码分析

04a36ec95dbaa52b65d58e7f9826bc11.png

在 3d 场景中柱状体也是一个六面体,只是四周用了渐变的贴图,以及顶面用了一张纯色的贴图构造出来,每个六面体都有高度的信息,HT 中通过 node.getTall() 来获取当前六面体的高度值,根据上一节讲的数据绑定,我们可以在展示柱状图的时候循环获取所有柱状体节点的高度值大小假如命名为 tall,之后通过 node.a('tall', tall) 将该值存储到当前柱状图节点的 attr 对象上面,之后在柱状体初始化的时候可以不断修改高度值来动态改变高度,当高度值大于 node.a('tall') 则说明当前柱状体初始化的高度已经完成。以下为相关的伪代码:

charts

通过上面代码可以知道动画每一步的程序执行也是通过调度来完成的,与前文几个动画的实现方式类似。

5. 3d 镜头推进代码分析

3d 场景中视野的推进后退都是通过 HT api 提供的修改 eye 以及 center 的数值方法来实现,通过不断调用 setEye 以及 setCenter 方法来达到修改视角的目的,eye 类比人眼睛所处的位置,center 类比人眼睛聚焦的位置,以下为实现镜头推进关键的伪代码:

let 

通过以上代码可以知道通过修改 eye 与 center 分别对应的 xyz 轴的值与当前 e 与 c 分别对应的 xyz 轴的值之间的距离来达到视角的变化。

以下为该代码的一个应用截图:

40a1b864624fcf2a132adadb5cbf5061.gif

总结

物联网 通过各种信息传感设备,实时采集任何需要监控、连接、互动的物体或过程等各种需要的信息,与互联网结合形成的一个巨大网络。实现了物与物、物与人,所有的物品与网络的连接,方便识别、管理和控制。所以物联网带给我们的 智慧楼宇的可视化监控 需要监控的方面可能还有很多,该系统中针对人员出入,设备信息,管道信息等的监控实现了一个简单的智慧楼宇监控系统,物联网也将用户端延伸和扩展到了任何物品与物品之间,让我们更加了解搭建智慧园区,智慧校园等场景监控之后设备可视化,资产可视化带给我们的直观性。场景中的反光与景深等效果都是 HT 核心包提供的效果,所有的模型搭建与动画也都是通过 HT 核心包提供的 api 进行建模与动画驱动,所以在网页中展示会十分流畅,大大提高了用户的体验,并且在移动端表现也十分友好。

以下为移动端的程序运行截图:

34b621eb0780418aebceeb8ef69544cb.gif

HT 通过在行业上不断地摸索和技术上的钻研提升,总结出了许多工业互联网上各个行业的解决方案,不仅可以在 PC 端展示出可视化监控系统,在移动端同样可以轻量型地展示出来。以下是另外一个智慧楼宇的可视化监控系统的实现效果:

43a0f9fb94e87307e9dea2f932e78ea4.gif

同样的,2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集,在这里你能发现许多新奇的实例,也能发掘出不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同时,你也可以查看更多案例及效果:https://www.hightopo.com/demos/index.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/346581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

table 多行 宽度不一致_“table”除了桌子,你还知道一些别的意思吗?

就比如"nine-nine table"这可是小学一年级必须要掌握的知识实际上,nine-nine table是九九乘法表,乘法表可以用times table表示,书面用语是multiplication table。table除了桌子的意思外,还有一些别的意思和表达&#xf…

android uri db,Android ContentProvider封装数据库和文件读写总结

本文是我各处东拼西凑加上自己实现一个ContentProvider的使用总结,留做后用,主要介绍ContentProvider的集成方法。一、综述ContentProvider是Android四大组件之一,其核心功能是提供应用间的统一的数据访问方式,当然也可以用于应用…

ddos攻击工具_简单有效的ddos攻击防御方法

做过网站的站长大多有被ddos攻击的经历,不少人面对竞争对手的网站就是直接雇人ddos攻击网站,导致对方网站长期打不开,最后无奈关闭网站,初尧今天就告诉大家一个最简单也是最有效的防御方法。高防服务器/高防IP对于游戏&#xff0c…

android gpio驱动实例,安卓gpio操作示例

GPIO值在RK3288中的计算方法为:bank32pin,如:GPIO7A3: 732 0*8 3227GPIO0B5: 032 1*8 5131. 导出/sys/class/gpio# echo 44 > export2. 设置方向/sys/class/gpio/gpio44# echo out > direction3. 查看方向/sys/class/gpio/…

回调函数中有回调函数吗_嗨,那里有回调!

回调函数中有回调函数吗因为是我的书包,所以我喜欢JavaScript 。 实际上,我已经开始喜欢JavaScritp的面向异步回调的编程风格 。 因此,当我发现自己处于非JavaScript环境中时(例如Java) ,我往往会错过使用回…

python的django_django能用来做什么

Django是什么 Django是一个开放源代码的Web应用框架,由Python写成。采用了MT‘V的框架模式,即模型M,模板T和视图V。它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的,即是CMS(内容管理系统&am…

小程序确定取消弹窗_浅析微信小程序modal弹窗关闭默认会执行cancel问题

在我们使用小程序的modal组件时候,有的时候会碰到一个问题,那就是弹框的关闭,我们并没有选择取消或确定,而是点击弹框之外的部分,这个时候弹框会关闭,按理来说不会触发取消和确定的绑定事件,但是…

android n 发布时间,Android N 正式版将在9月发布

【环球科技综合报道】据外媒5月8日报道,谷歌预计将在9月份放出正式版Android N。三星、华为、LG、HTC和黑莓等品牌手机将获Android N升级。此前谷歌发出的路线图中的升级安排:3月: Android N 开发者预览版 1 (alpha)4月: Android N 开发者预览版 2 (beta…

ios realm 文件_关于ios:具有后台进程的Realm实例会丢失数据

我将Realm for Swift与仅内存配置一起使用。 由于在后台线程中更新数据库,因此每次使用时都会创建一个Realm实例。 在Realm文档中提到了此问题,这里还有另一个问题https://stackoverflow.com/a/45375608/613121。但是通过测试数据库,我注意到…

datatable如何生成级联数据_如何把Excel表数据批量生成条形码

条形码属于一维条码,是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息的图形标识符,条形码的种类比较多,比如常用的Code128码,Code39码,Code93码,EAN-13码&am…

android数字累加,Android自己设置View之数字自动增长

第一次写文,请多指教,有何问题及改进建议都可以告诉我-.-Idea来自金山词霸App的单词计数,下面先放图autoNumber.gif如上图,就是,下面开始进入自己设置View自己设置View步骤1. 自己设置属性2. 生成构造方法3. onMeasure…

spring条件注解有哪些_Spring4有条件

spring条件注解有哪些Spring 4引入了一个称为Conditional的新功能,该功能针对于生成bean的Spring组件,并注视这些bean的生成,实质上,它提供了一种条件生成bean的方法。 考虑一个简单的例子: 我有一个名为“ Customer…

settimeout怎么用_怎么实现一个3d翻书效果

本篇主要讨论以下两种翻书动画的实现:第一种是整页翻转的效果:这种整页翻转的效果主要是做rotateY的动画,并结合一些CSS的3d属性实现。第二种折线翻转的效果,如下图所示:主要是通过计算页面翻折过来的位置。这两种原理…

springboot怎么返回404_SpringBoot(二十)_404返回统一异常处理结果

1.修改application.properties文件# 自定义404#出现错误时, 直接抛出异常spring.mvc.throw-exception-if-no-handler-foundtrue#不要为我们工程中的资源文件建立映射spring.resources.add-mappingsfalse2.添加controller增强处理if (e instanceof NoHandlerFoundException) {re…

android 通知垃圾回收,Android中垃圾回收日志信息

原因GC_CONCURRENTfreed 178K, 41% free 3673K/6151K, external 0K/0K, paused 2ms2msGC_EXPLICITfreed 6K, 41% free 3667K/6151K, external 0K/0K, paused 29ms红颜色标出的部分就是垃圾回收触发的原因。在Android中有五种类型的垃圾回收触发原因。GC_CONCURRENT当堆内存增长…

5个令人震惊的统计数据证明日志不足

事实证明,我们都犯有记录不当行为的罪行。 不相信我们吗? 这些统计数据可能会改变您的想法 当人们提出带有明显答案的问题时,这非常令人不快,因此,我不会坐在这里问您和您的团队是否使用日志文件来监视预生产和生产环…

linearregression_机器学习-TensorFlow建模过程 Linear Regression线性拟合应用

TensorFlow是咱们机器学习领域非常常用的一个组件,它在数据处理,模型建立,模型验证等等关于机器学习方面的领域都有很好的表现,前面的一节我已经简单介绍了一下TensorFlow里面基础的数据结构即:Tensor和Dataset&#x…

yum配置文件 重启后还原_江湖救急 : CentOS7.5 /usr 目录误删, 恢复操作.

一.概述前两天在网上找了个脚本,看着没问题,直接复制粘贴了. 结果有特殊字符,直接换行.执行了 rm -rf /usr 目录. 然后就傻了,各种操作命令找不到, 无法登陆.......万分幸运的是,数据没丢,要是丢了.那我就要命了1.如果可以进入操作系统,并且可以正常操作的话. 依旧会存在隐患.…

html页面调用存储过程,用WebBrowser实现HTML界面的应用

HTML的界面有以下特点:图文混排,格式灵活,可以包含Flash、声音和视频等,实现图文声像的多媒体界面,而且易于建立和维护。另外,HTML的显示环境一般机器上都具备,通常不需要安装额外的软件。当然&…

凡事多找找自己的原因_布袋除尘器灰斗积粉过多、堵灰该咋办?别急,从这8个方面找原因...

灰斗布置在袋室的下部,它除了存放收集下来的粉尘以外,还作为下进气总管使用,当含尘气体进入袋室前先进入灰斗,由于灰斗内容积较大,使得气流速度降低,加之气流方向的改变,使得较粗的尘粒在这里得…