1、TP-LINK面板
我们从TP-LINK的设备面板开始，设备面板的示意图如下：
显而易见，设备面板基本上能由HT for Web（本图形（rect、circle、oval等）构成，而中间的接口需要用自定义图形来解决，下面让我们一步步实现它，准备工作如下：
导入我们的HT
<script src="ht.js"></script>
创建数据模型容器，并将其加入DOM：
dataModel = new ht.DataModel();//创建数据模型容器 graphView = new ht.graph.GraphView(dataModel);//创建拓扑图组件 graphView.addToDOM();
可能有人看到这里的addToDOM()很疑惑？没错，这是HT新增的API！之前我们要创建一个图形界面，不光需要在CSS样式中定义mian的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形状手册。需要制定矢量类型为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的方式进行注册（详情见HT for Web入门手册）：
ht.Default.setImage('tplink', 'symbols/TPLink.json');将注册的矢量图片名称设置到模型上：
var node = new ht.Node(),
node.setImage('tplink');
dataModel.add(node);甚至在最新版的HT中，已经支持无需注册，直接调用setImage()，传入URL参数的方式（在我的Demo中就是使用的这种方法）。这种方法更加简洁，但是如果许多场景都应用到同一图片时，还是建议用户通过注册的图片的，避免多次修改URL：
node.setImage('symbols/TPLink.json');好了，现在在浏览器中预览你的HTML文档，是不是有个TPLINK面板？
最后，怎么让我们的指示灯闪烁起来呢？用HT开发的产品，要实现闪烁效果很简单，因为HT预定于图形组件默认就已与DataModel中的Data数据绑定，绑定的格式也很简单，只需将以前的参数值用一个带func属性的对象替换即可，详见HT for Web数据绑定手册。在这里指示灯的闪烁实际上是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面板都完成了，服务器还远吗？
2、连线
大家也有注意到，我们的Demo中有两条连线，那连线应该怎么做呢？
HT默认提供的是直线和多点连线，但是在绘制流程图、组织结构图和思维导图等应用