告别传统工业互联网,提高数字管控思维:三维组态分布式能源站

本文主要是介绍告别传统工业互联网,提高数字管控思维:三维组态分布式能源站,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

在网络迅速发展的今天,人们的交流已经不再仅限与面对面,一个视频通话就能拉近彼此之间的距离,而在工业管控上却不仅仅局限于实时视频流的监控,HTML 本身拥有强大的 web 组件可供我们去实施一些好玩的例子,甚至加上一些简单有趣的动画和实时数据的对接,效果上可不止提高了一个水平。加上现如今已经启动许久的 工业4.0 衍生出的新一代 工业互联网 和不久才面世于众的5G新时代,数据可视化与网络带宽发展的碰撞,激发出了一代 3D 数据可视化监管的发展。而 Hightopo(以下简称 HT )的 HT for Web 产品上的 web 组态提供了丰富的 2D 组态3D 组态 效果,可以根据需求快速实现一套完整的数据可视化系统。本文将通过一个 HT 的 3D 组态 实现的一个可视化分布式能源站系统带你走进丰富的组态的大门。

界面简介及效果预览

场景搭建上我们呈现了以热、电、冷联供为主要形式的多联产系统的分布式能源站系统,根据管道流动传递的流程步骤下,有效地实现了能源的梯级利用的展示效果:

在这里插入图片描述

代码实现

在能源站的建设中,分布式能源站是指小规模化、利用热、电、冷联供为主要形式分布于负荷附近的清洁环保发电设施,是一种相对可靠又高效的发电形式。

3D 场景实现上通过创建 ht.graph3d.Graph3dView 来呈现 3D 的内容,3D 视图组件进行 deserialize() 反序列化对应的 json 呈现出 3D 场景内容,然后将 3D 组件再加入到 body下的方式实现场景的加载渲染的效果。还可以自定义修改一些交互或者视角上的限制,如修改左右键的交互方式或者设置场景的最大仰角,都能使用户在交互体验上更为流畅。

// 创建三维拓扑视图
this.g3d = new ht.graph3d.Graph3dView();
this.g3dDm = this.g3d.dm();
// 将 3D 组件加入到 body 下
this.g3d.addToDOM();
// 修改左右键交互方式
let mapInteractor = new ht.graph3d.MapInteractor(this.g3d);
this.g3d.setInteractors([mapInteractor]);
// 修改最大仰角为 PI / 2
mapInteractor.maxPhi = Math.PI / 2;

为了能在悬浮建筑模型的时候,视觉上有交互体验,这里设置了模型的高亮模式。
在这里插入图片描述

// 设置鼠标悬浮高亮模式
this.g3d.setHighlightMode('mouseover');
// 设置高亮颜色
ht.Style['highlight.color'] = '#FEB64D';

场景渲染加载出来后,我们就能对于分布式能源站的工业流程可以通过管道的动画来展示。HT 提供的 ht.Shape 是极其强大的图元类型,其在 GraphView 和 Graph3dView 组件上都能展示出各种二维和三维的形状效果, 其扩展子类 ht.PolyLine 可实现三维空间管道的功能,我们可以通过 ht.PolyLine 绘制出流程所经的路径,通过 ht.Default.startAnim() 动画函数去执行调用变化管道上的 uv 贴图的偏移值,就可以达到流动的效果。

在这里插入图片描述
实现的代码如下:

animflow() {// 动画执行函数ht.Default.startAnim({duration: 2000,easing: (t) => { return  t },action: (v, t) => {// 通过数据模型获取唯一标识 tag 得到管道节点设置 uv 偏移流动动画this.g3dDm.getDataByTag('flow1').setStyle('top.uv.offset', [ v, 0 ]); this.g3dDm.getDataByTag('flow2').setStyle('top.uv.offset', [ v, 0.5 ]);this,g3dDm.getDataByTag('flow3').setStyle('top.uv.offset', [ -v, 0.5 ]);...            },finishFunc:  () => {animflow();}});
}

而场景中呈现出来的数据,我们可以通过对接一些主流的接口,例如 ajaxaxios或者是 WebSocket,根据自己对接交互的需求,可以判断采用轮询调用接口或者是对接双向进行数据传输,起到实时刷新数据的需求,而数据的载体可以对接到 HT 的 3D公告板 billboard 上进行展示:

在这里插入图片描述
billboard 同样是基于 ht.Shape 的子类,对于 Shape 不管是在 2D 组态或者是 3D 组态上呈现,都可以通过一些定义的属性 styleMap 来设定一些本身自带的属性值,当然用户也可以自己通过在 attrObject 里设定一些自定义属性。而分布式能源站中,我们通过对 billboard 设定了一些属性值来控制公告板的属性信息:

let billboard = new ht.Node();
billboard.s({// 设定 shpe3d 的类型为公告板 billboard"shape3d": "billboard",// 设置公告板的图片 image"shape3d.image": "symbols/htdesign/box/panel.json",// 设置公告板始终自动旋转面对屏幕"shape3d.autorotate": true,// 设置公告板开启透明"shape3d.transparent": true,// 设置公告板不可移动"3d.movable": false,// 设置公告板始终置顶"shape3d.alwaysOnTop": true,// 设置公告板不可选中"3d.selectable": false,// 公告板开启缓存"shape3d.image.cache": true
});

如果贴图是矢量,对于开启了缓存的公告板,性能上会大大提高。对比一下这个 例子,你会发现缓存机制上性能的差异性。由此看出,缓存机制对于整体场景的流畅度是至关重要的,对于一些不必要实时刷新的面板信息,我们可以采取缓存的方式,并且在下一次更新的时候调用 Graph3dView.invalidateShape3dCachedImage(node)来手动刷新这个节点,从而大大提高了场景的性能:

g3d.invalidateShape3dCachedImage(billboard);

总结

历经了2018的工业互联网元年和2019的 5G 元年,不止是分布式能源站可视化系统的呈现,工业互联网在管控方面将迎来了新时代。为了给精彩的 HTML web 组态添加上绚丽的颜色,HT 在 2D 组态3D 组态 上不断地完善,可以通过 2/3D 融合的场景与图纸搭建出一个个好玩的可视化系统。而作为在 3D 组态上可以呈现出多样化效果下搭建的可视化系统场景,传统上一些数据可视化的工艺流程同样能通过 2D 组态来实现:换热站远程监控系统

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

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

这篇关于告别传统工业互联网,提高数字管控思维:三维组态分布式能源站的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120622

相关文章

redis+lua实现分布式限流的示例

《redis+lua实现分布式限流的示例》本文主要介绍了redis+lua实现分布式限流的示例,可以实现复杂的限流逻辑,如滑动窗口限流,并且避免了多步操作导致的并发问题,具有一定的参考价值,感兴趣的可... 目录为什么使用Redis+Lua实现分布式限流使用ZSET也可以实现限流,为什么选择lua的方式实现

使用PyTorch实现手写数字识别功能

《使用PyTorch实现手写数字识别功能》在人工智能的世界里,计算机视觉是最具魅力的领域之一,通过PyTorch这一强大的深度学习框架,我们将在经典的MNIST数据集上,见证一个神经网络从零开始学会识... 目录当计算机学会“看”数字搭建开发环境MNIST数据集解析1. 认识手写数字数据库2. 数据预处理的

java字符串数字补齐位数详解

《java字符串数字补齐位数详解》:本文主要介绍java字符串数字补齐位数,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java字符串数字补齐位数一、使用String.format()方法二、Apache Commons Lang库方法三、Java 11+的St

Seata之分布式事务问题及解决方案

《Seata之分布式事务问题及解决方案》:本文主要介绍Seata之分布式事务问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Seata–分布式事务解决方案简介同类产品对比环境搭建1.微服务2.SQL3.seata-server4.微服务配置事务模式1

Java数字转换工具类NumberUtil的使用

《Java数字转换工具类NumberUtil的使用》NumberUtil是一个功能强大的Java工具类,用于处理数字的各种操作,包括数值运算、格式化、随机数生成和数值判断,下面就来介绍一下Number... 目录一、NumberUtil类概述二、主要功能介绍1. 数值运算2. 格式化3. 数值判断4. 随机

java如何分布式锁实现和选型

《java如何分布式锁实现和选型》文章介绍了分布式锁的重要性以及在分布式系统中常见的问题和需求,它详细阐述了如何使用分布式锁来确保数据的一致性和系统的高可用性,文章还提供了基于数据库、Redis和Zo... 目录引言:分布式锁的重要性与分布式系统中的常见问题和需求分布式锁的重要性分布式系统中常见的问题和需求

Golang使用etcd构建分布式锁的示例分享

《Golang使用etcd构建分布式锁的示例分享》在本教程中,我们将学习如何使用Go和etcd构建分布式锁系统,分布式锁系统对于管理对分布式系统中共享资源的并发访问至关重要,它有助于维护一致性,防止竞... 目录引言环境准备新建Go项目实现加锁和解锁功能测试分布式锁重构实现失败重试总结引言我们将使用Go作

Redis分布式锁使用及说明

《Redis分布式锁使用及说明》本文总结了Redis和Zookeeper在高可用性和高一致性场景下的应用,并详细介绍了Redis的分布式锁实现方式,包括使用Lua脚本和续期机制,最后,提到了RedLo... 目录Redis分布式锁加锁方式怎么会解错锁?举个小案例吧解锁方式续期总结Redis分布式锁如果追求

如何提高Redis服务器的最大打开文件数限制

《如何提高Redis服务器的最大打开文件数限制》文章讨论了如何提高Redis服务器的最大打开文件数限制,以支持高并发服务,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录如何提高Redis服务器的最大打开文件数限制问题诊断解决步骤1. 修改系统级别的限制2. 为Redis进程特别设置限制

从去中心化到智能化:Web3如何与AI共同塑造数字生态

在数字时代的演进中,Web3和人工智能(AI)正成为塑造未来互联网的两大核心力量。Web3的去中心化理念与AI的智能化技术,正相互交织,共同推动数字生态的变革。本文将探讨Web3与AI的融合如何改变数字世界,并展望这一新兴组合如何重塑我们的在线体验。 Web3的去中心化愿景 Web3代表了互联网的第三代发展,它基于去中心化的区块链技术,旨在创建一个开放、透明且用户主导的数字生态。不同于传统