拓扑
文章平均质量分 91
图扑软件
图扑提供 Web 端的 UI/2D/3D、GIS、BIM 及 VR/AR 等可视化相关解决方案,自研核心引擎 HT for Web 提供图形化组态 SCADA 能力,支持构建 PaaS/SaaS 低代码数字孪生工业组态平台。普遍应用于智慧城市、智慧园区、智慧楼宇、智慧工厂、智能制造、智慧水务、智慧能源、智慧光伏、智慧风电、智慧电力、新基建、智慧运维、智慧政务、智慧交通、国防公安、智慧医疗、金融、科研等工业互联网各行业的数字孪生、数据可视化项目。hightopo.com
展开
-
数字孪生智慧服务器:信息安全监控平台
前言我国通信技术迭代和数字经济发展正迈入新阶段。1 月 12 日,国务院发布《“十四五”数字经济发展规划》,提出到 2025 年,数字经济迈向全面扩展期,数字经济核心产业增加值占 GDP 比重达到 10%。在数字经济发展按下加速键的同时,也不要忘系上“安全带”。为了堵住数据安全漏洞,建立健全数据安全治理运维体系至关重要。图扑软件利用自主研发的 HT for Web 产品,打造的服务器信息安全演示系统,实现了服务器数字化智能化的监测场景。在线监测国家级关键点监测 1 个,省级关键点 4 个,市区关键点原创 2022-02-22 15:25:05 · 656 阅读 · 0 评论 -
数字孪生港珠澳大桥:大湾区综合管理信息系统
前言一桥连三地,天堑变通途。港珠澳大桥的开通,为香港、澳门、珠三角地区的经济加速腾飞带来助力,拉动了三地经济社会融合发展。目前,经港珠澳大桥进出口收发货地已覆盖内地 31 个省(自治区、直辖市),市场涵盖全球 219 个国家及地区。2018 年 10 月至 2021 年 9 月,拱北海关所属港珠澳大桥海关共监管货物达 240.8 万吨,货值 3383.8 亿元人民币。港珠澳大桥具有投资规模大、管理协调复杂等特点,其信息化服务系统需要突破创新,才能够发挥出与大桥规模、标准、技术难度及其特殊性等方面原创 2022-02-09 17:28:01 · 304 阅读 · 0 评论 -
助力网络安全发展,安全态势攻防赛事可视化
前言互联网网络通讯的不断发展,网络安全就如同一扇门,为我们的日常网络活动起到拦截保护的作用。未知攻、焉知防,从网络诞生的那一刻开始,攻与防的战争就从未停息过,因此衍生出了大量网络信息安全管理技能大赛,以此提升社会网络安全责任意识,加强网络安全技术人才队伍的建设。我们也通过 Hightopo 的产品 HT 搭建了一款技术人员之间的技术竞赛可视化大屏。模拟一场网络空间里的竞技守卫战,让原本枯燥的信息竞赛通过 HT 3D 可视化的形式更加直观展现给参与竞赛的观众与比赛者。效果展示特效场景渲染使原创 2021-08-02 11:06:35 · 968 阅读 · 1 评论 -
搭建太阳系可视化系统,带你探索宇宙的未知奥秘
前言近年来随着引力波的发现、黑洞照片的拍摄、火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如《三体》、《流浪地球》、《星际穿越》等的传播普及,宇宙空间中那些原本遥不可及的事物离我们越来越近,人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度。站在更高的立足点上,作为人类这个物种中的一员,我们理所应当对我们生活的星球、所在的太阳系有一定的认识,对 8 大行星各自的运行轨道、质量、资源存储量甚至是地形有一定的了解。HT for Web 不止自主研发了强大的基于 HTML5 的 2D、3D原创 2020-08-19 23:02:10 · 622 阅读 · 0 评论 -
基于HTML5 Canvas的3D动态Chart图表
发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易做不成美丽的。。。看到有一个网站上在卖的图表,感觉挺好看的,就用 HT for Web 3D 实现了一个 3d 的图表~原创 2017-11-01 16:59:18 · 3481 阅读 · 0 评论 -
基于HTML5及WebGL开发的2D3D第一人称漫游进行碰撞检测
以前用原生JS写的场景+第一人称漫游模式+碰撞测试那代码量是真的庞大,这次我想要用HT for Web来写一个轻量的场景小游戏,而且3D 2D都能玩,才200行,真的是太轻松了~还有通过监控属性的变化来操作也是一个很方便的功能,我相信没有几个人能轻量,快速地开发出场景小游戏的,而且浏览器操作还很流畅!原创 2017-10-18 14:15:14 · 2807 阅读 · 0 评论 -
基于HTML5 Canvas的工控SCADA模拟飞机飞行
你想开飞机吗?我小时候也有一个梦想,就是当飞行员,今天我们就来体验一下开飞机,我猜你跟我一样会晕机!昨天看到一篇文章说是学习如何开飞机的,然后我就想,如果我也可以开飞机那就好玩了,每个人小时候都想做飞行员!中国飞行员太难当了,再说也不轻易让你开飞机!后来我就想如果能用 HT 开飞机那就是真的有趣了,哈哈,这个实现的效果还是很不错的,可以让你满足一下开飞机的虚荣心偷笑原创 2017-10-31 09:27:02 · 1757 阅读 · 0 评论 -
基于HTML5 Canvas的CSG构造实体几何书架
CSG 构造实体几何这个概念在工业水利水电施工上、游戏上已经有很多人使用了,最简单的实体表示叫作体元,通常是形状简单的物体,如立方体、圆柱体、棱柱、棱锥、球体、圆锥等。根据每个软件包的不同这些体元也有所不同,在一些软件包中可以使用弯曲的物体进行 CSG 处理,在另外一些软件包中则不支持这些功能。构造物体就是将体元根据集合论的布尔逻辑组合在一起,这些运算包括:并集、交集以及补集。我们一般可以用 CSG 来将简单的模型合在一起生成复杂的模型,这样在构造模型的时候会省很多力。HT 中的 ht.CSGNode 图原创 2017-11-07 14:42:35 · 1162 阅读 · 0 评论 -
基于HTML5和WebGL的3D网络拓扑结构图
unity3d做游戏和3d固然很好,但是对于绝大多数非游戏开发人员有点过重了,我在这里用了HT for Web写了不到400行的代码实现了3d分层,运动以及obj文件操作。而且是用的JavaScript来实现的,这样我们前端开发人员也能不用学习各种3d开发软件就能实现超级叼的效果!原创 2017-10-17 10:05:33 · 2163 阅读 · 0 评论 -
玩转 HTML5 下 WebGL 的 3D 模型交并补
建设性的立体几何具有许多实际用途,它用于需要简单几何对象的情况下,或者数学精度很重要的地方,几乎所有的工程 CAD 软件包都使用 CSG(可以用于表示刀具切削,以及零件必须配合在一起的特征)。CSG 是 Constructive Solid Geometry 建模技术的简称,通过裁剪 subtract、融合 union 和相交 intersect 的运算,组合出复杂模型效果,HT 封装了 ht.CSGNode 和 ht.CSGShape 等图元类型来支持 CSG 的组合功能,常用于墙面的门窗挖空凿洞的应用场原创 2017-11-08 22:22:35 · 4412 阅读 · 0 评论 -
根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局
利用分子间的引力斥力结合矩阵来完成的效果,真的是很炫,而且还是代码量非常少的情况下完成了由一个节点牵引带动的其他节点移动并根据矩阵的变化来重新分配两点间的连线像有“弹性”一样,真的好酷!这个例子在医疗界还有生物界应该是应用非常广泛的,但是如果好好利用,在工业方面也一定有不小的成就。工业还有利用 HeatMap 热图的例子,也是根据这个原理,感觉要创建一番大事业~原创 2017-11-12 20:13:27 · 1279 阅读 · 0 评论 -
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
如果,我能轻松写出一个盒子,这个盒子能打开,我还能在盒子上放一些我想要展现的东西,图片啊,json文件啊 ,图表啊,动态交互界面啊...这些有些单独做起来都觉得费劲,要把他们放到同一个界面的盒子上也并不容易,而且性能还要好,浏览器操作要流畅,100多行,很棒的效果!原创 2017-10-18 16:43:54 · 4405 阅读 · 0 评论 -
基于HTML5的WebGL经典3D虚拟机房漫游动画
3D动画宣传片将 3D 动画、特效镜头、企业视频、照片、未来前景等内容通过后期合成、配音、解说形成一部直观、生动、喜闻乐见的高品位的企业广告宣传片,让社会不同层面的人士对企业产生正面的、积极的、良好的印象,从而建立对企业的好感与信任,并信赖该企业的产品或服务。现在 3D 发展地如此迅速也要感谢人类对于“现实”的追求,所以学好用好 3D 是未来成功必不可少的一部分。本文例子的思路是进入一个机房参观,打开门的动作是再生动不过了, 再加上适当地转弯,基本上完全模拟了人在机房中参观的效果。还有一个好处就是,如果原创 2017-11-13 17:03:16 · 2133 阅读 · 1 评论 -
基于HTML5 Canvas WebGL制作分离摩托车
<img src="http://images2017.cnblogs.com/blog/591709/201711/591709-20171105121544857-1492702055.png" class="desc_img">工业方面制作图表,制作模型方面运用到 3d 模型是非常多的,在一个大的环境中,构建无数个相同的或者不同的模型,构建起来对于程序员来说也是一件相当头疼的事情,我们利用 HT 帮大家解决了很大的难题,以下例子可在官网上查找到原创 2017-11-05 15:34:34 · 627 阅读 · 0 评论 -
基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型
前言随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用。在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问题:海量视频分散、孤立、视角不完整、位置不明确等问题,始终围绕着使用者。因此,如何更直观、更明确的管理摄像机和掌控视频动态,已成为提升视频应用价值的重要话题。所以当前项目正是从解决此现状问题的角度...原创 2018-08-13 08:13:09 · 1231 阅读 · 0 评论 -
基于 HTML5 网络拓扑图的快速开发之入门篇(一)
计算机网络的拓扑结构是引用拓扑学中研究与大小,形状无关的点、线关系的方法。把网络中的计算机和通信设备抽象为一个点,把传输介质抽象为一条线,由点和线组成的几何图形就是计算机网络的拓扑结构。网络的拓扑结构反映出网中各实体的结构关系,是建设计算机网络的第一步,是实现各种网络协议的基础,它对网络的性能,系统的可靠性与通信费用都有重大影响。拓扑在计算机网络中即是指连接各结点的形式与方法;在网络中的工作站和服...原创 2019-03-02 08:30:16 · 2333 阅读 · 0 评论 -
基于 HTML5 网络拓扑图的快速开发之入门篇(二)
上一篇我们绘制了一个 graphView 场景,在场景之上通过 graphView.dm() 获取数据容器,并通过 graphView.dm().add() 函数添加了两个 Node 节点,并通过 setPosition 设置节点位置以及 setImage 给节点添加图片;接着在两个节点之间通过 ht.Edge(sourceNode, targetNode) 添加了两条连线(实际上还可以更多),并...原创 2019-03-03 08:30:09 · 1452 阅读 · 0 评论 -
基于HTML5和WebGL的碰撞测试
可能你会好奇这个是怎么俯视图是怎么放上去的?如果3d中的图元变化,这个俯视图中的图元也会跟着变化么?如何把右上角的form表单和左下角的视图又是怎么放的?如何只移动3d二把这两个固定在这边?或者你可能还有别的问题,在这里我会尽量清楚地解答,实在找不到答案可以去我们的官网HT for Web查找你的问题。原创 2017-10-19 14:18:18 · 2872 阅读 · 0 评论 -
基于HTML5 WebGL实现 json工控风机叶轮旋转
<img src="http://images2017.cnblogs.com/blog/591709/201710/591709-20171026231621320-64141724.gif" class="desc_img">如果,我能轻松写出一个盒子,这个盒子能打开,我还能在盒子上放一些我想要展现的东西,图片啊,json文件啊 ,图表啊,动态交互界面啊...这些有些单独做起来都觉得费劲,要把他们放到同一个界面的盒子上也并不容易,而且性能还要好,浏览器操作要流畅,100多行,很棒的效果!原创 2017-10-27 09:11:33 · 1393 阅读 · 0 评论 -
基于HTML5 Canvas 实现弹出框
用户鼠标移入时,有弹出框出现,这样的需求很常见。这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为Canvas使用的是另外一套机制,无论在Canvas上绘制多少图形,Canvas都是一个整体。而图形本身实际都是Canvas的一部分,不可单独获取,所以也就无法直接给某个图形增加JavaScript事件。然而,在HT for Web中,这种需求很容易实现。原创 2017-06-05 10:06:16 · 1891 阅读 · 1 评论 -
HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点,该文介绍的结合的原理,其实还可推广到与ArcGIS、百度地图以及GoogleMap等众多GIS地图引擎融合的解决方案。原创 2016-08-08 01:57:57 · 2595 阅读 · 3 评论 -
HTML5 网络拓扑图 Canvas 性能优化
HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font)、文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大的影响,操作起来没那么顺畅,体验将会极其差,这不是我们想要的结果,再进一步和图片的绘制进行比较比较,你会发现,绘制图片和绘制文本在性能上不是一个等级的,在性能上绘制图片会好太多。原创 2016-07-25 00:44:35 · 4851 阅读 · 0 评论 -
基于 HTML5 的 WebGL 技术构建 3D 场景(一)
HT for Web 提供了多种基础类型供用户建模使用,不同于传统的 3D 建模方式,HT 的建模核心都是基于 API 的接口方式,通过 HT 预定义的图元类型和参数接口,进行设置达到三维模型的构建。接下来我们就来谈谈预定义的 3D 模型及参数设置。原创 2016-07-13 00:51:49 · 12289 阅读 · 0 评论 -
HTML5 网络拓扑图性能优化
HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font)、文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大的影响,操作起来没那么顺畅,体验将会极其差,这不是我们想要的结果,再进一步和图片的绘制进行比较比较,你会发现,绘制图片和绘制文本在性能上不是一个等级的,在性能上绘制图片会好太多。原创 2016-06-27 00:21:12 · 1893 阅读 · 0 评论 -
HTML5拓扑图形组件设计之道(一)
HT for Web (http://www.hightopo.com/guide/readme.html)提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表达的我们希望提供:Everything you need to create cutting-edge 2D and 3D visualization. 这个愿景从功能上是个相当长的战线,从设计架构上也是极具挑战性的,其实HT团队是非常保守的,我们从不贪多图大,只做我们感觉自己能得更好,能给用户综合体验更佳的原创 2016-02-26 01:55:18 · 2055 阅读 · 1 评论 -
矢量化的HTML5拓扑图形组件设计
提起矢量一般都会想到SVG,但这是个坑人的玩意儿,这么多年就没见一个完善的实现者,浏览器实现千差万别,高级属性根本不能玩,Adobe SVG Viewer好多年前就停止更新,Flex支持SVG导入也仅供基本属性玩玩,当然SVG也不是一无是处highcharts还是运用得很不错,Java领域也有维护多年的 Batik 项目可用。但,我还是不喜欢DOM上太重都是元素,不喜欢庞大包罗万象搞得没有一家能完美实现的标准,另外用XML、Flex的MXML或Sliverlgiht/WPF的XAML来描述图形实在是笨重不灵原创 2016-02-19 22:42:21 · 4234 阅读 · 2 评论 -
基于HTML5的3D网络拓扑树呈现
在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观,一眼望去可以把整个树状结构数据看个大概,但是在弹力布局的作用下,其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了,那么这个3D树具体长成啥样呢,我们来一起目睹下~原创 2016-02-18 22:12:55 · 2746 阅读 · 2 评论 -
基于HTML5的WebGL结合Box2DJS物理引擎应用
Box2D最早是Erin Catto在GDC大会上的一个展示例子,后来不断完善成C++的开源物理引擎库,这些年了衍生出Java、ActionScript以及JS等版本,被广泛应用在游戏领域。说其丰富的确很丰富,说乱也够乱的,找个Box2D的JS版就有N多选择,而且不同版本API还有差异,可参考这里的对比 http://stackoverflow.com/questions/7628078/which-box2d-javascript-library-should-i-use原创 2015-12-08 00:15:02 · 1729 阅读 · 1 评论 -
数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization.这口号是当年心目中的产品方向,接着就朝这个方向慢慢打磨,如今 HT 算是达到了这样的效果,谈不上用尽洪荒之力,但我们对产品结果很满意,特别是 HT 的用户手册,将例子和文档无缝融合一体,小小 10 来兆开发包居然包含了四十五份手册,数百个活生生的 HTML5 例子,还没体验过的同学可以点击 http://www.hightopo.com/guide/readme原创 2016-08-10 01:54:09 · 15846 阅读 · 4 评论 -
电信网络拓扑图自动布局
在电信网络拓扑图中,很经常需要用到自动布局的功能,在大数据的层级关系中,通过手工一个一个摆放位置是不太现实的,工作量是相当大的,那么就有了自动布局这个概念,来解放布局的双手,让网络拓扑图能够布局出一个优美的图案,当然在一些复杂的布局中,光有自动布局还是不行的,还是需要手工地做些相应的调整,才能让界面图案更加的完美。今天我们来聊聊电信网络拓扑图 HT for Web 在自动布局上面的相关内容。原创 2016-08-22 01:45:20 · 6827 阅读 · 0 评论 -
基于HTML5快速搭建TP-LINK电信拓扑设备面板
以生活中的服务器和路由器为模型,搭建出设备面板,并增加设备上指示灯闪烁和两个设备之间连线上图元的流动效果。今天我们就在基于HTML5的技术上完成设备面板的搭建。http://www.hightopo.com/demo/blog_tplink_20170511/index.html原创 2017-05-18 15:46:32 · 1901 阅读 · 1 评论 -
基于HTML5 Canvas实现用户交互
很多人都有这样的疑问,基于HTML5 Canvas实现的元素怎么和用户进行交互?在这里我们用HT for Web(http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html)给大家示例。原创 2017-05-23 15:39:10 · 1647 阅读 · 1 评论 -
基于HTML5 Canvas 实现矢量工控风机叶轮旋转
绘制自定义图形需要制定矢量类型为shape,并通过points的Array数组指定每个点信息, points以[x1, y1, x2, y2, x3, y3, ...]的方式存储点坐标。曲线的多边形可通过segments的Array数组来描述, segment以[1, 2, 1, 3 ...]的方式描述每个线段:1: moveTo,占用1个点信息,代表一个新路径的起点2: lineTo,占用1个点信息,代表从上次最后点连接到该点3: quadraticCurveTo,占用2个点信息,第一个点作为曲线控原创 2016-10-18 01:09:22 · 1854 阅读 · 0 评论 -
数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇
《数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇》里提到 HT 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果,例如 3D 电信机房监控例子整个都是通过 HT 提供的 API 构建而成。不过这个例子中的模型都比较规矩,也就消防栓由一个球 + 圆通构成,这并不意味着 API 只能做简单的模型,《HT for Web 建模手册》中介绍的 HT 建模插件可以让有想象力的同学做出各种不可思议的效果。http://www.hightopo.co原创 2016-09-30 09:44:51 · 5222 阅读 · 1 评论 -
快速开发基于 HTML5 网络拓扑图应用
以上创建网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑图的几个基本步骤,其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑图应用,如果需要数据存储可参考《HT for Web 序列化手册》,用户可将整个拓扑图序列化成字符串的 JSON 格式内容,这样你可以保存到后台数据库,或者后台服务器文件皆可,HT 只是前端的图形组件,不介入后台通讯和存储,反正控制权在你,不收任何约束,可以随心所欲的设计你的网络拓扑图整体系统架构。原创 2016-09-27 12:27:45 · 7302 阅读 · 1 评论 -
电信网络拓扑图自动布局之曲线布局
在前面《电信网络拓扑图自动布局之总线》一文中,我们重点介绍了自定义 EdgeType 的使用,概括了实现总线效果的设计思路,那么今天话题是基于 HT for Web 的曲线布局(ShapeLayout)。ShapeLayout 从字面上的意思理解,就是根据曲线路径来布局节点,省去手动布局节点的繁琐操作,还能保证平滑整齐地排布,这是手动调整很难做到的。ShapeLayout 结合前面提到的总线,是最普遍的应用。原创 2016-09-19 01:00:54 · 1970 阅读 · 0 评论 -
数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用、水务燃气 SCADA 监控应用及智能楼宇等应用场景。HT for Web 的 3D 是完全基于 WebGL 技术实现的渲染引擎,但开发者几乎不需要了解 3D 图形数学或 Shader 渲染的底层技术,只需要掌握基本的 3D 坐标系和相机 Camera 的概念,剩下需要掌握的也就是基原创 2016-08-26 03:01:15 · 12919 阅读 · 2 评论 -
电信网络拓扑图自动布局之总线
在前面《电信网络拓扑图自动布局》一文中,我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识,但是都没有深入地描述各种自动布局的用法,我们今天在这边就重点介绍总线的具体实现方案。原创 2016-09-05 02:52:03 · 2197 阅读 · 0 评论 -
WebGL实现HTML5的贪吃蛇3D游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型,多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围,突然想挑战下自己实现个100行JS的3D小游戏,折腾了一番最终搞了个3D贪吃蛇游戏,算了算JS代码还只有90来行,终于满足了自己的小小心愿写完这篇可以满意去睡觉了。原创 2015-11-25 09:59:56 · 1702 阅读 · 1 评论