文档章节

基于 HTML5 Canvas 实现的 TP-LINK 电信拓扑设备面板

htdaydayup
 htdaydayup
发布于 10/24 09:34
字数 2525
阅读 16
收藏 0

前言

今天我们以真实的 TP-LINK 设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动。

先来目睹下最终的实现效果:http://www.hightopo.com/demo/blog_tplink_20170511/index.html 在这里插入图片描述

代码实现

TP-LINK面板

我们从 TP-LINK 的设备面板开始,设备面板的示意图如下: 在这里插入图片描述 显而易见,设备面板基本上能由 HT for Web 的基本图形(rect、circle、oval 等)构成,而中间的接口需要用自定义图形来解决,下面让我们一步步实现它,准备工作如下: 导入我们的 HT(http://www.hightopo.com/ ):

<script src="ht.js"></script> 

创建数据模型容器,并将其加入 DOM:

dataModel = new ht.DataModel(); // 创建数据模型容器  
graphView = new ht.graph.GraphView(dataModel); // 创建拓扑图组件  
graphView.addToDOM();   

可能有人看到这里的 addToDOM() 很疑惑?没错,这是 HT 新增的 API!之前我们要创建一个图形界面,不光需要在 CSS 样式中定义 main 的 top、left,还需要对 window 对象的 resize 事件进行监听等等,所以我们新增 addToDOM() 帮您做好这一系列的事情,可以看看源代码中的实现方式:

    p.addToDOM = function(){     
        var self = this,  
            view = self.getView(),     
            style = view.style;  
        document.body.appendChild(view);              
        style.left = '0';  
        style.right = '0';  
        style.top = '0';  
        style.bottom = '0';        
        window.addEventListener('resize', function () { self.iv(); }, false);  
        self.iv();  
    },  

准备工作完成后,就可以开始面板的绘制,对于基本图形,只需设置其相应地样式即可,例如有立体效果的按钮部分:

{  
      type: "circle",  
      shadow: true,  
      background: "rgb(0,0,0)",  
      borderWidth: 1,  
      borderColor: "rgb(0,0,0)",  
      border3d: true,  
      gradient: "spread.horizontal",  
      gradientColor: "rgb(79,77,77)",  
      dashColor: "rgb(0,0,0)",  
      rotation: 3.141592653589793,  
      rect: [  
        677, 157,  
        43, 34  
      ]  
} 

对于自定义图形,前面也有介绍过,详见HT for Web形状手册(http://www.hightopo.com/guide/guide/core/shape/ht-shape-guide.html )。需要制定矢量类型为 shape,其形状主要由 points 和 segments 这两个属性描述:

points 为 ht.List 类型数组的顶点信息,顶点为 {x: 100, y:200} 格式的对象; segments 为 ht.List 类型的线段数组信息,线段为1-5分别代表不同的顶点连接方式,segments 主要用于绘制曲线,或者有跳跃断点的情况,其1~5的取值含义如下:

  1. moveTo,占用一个点的信息,代表一个新路径的起点;
  2. lineTo,占用一个点信息,代表从上次最后点连接到该点;
  3. quadraticCurveTo,占用三个点信息,第一个点作为曲线控制点,第二个点作为曲线结束点;
  4. bezierCurveTo,占用三个点信息,第一和第二个点作为曲线控制点,第三个点作为曲线结束点;
  5. closePath,不占用点信息,代表本次路径绘制结束,并闭合到路径的起始点。 在这里插入图片描述

示例如下:

    ht.Default.setImage('tplink', {  
        width: 97,  
        height: 106,  
        comps: [  
            {  
          type: "shape",  
          background: "rgb(20,60,140)",  
          borderWidth: 8,  
          borderColor: "gray",  
          borderCap: "round",  
          points: [  
            269, 140,  
            359, 140,  
            359, 180,  
            329, 180,  
            329, 190,  
            299, 190,  
            299, 180,  
            269, 180,  
            269, 140  
          ]}  
        ]  
    });  

将所有的图形数据整合后,就形成我们的 TPLINK 面板的数据,整合方法如下:

    ht.Default.setImage('tplink', {  
        width: 97,  
        height: 106,  
        comps: [  
            {  
          type: "shape",  
          background: "rgb(20,60,140)",  
          borderWidth: 8,  
          borderColor: "gray",  
          borderCap: "round",  
          points: [  
            269, 140,  
            359, 140,  
            359, 180,  
            329, 180,  
            329, 190,  
            299, 190,  
            299, 180,  
            269, 180,  
            269, 140  
          ]},  
           {  
          type: "circle",  
          shadow: true,  
          background: "rgb(0,0,0)",  
          borderWidth: 1,  
          borderColor: "rgb(0,0,0)",  
          border3d: true,  
          gradient: "spread.horizontal",  
          gradientColor: "rgb(79,77,77)",  
          dashColor: "rgb(0,0,0)",  
          rotation: 3,  
          rect: [  
            677, 157,  
            43, 34  
          ]},  
          //...  
          //...  
          //...  
          // 多个图形组件  
      ]  
    });  

这只是注册图片的其中一种方法,我们也可以直接通过 url 的方式进行注册(详情见 http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html ):

    ht.Default.setImage('tplink', 'symbols/TPLink.json');

将注册的矢量图片名称设置到模型上:

    var node = new ht.Node(),  
    node.setImage('tplink');  
    dataModel.add(node);  

甚至在最新版的 HT 中,已经支持无需注册,直接调用 setImage(),传入 URL 参数的方式。这种方法更加简洁,但是如果许多场景都应用到同一图片时,还是建议用户通过注册的图片的,避免多次修改 URL:

    node.setImage('symbols/TPLink.json');  

好了,现在在浏览器中预览你的 HTML 文档,是不是有个 TPLINK 面板?

最后,怎么让我们的指示灯闪烁起来呢?用 HT 开发的产品,要实现闪烁效果很简单,因为 HT 预定于图形组件默认就已与 DataModel 中的 Data 数据绑定,绑定的格式也很简单,只需将以前的参数值用一个带 func 属性的对象替换即可,详见 HT for Web 数据绑定手册(http://www.hightopo.com/guide/guide/core/databinding/ht-databinding-guide.html )。在这里指示灯的闪烁实际上是 visible 属性值变化产生的结果,所以我们只需要给 visible 属性数据绑定,如下所示:

    {  
          "type": "oval",  
          "visible": {  
            "func": "attr@visibility1"  
          },  
          "shadow": true,  
          "shadowColor": "rgba(208,240,2,0.35)",  
          "background": "rgb(178,184,141)",  
          "gradient": "radial.center",  
          "gradientColor": "rgb(247,255,0)",  
          "rect": [  
            79, 53,  
            31, 32  
          ]  
     },  
 
	setInterval(function(){  
		node.a('visibility1', !t_node.a('visibility1'));  
	}, 400); 

到这里,你已经成功完成一个 TPLINK 面板的制作 (~ . ~),当然还剩服务器的制作,这里就不再赘述,复杂 TPLINK 面板都完成了,服务器还远吗?

连线

大家也有注意到,我们的 Demo 中有两条连线,那连线应该怎么做呢?

HT 默认提供的是直线和多点连线,但是在绘制流程图、组织结构图和思维导图等应用还需要更多的连线类型, 详情戳 HT for Web 连线类型手册(http://www.hightopo.com/guide/guide/plugin/edgetype/ht-edgetype-guide.html )。 在这里插入图片描述 在我们的 Demo 中,两条连接服务器和 TP-LINK 的曲线,均是使用自定义的新连线类型。

ht.Default.setEdgeType(type, func, mutual) 函数可以用来自定义连线类型:

其中:

  • type:字符串类型的连线类型,对应 style 的 edge.type 属性;
  • func:函数类型,根据传入参数 (edge, gap, graphView, sameSourceWithFirstEdge) 返回走线的走向信息; 1). edge:当前连线对象; 2). gap:多条连线成捆时,笨连线对象对应中心连线的间距; 3). graphView:当前对应的拓扑组件对象; 4). sameSourceWithFirstEdge:boolean 类型,该连线是否与同组的同一条连线同源; 返回值为 {points:new ht.List(...),segments:new ht.List(...)} 结构的连线走向信息,segments 的取值同上;
  • mutual:该参数决定连线是否影响起始或者结束节点上的所有连线,默认为 false 代表只影响同 source 和 target 的 EdgeGroup 中的连线。

具体实现时,我们需要再引入:

    <script src='ht-edgetype.js'></script>  

然后调用 ht.Default.setEdgeType(type, func, mutual) 函数,代码如下:

    ht.Default.setEdgeType('line', function(edge){  
         var sourcePoint = edge.getSourceAgent().getPosition(),  
             targetPoint = edge.getTargetAgent().getPosition(),  
         points = new ht.List();         
         points.add(sourcePoint);  
         points.add({  
             x: (sourcePoint.x + targetPoint.x)/2,   
             y: (sourcePoint.y + targetPoint.y)/2 + 300  
         });                    
         points.add(targetPoint);                                                         
      
         return {  
             points: points,  
             segments: new ht.List([1, 3])  
         };                   
    });  

创建一条新的连线时,注意这时候连线类型 edge.type 为我们自定义的连线类型 ‘line’:

    var edge = new ht.Edge();  
    edge.setSource(startNode);  
    edge.setTarget(endNode);  
    edge.setLayer('edgeLayer');  
    edge.s({  
           'edge.type': 'line',  
           'edge.color': '#0A3791',  
           'edge.width': 8,  
           'edge.center': true  
           });  
    dataModel.add(edge);  

到这里连线已经基本完成,还有一点,大家可能对 setLayer() 方法不是很熟悉,其实这个方法是用于设置连线和图元的层级,因为默认的层级是 edge 在 node 之下,所以需要设置层级后,调用 graphView 的 setLayers 方法更改层级之间的关系:

    graphView.setLayers(['nodeLayer', 'edgeLayer']);  

若对自定义连线类型仍旧有疑问,可以戳例子(http://www.hightopo.com/guide/guide/plugin/edgetype/examples/example_custom.html )加深了解。

流动

先来看看 HT 产品中流动的炫酷效果,戳地址(http://www.hightopo.com/guide/guide/plugin/flow/examples/example_demo1.html )可看详情: 在这里插入图片描述 在我的 Demo 中两条连线应用了不同方式的流动,但是两种方式需要 ht.flow 插件。这个插件在 ht.Shape 和 ht.Edge 类型上扩展了样式控制流动效果,用户可以通过 ht.Shape.setStyle() 和 ht.Edge.setStyle() 来操作这些样式,下面简单介绍几种样式:

1、flow 值为 true 和 false,控制此 ht.Shape 和 ht.Edge 是否可流动,默认为 false;

2、flow.count,控制流动组的个数,默认为1;

3、flow.step,控制流动的步进,默认为3;

4、flow.element.image,字符串类型,指定流动组元素的图片,图片须提前通过 ht.Default.setImage() 注册;

....

等等,还有很多的样式任你玩,详情戳地址(http://www.hightopo.com/guide/guide/plugin/flow/ht-flow-guide.html );

这里必须要引入流动特效插件:

<script src="js/ht-flow.js"></script>

在这里,我们先将流动的图片提前注册:

 ht.Default.setImage('arrow', 'symbols/arrow.json');  

第一种方式中,直接在连线 edge 上设置流动相关的属性(做完后别忘了调用启动流动的 API),在这里通过设置 flow.element.image 属性值为 'arrow' 的方式设置流动的图片:

    edge.setStyle({  
        'edge.type': 'line',  
        'edge.color': '#0A3791',  
        'edge.width': 8,  
        'edge.center': true,  
        'flow': true,  
        'flow.element.image': 'arrow',  
        'flow.element.count': 1,   
        'flow.element.max': 30,                                                 
        'flow.element.autorotate': true                         
    });  
    raphView.enableFlow(40); // 启动流动

刷新页面,arrow 在 edge 上流动起来了!可能还有人会疑问“如果我的流动组元素不是图片,是图元呢?没错,这就是第二种方式!

第二种方式,针对的是流动元素组是图元的情况:

    var flowNode = new ht.Node();                   
    flowNode.setImage('arrow');  

因为流动实际上是图元的位置随着时间发生了变化,所以,我们可以更改图元的位置来控制它的流动,通过调用 flow 插件现成的 API - - - calculateLength 计算出流动线的长度 length,然后改变当前步进百分比 currentPercentage,具体实现如下:

    graphView.validate(); // 刷新  
    var length = graphView.calculateLength(edge), // 流动线长度  
        step = 4,  // 步进单位像素
        stepPercentage = step / length * 100, // 步进百分比  
        currentPercentage = 0; // 当前步进百分比  
      
    setInterval(function(){  
        var pos = graphView.getPercentPosition(edge, currentPercentage); // 第二个参数为百分比,范围0到100
        flowNode.setPosition(pos.x, pos.y); // 改变流动节点的位置  
        currentPercentage += stepPercentage;  
        if (currentPercentage > 100) currentPercentage = 0;  
    }, 400);  

做完这些之后,刷新页面,怎么仍旧没有流动效果?

其实这里有一个坑,那就是在计算 length 之前,必须先调用 graphView.validate(),为什么呢?为了提高效率,graphView 并不是实时刷新,而是多个图元发生改变后统一刷新,所以这里的 graphView.validate() 的功能是进行刷新 graphView。

总结

最后,附上 Demo 的源码(http://www.hightopo.com/demo/blog_tplink_20170511/index.html ),希望大家不吝赐教。

© 著作权归作者所有

htdaydayup
粉丝 0
博文 21
码字总数 49923
作品 0
宁德
私信 提问
基于HTML5的电信网管3D机房监控应用

先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: 随着PC端支持HTML5浏览器的普及,加上主流移动终端Android和iOS都已支持HTML5技术,新一代的电信网管应...

xhload3d
2014/02/22
2.5K
1
基于HTML5的WebGL电信网管3D机房监控应用

先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/example3droom.html 随着PC端支持HTML5浏览器...

xhload3d
2015/11/07
630
1
基于HTML5的WebGL电信网管3D机房监控应用

先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/example3droom.html http://v.youku.com/vsho...

xhload3d
2015/11/08
295
0
基于HT for Web的Web SCADA工控移动应用

在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和...

xhload3d
2015/03/18
3.5K
2
基于HTML5的网络拓扑图设计

电信网管系统中,设备状态信息的实时展示非常重要,通常会挂载一堆图标来展示状态或告警信息,图标的信息量有限,有时需要更详细的面板,甚至以图表的形式展现,本文将结合最近客户提到的需求...

kongjianxuan
2018/06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

交换两数(函数)

#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> void Exchange(int* x, int* y){ int tmp = 0; tmp = *x; *x = *y; *y = tmp; } int main(){ int a; int b; scanf......

Lxxxxx256
33分钟前
3
0
给 K8s API “做减法”:阿里巴巴云原生应用管理的挑战和实践

作者 | 孙健波(天元) 阿里巴巴技术专家 本文整理自 11 月 21 日社群分享,每月 2 场高质量分享,点击加入社群。 早在 2011 年,阿里巴巴内部便开始了应用容器化,当时最开始是基于 LXC 技术...

阿里巴巴云原生
今天
6
0
数据平面

3.1数据平面的任务 解析数据包头 转发数据包到某些端口 通过查询由控制平面所生成的转发表 传统网络数据平面 数据包--输入端口---拆封和解析,转发策略匹配,转发调度---输出端口(协议相关,...

Firefly-
昨天
6
0
如何高效的阅读uni-app框架?(建议收藏)

作者 | Jeskson 来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js。脚本,应用程序,main.js。日志打印,定时器,生命周期,页面,页面通...

达达前端小酒馆
昨天
8
0
实现原理专题--存储器的实现(三)

计算机实现原理专题--存储器的实现(二)中描述了一种电平触发器,但是某些应用需要在保持位从0到1变化的过程中对数据端进行保存。这种触发器叫边沿触发器。 一开始Q为0,时钟信号为0。当数据...

FAT_mt
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部