2012年1月31日随笔档案 - TWaver - 专注UI技术

VR技术在数据中心3D机房中的应用（下）

posted @ 2017-06-01 14:08 TWaver 阅读(289) | 评论 (0) | 编辑收藏

VR技术在数据中心3D机房中的应用（上）

摘要: 近年来VR（虚拟现实）这个词越来越频繁地出现在我们生活当中。由于它能带来前所未有的交互体验和沉浸感，VR技术的广泛应用，例如在游戏，影视，数据中心等领域，已经成了一个必然的趋势。阅读全文

posted @ 2017-05-31 16:45 TWaver 阅读(341) | 评论 (0) | 编辑收藏

HTML5数据可视化第四弹：可交互地铁线路图

摘要: 用TWaver HTML5制作的上海地铁图，一个简单实用的小应用，具有纯矢量、可交互、有动态效果、无失真缩放等特点。可以方便扩展各种实用功能，也可以稍加改造应用于高铁、公交等类似图形展示。阅读全文

posted @ 2016-12-13 14:36 TWaver 阅读(734) | 评论 (0) | 编辑收藏

10个TWaver网页3D可视化精彩案例

摘要: 以下网页3D案例均为TWaver原创出品，推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行。案例排名不分先后，如需Demo，可直接申请试用。阅读全文

posted @ 2016-12-09 15:29 TWaver 阅读(528) | 评论 (0) | 编辑收藏

HTML5数据可视化第三弹：萌萌哒拓扑图分组

摘要: 3D虽然炫酷，但在真正的企业应用里，数据、关系的呈现还是要回到传统的2D界面，而HTML5是目前的最佳选择。像HTML5的canvas，虽然已经不是什么新鲜技术了，但可以直接在浏览器中绘制网络拓扑图的逻辑关系，而不需要安装任何插件，对于很多正在更新换代的OSS系统来说，还是很有吸引力的。阅读全文

posted @ 2016-12-02 10:26 TWaver 阅读(558) | 评论 (0) | 编辑收藏

TWaver3D拓扑图之人在江湖

摘要: 正看文章的小哥，我看你骨骼精奇，是个练武的奇才！我这里有一部TWaver3D宝典，何不入我赛瓦门，咱们一起闯荡江湖！阅读全文

posted @ 2016-11-24 10:03 TWaver 阅读(360) | 评论 (0) | 编辑收藏

TWaver3D拓扑图之球花绽放

摘要: 本文介绍了如何用TWaver HTML5制作3D拓扑图，代码不足一百行，让大家领略TWaver3D拓扑图的风采。实际上，这个例子稍作变化，就可以用来展示丰富的3D网络拓扑图、各种复杂数据的树状关系图。阅读全文

posted @ 2016-11-23 10:32 TWaver 阅读(290) | 评论 (0) | 编辑收藏

摘要: TWaver发布了一款全新的模型库框架TWaver® Make，来帮助开发者快速创建高质量、专业的行业可视化应用场景。TWaver® Make提供的是模版定义的开发SDK框架，和高质量的跨行业模型库。使用TWaver® Make，可以把TWaver 2D/3D的代码细节包装在模版中进行复用，极大的降低使用TWaver的复杂度，提高开发效率。模型库就像一本字典一样，开发着只需查阅模型id，就可以通过load方法快速加载使用这些内置模型。阅读全文

posted @ 2016-11-22 10:35 TWaver 阅读(394) | 评论 (0) | 编辑收藏

两步创建3D数据中心

摘要: TWaver 3D发布也有很长一段时间了，相关的应用和项目也做了不少，特别是3D机房，可是有些用户反馈说3D机房开发起来有些费劲，耗时，3D并不像2D，虽然有时更加的直观，但是需要考虑的问题也很多。本文着重介绍了如何通过两个简单的步骤来创建出一个3D数据中心。
阅读全文

posted @ 2016-11-21 11:25 TWaver 阅读(235) | 评论 (0) | 编辑收藏

HTML5数据可视化第二弹：打造最美3D机房

摘要: TWaver 3D产品的定位一直在于为企业提供3D应用的快速开发工具，方便企业开发适合自己的高效、实时的监控系统。用TWaver 3D开发的3D场景360度无死角，可绑定动态数据，轻松添加动画，在平板和手机上也能轻松运行。阅读全文

posted @ 2016-11-18 10:29 TWaver 阅读(781) | 评论 (0) | 编辑收藏

HTML5数据可视化第一弹：彩虹爆炸图

摘要: HTML5发展迅速、势不可挡。随着HTML5技术的普及，用HTML5做可视化呈现的项目越来越多了。HTML5的优势明显：网页上直接运行无需插件、手机平板方便兼容、代码开发和维护相对容易，等等。一大波一大波的做Java、.NET甚至C++桌面的程序老手们都纷纷开始研究javascript了，而初出茅庐的新一代程序猿更是义无反顾的直奔HTML5这个技术大热点而来。本文主要介绍了用HTML5实现的彩虹爆炸图，具有诸多功能，可用于大数据展示。阅读全文

posted @ 2016-11-17 10:52 TWaver 阅读(522) | 评论 (0) | 编辑收藏

HTML5复杂拓扑图（五） Reingold Tilford树

摘要: 前段时间，有个项目需要显示一个很大的树形拓扑结构图，而布局怎么都不好看。要生成一颗比较布局规矩、好看的树状图，一个成熟、高效的树形布局算法必不可少。Reingold Tilford是常用的一个，大家可以google一下。这个算法最先是由Edward Reingold和John Tilford一起发表的，并由他们的名字命名。有兴趣的同学，可以研究一下这篇1981年的论文：http://emr.cs.iit.edu/~reingold/tidier-drawings.pdf，里面给出了这个算法的原理和逻辑代码。这个算法的优点是逻辑相对简单，效率高。不过用js写一遍也要消耗很多脑细胞。还要，twaver直接提供了这种算法和自动布局，我们可以直接使用。下面看一看这种布局的用途。利用Reingold Tilford树算法，我们可以把一个树形结构的数据，用不重叠、紧凑、分层的形式展示出来。阅读全文

posted @ 2015-05-22 17:37 TWaver 阅读(6620) | 评论 (2) | 编辑收藏

HTML5复杂拓扑图（四）组织结构图

摘要: 应广大客户所需，今天给大家带来一款组织结构图。组织结构图的呈现方式多种多样，用途也是非常广泛，可以应用于集团内部，企业各部门之间的组织关系呈现。我们就来看看twaver实现出来的效果。阅读全文

posted @ 2015-05-22 17:33 TWaver 阅读(5205) | 评论 (1) | 编辑收藏

HTML5复杂拓扑图（三）可伸展流程图

摘要: 说到TWaver的流程图却是层出不穷，千姿百态。2D的，3D的，静态的，动态的。这次要给大家呈现的是一款全矢量的，非常清新优美的流程图。阅读全文

posted @ 2015-05-22 17:29 TWaver 阅读(3901) | 评论 (0) | 编辑收藏

HTML5复杂拓扑图（二）关系网图

摘要: 在公司内部，不仅部门内部员工之间发生着关系往来，部门和部门之间的员工也在发生这各种往来关系。如果你还是用原先的那种表格来呈现，显然很难直观看出各种关系，用图形化的拓扑呈现就会显得一目了然。阅读全文

posted @ 2015-05-22 17:06 TWaver 阅读(3592) | 评论 (0) | 编辑收藏

数字图像处理技术在TWaver可视化中的应用

摘要: 数字图像处理（Digital Image Processing）又称为计算机图像处理，它是指将图像信号转换成数字信号并利用计算机对其进行处理的过程。常用的图像处理方法有图像增强、复原、编码、压缩等，数字图像处理应用领域非常广泛。具体关于数字图像处理的介绍可以参考书籍《冈萨雷斯数字图像处理》。
TWaver作为可视化的利器，如果在展示网元的时候，融入图像处理技术，将会对网元图标的显示增加了灵活性，是一件非常有意思的事情。那么我们不妨来试试，如何将图像处理技术融入进来。阅读全文

posted @ 2015-04-16 14:21 TWaver 阅读(1159) | 评论 (0) | 编辑收藏

当ECharts碰到TWaver

摘要: 百度公司的ECharts发展迅速，已经成为HTML5 Chart的佼佼者，这让大家骄傲：中国人终于也有世界级的开源通用UI产品了。正如其网站所说，它是百度的，是中国的，也是世界的。想想那些年，我们追逐感慨过的chart产品，fusionchart、highchart等等不计其数，随着HTML5的迅速普及和ECharts的疯狂发展，大家可以忘掉那些产品了。其他商业chart产品基本上也离颤抖中关门的日子不远了。阅读全文

posted @ 2015-03-24 10:01 TWaver 阅读(2264) | 评论 (0) | 编辑收藏

TWaver GIS制作穹顶之下的雾霾地图

摘要: 用TWaver GIS实现全国雾霾图示例，查看更多。阅读全文

posted @ 2015-03-18 14:14 TWaver 阅读(4110) | 评论 (0) | 编辑收藏

TWaver HTML5之树形布局

摘要: 今天是春节后上班的第三天，给大家分享一下我们前段时间的一个需求，需求是这样的：界面中的网元分为不同的域，比如一级域，二级域，三级域，….N级域，而且不同域之间会有连线。对于这个需求，按照常规的想法，使用group岂不是很简单，一级域是一个group，二级域也是一个group，二级域的group是一级域的父亲，以此类推。但是这样有个问题，如果域比较多，会造成group的过度嵌套，界面中group多了之后，不仅用户体验下降，而且会严重影响性能，所以倒不如直接用树，可以很直观的体现各个域之间的层级关系。阅读全文

posted @ 2015-03-11 10:45 TWaver 阅读(5222) | 评论 (0) | 编辑收藏

TWaver推智能手表挑战华为苹果

摘要: 2015年的春节刚过，苹果、华为、三星就紧锣密鼓的发布了各自新产品。华为、苹果的智能手表最吸引眼球。TWaver也不甘示弱，立刻连夜推出了更像传统奢侈豪华手表的TWaver Watch，予以反击。看来一场腥风血雨的残酷竞争不可避免。下面就带大家先睹TWaver手表的芳容。阅读全文

posted @ 2015-03-04 10:26 TWaver 阅读(3537) | 评论 (1) | 编辑收藏

3D赛瓦号——整装待发！

摘要: 随着岁末将至，twaver开发团队依旧马不停蹄，3d产品功能持续更新，新特效和功能目不暇接。现在，我们就利用一些新功能，制作一个全新“赛瓦号”飞船，大家看一下仿真程度是否有质的不同？阅读全文

posted @ 2015-02-16 10:34 TWaver 阅读(5412) | 评论 (2) | 编辑收藏

TWaver 3D作品Viewer查看器

摘要: 为了让开发者更方便的对各类3D模型、设备、物体进行浏览和查看，我们直接封装了mono.Viewer组件。它可以直接根据给定的数据源（json、obj、url等）进行数据加载和浏览展示。对于一般的3D设备、图纸、作品的展示，它可是非常方便了，一句new mono.Viewer()就解决了所有问题。各种常见的交互设置、灯光设置、呈现方式等，都已经直接封装其中。阅读全文

posted @ 2015-02-15 10:07 TWaver 阅读(3640) | 评论 (1) | 编辑收藏

3D特效之高光反射

摘要: 前篇我们介绍了TWaver 3D的环境映射特效，下面我们接着给大家分享高光反射特效。
高光反射定义了物体上的某一区域比其他地方更反光。在高光反射的贴图中，黑色区域的反射率为0（完全不反光），白色区域的反射率为100%（完全反光）。这在现实的生活中，也是随处可见，比如一个生锈的物体用低光，而一个抛光的金属应该用高强光；手表上的表盘比表带应该更反光；人的嘴唇应该比皮肤有更强的高光，而皮肤应该比纯棉衣服更反光。加上了这种高光效果后，会是3D物体更加真实，更加生动。
接下来我们就来讲解一下如何在一个模型中使用高光反射，比如我们需要创建一个大楼的建筑物。一个cube贴上建筑物的贴图就可以模拟了。我们准备了一张玻璃的贴图：阅读全文

posted @ 2015-02-06 10:18 TWaver 阅读(4198) | 评论 (3) | 编辑收藏

TWaver 3D应用于大型数据中心(续)

摘要: 在2014年11月份，我们当时发了一篇有关TWaver HTML5 3D应用于大型数据中心的文章，该blog比较详细的描述一些常用的功能的实现方法，比如：动态添加机柜，告警，温度，湿度等相关的功能的具体实现。其实会用这些东西的话基本上可以使用我们的TWaver HTML5 3D来实现相关的应用了，可是在有些客户觉得这还不够“动态”，都是代码一下生成的，少了一些交互，前些天同事说要不再加点功能，让它更加“动”一些，所以今天我抽了个时间再接着来个“续”——动态的添加机柜，主机和告警。阅读全文

posted @ 2015-02-04 11:50 TWaver 阅读(4127) | 评论 (1) | 编辑收藏

TWaver矢量小试——Android演进路线图

摘要: 还有半个多月就到春节了，年底相信很多公司都会进行年度总结以及公司发展状况总结，在这过程中难免会用到RoadMap，在这我们也使用TWaver的矢量部分绘制一个Android系统的发展历程。先看效果。阅读全文

posted @ 2015-02-02 11:42 TWaver 阅读(3751) | 评论 (1) | 编辑收藏

TWaver 3D特效系列之环境映射

摘要: 随着TWaver3D的快速发展，越来越多的各种功能都在不断加强，包括性能的极大提升（可以参考这里）,3D编辑器的易用性和功能持续增强(欢迎大家申请试用),各种特效的增加，特效是本文的主角。阅读全文

posted @ 2015-01-28 15:26 TWaver 阅读(1513) | 评论 (2) | 编辑收藏

TWaver动画之雷达扫描效果

摘要: UI和功能是好的产品的两个重要因素，很多产品往往只注重功能上的设计，而忽略了UI。在这个“看脸”的时代，就算产品的功能很强大，如果UI跟不上步伐，你的产品都会在客户心中大打折扣。如何利用TWaver实现动画之雷达扫描效果呢，点击看文章。阅读全文

posted @ 2015-01-26 13:54 TWaver 阅读(2662) | 评论 (1) | 编辑收藏

基于APE物理引擎的管线容积率计算方法

摘要: 容积率一般应用在房地产开发中,是指用地范围内地上总建筑面积与项目总用地面积的比值，这个参数是衡量建设用地使用强度的一项非常重要的指标。在其他行业，容积率的计算也非常重要，如产品利用率、管道使用率等等。那么在监控系统中，如何能够生动形象的表达容积率的计算，是的监控系统具有准确性、安全性的同时，还具备了多样性，良好交互性等等。最近的游戏产业发展也非常迅速，在手持终端3D的游戏也越来越多，那么如果我们将游戏引擎融入到监控系统中，会实现什么样的效果呢，本文重点介绍使用APE物理引擎结合TWaver 2D产品实现管线的容积率计算。先来看下效果：阅读全文

posted @ 2015-01-19 10:31 TWaver 阅读(883) | 评论 (0) | 编辑收藏

HTML5 实现Link跳线效果

摘要: 之前我们推出过Flex版本的Link跳线效果，现在基于HTML5新版本的跳线效果也实现了，细微之处我们进行了改进，如link倾斜的时候Offset方向始终保持垂直等。先看效果。阅读全文

posted @ 2015-01-15 13:54 TWaver 阅读(3810) | 评论 (0) | 编辑收藏

在TWaver的Tree节点上画线

摘要: 论坛上有同学提出如何在tree上画引导线，之前我们Flex已经实现此功能，现在最新版的HTML5也将添加此功能。先看看效果吧。阅读全文

posted @ 2015-01-13 10:17 TWaver 阅读(3093) | 评论 (0) | 编辑收藏

如何用TWaver加载大型游戏场景

摘要: 游戏中经常会出现一些大型的户外场景，例如一个小镇、一座古城等。通常这种场景中包含了较多的建筑、道路、桥梁等等元素，其3D模型比较大且复杂。在使用TWaver加载时，可使用一些技巧，让加载速度更快、显示更流畅。阅读全文

posted @ 2015-01-06 13:41 TWaver 阅读(4220) | 评论 (1) | 编辑收藏

22万个木箱！TWaver 3D极限压榨

摘要: 打开个门户网站都千呼万唤，我们还能期待网页上的3D技术会有“酣畅淋漓”、“一气呵成”的感受吗？也许现在还差点火候。但是HTML5、WebGL等技术一直在飞速的发展，可能很快你就会惊讶它的能力。现在，我们就试试TWaver的3D能显示多少个木箱子，透明的木箱子。数据量当然要大才行，10万个怎么样？干脆试试20万好了，具体说是60的立方矩阵=60x60x60=216000个。只有压榨到极限才能了解WebGL和TWaver 3D技术适合做什么应用。下面就Let’s go吧！阅读全文

posted @ 2014-12-29 11:11 TWaver 阅读(4494) | 评论 (0) | 编辑收藏

如何在MONO 3D寻找最短路路径

摘要: 前段时间有个客户说他们想在我们的3D的机房中找从A点到B点的最短路径，然而在2D中确实有很多成熟的寻路算法，其中A*是最为常见的，而这个Demo也是用的A*算法。阅读全文

posted @ 2014-12-02 10:37 TWaver 阅读(6677) | 评论 (0) | 编辑收藏

如何创建TWaver 3D的轮廓选中效果

摘要: TWaver 3D中，物体的默认的选中效果一般都是一个方方正正的外框。在HTML5的Mono版本中，TWaver提供了轮廓线样式的选中效果。阅读全文

posted @ 2014-11-03 10:31 TWaver 阅读(5956) | 评论 (1) | 编辑收藏

巧用TWaver 3D 矢量图形功能

摘要: 的确，提起TWaver，大家想到的首先是“电信拓扑图组件”。其实，由于其灵活的MVC架构、矢量化设计、方便定制等特点，TWaver可以做的还有很多。例如房地产行业常见到的“户型图”。阅读全文

posted @ 2014-10-29 10:59 TWaver 阅读(5318) | 评论 (1) | 编辑收藏

TWaver 3D实现颜色渐变

摘要: 一般而言，需要实现3D物体的渐变，通常的思路就是通过2D绘制一张渐变canvas图片作为3D对象的贴图，这种方式是可以解决这类问题的，不过对于一般用户而言，通过2D生成一张渐变的图片，有一定的难度，另外如果要生成的图片比较多，性能效率上会成为一个瓶颈，特别是渐变随着条件在不断变化的情况下，就需要每次绘制的时候都去生成一张渐变的canvas图，效率极其低。阅读全文

posted @ 2014-10-21 13:27 TWaver 阅读(2504) | 评论 (0) | 编辑收藏

解析JSON数据生成TWaver中的网元

摘要: 应客户需求写个Demo，Demo中包含一些常用的功能，包括解析JSON数据生成TWaver中的网元和连线，网元右下角带上不同标识的小图标，连线需要是二次曲线，弹出菜单和信息板，跟大家分享下。先上图让大家看看效果阅读全文

posted @ 2014-10-13 09:35 TWaver 阅读(5984) | 评论 (2) | 编辑收藏

MONO中动画的导出与播放

摘要: 使用过MONO编辑器的朋友都应该了解MONO中支持一些动画的设置，比如开门，开窗，弹出设备，旋转场景，镜头巡航等。但如何将这些动画应用到自己的场景中呢？比如我们在编辑器中给机柜定义了动画，怎样让做好的机柜模型加载到自己的场景中并能播放动画呢？别急，我们来举个例子给大家讲解一下。阅读全文

posted @ 2014-10-11 10:21 TWaver 阅读(3190) | 评论 (1) | 编辑收藏

TWaver GIS在电信中的使用

摘要: TWaver提供的是电信行业中的图形解决方案，TWaver GIS是基于地图服务的一套解决方案。您可以这样理解，TWaver GIS就是在地理信息系统（GIS）上使用TWaver，TWaver的各种图形组件都可以在GIS上使用。TWaver本身不提供地图数据，我们与传统的arcgis相比更轻量，更简单，而且价格也更便宜，我们更加专注在地图上来实现复杂的电信业务，可以兼容OpenstreetMap，BingMap，GoogleMap，MapABC等多种主流地图。甚至只要你的地图是ogc标准的WMS服务格式，我们都是可以支持的。阅读全文

posted @ 2014-10-09 14:48 TWaver 阅读(2342) | 评论 (0) | 编辑收藏

如何创建环型、树型双层布局

摘要: TWaver的Demo中有常用的环型布局和树型布局，但是当网元数量较多，又不想zoomOverView,我们自然会想到使用双层布局，整体效果既不会显得很拥挤。阅读全文

posted @ 2014-09-19 10:42 TWaver 阅读(3172) | 评论 (2) | 编辑收藏

如何创建发光的环路

摘要: 如何获取整条回路的所有link，并使之发光。在这个Demo中主要包含三个技术点，一是如何在选取一条链路时，让整条回路发光；二是如何绘制带有箭头方向的曲线link；三是如何设置链路的样式，让整体可控。
阅读全文

posted @ 2014-09-16 13:36 TWaver 阅读(2964) | 评论 (0) | 编辑收藏

服务器各项指标的图形化显示

摘要: 在机房的监控时，经常需要去查看某个机柜中的某一台服务器的各项指标，比如该台服务器的CPU的使用情况、该台服务器的硬盘的使用情况、以及网络的流量等等，本文我们将用TWaver 3D来实现一下该例子。阅读全文

posted @ 2014-09-11 11:32 TWaver 阅读(3571) | 评论 (4) | 编辑收藏

HTML5定制全选列头

摘要: 随着HTML5产品分支的不断深入使用，HTML5的需求也是越来越多，表格组件的使用也不例外，什么排序，分页，自动列宽等。最近有客户提出了如果让表格的列头加上全选的功能。细细分析其实就是两部分，表格的body部分是勾选的列，表头也绘制成勾选的列。阅读全文

posted @ 2014-09-10 14:50 TWaver 阅读(3215) | 评论 (0) | 编辑收藏

Autolayout性能优化

摘要: 最近有客户提出大数据量Topo图的自动布局问题，在Topo中除了Node、Link，还包括Group、Subnetwork等容器组件。在这样的情况下，我们抛开布局算法不谈，主要分析如何提高布局的性能，如何让TWaver能够支持更强大的数据量，让整体的布局效果更人性化。阅读全文

posted @ 2014-09-03 11:07 TWaver 阅读(3092) | 评论 (1) | 编辑收藏

DNA分子结构3D模型

摘要: 生物信息资源更新越来越快,使用可视化的方法来分析DNA序列已成为生物信息学的一个研究热点,用图形表示DNA序列的方法也越来越成熟。2011年，著名杂志《Science》发表一篇引起轰动的文章:《Presenting the Human Genome:Now is 3D!》,这篇文章完全给我们描述了人类基因组测序未来的蓝图，可见3D技术在很多领域都是发展方向。
使用mono可以快速的创建DNA分子结构立体模型，阅读全文

posted @ 2014-08-21 15:07 TWaver 阅读(621) | 评论 (0) | 编辑收藏

Group共享网元

摘要: 熟悉TWaver的用户都知道Group的概念，如果是Group，那必然会出现一个网元在多组的情况，最近有客户遇到这个问题，给写了Demo，这些也跟大家分享一下如何实现，先让我们看看共享网元的效果。阅读全文

posted @ 2014-08-12 16:59 TWaver 阅读(334) | 评论 (1) | 编辑收藏

TWaver MONO模板库新鲜出炉精彩纷呈

摘要: MONO Design在线3D建模平台网站, www.mono-design.cn，开发组的成员们已经开始紧锣密鼓的对这个平台进行内测。在之前的文章里，我们提到用户可以获得多种多样的TWaver官方模型库，现在已经新鲜出炉，让我们擦亮眼睛，一睹为快！阅读全文

posted @ 2014-08-05 11:32 TWaver 阅读(316) | 评论 (2) | 编辑收藏

TWaver版3D化学元素周期表

摘要: 技术上来说，用TWaver 3D来做的思路略有不同。最开始网上这个程序是使用HTML5、CSS3、WebGL、THREE.js、TWEEN.js等技术做的。使用TWaver就不用这么麻烦了，直接一个mono.js就差不多搞定了。技术上依旧是WebGL+js，但没有使用CSS3和其他框架。效果和效率都很好。阅读全文

posted @ 2014-07-14 10:12 TWaver 阅读(6827) | 评论 (25) | 编辑收藏

在MONO Design中使用Flex3D

摘要: 在项目开发组的努力下，HTML5 3D 的开发包变得越来越优秀，越来越健壮；基于HTML5 3D技术的MONO Design建模平台功能也变得越来越强大和完善，这个方便了很多使用我们HTML5 3D的用户。但是对于使用TWaver Flex 3D的用户而言，有个小小的遗憾就是：整个MONO Design是面向HTML5 3D技术的，而不是Flex 3D的。其实不然，虽然MONO Design本身不是Flex开发的，但是它却可以与Flex 2D、Flex 3D技术无缝集成。简单说：MONO Design所有建模的东西，都可以直接在Flex 3D中使用。您还管它MONO Design是什么技术开发的呢？阅读全文

posted @ 2014-07-08 10:02 TWaver 阅读(4907) | 评论 (5) | 编辑收藏

将2D的CAD图纸变成3D的MONO场景

摘要: 几年前TWaver Java就可以导入CAD图纸了，随着TWaver HTML5的流行，如今终于有了HTML5版本的导入CAD图纸功能。有了这个基础，再将2D的CAD图纸变成3D的MONO场景就变得非常轻松了。阅读全文

posted @ 2014-07-04 10:36 TWaver 阅读(5973) | 评论 (2) | 编辑收藏

Mono Design Demo展示

摘要: Mono Design不仅可以是用Editor快速创建3D机房，而且也可以使用代码创建3D产品。下面是通过代码实现的一个综合Demo。依然记得读高中的时候，每次到周一大扫除的时候，班主任总会说:“同学们，让我们全方位、立体式的大扫除吧”。那么现在就让我们来全方位、立体式的欣赏这个Demo吧！阅读全文

posted @ 2014-06-16 15:45 TWaver 阅读(2543) | 评论 (6) | 编辑收藏

TWaver 3D技术在油田行业的应用

摘要: TWaver通过MONO DESIGN平台提供了强大的油田行业3D建模工具。通过拖拖拽拽，可以轻松的创建各种油管、管汇、井口、输油、储油等设备。这些设备也可以通过平台进行新增和修改，并保存在公有云或私有云的服务器中。阅读全文

posted @ 2014-05-26 15:27 TWaver 阅读(741) | 评论 (1) | 编辑收藏

TWaver Flex生成在Android设备上的安装包（apk文件）

摘要: 前几篇文章讲解了怎样将TWaver Flex生成ipa文件，最近也有人问到怎样将TWaver Flex工程转成在Android上设备可运行的文件。然而生成apk文件要比生成ipa文件简单的多，生成速度也快很多。废话不多说，以下就是操作方法，我采用的依然是上次那两篇文字所用到只写了几行代码的两个工程：并且FlexMobile引用了MobileLibrary工程：两个工程的具体内容和TWaver Flex转iOS完全一样选中Flex Mobile工程下的运行文件（FlexMobile——FlexMobile.mxml）,右键——Export… : 选中Release Build,点击“Next”: 只勾选中“Google Andriod”，输入生成文件所在的路径，不填写的话最终的apk文件在Flex Mobile工程的根目录下，点击next 输入好以上的信息后，点击“Finish”就可以。阅读全文

posted @ 2013-07-23 11:17 TWaver 阅读(1938) | 评论 (6) | 编辑收藏

Editor动态设置

摘要: 属性编辑页面可以自己扩展editor，自定义A，B两个Editor，B的值受A值改变而改变思路很简单，存在一个容器，给TDataBox添加网元属性变化监听器ElementPropertyChangeListener，当网元属性A变化后，改变容器中的值，然后属性B的Editor加载容器中的值，这样就可以实现功能了可运行代码下载： Archive 阅读全文

posted @ 2013-07-23 11:02 TWaver 阅读(1634) | 评论 (3) | 编辑收藏

给网元添加倒影

摘要: 如果您拜读过Swing第五刀：走马观花看世博，您是否好奇Flex/Flash是否真的像Swing刀系列作者提到的那样，用Flex/Flash内置的动画、渲染、滤镜等机制可以实现各种“酷炫到底”的效果。先上个“给网元添加倒影”的图给您解下疑惑：

阅读全文

posted @ 2013-07-22 17:57 TWaver 阅读(989) | 评论 (0) | 编辑收藏

让JTextField添加“自动完成”功能（续）

摘要: 在让JTextField添加“自动完成”功能一文中收到了许多user 的反馈，其中有user提到需要能够在下拉列表中同时显示文字和图片。要实现下拉列表的这种功能，不用太难，给ComboBox设置一个Renderer 即可，ComboBox的Renderer默认是一个JLabel，而JLabel 本身就有设置Icon的功能，所以直接用默认的Renderer，并设置上图片即可，代码如下：在上面的代码中，通过文字去查找对应的图片，并设置Renderer 的Icon，其中getImageIcon方法如下，缓存了图片资源，这样不用每次刷新的时候去每次生成ImageIcon: 效果如下：全部代码： Source Code 阅读全文

posted @ 2013-07-22 17:31 TWaver 阅读(1591) | 评论 (3) | 编辑收藏

如何实现link多层bundle

摘要: TWaver默认的Link只能分组bundle，没有分层bundle（也就是展开一层后，再展开一层，或合并一层后，再合并一层），因为在多层bundle中，在中间层中，无法自动分辨是想合并还是展开。这里写个例子，屏蔽了默认的双击Link展开或者合并LinkBundle，通过按钮实现多层bundle（这里实现了两层的合并或展开）。 TWaver中相同Styles.LINK_BUNDLE_ID才能bundle，所以第一层Link分组设置Styles.LINK_BUNDLE_ID 第一层合并或展开，可以直接使用TWaver方法第二层合并，需要记录上一层的Styles.LINK_BUNDLE_ID，因为在展开时需要恢复原本的Styles.LINK_BUNDLE_ID，并需要设置Styles.LINK_BUNDLE_EXPANDED为false，最后重新设置所有Link的Styles.LINK_BUNDLE_ID为相同的值从完全合并第一次展开的时候，需要恢复原本的Styles.LINK_BUNDLE_ID，并将所有Link的original_bundle_id设置为null，设置e.setSt 阅读全文

posted @ 2013-07-22 15:33 TWaver 阅读(1718) | 评论 (0) | 编辑收藏

TWaver Flex 生成在iOS上可运行的ipa文件

摘要: 上次在TWaver Flex转iOS中讲述了怎样让TWaver的工程运行在iOS模拟器中，这次是怎样生成能在iOS中运行的ipa文件，接着上次的那工程接着整理。 1、点击Run —— Run Configurations（如果你用的是“Debug as”，那么最终打出的ipa文件是debug模式的）。 2、点击Run Configurations…进入如下界面： 3、点击了Configure后输入相关的证书信息： 4、点击ok后回到了刚才的界面： 5、修改FlexMobile-app.xml文件，修改id，（你在Apple Store上注册时的），通过更改此文件可以达到其他的效果，比如是否自动的旋转：输入id：设置是否旋转： 6、输入好上面的信息后，点击上面4中的“Run”，点击Run后需要你输入密码,如下图: 7、在6中输入了正确的密码后就开始生成相关的ipa文件，如下图：生成这个文件比价耗时，所以需要耐心的等待，可能需要20分钟吧，在这里慢比较正常；生成的文件在工程目录的bin-debug文件下。以上就是ipa文件的生成。阅读全文

posted @ 2013-07-19 17:00 TWaver 阅读(1450) | 评论 (0) | 编辑收藏

如何指定Node的Label的最大宽度

摘要: Network 上面的Node，默认情况是Label的折行只能通过HTML的
标签，这样做的弊端就是不能动态根据文字的长度智能折行。如果需要达到这个要求，需要定制Node的LabelAttachment。最初的想法是创建一个WrapLabelAttachment，继承自LabelAttachment，然后通过在一个JTextArea，设置文字，setLineWrap（true），指定JTextArea的宽度，然后把JTextArea 的内容绘制这个Attachment；在实现的过程中，发现JTextArea 有一个bug，就是折行的计算不准确，总是在右边留下很大的空白；如下图：测试代码：最后通过自己定制一个MyTextArea来实现，在MyTextArea中，用LineBreakMeasurer来计算动态折行：代码: 然后重写WrapLabelAttachment的 paintName 方法和getBounds 方法：代码: 代码: getBounds方法需要动态计算rect 的宽高。最终效果图：全部代码见附件： WrapLabelDemo 阅读全文

posted @ 2013-07-19 15:01 TWaver 阅读(1894) | 评论 (2) | 编辑收藏

TWaver Flex转iOS

摘要: 借助于Adobe Flash Builder 4.5.1 TWaver Flex可以转换为iOS本地程序，从而运行在iPad、iPhone等iOS系统上。准备：首先需要安装Adobe Flash Builder 4.5.1或以上版本如果需要在设备上调试或者发布到应用程序商店，还需要iOS开发者账号开始: 1:创建Flex Library project(File -> New -> Flex Library Project) 在Build Paths -> Library path选项页，点击Add SWC按钮添加TWaver.swc包，并且将Framework linkage改为Merged into code：创建示例程序：工程截图如下： 2：创建TWaver Mobile工程(File -> New -> … 阅读全文

posted @ 2013-07-19 14:19 TWaver 阅读(1349) | 评论 (1) | 编辑收藏

赛瓦软件参加2013中国国际广播电视信息网络展

摘要: 赛瓦软件将携TWaver HTML5-Mobile应用解决方案和TWaver 3D-三维模拟监控应用解决方案参加2013中国国际广播电视信息网络展览会。

阅读全文

posted @ 2013-07-19 11:00 TWaver 阅读(881) | 评论 (0) | 编辑收藏

TWaver Android 1.0 正式发布

摘要:

TWaver Android 1.0正式发布，欢迎申请试用：http://twaver.servasoft.com/download/download-product 阅读全文

posted @ 2013-07-19 10:51 TWaver 阅读(984) | 评论 (0) | 编辑收藏

用TWaver实现组合的Chart

摘要: TWaver组件中提供了一些通用的Chart，比如Line Chart，Bar Chart，Bubble Chart，Percent Chart等，对于一些复杂的Chart我们也可以通过定制的方式来实现，如前面所给出的用swing制作精美ERP图表，仔细看来这些Chart都是单个chart图，有客户要实现多个Chart的整合，比如Line Chart和Bar Chart组合显示，这该如何来实现？通常我们想到的方式是通过叠加来显示，将TWaver的这两个组件叠加起来，但这会带来很多不必要的麻烦，下面我们通过定制Chart的方式来实现，先看看最终的实现效果... 阅读全文

posted @ 2013-01-21 10:38 TWaver 阅读(1794) | 评论 (0) | 编辑收藏

关注细节－TWaver Android

摘要: 一款优秀的产品体现在细节，UI产品更是如此，精确到每个像素，平衡性能与效果的最佳点，是我们追求的目标，细节的实现过程会有困难，结果却让人兴奋，TWaver Android的开发正是如此，所以我忍不住想分享一些细节点... 阅读全文

posted @ 2013-01-14 11:04 TWaver 阅读(1404) | 评论 (0) | 编辑收藏

Hello TWaver Android

摘要: 准备工作
首先需要搭建Android开发环境，安装eclipse和ADT（Android Development Tools）插件，并在Android SDK Manager中安装需要的SDK。开发人员需要掌握Java编程语言，具备Android开发的能力，最后你需要TWaver Android开发库文件（twaver.android.jar），这样就可以开始TWaver Android的开发了。

下面将以最简单的Hello TWaver示例来作分步详解。

新建Hello TWaver工程
导入twaver.android.jar类库

编写Hello TWaver

运行与调试
Android模拟器

得到下面的界面；阅读全文

posted @ 2012-12-28 12:20 TWaver 阅读(2081) | 评论 (0) | 编辑收藏

Android特性

摘要: Android特性
Android是Google公司基于Linux内核的开源操作系统，主要用于移动设备，目前在智能手机市场占有重要份额。Android应用层使用Java语言开发，运行于Dalvik虚拟机，每个Android应用运行在独立的虚拟机中，这保证了各应用间资源的保护和线程安全。

Android架构简图

Android编程方式：Java，NDK，HTML

通常使用Java语言开发Android应用，但也可借助其他语言，如Android NDK（Native Development Kit）开发模式，可用Java调用C语言库，此外HTML也可以包装成Android应用。

三种方式都有各自的特点，Java为Android原生支持的语言，便于开发本地应用，随着Android系统的不断优化，其效率也在不断提升，TWaver Android就使用Java开发；Androi 阅读全文

posted @ 2012-12-27 10:37 TWaver 阅读(2379) | 评论 (3) | 编辑收藏

TWaver Java内存占用测试

摘要: TWaver Java的性能大家有目共睹，内存占用情况又怎么样呢？不同的数量级下内存增长情况是怎样的？视图组件对内存的影响有多大？我们分别测试了

只把网元加入DataBox
把网元加入DataBox并在Network上显示
把网元加入DataBox并在Tree上显示
把网元加入DataBox并在Tree和Network上显示

这四种情况下不同数量级别的网元的内存占用情况，供大家参考…… 阅读全文

posted @ 2012-12-24 16:12 TWaver 阅读(1401) | 评论 (0) | 编辑收藏

为TWaver HTML5的Tree组件增加鼠标滑过效果

摘要: 出于效率和保持js库最小化的考虑，TWaver HTML5的Tree组件默认的交互方式比较单调，只有选中改变文字背景；但是这不代表TWaver功能不够强大，TWaver预留了很多可以重载的方法，在本文中我们就利用这些方法实现鼠标滑过变色的效果。
先来张gif图片看看效果... 阅读全文

posted @ 2012-11-28 13:56 TWaver 阅读(1566) | 评论 (0) | 编辑收藏

TWaver HTML5 on Microsoft Surface RT

摘要: 公司新入了一台Surface RT(64G，高配啊，再看看我那乞丐版的IPad2，内牛满面…)，测试了下TWaver HTML5运行良好，废话不多说，上照片视频... 阅读全文

posted @ 2012-11-21 15:07 TWaver 阅读(1118) | 评论 (0) | 编辑收藏

TWaver HTML5 继承结构和成员说明

摘要: JavaScript是一门动态语言，但是面向对象的特征没有Java那么明显，导致我们开发起来非常不习惯。拿继承来说，Java中有专门的extends和implements关键字实现，但是在JavaScript却引入了一个”别扭的”prototype，而且实现方式有很多种，虽然灵活，却很容易让初学者一头雾水不知所措。TWaver HTML5的doc是一个js文件，对编辑器很友好，但是我们看起来却不是很方便，远不如JavaDoc来得一目了然，于是我们做了另一个html，算是对原js格式doc的补充。先看一下最后完成的效果：阅读全文

posted @ 2012-11-16 16:46 TWaver 阅读(1874) | 评论 (0) | 编辑收藏

JTree实现文件树

摘要: 这篇文章介绍的内容其实跟TWaver的组件没有任何关系，但是个人觉得还是挺有意思的，所以发出来共享一下。这个文件树(如下图)完全基于swing的JTree组件实现，先看一下最后我们完成的效果... 阅读全文

posted @ 2012-11-02 15:20 TWaver 阅读(2473) | 评论 (0) | 编辑收藏

TWaver 3D for Flex 3.0发布

摘要: 随着Stage3D技术的推广，为了进一步提升TWaver 3D产品的性能和渲染效果，TWaver提供了全新3.0版本，支持Stage3D，并且保持绝大部分接口不变化。对于3.0之前版本的用户，可以与相关的TWaver技术支持人员联系获得更新接口介绍。新用户则可以直接享受Stage3D带来的流畅和新增效果了。
今天先让我们来简单介绍一下这个产品的功能点。
它轻松实现2000个节点的3D渲染不再过于吃力阅读全文

posted @ 2012-10-16 16:32 TWaver 阅读(1314) | 评论 (0) | 编辑收藏

TWaver局部自动布局及嵌套Group处理

摘要: TWaver提供了一些布局算法帮助我们快速为网元设置位置，很多情况下已经够用了，但是对于一些复杂的布局还需要我们自己做一些处理，看下面这个例子：阅读全文

posted @ 2012-10-10 16:26 TWaver 阅读(2410) | 评论 (0) | 编辑收藏

TWaver With JavaFX

摘要: JavaFX Script被抛弃以后，很久不关心JavaFX了，偶然发现JavaFX已经发展到2.2，而且已经绑定到JDK7中，看来Oracle对它还是蛮重视的。
看到有人在论坛提问TWaver有没有JavaFX版本，于是去Oracle网站上逛了一下，发现可以将JavaFX集成进Swing程序中，真是福音啊，立马动手写了个Demo，集成起来还是很方便的。阅读全文

posted @ 2012-09-26 10:38 TWaver 阅读(1201) | 评论 (0) | 编辑收藏

如何在TWaver Flex中定制Tree的tooltip

摘要: 如果您显示过Tree的ToolTip，会发现这个tooltip离鼠标太远了；而且也无法跟随鼠标一起移动；最重要的是，如果想动态更改tooltip也很麻烦。阅读全文

posted @ 2012-09-20 10:10 TWaver 阅读(1359) | 评论 (0) | 编辑收藏

如何让HTML5的表格支持后台排序与分页

摘要: TWaver HTML5发布已有一段时间，使用的客户也是逐渐增加，于是我也迫不及待的申请了一个试用版来写一个小网页，最近正在写到数据查询，表格TWaver HTML5发布已有一段时间，使用的客户也是逐渐增加，于是我也迫不及待的申请了一个试用版来写一个小网页，最近正在写到数据查询，表格显示的功能。表格组件在HTML5中是提供的，查看TWaver提供了Demo,表格的使用还是蛮多的，于是并参考了其中的一个Demo，新建一个表格，并给表格赋值。很快一张表格就生成了。阅读全文

posted @ 2012-08-21 16:37 TWaver 阅读(2187) | 评论 (0) | 编辑收藏

自定义Background

摘要: TWaver提供了ImageBackground来为TNetwork设置背景，ImageBackground可以设置为颜色，渐变色，图片或纹理，但是如果想设置多张图片为背景，或者需要准确的定位背景（比如居中），ImageBackground就无能为力了，下面看我的解决方案：
既然ImageBackground无法满足需求了，我们就自己写一个，得益于TWaver优秀的设计，我们可以很容易的扩展原有的类，然后加上自己的功能。通过查看API得知，ImageBackground继承自AbstractBackground，我们干脆抛弃ImageBackground，自己从AbstractBackground继承。考虑到有可能需要多张图片组合成一个背景，我们引入Layer的概念，在我们自定义的Background维护一个集合，存储Layer的信息，绘制背景的时候从集合中取出Layer统一渲染。阅读全文

posted @ 2012-08-17 11:00 TWaver 阅读(1430) | 评论 (0) | 编辑收藏

GeoServer快速发布地图数据

摘要: TWaver GIS提供了WMS的客户端支持，可以访问地图服务器的相关服务。在平时的中小项目中，购买一套GIS服务实在是一个很大的成本负担，在不降低地图发布能力的前提下，减少成本支出成为各个项目的一个重要方面。在用户手中已经持有地图的矢量数据的时候，选择个价廉物美的GIS服务器就成为降低成本的重要手段，在这里给大家推荐GeoServer。
关于GeoServer发布地图数据，大家可以到http://docs.geoserver.org/stable/en/user/gettingstarted/shapefile-quickstart/index.html查看官方资料。在发布的时候，使用shp格式的空间数据就可以了。今天我们在这里给大家突出的强调几个小细节，方便大家在GeoServer上快速发布地图数据。细节如下…… 阅读全文

posted @ 2012-08-07 10:38 TWaver 阅读(2786) | 评论 (0) | 编辑收藏

利用Layer优化Group显示

摘要: 每天逛逛TWaver论坛已经成为一种习惯，今天看到一个非常有意思的帖子：http://twaver.servasoft.com/forum/viewtopic.php?f=14&t=3129
当两个Group重叠时，Group中的Node会始终显示在两个Group之上，呈现结果如下图(引用了帖子中的图片)：阅读全文

posted @ 2012-08-07 09:53 TWaver 阅读(1053) | 评论 (0) | 编辑收藏

在3D场景中显示汉字

摘要: TWaver 3D for Flex本身支持3D文字的显示，但是用户必须嵌入一套字库才可以。对于国内客户来说，这一点就有些痛苦了，一个中文字库的体积太大，嵌入发布程序中的话，会增大发布包的大小，及时是远程加载，也会因为其恐怖的体积，让用户的web化设计面临网络情况的挑战。当然为了用户也可以去裁剪一个字库，把自己会用到的文字收入其中，做个可控数量级的枚举，但是实时系统在运行过程中，会碰到什么样的汉字也是个未知，很难做裁剪的时候枚举尽所需要的汉字。这个问题一直苦苦萦绕在每个人的心头。
，，，，，，
，，，，，，
终于，TWaver 3D支持动态贴图了，这里的动态贴图已经不只是说可以动态切换贴图资源的来源，更重要的是可以动态切换上在内存中生成的BitmapData对象。大家都知道，Flex的BitmapData支持将其UIComponent绘制出来，这一下子为我们解决汉字显示提供了一个非常便捷的方式，那就是我们把汉字写进一个TextInput组件中去，然后在把这个组件画到一个BitmapData对象中，然后在将这个对象变成我们一个3D对象的贴图（例如一个Plane，一阅读全文

posted @ 2012-08-06 18:00 TWaver 阅读(1113) | 评论 (0) | 编辑收藏

让Swing表格支持远程后台数据翻页

摘要: 在各种实际项目中，表格的远程数据翻页是一个最常见的应用。本文通过一个“阿里巴巴网站地址爬虫”的程序例子，介绍了如何让TWaver Java表格支持远程数据翻页功能。阅读全文

posted @ 2012-08-03 17:23 TWaver 阅读(1676) | 评论 (0) | 编辑收藏

UI定制总结

摘要: TWaver本身提供的丰富的设置选项,可以帮助我们快速实现各种绚丽的效果，但是在某些情况下,我们需要在网元上绘制一些图形来表示某种状态或业务信息，没问题，只需要一点点2D知识可以很容易实现这样的需求。

假设一种需求(仅仅是假设)，监控交换机各个端口的传输速度，并用柱状图动态显示，效果图如下：阅读全文

posted @ 2012-08-01 09:52 TWaver 阅读(949) | 评论 (0) | 编辑收藏

用Swing定制流动的Link样式

摘要: 想想Java2D中给我们提供的线的样式着实很少，除了直线，虚线，好像就没有其他的什么样式了，如果细心的童鞋还会发现，TWaver中倒是提供了一种比较特殊的连线，波浪曲折式的连线。阅读全文

posted @ 2012-07-27 16:52 TWaver 阅读(1263) | 评论 (1) | 编辑收藏

用TWaver HTML5定制五彩斑斓的链路

摘要: 最近有客户提到自定义链路的需求，个人感觉非常有代表意义，现在共享出来给大家参考一下。先来看看需求：

1.链路要分成两半，用两种颜色填充。
2.填充百分比在不同值域时，用不同颜色。
3.显示刻度
4.有个开关，可以控制链路变短，变短后，链路只画开始和结束部分（相当于原始链路的缩影），中间不画
5.如果有多条链路，链路合并后两端分别显示这些链路中的最高填充百分比
6.进入子网后，节点上显示和上层节点的连线信息阅读全文

posted @ 2012-07-17 11:20 TWaver 阅读(1550) | 评论 (0) | 编辑收藏

使用3D呈现拓扑的多层次结构

摘要: 关于3D场景在现在网管中的应用的讨论一直没有停止过，应用场景有哪些，应用的意义有哪些，可以为产品开发、为系统使用带来多少利益点等等。今天给大家介绍一种应用情景，希望能借此机会，抛砖引玉，引出更多更具有实际意义的应用需求来，为大家的应用系统的丰富性添砖加瓦。

注意：本文提供在线体验Demo和源代码下载。阅读全文

posted @ 2012-07-03 16:45 TWaver 阅读(1075) | 评论 (0) | 编辑收藏

减少Menu分割线的间距

摘要: 之前看到社区中有介绍怎么灵活的使用右键菜单，现在积累下来右键菜单的方式还是比较多的，初步了解一下：
1. 使用flash自带的右键菜单，通过ContextMenu来设置，这是twaver最早右键菜单的解决方法，但这种方式有一个不太好的地方是自带上了flash的信息，而且很讨厌的是去不掉。
2. 使用Menu，通过左键的方式来触发弹出Menu项。这个方式还是比较能够接受的，对于flash也没有版本的要求。
3. 使用Flash Player 11.2的新功能实现右键菜单，这种方式虽好，但是需要使用比较高的flash版本，但我们项目中很多用户还是老的版本，领导觉得这种方法不太适合我们。阅读全文

posted @ 2012-06-20 11:49 TWaver 阅读(1232) | 评论 (0) | 编辑收藏

让JTextField添加“自动完成”功能

摘要: 在越来越考虑“用户体验”的今天，一个简单的文本框也演进的越来越智能了。比如Google的搜索疏狂，比如邮件客户端的地址输入框等。本文将介绍如何让Java Swing的文本框也能轻松做到这一点。对了，完全不需要第三方库哦，几行代码就搞定了。阅读全文

posted @ 2012-06-12 14:28 TWaver 阅读(2556) | 评论 (4) | 编辑收藏

替换TWaver中Tree展开合并图标

摘要: TWaver最大的优点之一是“灵活的定制功能”。光说不练不行，来个例子演练一把：定制Tree节点的标签。

默认Tree和Network上的标签显示的是网元的name属性，设置Styles.TREE_LABEL属性后，可以让Tree显示Styles.TREE_LABEL的值，以达到Tree和Network显示不同标签的目的
如果觉得这样还不够，可以设置Tree#labelFunction，比如下面的代码可以让Node显示name，Link显示Styles.TREE_LABEL：
既然TWaver这么灵活，那Tree的展开合并图标能定制么？阅读全文

posted @ 2012-06-12 10:45 TWaver 阅读(1063) | 评论 (0) | 编辑收藏

设备的3D化展示

摘要: 现在收到的关于3D应用的需求主要集中在了4个方面，一是室外场景的再现，二是室内布局的呈现，三是单个设备对象的3D化呈现，四是空间交互。针对第三种需求，很多人都提出了设备打开动作，移出动作的需求，请看下面的用例展示：阅读全文

posted @ 2012-06-06 09:57 TWaver 阅读(1205) | 评论 (0) | 编辑收藏

TWaver网元动态转动效果

摘要: TWaver多个网元动态旋转效果阅读全文

posted @ 2012-06-05 17:54 TWaver 阅读(1374) | 评论 (0) | 编辑收藏

TWaver3D 编辑器的使用（二）—— 定制模板module

摘要: 在TWaver3D编辑器的设计中，借助于ModuleManager实现了模块（module）的动态加载，这样用户可以自定义扩展3D模板，用于增加可编辑对象，提高编辑器能力。那么如何来扩展这些模板呢，让我来带领大家认识一下Editor的动态module应用机制。
在实际应用的时候，用户需要更多的模型模板，用来做场景编辑，例如说新的设备，新的房型等等，这时能不能由用户进行模型模板的扩展呢？
我们举例来说，例如客户需要向设备上添加一个信号灯对象，那么怎么办，如何把这种模型模板添加到TWaver的3D编辑器中？阅读全文

posted @ 2012-05-31 16:08 TWaver 阅读(1435) | 评论 (1) | 编辑收藏

控制TList的限量多选

摘要: 人生就是一个不停选择的过程。所以，我们必须要谨慎的控制好你的选择。无论是TList的SelectionModel，还是我们的人生之路。阅读全文

posted @ 2012-05-30 09:55 TWaver 阅读(1397) | 评论 (1) | 编辑收藏

Java Web Start实践：动态生成JNLP

摘要: Java很早就推出了Java Web Start（简称JWS）技术，其目的是在桌面程序和Web页面之间搭起一个无缝的桥梁。不过JWS也是问题多多，bug频频。本文以2BizBox ERP项目为例，介绍了如何通过动态生成jnlp的方式来解决如何简单、快速的为海量用户通过JWS来部署Java应用。阅读全文

posted @ 2012-05-21 10:56 TWaver 阅读(2677) | 评论 (1) | 编辑收藏

打造模块化的TWaver Flex应用

摘要: 当Flex应用越来越庞大时，问题会越来越多：
1. SWF文件的大小也会越来越大；
2. 下载SWF文件的时间也会越来越长；
3. 如果有多个Flex应用，如何复用相同的代码（包括Flex Framework、自定义组件库和第三方包，比如TWaver Flex）；
4. 每次升级后，用户都需要再次重新下载新的SWF文件；
5. 如何在不修改并编译旧SWF文件的情况下，增加新功能...
本文详细介绍了RSL和Modular的结合，帮您打造模块化的、可扩展的、强壮的TWaver Flex应用... 阅读全文

posted @ 2012-05-10 11:55 TWaver 阅读(1689) | 评论 (1) | 编辑收藏

在TWaver Flex中实现垂直文字布局

摘要: 最近有客户提到如何让Network上网元的标签垂直显示，首先想到的就是每个字符之间插入一个回车，这个用Network#labelFunction就能达到目的。但效果不是很理想，中英文混合时，英文也被一个字母一个字母的分开了。有没有更好的方案了？答案是肯定的，借助于Flex的Flash Text Engine (FTE)和Text Layout Framework (TLF)，可以很容易的让文字从上到下显示... 阅读全文

posted @ 2012-05-04 11:30 TWaver 阅读(2259) | 评论 (1) | 编辑收藏

自定义告警染色

摘要: 在TWaver中，拓扑上的告警呈现的方式是多种多样的，最常见、最通用的是在原来的图片上叠加上告警级别所对应的颜色，这种方式是采取图片颜色叠加处理，也就是在原来网元的图片上叠加上告警的颜色，对于大部分的图片来说是没有什么问题的，比如任意从网上找两种图片进行告警渲染做测试，效果还是可以的，两张图片的染色都还有保持着告警的颜色。但有些图片的渲染就不是那么让人满意了，从客户那边取过来一个icon图片做了一下测试。阅读全文

posted @ 2012-05-03 14:13 TWaver 阅读(2040) | 评论 (3) | 编辑收藏

TWaver HTML5 高性能拓扑

摘要: TWaver HTML5临近发布，近期最大的惊喜是添加了一个高性能的拓扑实现，万级别的数据量，轻松搞定阅读全文

posted @ 2012-05-03 12:02 TWaver 阅读(1993) | 评论 (1) | 编辑收藏

HTML5 WebSocket 应用示例

摘要: 继续上一篇《HTML5 WebSocket 技术介绍》的内容，本篇将以示例说明WebSocket的使用，这个示例同时结合了TWaver HTML5的使用，场景如下：后台提供拓扑数据，并以JSON格式通过WebSocket推送到各个客户端，客户端获取到拓扑信息后，通过TWaver HTML5的Network组件呈现于界面，客户端可以操作网元，操作结果通过WebSocket提交到后台，后台服务器更新并通知所有的客户端刷新界面，此外后台服务器端还会不断产生告警，并推送到各个客户端更新界面。阅读全文

posted @ 2012-05-03 11:52 TWaver 阅读(4832) | 评论 (2) | 编辑收藏

HTML5 WebSocket 技术介绍

摘要: WebSocket介绍
webSocket是html5新引入的技术，允许后台随时向前端发送文本或者二进制消息，WebSocket是一种全新的协议，不属于http无状态协议，协议名为”ws”，这意味着一个websocket连接地址会是这样的写法：
ws://twaver.com:8080/webSocketServer。ws不是http，所以传统的web服务器不一定支持，需要服务器与浏览器同时支持， WebSocket才能正常运行，目前的支持还不普遍，需要特别的web服务器和现代的浏览器。阅读全文

posted @ 2012-05-03 09:57 TWaver 阅读(12085) | 评论 (2) | 编辑收藏

TWaver 3D 编辑器的使用（一）－－－－设计3D场景以及数据绑定

posted @ 2012-05-02 15:24 TWaver 阅读(1350) | 评论 (2) | 编辑收藏

TWaver HTML5 + Node.js + express + socket.io + redis（六）

摘要: 接上一篇TWaver HTML5 + Node.js + express + socket.io + redis（五）, 这一篇将讲解如何用模版生成html页面, 如何验证用户登录, 您将了解到:
1. 模版引擎jade
2. 使用express的session功能阅读全文

posted @ 2012-03-23 17:35 TWaver 阅读(2464) | 评论 (4) | 编辑收藏

TWaver在电力系统中的应用

摘要: 电力电气系统中这些界面都是由很多电气元素组成的，比如变压器，刀闸，开关，接地开关，电容器，发电机等。接下来我们看看如何去扩展这些电气元素，先整个简单的刀闸，刀闸一般有两种状态，打开关闭，因此我们可以定义一个刀闸的类，继承于ResizableNode,添加turnOn的属性来控制开关状态阅读全文

posted @ 2012-03-15 11:34 TWaver 阅读(1529) | 评论 (0) | 编辑收藏

Make an TWaver HTML5 iPhone App

摘要: 构建iOS App有很多技术方式可以选择，本文介绍基于UIWebView的Cocoa Touch组件嵌入HTML页面的方式实现的一个iPhone
App例子。文中将穿插iOS的基本内容，TWaver HTML5的基础应用，以及Objective C与Javascript相互调用的技术点。阅读全文

posted @ 2012-03-10 23:36 TWaver 阅读(1811) | 评论 (2) | 编辑收藏

TWaver 3D搭建户外拓扑场景

摘要: 采用平面方式展现机房室内场景是我们在平常的应用系统中最常见的界面，平面展现具有高效、直观、准确的优点，随着信息量的扩增和技术的发展，客户希望在系统能够提供更逼真的3D场景，用于增加系统的可阅读性。TWaver Flex 3D借用TWaver的Element对象，通过在Element对像上面扩展3D Style，实现了3D场景的再现。

人生是美好的，不过那可是由一系列的意外组合而成的。用户又问阅读全文

posted @ 2012-03-09 12:56 TWaver 阅读(1342) | 评论 (0) | 编辑收藏

TWaver HTML5 + Node.js + express + socket.io + redis（五）

摘要: 接上一回TWaver HTML5 + Node.js + express + socket.io + redis（四）, 这一篇您将了解到
1. 如何保存更改后的拓扑数据 (包括新增的, 修改的, 删除的)
2. 如何广播更改后的拓扑数据 (仅仅广播更改的数据)
下面是mac和iphone上的效果图, mac或iphone上的修改都将及时互相同步: 阅读全文

posted @ 2012-03-05 17:09 TWaver 阅读(1917) | 评论 (0) | 编辑收藏

TWaver在FTTX设备网管系统中的应用

摘要: 随着对带宽要求的越来越高，光网络设备已经逐渐取代老的传输介质成为主流，下面一个demo介绍了TWaver在FTTX设备网管中的一些应用场景阅读全文

posted @ 2012-03-02 15:10 TWaver 阅读(1585) | 评论 (0) | 编辑收藏

浏览器关闭时, 如何提醒用户保存Flex上的拓扑数据

摘要: 当浏览器关闭时, Flex如何能得到通知, 提醒用户保存数据阅读全文

posted @ 2012-02-29 17:51 TWaver 阅读(1487) | 评论 (2) | 编辑收藏

打造自己的Flex AIR标题栏

摘要: 如何用代码禁用Flex AIR程序标题栏的最大化, 最小化按钮阅读全文

posted @ 2012-02-29 14:51 TWaver 阅读(2336) | 评论 (0) | 编辑收藏

TWaver HTML5 + Node.js + express + socket.io + redis（四）

摘要:

在上一篇TWaver HTML5 + Node.js + express + socket.io + redis（三）中，您应该对Node.js的web框架express、实时通讯框架Socket.IO、redis客户端：redis有所了解了。这一篇将介绍TWaver HTML5的拓扑和通用组件功能，您将了解到： < 阅读全文

posted @ 2012-02-17 16:45 TWaver 阅读(2492) | 评论 (1) | 编辑收藏

Flex中定制带图标的Tooltip

摘要: “定制”无疑是TWaver中最大的一特色，无论是node，link，attachment，就连tooltip也同样可以定制，“定制”可以显示出更强更复杂的一些功能，今天给大家带来了一个定制Tooltip的例子。
阅读全文

posted @ 2012-02-09 17:44 TWaver 阅读(1849) | 评论 (0) | 编辑收藏

如何让Flex的Tree显示水平滚动条

摘要: 一直有人问为何设置了twaver.controls.Tree的horizontalScrollPolicy为 ScrollPolicy.AUTO，可是还是没有横向滚动条。这是由于Adobe出于性能的考虑，没有计算maxHorizontalScrollPosition的值。本文贴出了解决方案阅读全文

posted @ 2012-01-31 17:29 TWaver 阅读(2616) | 评论 (1) | 编辑收藏

日历

公告

常用链接

留言簿(14)

随笔档案(171)

文章档案(2)

新闻档案(1)

相册

搜索

最新随笔

最新评论

阅读排行榜

评论排行榜