IN THIS PAGE
产品定义
TWaver Make(以下简称make)是TWaver产品家族中的一个独立产品,是一个基于JavaScript的开发框架和模板库。具体包括:
- 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包,拿到这个包解压后的目录如下:
在libs目录下的twaver-make.js就是要引入到项目中的库文件,注意twaver-make.js是依赖于twaver.js和t.js,因此需要把这两个包一起引入到项目中;model目录下提供的就是模型库,目前给出了部分数据机房的模型库,若需要更多的模型库可联系我们;res目录下放置的是模型库依赖的资源文件;demo.html是运行的例子。
了解了TWaver Make包结构之后,就需要知道如何运行这个工程,在demo.html页面中给出了部分模型的例子,可以将整个工程发布到服务器上,运行效果如下:
几行代码即可创建出房间,通道,机柜,空调,UPS这些模型。
这是直接运行TWaver Make,如果在自己的工程中该如何使用?首先创建新的工程,然后将twaver-make.js包引入到工程中,twaver-make.js文件可放置在任意目录下。引入了js文件之后,还需要将其他的文件(除了libs目录和demo.html文件)一并引入到工程中,需要注意的是要保持包的目录结构不变。下图给出了一个工程结构的示例:
这个项目中把twaver-make整个模型目录(这里重命名为make,目录名可任意更改)copy到js目录下,和工程中用到的其他js文件放在一起。twaver-make.js文件放在了libs目录下,和其他第三方的库文件放在一起。然后在html文件中需要指定这些路径。
第一个红框的代码大家都知道。第二个红框的代码make.Default.path = ‘./js/make/’;是指定模型库的相对目录,如果没有指定,那么内置的模型将找不到资源图片。
注册模型
接下来就来介绍代码中如何使用make:
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的方法原型如下:
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节点:
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)立方体对象:
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函数的第三个参数中指定。
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中提供了对于的方法来获取这些参数:
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属性来决定加载模型的是通过异步的加载还是同步的方式加载,代码片段如下:
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,则:
1 2 |
var transformer = make.Default.load('twaver.grid.transformer'); network3d.getDataBox().addByDescendant(transformer); |
下面代码调用了make中预定义的数据中心发电机模型,其id为twaver.idc.generator,则:
1 2 |
var generator= make.Default.load('twaver.idc.generator'); network3d.getDataBox().addByDescendant(generator); |
可见,使用make预制模板库可以非常快的创建各种复杂的3D模型,快速开发产品。下图中的场景,使用模型库创建,代码不过几百行。
预定义模型库
TWaver Make预定义了大量行业模型库,供开发者直接使用。包括:
- 电信行业
- 电力行业
- 数据中心
- 工业自动化
- 物流与仓储
可以根据具体需要来选择模型库,也可以自行添加自定义模型库。内置模版库参考模型库目录一章。如果您需要定义更多行业模型,请与TWaver团队联系。