Demo  |   文档  |   博客  |   支持库  |   论坛  |   关于  |   EN
  • 首页
  • 产品
  • 解决方案
  • 下载
  • 合作
  • TWAVER DOCUMENT CENTER
    • 开发文档 – TWaver Make
      • 产品概述
      • 模型的定义和加载
      • 扩展自定义模型库
      • 模型库目录
        • 3D模型目录
        • 2D模型目录
499 views. Last update: March 29, 2016
  1. TWAVER DOCUMENT CENTER
  2. 开发文档 – TWaver Make
  3. 产品概述
Print

IN THIS PAGE

  • 1 产品定义
  • 2 如何使用
    • 2.1 创建工程
    • 2.2 注册模型
    • 2.3 注册2D对象模版
    • 2.4 注册3D对象模版
    • 2.5 使用parameters指定注册资源的参数
    • 2.6 使用box.addByDescendant函数
    • 2.7 使用内置模型库
  • 3 预定义模型库

产品定义

TWaver Make(以下简称make)是TWaver产品家族中的一个独立产品,是一个基于JavaScript的开发框架和模板库。具体包括:

img7

  • make开发框架:基于JavaScript的开发框架,用于把各类资源(代码片段、各种数据资源、2D/3D模型等)用统一的代码框架进行规范、定义、封装、调用,实现各种可视化数据资源的模版化,达到快速复用;
  • make模板库:基于make框架预定义的海量资源模板库,包括基于TWaver 2D、3D技术的各行业模型数据,供开发者直接使用;

Make最典型的应用是基于TWaver HTML5的各类2D、3D对象库和模板库。Make通过定义模型库和使用内置模板库来大幅简化了对底层2D、3D引擎的使用难度,可以让开发者快速创建高质量、专业的行业可视化应用场景。

提示:如果把搭建系统比喻成盖大楼,TWaver 2D和3D就像沙土和水泥,而TWaver Make的就像是各种标准的“砖头”。盖房子的过程,也就变成了“搭积木”的过程。盖大楼,也不再需要从挖土烧砖开始,让设计师更多的精力专注在建筑结构和功能设计上。

如何使用

创建工程

首先需要到twaver官网申请下载TWaver Make的试用包,下载下来的是一个zip包,拿到这个包解压后的目录如下:

twaver-make-js

在libs目录下的twaver-make.js就是要引入到项目中的库文件,注意twaver-make.js是依赖于twaver.js和t.js,因此需要把这两个包一起引入到项目中;model目录下提供的就是模型库,目前给出了部分数据机房的模型库,若需要更多的模型库可联系我们;res目录下放置的是模型库依赖的资源文件;demo.html是运行的例子。

了解了TWaver Make包结构之后,就需要知道如何运行这个工程,在demo.html页面中给出了部分模型的例子,可以将整个工程发布到服务器上,运行效果如下:

twaver-make-1

几行代码即可创建出房间,通道,机柜,空调,UPS这些模型。

这是直接运行TWaver Make,如果在自己的工程中该如何使用?首先创建新的工程,然后将twaver-make.js包引入到工程中,twaver-make.js文件可放置在任意目录下。引入了js文件之后,还需要将其他的文件(除了libs目录和demo.html文件)一并引入到工程中,需要注意的是要保持包的目录结构不变。下图给出了一个工程结构的示例:

hello-make

这个项目中把twaver-make整个模型目录(这里重命名为make,目录名可任意更改)copy到js目录下,和工程中用到的其他js文件放在一起。twaver-make.js文件放在了libs目录下,和其他第三方的库文件放在一起。然后在html文件中需要指定这些路径。

hello-make-hello

第一个红框的代码大家都知道。第二个红框的代码make.Default.path = ‘./js/make/’;是指定模型库的相对目录,如果没有指定,那么内置的模型将找不到资源图片。

注册模型

接下来就来介绍代码中如何使用make:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//注册资源
var parameters = {
category : "文本",
type : "string",
modelDefaultParameters : {},
name : "",
description:"",
};
make.Default.register('my_name', '赛瓦软件',parameters);
 
//....
 
//加载并使用资源
var myName = make.Default.load('my_name');

以上就是make最简单的产品定义和使用方法。我们只需要了解一个类make.Default和它的两个方法register和load就可以使用make框架了。
register和load的方法原型如下:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
/**
* id:注册资源的ID号
* creator:注册资源的生成器
* parameters:注册资源的参数
*/
make.Default.register: function(id, creator, parameters);
 
/**
* object:加载资源的对象,object可以为string,json对象或者数组(数组里包含的又可以是string或json对象)。
* callback:回调方法
*/
make.Default.load: function(object, callback);

注册2D对象模版

下面代码用于注册一个TWaver 2D节点:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
make.Default.register('my_node', function(){
  var node = new twaver.Node();
  node.setSize(200, 100);
  node.setName('网元');
  node.setToolTip('网元');
  
  return node;
});
 
//....
 
var node = make.Default.load('my_node');
network.getDataBox().addByDescendant(node);

注册3D对象模版

下面代码用于注册一个mono(TWaver 3D)立方体对象:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
make.Default.register('my_cube', function(){
  var cube = new mono.Cube(200, 100, 300);        
  cube.setPosition(0, cube.getHeight()/2, 0);          
  cube.s({
    'm.type': 'phong',
    'm.color': '#845527',
    'm.ambient': '#845527',
    'left.m.lightmap.image': 'inside_lightmap.jpg',
    'right.m.lightmap.image': 'outside_lightmap.jpg',
    'front.m.lightmap.image': 'outside_lightmap.jpg',
    'back.m.lightmap.image': 'inside_lightmap.jpg',
    'top.m.color': '#845527',
    'top.m.ambient': '#845527',            
    'bottom.m.color': '#845527',
    'bottom.m.ambient': '#845527',            
  });
 
  return node;
});
 
//....
 
var node = make.Default.load('my_cube');
network3d.getDataBox().addByDescendant(node);

使用parameters指定注册资源的参数

在注册资源的时候,可以指定注册的资源(或者资源creator)的一些参数,可以在register函数的第三个参数中指定。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
make.Default.register('rack', function(json){
   ...
},{
  category : "机柜",
  type:"mono.Element",
  name : "机柜模型",
  description : "机柜模型,一般支持42U和47U,长宽高可以指定,默认高度42U,默认深度660",
  async : false,
  icon : 'icons/rack.png',
  modelDefaultParameters : {
     width : {name :"宽", value : 1000, type : "string"},
     height : {name : "高",value : "42U", type:"string"},
  },
 
  someOther:"someOther"
})

注册之后,可以通过make.Default.getParamters(‘rack’)来获取相关模型的参数。 需要注意的是,category,type, modelDefaultParameters,async,name,description 是系统内置的一些标准(属性)。category 可以对模型进行分类,type指定了模型的类型,name和description可以指定模型描述,modelDefaultParameters是针对creator的,相当于creator的默认参数,icon指定了模型的缩略图。make中提供了对于的方法来获取这些参数:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
make.Default.getCategories();//获取所有分类,模型注册时,可以指定category参数,如果指定了,make将会对模型进行分类
 
make.Default.getCreatorsForCategory(category) //获取一个分类下面的所有模型函数
 
make.Default.getCreator(id) //获取某个模型的creator函数
 
make.Default.getModelDefaultParameters(id) //获取指定模型的默认参数
 
make.Default.getDescription(id) //获取指定模型的描述
 
make.Default.getName(id) //获取指定模型的名称
 
make.Default.getIcon(id) //获取指定模型的图标
 
make.Default.getCategory(id) //获取指定模型的分类
 
make.Default.getOtherParameter(id, key) //获取指定模型的参数
 
make.Default.isAsync(id) //用来获取模型的异步同步属性

async指定了模型的是异步还是同步返回的,默认是同步,也就是该参数不指定就是false,但所有obj的模型都是异步。用户可以通过async属性来决定加载模型的是通过异步的加载还是同步的方式加载,代码片段如下:

JavaScript
1
2
3
4
5
if(make.Default.isAsync(id)){
  // 执行异步加载方法
}else{
  // 执行同步加载方法
}

 

而我们的另外一个产品,设备编辑器,将会直接使用到make指定的category,name,description,modelDefaultParameters等参数,也就是说设备编辑器将会和make无缝集成(具体可以参考以后的编辑器的说明)。

除此之外,用户还可以根据自己的需求,指定自己的属性,比如例子中的someOther属性;该属性可以通过make.Default.getParameters(‘rack’).someOther来获取。

使用box.addByDescendant函数

可以注意到,上面的例子中,无论2D还是3D数据,都会使用DataBox的addByDescendant方法添加数据,而不是add。这是因为,大多数模型库返回的结果并不止是一个2D或3D对象,而是具有父子关系的一批对象组成的拓扑图或物体,而返回的对象往往是这些对象的root根对象。因此,使用addByDescendant函数可以一次性把所有的返回对象加载到DataBox中。

因此,使用addByDescendant总是比使用add更方便、稳妥。推荐总是使用addByDescendant来添加对象到DataBox中。

使用内置模型库

TWaver Make模型库提供了大量高精度、专业的行业预制2D、3D模型库,开发者可以直接使用。

下面代码调用了make中预定义的电力变电站中的变压器模型。已知变压器模型的id为twaver.grid.transformer,则:

JavaScript
1
2
var transformer = make.Default.load('twaver.grid.transformer');
network3d.getDataBox().addByDescendant(transformer);

r

下面代码调用了make中预定义的数据中心发电机模型,其id为twaver.idc.generator,则:

JavaScript
1
2
var generator= make.Default.load('twaver.idc.generator');
network3d.getDataBox().addByDescendant(generator);

q

可见,使用make预制模板库可以非常快的创建各种复杂的3D模型,快速开发产品。下图中的场景,使用模型库创建,代码不过几百行。

img5

img6

预定义模型库

TWaver Make预定义了大量行业模型库,供开发者直接使用。包括:

  • 电信行业
  • 电力行业
  • 数据中心
  • 工业自动化
  • 物流与仓储

可以根据具体需要来选择模型库,也可以自行添加自定义模型库。内置模版库参考模型库目录一章。如果您需要定义更多行业模型,请与TWaver团队联系。

499 views. Last update: March 29, 2016
Print