TWaver MONO Design
Mono Design编辑器本身也是基于mono.js及html、javascript进行开发的网页程序。除了直接使用它以外,开发者还可以方便的对其进行修改和定制,例如通过对菜单、logo、模版等进行修改,快速创建企业自己的编辑器应用程序。本章节将介绍如何对Mono Design编辑器进行修改和定制。
编辑器程序结构
将Mono Design编辑器程序解压后,其中主要目录如下所述。其中可裁剪的部分会特别说明:
- css:定义了编辑器程序的样式。可修改css文件中的样式来修改编辑器的外观风格。不可裁剪
- demo:使用mono.js进行开发的各种demo演示程序。可裁剪
- images:包含了编辑器用到的各种图片,以及demo中用到的图片。用不到的图片可裁剪
- jsdoc:包含了mono.js的api说明文档。可裁剪
- libs:包含了编辑器所需的各种库文件。不可裁剪
- META-INF及WEB-INF:web工程部署所需配置。可裁剪
- mono:编辑器程序代码。不可裁剪
- resources:编辑器资源及配置文件,不可裁剪
根目录还包括components.html及index.html两个网页,分别对应编辑器的设备编辑器及机房编辑器,也应保留。或根据实际需要进行裁剪(例如如果编辑器只提供机房编辑,则可删除components.html)
修改模板库
左侧模板库内容来自resources目录下的三个文件:
- testAssembles.json:组合对象定义,目前版本尚未启用;
- testLib.json:定义了左侧模板库Room的内容列表,它是testPrimitives.json文件中定义的项的组合,项的具体内容则在testPrimitives.json中详细定义;
- testPrimitives.json:定义了testLib.json中每个项的具体详细内容;
testLib.json
文件testLib.json定义了模版库的内容。可以直接修改成符合自己要求的模版库。下面的修改只定义了几个简单的分类和几个项:
parseLib({ "categories":[ {"id":"Rooms", "contents":[ { "subtitle":"Floor", "children":[{"id":"floor01"},{"id":"floor02"},{"id":"floor03"}] }, { "subtitle":"Room", "children":[{"id":"squareRoomWithFloor"},{"id":"LShapedRoomWithFloor"},{"id":"RoomByPoints"},] }, { "subtitle":"Window", "children":[{"id":"window01"},{"id":"window02"},] }, ]} ] })
其中children中的每一个具体项只包括了id,id具体定义的内容则在testPrimitives.json中定义。
testPrimitives.json
文件testPrimitives.json定义了testLib.json中定义的每个项的具体内容。
parsePrimitives([
{
"id":"floor01",
"shape":"FloorShapedModel",
"actionType":"CreateFloorShapeNode",
"label":"Draw Floor",
"tips":"Drag and Drop to \nCanvas to Draw\n a New Floor",
"thumbnail":"floor03.png",
"ov":"floor03.png",
"ov-s":"specified shape type",
"dm":"material 0",
"dt":"floor02_3d.png",
"size":{"x":200,"y":20,"z":100},
"pos":{"x":0,"y":0,"z":0},
"rot":{"x":0,"y":0,"z":0},
"repeat":{"row":3,"column":3},
},
其中每一项定义了一个具体的模板内容。
- id:唯一,可在testLib.json中通过id进行指定;
- shape:所属类型,mono编辑器中目前支持这几种类型:FloorShapedModel(地板),RoomModel(房间),RoomWithFloorModel(带地板的房间),BlockModel(门窗),FloorShapedModel(管道)
- actionType:拖拽图标到拓扑图后拓扑图所处的编辑模式,支持以下几种类型:CreateFloorShapeNode(创建地板),CreateInnerWallShapeNode(创建内墙),CreateImageShapeNode(创建房间),CreateRoomWithFloorShapeNode(创建带地板的房间),CreatePipeShapeNode(创建管道),CreateRoundPipeShapeNode(创建圆形管道)
- label:项上显示的文字标签
- tips:鼠标滑过项时的提示文字
- thumbnail:项的小图标路径
- ov:拖拽该项到2D平面上时显示的拖拽图片
- ov-s:保留字段
- dm:保留字段
- dt:3D场景中3D对象所采用的贴图图片
- size:所生成的2D和3D对象的大小
- pos:所生成的2D和3D对象的位置
- rot:所生成的2D和3D对象的旋转度
- repeat:贴图的repeat
- dshape: 所生成的2D和3D路径对象的各个点的位置
- embeded:是否需要吸附到墙上,比如门和窗需要吸附到墙上
修改页头页脚
页头包括logo、右上角的连接栏。页脚主要是公司版权信息等。
修改logo,可以准备一张大小合适的图片(建议尺寸:300*40),并修改index.htm的下面内容:
修改下面代码可以设置自己的右侧连接。如不需要,也可将这部分内容直接删除:
页脚部分,显示了公司名及版权信息,代码如下,可直接修改:
<div class="footer"><span></span>Copyright <script type="text/javascript">document.write(new Date().getFullYear())</script> My Company Name.</div>
修改菜单及工具栏
主菜单可以直接在index.html文件中直接修改。菜单是通过一个嵌套的ul标签实现的。
其中,菜单的动作可以直接在onclick中定义:
<li><a href="#" onclick="callme()">Menu Item</a></li>
下面的代码定义了一个菜单分割栏:
<li class="separator"></li>
请注意:菜单目前不支持多级菜单。菜单宽度如和文字宽度不相称,可调整其css样式。
工具条的定义在index.html中的如下位置:
通过定义input标签来增加按钮。按钮的图片、样式等,可以通过class指定并在css中设置。
其他
还有其他一些可以定义的内容。例如,editor启动是否显示“Room/Component“选择对话框。可以通过修改index.html中的下面代码参数实现:
<body onload="$startEditor(true)" style="margin:0">
startEditor函数中的boolean值控制是否隐藏启动对话框。如不输入或false则显示,如输入true则隐藏,直接进入room编辑状态。
下面实例演示了如何创建一个完整的自定义房间编辑器:
主要代码如下:
<body onload="$startEditor(true)" style="margin:0"> <div class="header"> <div class="top"> <div class="top_left"> <img class="logo" src="images/my-logo.png" /> <div class="top_title"></div> </div> <div class="top_right"> <a href="http://twaver.servasoft.com">Link</a> | <a href="http://twaver.servasoft.com/forum/">Link</a> | <a href="http://twaver.servasoft.com/blog">Link</a> | <a href="demo/index.html">Link</a> </div> </div> <div class="clear"></div> <div class="menu"> <!-- Begin CSS Horizontal Popout Menu --> <div id="menuh-container"> <div id="menuh"> <ul style="width:60px; padding-right:10px;"> <li><a href="#" class="top_parent">Menu</a> <ul> <li><a href="#" onclick="return false">Menu Item</a></li> <li><a href="#" onclick="return false">Menu Item</a></li> <li><a href="#" onclick="return false">Menu Item</a></li> </ul> </li> </ul> <ul style="width:70px;"> <li><a href="#" class="top_parent">Menu</a> <ul> <li><a href="#" onclick="return false">Menu Item</a></li> <li><a href="#" onclick="return false">Menu Item</a></li> <li><a href="#" onclick="return false">Menu Item</a></li> <li class="separator"></li> <li><a href="#" onclick="return false">Menu Item</a></li> <li><a href="#" onclick="return false">Menu Item</a></li> </ul> </li> </ul> <ul style="width:65px;"> <li><a href="#" class="top_parent" onclick="return false">Menu</a> <ul> <li><a href="#" onclick="return false">Menu Item</a></li> </ul> </li> </ul> </div> </div> <!-- End CSS Horizontal Popout Menu --> <a><input type="button" class="setting" onclick="$ces4R()"/></a> <input id ='btn3d' type = "button" class="transform2d_two" onclick="$s3d(this)"> <input id ='btn2d' type = "button" class="transform2d_one" onclick="$s2d(this)"> <a><input type="button" class="setting" onclick="alert('do something here')"/></a> </div> </div> <div id = 'main'></div> <div class="footer"><span></span>Copyright <script type="text/javascript">document.write(new Date().getFullYear())</script> My Company Name.</div> </body>