2012年7月27日随笔档案 - TWaver - 专注UI技术

2012年7月27日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TWaver3D拓扑图之人在江湖

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

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

TWaver3D拓扑图之球花绽放

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

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

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

posted @ 2016-11-22 10:35 TWaver 阅读(395) | 评论 (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 阅读(525) | 评论 (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 阅读(6628) | 评论 (2) | 编辑收藏

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

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

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

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

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

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

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

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

posted @ 2015-05-22 17:06 TWaver 阅读(3595) | 评论 (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 阅读(5224) | 评论 (0) | 编辑收藏

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

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

posted @ 2015-03-04 10:26 TWaver 阅读(3538) | 评论 (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 阅读(4200) | 评论 (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 阅读(3753) | 评论 (1) | 编辑收藏

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

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

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

TWaver动画之雷达扫描效果

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

posted @ 2015-01-26 13:54 TWaver 阅读(2663) | 评论 (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 阅读(4496) | 评论 (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 阅读(5957) | 评论 (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 阅读(3174) | 评论 (2) | 编辑收藏

如何创建发光的环路

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

posted @ 2014-09-16 13:36 TWaver 阅读(2965) | 评论 (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 阅读(3093) | 评论 (1) | 编辑收藏

DNA分子结构3D模型

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

posted @ 2014-08-21 15:07 TWaver 阅读(624) | 评论 (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 阅读(317) | 评论 (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 阅读(6832) | 评论 (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 阅读(2544) | 评论 (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 阅读(1592) | 评论 (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 阅读(1897) | 评论 (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 阅读(1795) | 评论 (0) | 编辑收藏

关注细节－TWaver Android

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

posted @ 2013-01-14 11:04 TWaver 阅读(1405) | 评论 (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 阅读(2380) | 评论 (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 阅读(1567) | 评论 (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 阅读(2474) | 评论 (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 阅读(2411) | 评论 (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) | 编辑收藏

日历

公告

常用链接

留言簿(14)

随笔档案(171)

文章档案(2)

新闻档案(1)

相册

搜索

最新随笔

最新评论

阅读排行榜

评论排行榜