- 浏览: 166043 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
qq_21380041:
954414957@qq.com
HTML5数据可视化第二弹:打造最美3D机房 -
qq_21380041:
楼主,求代码
HTML5数据可视化第二弹:打造最美3D机房 -
luoaz:
楼主能不能传个源码的附件上来, 分享学习下呢?
HTML5+WebGL 3D机房开发实例 -
xiaosi1278:
你好能不能把你讲的源代码发一下!!做参考403541110@q ...
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定 -
TWaverGeek:
BigBird2012 写道您好,您能把您使用TWaver导入 ...
TWaver导入导出AutoCAD DXF图纸
在TWaver中,拓扑上的告警呈现的方式是多种多样的,最常见、最通用的是在原来的图片上叠加上告警级别所对应的颜色,这种方式在TWaver的各个分支版本中都是支持的,呈现效果如下图所示:
另外还有两种是将告警颜色添加在网元的前景或背景上,效果如下:
我们主要来看默认的渲染方式,这种方式是采取图片颜色叠加处理,也就是在原来网元的图片上叠加上告警的颜色,对于大部分的图片来说是没有什么问题的,比如任意从网上找两种图片进行告警渲染:
看得出来效果还是可以的,两张图片的染色都没有保持着告警的颜色。但有些图片的渲染就不是那么让人满意了,从客户那边取过来一个icon图片做了一下测试,结果发现:
图中对于Major,Minor和custom这三种级别的告警渲染的颜色和冒泡的颜色显然有些不同。对于这种情况该如何处理呢,经查阅API获得TWaver可以自定义告警染色的规则,默认采用了Defaults中的PIXEL_FILTER_FUNCTION,我们来看看默认的实现:
function(sourceColor:uint, filterColor:uint):uint { var r:uint = (sourceColor >> 16 ) & 0xFF; var g:uint = (sourceColor >> 8 ) & 0xFF; var b:uint = sourceColor & 0xFF; sourceColor = (r * 77 + g * 151 + b * 28) >> 8; sourceColor = (sourceColor << 16) | (sourceColor << 8 ) | sourceColor; return sourceColor & filterColor; }
有了这个方法之后,我们就可以对其进行定制,可以将这三种颜色进行一下特殊处理,直接返回告警的颜色
function(sourceColor:uint, filterColor:uint):uint { if(sourceColor == s && (filterColor == AlarmSeverity.MAJOR.color || filterColor == AlarmSeverity.MINOR.color)) { return filterColor; } var r:uint = (sourceColor >> 16 ) & 0xFF; var g:uint = (sourceColor >> 8 ) & 0xFF; var b:uint = sourceColor & 0xFF; sourceColor = (r * 77 + g * 151 + b * 28) >> 8; sourceColor = (sourceColor << 16) | (sourceColor << 8 ) | sourceColor; return sourceColor & filterColor; };运行后再来看看效果:
最新附上完整的代码供大家参考:
<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:twaver="http://www.servasoftware.com/2009/twaver/flex" width="100%" height="100%" creationComplete="init()" backgroundColor="#FFFFFF" > <mx:Script> <![CDATA[ import twaver.AlarmSeverity; import twaver.Defaults; import twaver.Node; import twaver.Utils; import twaver.Consts; import twaver.Styles; [Embed(source="/image/BTSGroup.png")] private static var bts:Class; [Embed(source="/image/network_server.png")] private static var wireless:Class; private static var customAlarmSeverity:AlarmSeverity = AlarmSeverity.register(3, 'custom', 'custom', 0xE4DC8A); private function init():void { var s:uint = (162 << 16 ) | (193 << 8 ) | 210; Utils.registerImageByClass('bts', bts); Utils.registerImageByClass('wireless', wireless); twaver.Defaults.PIXEL_FILTER_FUNCTION = function(sourceColor:uint, filterColor:uint):uint { if(sourceColor == s && (filterColor == AlarmSeverity.MAJOR.color || filterColor == AlarmSeverity.MINOR.color || filterColor == customAlarmSeverity.color)) { return filterColor; } var r:uint = (sourceColor >> 16 ) & 0xFF; var g:uint = (sourceColor >> 8 ) & 0xFF; var b:uint = sourceColor & 0xFF; sourceColor = (r * 77 + g * 151 + b * 28 ) >> 8; sourceColor = (sourceColor << 16 ) | (sourceColor << 8 ) | sourceColor; return sourceColor & filterColor; }; addNode(AlarmSeverity.CRITICAL, 220, 100,'bts'); addNode(AlarmSeverity.MAJOR, 340, 100,'bts'); addNode(AlarmSeverity.MINOR, 460, 100,'bts'); addNode(AlarmSeverity.WARNING, 580, 100,'bts'); addNode(AlarmSeverity.INDETERMINATE, 700, 100,'bts'); addNode(AlarmSeverity.CRITICAL, 220, 250,'wireless'); addNode(AlarmSeverity.MAJOR, 340, 250,'wireless'); addNode(AlarmSeverity.MINOR, 460, 250,'wireless'); addNode(AlarmSeverity.WARNING, 580, 250,'wireless'); addNode(AlarmSeverity.INDETERMINATE, 700, 250,'wireless'); } private function addNode(alarmSeverity:AlarmSeverity, x:Number, y:Number,image):void { var node:Node = new Node(); node.image = image; if(image == "bts"){ node.setStyle(Styles.INNER_STYLE, Consts.INNER_STYLE_SHAPE); node.setStyle(Styles.INNER_SHAPE, Consts.SHAPE_CIRCLE); node.setStyle(Styles.INNER_GRADIENT, Consts.GRADIENT_RADIAL_CENTER); node.setStyle(Styles.INNER_GRADIENT_ALPHA, 0.5); node.setStyle(Styles.INNER_ALPHA, 0.8); node.setStyle(Styles.INNER_PADDING, -6); node.setStyle(Styles.INNER_BACK, false); }else if(image == "wireless"){ node.setStyle(Styles.INNER_STYLE, Consts.INNER_STYLE_SHAPE); node.setStyle(Styles.INNER_SHAPE, Consts.SHAPE_DIAMOND); node.setStyle(Styles.INNER_GRADIENT, Consts.GRADIENT_RADIAL_SOUTHWEST); node.setStyle(Styles.INNER_PADDING_TOP, 10); node.setStyle(Styles.INNER_PADDING_BOTTOM, -5); node.setStyle(Styles.INNER_PADDING_LEFT, -20); node.setStyle(Styles.INNER_PADDING_RIGHT, -20); } node.name = alarmSeverity.name ; node.location = new Point(x, y); node.alarmState.setNewAlarmCount(alarmSeverity, 22); network.elementBox.add(node); } ]]> </mx:Script> <twaver:Network id="network" width="100%" height="100%" /> </mx:HBox>
发表评论
-
HTML5+WebGL 3D机房开发实例
2015-09-30 15:28 11634前阵子写了一篇HMTL5 3D ... -
HTML5 3D水源监控系统
2015-09-07 23:29 1391天津港爆炸事件后,除 ... -
看HTML5如何化解大型复杂网络拓扑图的分组嵌套效果
2015-06-25 14:12 3623忙完3D,最近又开始用HTML5给客户开发网管界面。这次客 ... -
HTML5数据可视化第二弹:打造最美3D机房
2015-06-01 14:25 12784最近项目开发任务告一段落,刚好有时间整理这大半年的一些成果 ... -
HTML5组织结构图之名片式网元布局
2015-05-07 11:43 2467组织结构图(Organization chart)是企业的 ... -
HTML5流程图之矢量可伸展workflow
2015-05-06 17:17 11461互联网购物成了当今非 ... -
数字图像处理技术在TWaver可视化中的应用
2015-04-16 14:30 721数字图像处理(Digital Image Processin ... -
用拓扑图呈现多层级关系图
2015-04-13 11:51 1675大部分拓扑图界面都有显示“分级呈现”的需求。一个复杂的系统或 ... -
3D赛瓦号——整装待发!
2015-02-16 10:51 685随着岁末将至,twaver开发团队依旧马不停蹄,3d产品功 ... -
在TWaver的Tree节点上画线
2015-01-13 10:27 951论坛上有同学提出如何在tree上画引导线,之前我们Flex已 ... -
如何实现TWaver 3D颜色渐变
2014-10-21 13:37 546一般而言,需要实现3D物体的渐变,通常的思路就是通过2D绘制 ... -
被忽视的TWaver功能(1)
2014-10-13 09:44 1289应客户需求写个Demo,Demo中包含一些常用的功能,包括解 ... -
TWaver GIS在电信中的使用
2014-10-09 14:56 545GIS作为信息系统的重要组成部分,在电信行业中的应用由来已久。 ... -
TWaver MONO模板库新鲜出炉 精彩纷呈
2014-08-05 11:39 932MONO Design在线3D建模平台网站, www.mon ... -
如何允许WebGL从本地载入资源
2014-05-06 10:18 889随着mono-design不断推广,用户越来越多,陆续有电 ... -
在3D场景中显示汉字
2012-08-07 12:01 0TWaver 3D for Flex本身支持3 ... -
GeoServer快速发布地图数据
2012-08-07 11:54 0TWaver GIS提供了WMS的客户 ... -
让Swing表格支持远程后台数据翻页
2012-08-06 17:04 0TWaver Java不但提供了TTable、TElement ... -
用TWaver HTML5定制五彩斑斓的链路
2012-08-07 09:35 1317最近有客户提到自定义链路的需求,个人感觉非常有代表意义,现在共 ... -
使用3D呈现拓扑的多层次结构
2012-08-07 09:35 1131关于3D场景在现在网管中的应用的讨论一直没有停止过,应用场景有 ...
相关推荐
染色设备和染色方法 染色设备和染色方法是纺织工业中不可或缺的一部分,它们对染色过程中的各个方面都有着重要的影响。染色设备的选择和使用对染色结果的质量和效率都有着极大的影响。 在染色过程中,染色设备的...
在游戏《洛奇》中,角色外观自定义是一项深受玩家喜爱的功能。其中,“染色”是实现这一功能的关键技术之一。通过特定的代码,玩家可以改变装备的颜色,从而打造出独一无二的角色外观。本文将详细介绍《洛奇》中的...
3、分布式日志系统: 支持大规模系统日志上报,日志上报支持频率限制、日志染色、自定义字段等高级功能,控制台日志查看支持按关键字、排除关键字、上报时间、上报机器等方式过滤日志,从茫茫日志中轻松找到您需要的...
代码 基于全染色算法的图优化代码代码 基于全染色算法的图优化代码代码 基于全染色算法的图优化代码代码 基于全染色算法的图优化代码代码 基于全染色算法的图优化代码代码 基于全染色算法的图优化代码代码 基于全...
1. 细菌染色技术:染色是观察细菌形态结构的关键步骤,因为细菌体积小且透明,不染色难以在显微镜下清晰观察。染色技术包括简单染色法和革兰氏染色法。 2. 简单染色法:这是一种使用单一染料对细菌进行染色的方法,...
《WasSee2_梦幻西游人物资源染色工具》是一款专为梦幻西游游戏爱好者设计的辅助工具,它主要用于从游戏中提取的人物资源进行颜色修改,让玩家能够自定义角色的色彩,赋予游戏更高的个性化程度。在了解这款工具之前,...
《文件夹染色标记工具 iColorFolder:个性化管理电脑文件夹的新途径》 在日常的电脑使用中,我们经常会遇到大量的文件夹,每个文件夹都承载着不同的信息和任务。为了更好地管理和区分这些文件夹,一种名为...
在计算机科学领域,地图染色问题是一个经典的图论问题,它与C语言编程相结合,可以用来展示如何利用数据结构和算法解决复杂问题。这个程序的目标是设计一个算法,使用不超过四种颜色来为一个给定的地图区域染色,...
染色物理化学是一门深入研究染料与纤维相互作用、染色过程以及相关动力学和热力学的学科。在这个领域中,扩散模型是理解和优化染色工艺的关键理论基础。本资料压缩包“染色物理化学-扩散模型.zip”包含三个核心文件...
它可以将特定的文件夹设置为用户自定义的颜色,这样在众多的文件夹中,那些标记过的文件夹会立即吸引用户的注意。这不仅可以帮助用户记住哪些文件夹包含重要信息,还可以根据颜色进行分类,比如用不同颜色代表工作、...
在IT领域,尤其是在生物医学图像分析中,"H&E染色实验的样本,冷冻切片的H&E染色组织学图像的核分割数据"是一个重要的研究主题。H&E(Hematoxylin & Eosin)染色是一种经典的病理学技术,广泛用于观察生物组织的...
首先,该插件可能包含一系列自定义Shader,这些Shader能够处理复杂的颜色混合和过渡效果,允许开发者创建出丰富的色彩动画。例如,它可能有内置的渐变、纹理混合、颜色滤镜等功能,让游戏中的对象可以根据玩家的操作...
我们目前的研究表明,就染色强度和染色癌细胞百分率而言,对不同标志物的评估可被认为是肿瘤进展和肝转移的预后标志物。 已经发现尤其是染色细胞的百分比。 结论:我们的结果表明,与评估染色强度相比,染色结肠癌...
血细胞染色是生物学、医学和临床实验室诊断中不可或缺的技术,尤其在血液学研究和疾病诊断中占有重要地位。这篇名为“血细胞染色方法的探讨”的论文可能深入研究了不同染色技术的原理、应用及其对血细胞观察的影响。...
一个创新且实用的个性化玩法是“给文件夹染色”,这不仅能让我们的工作区域更加美观,还能帮助快速识别和定位不同类型的文件夹。本文将详细介绍如何在Windows操作系统中为文件夹设置颜色,以及相关的注意事项。 在...
### 地图染色与四色定理:深入解析与C++实现 #### 地图染色问题概览 地图染色问题源自于一个著名的数学难题——四色定理,该定理指出任意一张地图(假设地图上的国家是连续且没有飞地的),只需要四种颜色就可以对...