TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

打着IMAX 3D噱头的《阿凡达》在全球疯狂掠走了20亿美元的票房。然而,一切还未结束。在国内,冯小刚以同样的3D作品《唐山大地震》三天票房就轻松过亿,IMAX版本一票难求,其气势比《阿凡达》有过之而无不及。人们为什么对这些电影趋之若鹜呢?说到底还是无法阻挡3D技术带来的震撼和冲击,是真正的“眼球经济”、全新的“用户体验”。而在一日千里的软件行当,我们的3D技术虽然在游戏、工程制图等领域已经普及,但是在大多日常领域却并不多见。而在更严肃一点的电信网络管理监控类的软件中则更是难得一见。那么,如果在你的界面上呈现一个自由旋转、可交互的3D的机房监控界面(如下图),用户的感觉又会如何呢?不必惊讶。看完这篇文章你就会知道,用TWaver做这类界面,只是分分钟的事。


什么是TWaver® 3D机房管理软件

TWaver® 3D机房管理软件(以下简称“3D机房”)是用于管理电信运营商机房资源的软件平台,是赛瓦软件TWaver®产品家族中的一员。3D机房通过集成设计环境(IDE)对电信行业各种机房资源进行设计、建模、存储,并以三维技术进行呈现和展示。3D机房既是一个完善的电信机房资源管理工具,也是一个电信资源管理的二次开发平台和组件。



产品结构

TWaver3D机房是一个C/S(客户端/服务器)结构的桌面应用程序,包括应用程序和数据库两部分。功能包括2D机房设计器、3D机房呈现试图、数据转换与存储模块。通过3D机房,用户可以方便快速的创建电信机房环境,并对各种机房资源进行管理和存储。这些机房数据通过XML格式进行转换并存储在数据库中,可以为其他OSS软件系统(如网管系统、资源管理系统等)共享使用。

目标用户

TWaver3D机房可以为广大电信运营商、设备制造商、软件开发商所使用。尤其在以下几种情况下,TWaver3D机房将会带来更大的作用:

  • 电信网管软件开发者:将TWaver3D机房作为二次开发平台,开发符合自身需要的机房资源管理软件系统;
  • 系统集成商:可将TWaver3D机房与现有软件系统整合,提供完整的机房资源管理能力;
  • TWaver开发者:将TWaver3D机房作为呈现组件,对各种机房资源进行三维展示;
  • 电信运营商:直接使用TWaver3D机房,管理现有机房资源;

使用编辑器

TWaver3D机房提供了一个可视化的编辑工具,用来在一个IDE环境下对机房进行创建、建模、贴图、布置、保存等工作。要使用编辑器,首先需要安装MySQL数据库。这个过程对我们来说非常简单,过程忽略。
MySQL安装结束后,创建一个数据库,并将TWaver3D机房中提供的SQL数据库脚本导入。

mysqldump –u root –p twaver_platform < c:\database.sql

 

然后就可以双击TWaver3D中的run.bat,启动编辑工具了。接下来要对编辑工具进行初始化。启动TWaver3D机房后,进入程序主页面,如下图:

点击主菜单Tools——Options,打开系统设置界面:




确保设置以下数值:

  • Database Server:数据库服务器地址。输入localhost(本机);
  • Database Port:数据库服务器端口。输入MySQL默认端口3306;
  • Database Name:数据库名称。输入twaver_platform;
  • Database User Name:数据库用户名。输入root;
  • Database Password:数据库密码。输入public;

点击OK保存设置。至此,TWaver3D机房已经安装设置完毕,可以使用。

常用操作

创建机房

在TWaver3D机房中,点击System——New菜单:



在对话框中选择“Room“,点击OK按钮,创建新的机房对象。

机房集成编辑环境如下图所示。

其中各个面板作用如下:

  1. 机房环境参数设置。包括房间大小、填充颜色等;
  2. 机房2D设计视图。可以在这里创建对象、移动对象、缩放、参数设置等;
  3. 对象属性表。可以对选中对象进行各种参数设置;
  4. 3D设计视图。对2D设计视图中的数据进行3D视图自动转换和呈现。
保存机房

在TWaver3D机房中,点击2D设计视图中工具条的“Save“按钮,可以将当前机房保存到数据库中:


打开机房

一旦机房被保存到数据库,即可在任意时间打开机房数据进行修改。点击主菜单中的System——Open Room菜单项:


在弹出的对话框的列表中,选中要编辑的机房,点击“确定”按钮即可打开机房:



创建机房物体

点击工具栏的“New”按钮,可以创建一个新的3D机房物体。

新建的机房物体会在2D和3D视图中显示出来。同时,新建的物体也会自动被选中,其相关属性会在右侧的属性表中罗列出来。


3D机房环境中,每个物体的主要属性如下图所示:

3D机房环境还提供了不同角度的旋转、缩放等,图解如下:


在3D机房中,物体的呈现遵循以下原则:

  • 每一个物体都是立方体。3D机房不支持其他形状的物体,例如球体、圆柱体等;
  • 每一个物体在水平、垂直两个方向上旋转角度不超过90度。也就是说,每个物体只能呈现其左、右、顶三个面;
  • 每个物体必须接触在水平面上,而不能悬空;

3D机房物体的主要属性和含义在下表中罗列:
属性 描述 举例
AlarmState 告警状态,包含当前物体上的所有告警信息。

 

带有告警信息的3D物体

Location 物体的坐标位置
Height 物体的3D高度

 

具有不同高度的物体

Left Visible 物体的左侧立面否可见

 

左侧立面不可见的物体

Left Image 物体的左侧立面贴图图片

 

设置左侧立面贴图的物体

Left Image Bounds 物体的左侧立面贴图的具体边界

 

左侧贴图设置边界为[10,10,30,30],开始坐标为10,10,宽高分别为30和30

Left Image Texture 物体左侧立面贴图是否使用纹理模式

 

设置金属拉丝纹理图片

Left Image Texture Scale 物体左侧立面贴图是否使用纹理的放大系数

 

问题放大系数设置为3和10的区别

Right Visible 物体的右侧立面否可见 同上
Right Image 物体的右侧立面贴图图片 同上
Right Image Bounds 物体的右侧立面贴图的具体边界 同上
Right Image Texture 物体右侧立面贴图是否使用纹理模式 同上
Right Image Texture Scale 物体右侧立面贴图是否使用纹理的放大系数 同上
Top Image 物体顶面贴图图片

 

设置顶面图片的物体

Top Visible 物体顶面是否可见

 

顶面不可见的物体

设置机房环境参数

机房环境参数包括机房名称以及机房地平面参数。在左侧编辑面板上可以直接进行编辑:



具体参数含义如下:

参数 描述
Room Name 机房名称
Floor Grid Unit 地平面网格单位。也就是地平面每个方块的尺寸有多少个最小单位数量。默认值是3
Floor Grid Row Count 地平面方块行数量
Floor Grid Column Count 地平面方块列数量
Floor Grid Color 1 地平面方块颜色一
Floor Grid Color 2 地平面方块颜色二
3D Floor Left Side Color 地平面左侧立面颜色
3D Floor Right Side Color 地平面右侧立面颜色
Floor Grid Color 地平面网格线颜色
Floor Grid Stroke 地平面网格线宽度,默认为0,单像素宽
Floor Deep 地平面的厚度(高度),默认为1个单位
常用编辑操作

编辑环境中,2D视图和3D视图直接联动。2D视图中可以控制尺寸、位置等操作,3D视图中可以进行缩放、旋转、选择等操作。

2D视图常用操作方法如下:

操作 描述
选择 通过鼠标可以直接在2D视图上点击物体进行选择。被选中的物体会显示8个小方块。同时,属性表也会列出选中物体的所有属性。

 

修改尺寸 选中物体后,通过鼠标对8个小方块可以直接对物体的尺寸进行修改。

 

此外,也可以用鼠标选中物体后,按Shift+方向键来修改物体的尺寸。

移动物体 用鼠标选择物体后,对物体进行拖拽,可以显示出要移动的新位置;松开鼠标,可以将物体移动到虚线显示的位置。

 

此外,也可以用鼠标选中物体后,点击方向键对物体进行移动。

放大视图 点击工具栏的放大按钮,可以对整个视图进行放大。

 

缩小视图 点击工具栏的缩小按钮,可以对整个视图进行缩小。

 

缩放回退 点击工具栏的Zoom Back按钮,可以回退到上次缩放比例。

 

充满缩放 点击工具栏的Zoom To Overview按钮,可以将视图拉伸缩放充满当前整个可见区域。

 

矩形缩放 点击工具栏的按钮,可以在视图上拖拽一个矩形区域,并将其放大至整个画布

 

缩放重置 点击工具栏的“Zoom Reset”按钮,可以将当前视图缩放重置为1:1。

 

鹰眼视图 点击工具栏的“Overview Window”按钮,可以显示或隐藏鹰眼视图

 

全屏显示 点击工具栏的“Full Screen”按钮,可以进入或退出全屏模式。

 

导出图片 点击工具栏的“Export Image”按钮,可以把视图导出到位图图片中。

 

在弹出对话框中,可以指定图片导出的区域。

导出SVG 点击工具栏的“Export SVG”按钮,可以把视图导出到一个SVG文件中。SVG是一个W3C标准的矢量图形文件格式。

 

拷贝粘贴 选中物体后,按Control+C组合键进行物体拷贝,按Control+V组合键进行物体粘贴。
删除对象 拖动鼠标选择要删除的对象,点击“Del”键可以删除所选中的对象。在确认对话框中选择“是”。

 

3D视图常用操作方法如下:

操作 描述
视图缩放 在3D视图上,用鼠标滑动滚轮,可以对视图进行缩放。鼠标指向的位置,会在缩放过程中,始终保持在鼠标的位置
视图平移 用鼠标在3D视图上进行拖拽,可以直接对视图进行上下左右平移。
物体选择 点击鼠标可以选择鼠标所在位置的物体。如果多个物体重叠,则最上面的物体会被选中。
视图旋转 按住Control键的同时,用鼠标拖拽视图,可以对视图进行水平、垂直两个方向旋转。

 

注意:水平旋转和垂直旋转最大角度为90度。

重置缩放 双击3D视图可以回到1:1的原始缩放比例。

一个完整的例子

本节通过编辑一个完整的例子来展示如何创建一个完整的3D机房。

第一步:创建房间墙体布局

点击New按钮创建节点,通过Shift+箭头调整节点尺寸,形成一个单位的墙体厚度,并首尾相接,拼凑成如下形状的布局。


第二步:设置墙体纹理图片

准备一张自己喜欢的墙体纹理作为素材,存放在磁盘上(如下图)。

在2D视图上按键Control+A选择所有物体。

在右侧属性表中,设置其左侧立面的图片为该纹理图片。

同时将左侧里面设置为纹理模式,将纹理放大系数设置为5。



对右侧里面设置同样图片、纹理以及纹理放大视图。最终3D效果如下图:

第三步:创建空调对象

选中所有墙体(Control+A)并在属性表中设置高度为150。在底部墙位置放置一个新对象,高度120并设置其top、left立面设置金属拉丝纹理图片,右侧立面设置一个空调面板图片。显示效果如下图:



在2D视图上,选中空调对象,按Control+C后连续按Control+V快捷键,创建更多空调对象,并放置在合适的位置:


第四步:创建窗户和挂画

要在现有墙体上创建窗户、门、挂画等对象,可以创建一个物体并设置其厚度为0,然后设置其侧面贴图,并强制指定贴图的边界区域,最后将对象靠在墙体表面的位置即可。



创建物体,调整厚度为0


设置左侧图片,并指定其边界为(10,10,100,100)


设定物体填充色为透明(修改颜色最后两位数字为00即可)

移动物体到墙体位置

重复以上步骤,设置门、挂画等物体,进一步美化机房环境。



第五步:创建电信设备

在房间空白处放置新物体,并设置其左右面板为设备面板图。创建更多设备并调整其位置。


可以在属性表中设置设备的告警状态。




添加墙角物体,设置填充色为暗红色,设置图片为灭火器消防栓。

一个简单的机房环境就基本完成了。可以双击2D或3D视图的标题条进行最大化显示:

第六步:保存机房

在机房环境变量编辑面板上设置机房名称等信息。


点击工具条上的Save按钮保存当前机房:



可以在主菜单中再次打开机房,进行进一步编辑修改。




通过以上步骤可以看到,TWaver3D机房可以很方便的通过可视化的方式创建机房环境并用3D方式进行呈现。


评论

# re: 3D的致命诱惑——TWaver 3D机房初探(工具使用篇)  回复  更多评论   

2010-08-17 14:17 by 何杨
真不错!

# re: 3D的致命诱惑——TWaver 3D机房初探(工具使用篇)  回复  更多评论   

2010-08-18 12:52 by sgz
是挺不错的

只有注册用户登录后才能发表评论。


网站导航: