TWaver - 专注UI技术

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

2014年7月4日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     摘要: 前段时间,有个项目需要显示一个很大的树形拓扑结构图,而布局怎么都不好看。要生成一颗比较布局规矩、好看的树状图,一个成熟、高效的树形布局算法必不可少。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 阅读(6534) | 评论 (2)编辑 收藏

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     摘要: 在项目开发组的努力下,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 阅读(4900) | 评论 (5)编辑 收藏

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

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