今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D 功能最丰富的组件,其相关类库都在 ht.graph 包下。GraphView 具有基本图形的呈现和编辑功能,拓扑节点连线及自动布局功能,电力和电信等行业预定义对象,具有动画渲染等特效,因此其应用面很广泛,可作为监控领域的绘图工具和人机界面,可作为一般性的图形化编辑工具,可扩展成工作流和组织图等企业应用。简单说来
本文介绍了HT for Web在软件研发中的拓扑图组件在研发管理、团队协作、自动化部署、监控告警等方面的应用,并提供了丰富的案例和解决方案。
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打磨,如今 HT 算是达到了这样的效果,谈不上用尽洪荒之力,但我们对产品结果很满意,特别是 HT 的用户手册,将例子和文档无缝融合一体,小小 10 来兆开发包居然包含了四十五份手册,数百个活生生的 HTML5 例子,还没体验过的同学可以点击 http://www.hightopo.com/guide/readme
前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个,这篇文章记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现,希望能够帮到一些朋友。当然,如果有什么意见的可以直接跟我说,大家一起交流才会进步。 效果图 image.png http://www.hightopo.com/demo/subway/index.html 地图稍微内容有点多
本文主要介绍了如何使用 HTML5 的 SVG 元素和 JavaScript 来实现网络拓扑图的动态交互效果。首先介绍了基于 SVG 的图形元素,然后讲述了如何利用 JavaScript 来控制 SVG 元素的样式、位置、大小、颜色等属性,最后通过一个具体的案例演示了如何使用这些技术实现网络拓扑图的动态交互效果。
采用 HT 开发网络拓扑图非常容易,例如《入门手册》的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/example
我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)》主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配合上数据库的
本文介绍了实时数据通讯系列,包括基于 WebSocket 的实时数据通讯、基于 HTTP 的实时数据通讯以及实时数据通讯在 Web 3D 中的应用。
立冬时节知多少 今天立冬,周末两天在家继续研究了下Skywalking,感觉这个组件还是很不错的,无论是设计思想还是架构设计,都能从中受到启发和帮助,建议感兴趣的小伙伴可以看看,当然,如果不感兴趣还是不要深入研究了,比较费头发😂。 文中的架构是: ASP.NETCore+SpringBoot+ES+Mysql+Redis+Rabbit 本文就把研究的成功图展示一下吧,就好像是一个目录一样,先看看是不是感兴趣,详细的安装过程、原理内容和看板参数分析以后慢慢铺开来说。 官方地址:https://github
前言 SVG并非仅仅是一种图像格式, 由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台性和可扩展性,从而在图形可重用性上迈出了一大步。如SVG可以内嵌于其他的XML文档中,而SVG文档中也可以嵌入其他的XML内容,各个不同的SVG图形可以方便地组合, 构成新的SVG图形。这个 Demo 运用的技术基于 HTML5 的技术适应了只能电网调度、配电网运行监控与配电网运维管控,通过移动终端实现 Web SCADA 账上运维的时代需求。由于传统电力行业 CS 桌面监控系统一直到新一代 Web 和移动终
Tcharts即Tvision-T1,是基于Canvas的自研可视化组件。 致力于提供高性能,易定制的企业级可视化解决方案。目前支持“统计图表”,“地图”和“图可视化“组件。本文主要介绍“图可视化”组件部分。目前已应用到“性能观测APM“,“腾讯云CDN“, “腾讯云安全中心“等多个产品中,提供差异化的图可视化解决方案。
HT For Web 的HTML5拓扑图组件graphView背景设置有多种途径可选择: divBackground:通过css设置graphView对应的div背景 Painter:通过graphV
作者:常敏,腾讯云监控高级工程师 前言 Tcharts 来自于腾讯云监控产品中心,基于 Canvas (HTML5 的新标签)自研的可视化组件,是类似于 Apache Echarts(一个基于 JavaScript 的开源可视化图表库)和 AntV (蚂蚁金服全新一代数据可视化解决方案)可视化图表库。Tcharts 致力于提供高性能,易定制的企业级可视化解决方案。目前支持“统计图表”、“地图”和“图可视化”等组件。本文主要介绍“图可视化”组件部分。图可视化组件目前已应用到全链路监控“腾讯云应用性能观测
HT For Web 的HTML5拓扑图组件graphView背景设置有多种途径可选择: divBackground:通过css设置graphView对应的div背景 Painter:通过graphView.addBottomPainter(function(g, rect){…})来绘制背景 Layer:通过设置graphView.setLayer(['…', '…', '…', …])来将graphView拆分为多个图层,并为各个图层命名,再让不同种类的node通过node.setL
为了方便在单机电脑上快速安装体验Rainbond,当前版本支持通过一条命令安装和体验,现在支持的平台包括:
weavescope是一款Docker 和 Kubernetes 的可视化和监控工具,WeaveScope 监控展示了主机、容器、进程的众多常用数据和状态,并提供 WebUI 帮助我们进行基本的管理操作,并且在整个过程中不需要进行额外的配置,易于上手使用。同时,WeaveScope 提供插件和插件机制方便我们进行扩展,可以说,WeaveScope 是我们初期搭建容器监控管理系统的极佳选择。
前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能
腾讯云高级工程师。负责监控和可观测系统的开发。Tvision Tcharts 自研图表项目负责人。在华为、腾讯“全新”设计过多个大型项目的核心架构。技术理念:借鉴,融合,到自主创新。
计算机网络的拓扑结构是引用拓扑学中研究与大小,形状无关的点、线关系的方法。把网络中的计算机和通信设备抽象为一个点,把传输介质抽象为一条线,由点和线组成的几何图形就是计算机网络的拓扑结构。网络的拓扑结构反映出网中各实体的结构关系,是建设计算机网络的第一步,是实现各种网络协议的基础,它对网络的性能,系统的可靠性与通信费用都有重大影响。拓扑在计算机网络中即是指连接各结点的形式与方法;在网络中的工作站和服务器等网络单元抽象为 “点”;网络中的电缆等抽象为 “线”。影响网络性能、系统可靠性、通信费用。 拓扑还分为:总线拓扑、星型拓扑、环形拓扑树形拓扑以及网状拓扑。这篇文章写的案例就是总线拓扑中的一个分支,我们一步一步来搭建这个拓扑图形。
随着微服务架构的流行,客户端发起的一次请求可能需要涉及到多个或 N 个服务,致使我们对服务之间的监控和排查变得更加复杂。
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图、ECharts和HT for Web三者结合起来
本文介绍了如何利用 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯。首先介绍了 WebSocket 的概念和原理,然后阐述了利用 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯的具体步骤。最后通过一个示例展示了如何在前端实现该功能。
今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 Demo。接下来我们就看看这个实时数据通讯是一个什么样的套路。 我们先来聊聊这次 Demo 的思路吧,首先我要有一个 3D 的拓扑图组件,在上面创建几个节点,然后通过拉力布局(ForceLayout)将这些节点自动布局,但是有一定,需要在不同的网页窗口下,对应节点的位置是一样的,简单地说就是不同网页窗口所呈现的节点
机柜 U 位管理是一项突破性创新技术--继承了 RFID 标签(电子标签)的优点的同时,完全解决了 RFID 技术(非接触式的自动识别技术)在机房 U 位资产监控场应用景中的四大缺陷,采用工业互联网云平台监控机房 U 位的方法,具有高可靠性、高准确性、精准定位、免维护的特点,满足了 U 位级实时监控、智能运维闭环管理的需求。设备上架、下架与迁移,自动变更和实时记录,(用户评价):部署工业互联网云平台监控机房 U 位后节省了 99% 的登记变更记录的时间,而且实现了变更后数据 100% 的准确,在这之前是难以想象的,真正实现运维管理最后的工作。
DeskTop展示当前注册的各个网关组,点击一个网关组将选中该网关组并跳转至首页。
Apache Skywalking(Incubator) 专门为微服务架构和云原生架构系统而设计并且支持分布式链路追踪的APM系统。Apache Skywalking(Incubator)通过加载探针的方式收集应用调用链路信息,并对采集的调用链路信息进行分析,生成应用间关系和服务间关系以及服务指标。Apache Skywalking (Incubating)目前支持多种语言,其中包括Java,.Net Core,Node.js和Go语言。
云原生 API 网关是腾讯云基于开源网关推出的一款高性能高可用的云原生 API 网关产品,作为云上流量入口,集成请求分发、API 管理、流量监控、访问限制等功能,是微服务架构和容器架构中的重要组件。
前言 U 是一种表示服务器外部尺寸的单位,是 unit 的缩略语,详细的尺寸由作为业界团体的美国电子工业协会(EIA)所决定。之所以要规定服务器的尺寸,是为了使服务器保持适当的尺寸以便放在铁质或铝质的机架上。机架上有固定服务器的螺孔,以便它能与服务器的螺孔对上号,再用螺丝加以固定好,以方便安装每一部服务器所需要的空间。规定的尺寸是服务器的宽(48.26cm=19 英寸)与高(4.445cm 的倍数)。由于宽为19英寸,所以有时也将满足这一规定的机架称为“19 英寸机架”。厚度以 4.445cm 为基本单位。
大家好,很高兴你对Zabbix感兴趣。Zabbix是企业级开源监控工具,已经连续两年被誉为Gartner客户之选。本演示视频是为了帮助大家更好地了解Zabbix监控解决方案,让你对Zabbix核心特性和功能有整体认识。我们将向您介绍Zabbix使用界面以及监控的基本概念。希望你会有所收获。欢迎使用Zabbix来监控!
拓扑图用来描述平台各服务之间的依赖关系,也可以理解为平台服务的整体结构。拓扑图上的每个节点表示服务组件或服务的依赖项,且节点上标注有服务的运行状态和请求信息,点击后可获取详细的观测图表。
《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用、水务燃气 SCADA 监控应用及智能楼宇等应用场景。
前几周UC小伙伴跟我说,“老王,给你看两张图,看看你的心愿实现了”,发来看了之后,还是蛮激动的呢(文后放出)。
HT For Web 提供完整的基于 HTML5 图形界面组件库。您可以轻松构建现代化的,跨桌面和移动终端的企业应用,无需担忧跨平台兼容性,及触屏手势交互等棘手问题。也可用于快速创建和部署,高度可定制化,并具有强大交互功能的拓扑图形及表盘图表等应用。HT for Web 非常适用于实时监控系统的界面呈现,广泛应用于电信网络拓扑和设备管理,以及电力、燃气等工业自动化 ( HMI / SCADA ) 领域。HT for Web 还有提供了一套一套强大的基于 WebGL 技术的 3D 图形引擎,独特的 WebGL 层抽象,将 Model – View – Presenter ( MVP ) 的设计模型延伸应用到了 3D 图形领域。使用 HT for Web 您可更关注于业务逻辑功能,不必将精力投入复杂 3D 渲染和数学等非业务核心的技术细节。( http://www.hightopo.com )
本文主要介绍了基于 HTML5 WebGL 技术的图扑可视化工具 HT for Web 在大型光伏电站的应用实例,通过实时渲染、数据驱动、动态交互等特性,实现了光伏电站的数字化、网络化和智能化。同时,通过一个具体的实例,展示了 HT for Web 在大型光伏电站应用中的快速开发、高度定制、跨平台等特性。
随着新一轮工业革命兴起,应对气候变化日益成为全球共识,能源技术正在成为引领能源产业变革、实现创新驱动发展的源动力。从全球到中国,以风能、光伏发电为代表的新能源产业发展迅速,可再生能源发电与现代电网的融合成为了世界能源可持续转型的核心,发电技术继续沿着大规模、高效率和低成本方向持续进步,中国在风能和光伏发电领域的累计装机量和新增装机量已经跃居世界首位。 相比传统能源稳定、可控的生产方式,风能、太阳能本身具有先天的不可预测性,很大程度上要“靠天吃饭”,因此构建一个集物联网、大数据、云计算于一体的新能源设备管理平
《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用、水务燃气 SCADA 监控应用及智能楼宇等应用场景。 HT for Web 的 3D 是完全基于 WebGL 技术实现的渲染引擎,但开发者几乎不需要了解 3D 图形数学或 Shader 渲染的底层技术,只需要掌握基本的 3D 坐标系和相机 Camera 的概念,剩下需要掌握的也就是基
为了方便,该项目使用的是项目中的json数据,所以在编辑后需要将请求数据拷贝出来,覆盖到拓扑图节点json数据中。
全面支持后端服务的高可用、调整优化后端服务组件、4个中等级别以上的bug修复、云帮社区版迎来了2017年5月升级版本,我们优化了云帮的安装部署流程,全面支持后端服务的高可用,改进了相关提示信息文案,完善了平台日志模块,升级了部分核心组件版本。 云帮(ACP) 云帮是好雨科技研发的一款基于容器技术的应用管理平台(Application-Centric Platform as a service)。社区版针对个人、企业完全免费,您可以自由的下载与传播。借助它您可以实现: 企业级的Docker管理平台 开发、测试
processon,专业强大的作图工具,支持多人实时在线协作,可用于原型图、UML、BPMN、网络拓扑图等多种图形绘制。
上一篇我们绘制了一个 graphView 场景,在场景之上通过 graphView.dm() 获取数据容器,并通过 graphView.dm().add() 函数添加了两个 Node 节点,并通过 setPosition 设置节点位置以及 setImage 给节点添加图片;接着在两个节点之间通过 ht.Edge(sourceNode, targetNode) 添加了两条连线(实际上还可以更多),并给连线添加了 label 标签显示文字,同时也通过 label.position 设置了文字在连线上的位置。
之前做内网渗透测试的时候,一直想要有一款能够格式化存储收集到的信息,并且可以方便的查找出重要信息的工具。前段时间看到了Leprechaun 这个工具,给了我一些想法。由于,我对于这个工具有些不喜欢的地方。再加上好久没有写小程序练手了,于是决定自己定制一款类似的工具。
4.3. 机房迁移 总结一下5年前的工作,在不写下来自己都快忘光了,工作关系现在已经不涉及运维这块的工作。 4.3.1. 拓扑确立 首先制定服务器拓扑图,拓扑图应该有两套,一套是物理拓扑图,另一套是基于业务的虚拟拓扑图。 物理拓扑图包含机柜,机位,例如防火墙,核心交换机,机柜交换机,服务器,存储等等他们之间的物理关系。如果是云主机也许标注出来。 接下来分配IP地址以及服务端口号 最后制定虚拟拓扑图,是各种服务间的关系图,由IP地址和端口组成,标住出他们之间的关系。 4.3.2. 存储规划 什么东西放在什么
节选自 《Netkiller 系列手札》 5.3. 机房迁移 5.3.1. 拓扑确立 5.3.2. 存储规划 5.3.2.1. RAID Disk Group 规划 5.3.2.2. 文件系统规划 5.3.2.3. 目录规划 5.3.3. 设备上架 5.3.4. 操作系统初始化 5.3.5. 服务器及运行环境 5.3.6. 部署应用程序 5.3.7. 监控系统 5.3.8. 日志中心 5.3.9. 测试 5.3. 机房迁移 总结一下5年前的工作,再不写下来自己都快忘光了,工作关系现在已经不涉及运维这
前言 文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读。
在安装Kiali之前,我们需要先安装Istio,因为Kiali是Istio的一部分。可以按照以下步骤在Kubernetes集群中安装Istio:
本文为Istio系列的终结篇,前两篇《Istio系列一:Istio的认证授权机制分析》、《Istio系列二:Envoy组件分析》笔者分别对Istio的安全机制和数据平面组件Envoy进行了解读,相信各位读者已经对Istio有了一定认识,本文主要对Istio的控制平面核心组件Mixer、Pilot进行分析解读,在文中笔者会结合Envoy说明Mixer、Pilot的工作原理及它们在Istio中的价值,文章阅读时间大致15分钟,希望能给各位读者带来收获。
之前在网上看到别人写的有关元素周期表的文章,深深的勾起了一波回忆,记忆里初中时期背的“氢氦锂铍硼,碳氮氧氟氖,钠镁铝硅磷,硫氯氩钾钙”、“养(氧)龟(硅)铝铁盖(钙),哪(钠)家(钾)没(镁)青(氢)菜(钛)”,高中时期记的质量守恒、元素守恒、原子守恒、电子守恒,时间过的飞快,转眼我们都已经这么大了。
在很多大型企业中都是拥有着非常多的计算机设备的,相信在企业中工作过的人们都是知道企业中的很多计算机都是互连在一起的,计算机共处于一个局域网中能够更加方便地不同计算机之间的传输,计算机互连之后还可以进行很多更加方便的操作,让企业内部的联系更加紧密。那么一般计算机之间都是通过什么方式来连接在一起的呢?这个时候就需要使用到网络拓扑结构,使用不同拓扑结构的就会形成网络拓扑图,那么网络拓扑图是什么意思?网络拓扑图有哪些分类?下面小编就为大家来详细介绍一下。
领取专属 10元无门槛券
手把手带您无忧上云