TWaver HTML5
文章平均质量分 84
subnetwork
这个作者很懒,什么都没留下…
展开
-
TWaver HTML5 + Node.js + express + socket.io + redis(一)
TWaver HTML5即将发布,这里迫不及待的给大家介绍一下如何使用TWaver HTML5开发一套完整的拓扑系统。既然是完整的系统,那当然要涉及后台、数据库、数据交互等: 前台:TWaver HTML5是继TWaver Java、TWaver Web、TWaver Flex以及TWaver .NET后的又一全新分支;使用了HTML5技术,实现了拓扑、各种...原创 2011-12-24 20:09:44 · 122 阅读 · 0 评论 -
TWaver MONO模板库新鲜出炉 精彩纷呈
MONO Design在线3D建模平台网站, www.mono-design.cn,开发组的成员们已经开始紧锣密鼓的 对这个平台进行内测。在之前的文章里,我们提到用户可以获得多种多样的TWaver官方模型库, 现在已经新鲜出炉,让我们擦亮眼睛,一睹为快!模板图库闪耀登场…TWaver MONO Design模板库中,各式各样的办公桌、椅子等,快速拖拽,创意摆放,分分钟创建办公室工作场景。下面...原创 2014-08-05 11:39:33 · 151 阅读 · 0 评论 -
TWaver HTML5之树形布局
转眼间春节假期已经过完,作为一个职业的程序猿,不知道大家有没有这样的感觉,一天不碰电脑,总觉得生活少点什么。今天是春节后上班的第三天,给大家分享一下我们前段时间的一个需求,需求是这样的:界面中的网元分为不同的域,比如一级域,二级域,三级域,….N级域,而且不同域之间会有连线。对于这个需求,按照常规的想法,使用group岂不是很简单,一级域是一个group,二级域也是一个group,二级域的gro...原创 2015-03-11 10:53:43 · 298 阅读 · 0 评论 -
TWaver GIS制作穹顶之下的雾霾地图
“我不满意,我不想等待,我也不再推诿,我要站出来做一点什么。我要做的事,就在此时,就在此刻,就在此地,就在此生”。自离职央视后,沉寂许久的知名记者、主持人柴静昨日携个人视频新作 《穹顶之下》宣告归来,并在短时间内引起广泛关注。生活在这个地球上,空气质量的好坏决定这我们的健康,每个人都希望能够呼吸新鲜空气,都希望抬起头看到的是蓝天和白云,而不是灰蒙蒙的雾霾。说到雾霾,我们用TWaver GIS实现...原创 2015-03-18 14:31:42 · 231 阅读 · 1 评论 -
HTML5流程图之复杂关系网
关系网图的呈现方式多种多样,今天我们给大家分享的是和弦式的关系网图,先来看看效果:例子中我们展示的是各部门员工之间的复杂关系图。在公司内部,不仅部门内部员工之间发生着关系往来,部门和部门之间的员工也在发生这各种往来关系。如果你还是用原先的那种表格来呈现,显然很难直观看出各种关系,用图形化的拓扑呈现就会显得一目了然。好了,我们就来分析一下这张图如何用twaver实现它。首先我们要定义部门的网...原创 2015-05-06 17:10:00 · 1396 阅读 · 0 评论 -
HTML5流程图之矢量可伸展workflow
互联网购物成了当今非常热门的话题,各种购物网站,手机APP如雨后春笋般涌现出来。什么买衣服,买水果,买米,买油都得到了解决,自从有了这些app,再也不用去超市排着超长的队伍,扛着超重货物,骑着超累的车子了。之前每出一趟门买东西简直是跟参加了一场马拉松似的,现在好了,直接送货到家。那么在购物的背后又有什么样的流程呢,今天我们给大家介绍的是TWaver的另一款流程图。说到TWaver的流程图却是层出...2015-05-06 17:17:09 · 552 阅读 · 0 评论 -
HTML5组织结构图之名片式网元布局
组织结构图(Organization chart)是企业的流程运转、部门设置及职能规划等最基本的结构依据。和客户交流时,不少人都提到需要一个灵活的工具来绘制呈现企业的组织架构,今天就给大家带来一款用TWaver实现的组织结构图,提供多种布局方式,为了清晰呈现组织里每个人的职能,我们定制了名片样式来展示网元。首先来看下整体的效果,是上下布局的样式:也可以调整为圆形布局: 这些布局...原创 2015-05-07 11:43:40 · 751 阅读 · 0 评论 -
HTML5数据可视化第一弹:彩虹爆炸图
前言 25年过去了,Brooks博士著名的“没有银弹”的论断依旧没有被打破。HTML5也是一样。但这并不妨碍HTML5是一个越来越有威力的“炸蛋”:发展迅速、势不可挡。随着HTML5技术的普及,用HTML5做可视化呈现的项目越来越多了。HTML5的优势明显:网页上直接运行无需插件、手机平板方便兼容、代码开发和维护相对容易,等等。一大波一大波的做Java、.NET甚至C++桌面的程序老手...2015-05-19 15:23:53 · 688 阅读 · 0 评论 -
HTML5数据可视化第二弹:打造最美3D机房
最近项目开发任务告一段落,刚好有时间整理这大半年的一些成果。使用html5时间还不久,对js的认识还不够深入。没办法,以前一直搞java,对js的一些语言特性和概念一时还转换不过来。 上一篇第一弹介绍了项目中做的一个彩虹爆炸图,主要用了 html5的canvas的2d绘制技术。这一回我想介绍一下项目中的一个亮点技术:html5的3D,以及如何用它打造精美的3D机房监控系统。 目...原创 2015-06-01 14:25:33 · 1864 阅读 · 5 评论 -
HTML5定制全选列头
随着HTML5产品分支的不断深入使用,HTML5的需求也是越来越多,表格组件的使用也不例外,什么排序,分页,自动列宽等。最近有客户提出了如果让表格的列头加上全选的功能。细细分析其实就是两部分,表格的body部分是勾选的列,表头也绘制成勾选的列。对于表格body部分的勾选,最简单是应用TWaver默认的boolean类型的render,方法很简单,只要在创建表格列时设置下面的语句就行:...原创 2014-09-10 14:57:31 · 104 阅读 · 0 评论 -
服务器各项指标的图形化显示
在机房的监控时,经常需要去查看某个机柜中的某一台服务器的各项指标,比如该台服务器的CPU的使用情况、该台服务器的硬盘的使用情况、以及网络的流量等等,以下我们将用TWaver 3D来实现一下该例子:创建服务器上面显示的“磁盘空间”,“CPU占用率”,“内存空间”的函数:1function createPie(box, x,y,z, arc, color, text){...原创 2014-09-11 11:49:38 · 161 阅读 · 0 评论 -
如何创建环型、树型双层布局
TWaver的Demo中有常用的环型布局和树型布局,但是当网元数量较多,又不想zoomOverView,聪明的我们自然会想到使用双层布局,整体效果既不会显得很拥挤,也能刚好充满整个窗口,如下图的效果:实现这样布局效果实现的步骤:1.将link个数最多的Node作为圆点或顶点。2.分别计算所有点的位置。查找圆点或顶点的核心代码如下:1var sizes = [];...原创 2014-09-19 10:58:37 · 147 阅读 · 0 评论 -
看HTML5如何化解大型复杂网络拓扑图的分组嵌套效果
忙完3D,最近又开始用HTML5给客户开发网管界面。这次客户的需求很明确,要把一个关系很复杂的多层嵌套网络拓扑图做得尽可能美观和清晰。现实应用中,网络拓扑图结构可能很简单,也可能非常复杂,比如这种节点较多的单层拓扑:稍复杂一些的: 再复杂一些的: 在这些拓扑图中常见的场景是,很多网络节点需要组成一组,这常被称为“网元组”。一般来说,网元组会有一个形状,双击可以展开/闭合...2015-06-25 14:12:14 · 1950 阅读 · 1 评论 -
如何创建TWaver 3D的轮廓选中效果
在一般的游戏中,物体的选中效果会是这样:TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框。在HTML5的Mono版本中,TWaver提供了轮廓线样式的选中效果。通过如下代码把几个基本形状进行捏合,生成新的组合体:1var node=new mono.ComboNode(nodes, ops);2node.s({...原创 2014-11-03 10:44:45 · 114 阅读 · 0 评论 -
HTML5数据可视化第三弹:萌萌哒拓扑图分组
前言 最近忙着给客户折腾一个复杂的多层嵌套关系。客户一句话“要好看!”,哥就忙白了头啊,还好最终搞定了。 需求描述 先简单描述下这次客户的需求。现实应用中,网络拓扑图结构可能很简单,也可能非常复杂。比如这种节点较多的单层拓扑:稍复杂一些的: 再复杂一些的: 在这些拓扑图中常见的场景是,很多网络节点需要组成一组,这常被称为“网元组”...原创 2016-12-02 09:55:06 · 1010 阅读 · 0 评论 -
TWaver 3D应用于大型数据中心(续)
在2014年11月份,我们当时发了一篇有关TWaver HTML5 3D应用于大型数据中心的文章,该blog比较详细的描述一些常用的功能的实现方法,比如:动态添加机柜,告警,温度,湿度等相关的功能的具体实现。其实会用这些东西的话基本上可以使用我们的TWaver HTML5 3D来实现相关的应用了,可是在有些客户觉得这还不够“动态”,都是代码一下生成的,少了一些交互,前些天同事说要不再加点功能,让...原创 2015-02-04 12:00:55 · 239 阅读 · 0 评论 -
TWaver动画之雷达扫描效果
UI和功能是好的产品的两个重要因素,很多产品往往只注重功能上的设计,而忽略了UI。在这个“看脸”的时代,就算产品的功能很强大,如果UI跟不上步伐,你的产品都会在客户心中大打折扣。做安全和监控的项目中经常会进行扫描,一般会用一个gif图片来表示软件正在进行扫描,但是如果想更换这个图标的样式,就需要美工重新做图。TWaver提供了动画效果,如果对图标的动画样式不满意,可以通过简单的更改程序来实现,避...原创 2015-01-26 14:03:54 · 626 阅读 · 0 评论 -
TWaver HTML5 + Node.js + express + socket.io + redis(二)
在上一篇TWaver HTML5 + Node.js + express + socket.io + redis(一)中,给大家介绍了Node.js的安装;本篇将介绍Node.js的使用,您将了解到:1. Node.js的web框架:express2. Node.js的实时通讯框架:Socket.IO3. Node.js的redis客户端:redis...2011-12-31 16:08:52 · 100 阅读 · 0 评论 -
HTML5 WebSocket 技术介绍
WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这是“无法做到”的。传统服务端推(server push)技术WebSocket提出之前,为了解决后台推送消息到前台的需求,提出了一些解决方案,这些方案使用已有的技术(如ajax,iframe,...原创 2012-05-06 15:48:53 · 105 阅读 · 0 评论 -
HTML5 WebSocket 应用示例
继续上一篇《HTML5 WebSocket 技术介绍》的内容,本篇将以示例说明WebSocket的使用,这个示例同时结合了TWaver HTML5的使用,场景如下:后台提供拓扑数据,并以JSON格式通过WebSocket推送到各个客户端,客户端获取到拓扑信息后,通过TWaver HTML5的Network组件呈现于界面,客户端可以操作网元,操作结果通过WebSocket提交到后台,后台服...原创 2012-05-10 14:34:33 · 107 阅读 · 0 评论 -
Make an TWaver HTML5 iPhone App
构建iOS App有很多技术方式可以选择,本文介绍基于UIWebView的Cocoa Touch组件嵌入HTML页面的方式实现的一个iPhone App例子。文中将穿插iOS的基本内容,TWaver HTML5的基础应用,以及Objective C与Javascript相互调用的技术点。首先通过XCode构建个Empty Application即可创建一个UIVie...2012-03-16 17:45:55 · 115 阅读 · 0 评论 -
用TWaver HTML5定制五彩斑斓的链路
最近有客户提到自定义链路的需求,个人感觉非常有代表意义,现在共享出来给大家参考一下。先来看看需求:1. 链路要分成两半,用两种颜色填充。2. 填充百分比在不同值域时,用不同颜色。3. 显示刻度4. 有个开关,可以控制链路变短,变短后,链路只画开始和结束部分(相当于原始链路的缩影),中间不画 5. 如果有多条链路,链路合并后两端分别显示这些链路中的最高填充百分比合并前:合并后: 6...原创 2012-08-07 09:35:58 · 198 阅读 · 0 评论 -
TWaver HTML5 继承结构和成员说明
JavaScript是一门动态语言,但是面向对象的特征没有Java那么明显,导致我们开发起来非常不习惯。拿继承来说,Java中有专门的extends和implements关键字实现,但是在JavaScript却引入了一个"别扭的"prototype,而且实现方式有很多种,虽然灵活,却很容易让初学者一头雾水不知所措。TWaver HTML5的doc是一个js文件,对编辑器很友好,但是我们看起来却不是...2012-11-19 10:57:12 · 149 阅读 · 0 评论 -
TWaver HTML5 on Microsoft Surface RT
公司新入了一台Surface RT(64G,高配啊,再看看我那乞丐版的IPad2,内牛满面...),测试了下TWaver HTML5运行良好,废话不多说,上照片视频:优酷视频:http://v.youku.com/v_show/id_XNDc3MTI4Nzky.html 论坛原帖(讨论):http://twaver.servasoft.com/forum/viewtopic.php?f=35&...2012-11-21 17:10:00 · 95 阅读 · 0 评论 -
为TWaver HTML5的Tree组件增加鼠标滑过效果
出于效率和保持js库最小化的考虑,TWaver HTML5的Tree组件默认的交互方式比较单调,目前只有选中改变文字背景;但是这不代表TWaver功能不够强大,相反,TWaver预留了很多可以重载的方法方便我们扩展,本文中我们就利用这些方法实现鼠标滑过改变背景色的效果。先来张gif图片看看效果:实现方式再简单不过,只有短短几十行代码,先列一下我们用到的方法:onDataRendered(div...原创 2012-12-24 17:17:12 · 106 阅读 · 0 评论 -
如何允许WebGL从本地载入资源
随着mono-design不断推广,用户越来越多,陆续有电话来询问“为什么3D展现的时候,是一团黑?”,针对这个问题,专门写个帖子说明原因并给出解决方案,并且在mono-design编辑器中加了判断功能,同时链接到这里,不用等到发现一团黑时,才知道出问题。好了,言归正传,开始分析问题:当发现3D展现是一团黑的时候,在控制台如果看到“Unable to get image data from...原创 2014-05-06 10:18:43 · 489 阅读 · 0 评论 -
TWaver 3D技术在油田行业的应用
油田信息化是是数字油田建设的重要组成部分。信息化是先进生产力,没有信息化就没有油田的现代化。3D技术的蓬勃发展为油田的信息化提供了跨越式发展的契机。TWaver通过MONO DESIGN平台提供了强大的油田行业3D建模工具。通过拖拖拽拽,可以轻松的创建各种油管、管汇、井口、输油、储油等设备。这些设备也可以通过平台进行新增和修改,并保存在公有云或私有云的服务器中。通过TWaver的iO...原创 2014-05-26 15:29:40 · 167 阅读 · 0 评论 -
在MONO Design中使用Flex3D
在项目开发组的努力下,HTML5 3D 的开发包变得越来越优秀,越来越健壮;基于HTML5 3D技术的MONO Design建模平台功能也变得越来越强大和完善,这个方便了很多使用我们HTML5 3D的用户。 但是对于使用TWaver Flex 3D的用户而言,有个小小的遗憾就是:整个MONO Design是面向HTML5 3D技术的,而不是Flex 3D的。其实不然,虽然MONO Design本...原创 2014-07-08 10:04:40 · 199 阅读 · 0 评论 -
22万个木箱!TWaver 3D极限压榨
打开个门户网站都千呼万唤,我们还能期待网页上的3D技术会有“酣畅淋漓”、“一气呵成”的感受吗?也许现在还差点火候。但是HTML5、WebGL等技术一直在飞速的发展,可能很快你就会惊讶它的能力。现在,我们就试试TWaver的3D能显示多少个木箱子,透明的木箱子。数据量当然要大才行,10万个怎么样?干脆试试20万好了,具体说是60的立方矩阵=60x60x60=216000个。只有压榨到极限才能了解...原创 2014-12-29 11:31:08 · 196 阅读 · 0 评论 -
在TWaver的Tree节点上画线
论坛上有同学提出如何在tree上画引导线,之前我们Flex已经实现此功能,现在最新版的HTML5也将添加此功能。先看看效果:详细的使用方法可以参考我们开发手册中可视化视图组件#Tree引导线一章,下面贴出一个Demo,没有图标,没有框选。仅供参考: 123456789101112131415161718...原创 2015-01-13 10:27:03 · 183 阅读 · 0 评论 -
HTML5 实现Link跳线效果
之前我们推出过Flex版本的Link跳线效果,现在基于HTML5新版本的跳线效果也实现了,细微之处我们进行了改进,如link倾斜的时候Offset方向始终保持垂直等。先看效果。实现的算法和Flex基本一致,在这不做进一步分析了,算法中使用到矩阵的运算,所以在这贴一下矩阵运算的封装。var matrix=function(options){ if (!(this instanceo...原创 2015-01-15 14:01:44 · 171 阅读 · 0 评论 -
HTML5数据可视化第四弹:交互式地铁线路图
前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的地铁线路图,能拖能拽的,还和电子地图做了交互。哥决定把小弟的成果给大家展示一下。 效果图对比 网上的地铁图还是很多的,小弟选了这张比较新的做参考。想当年哥来魔都打拼时,图上可就一红一绿打个叉……暴露年龄...2016-12-13 15:25:03 · 1115 阅读 · 0 评论