`

自定义告警染色

阅读更多

      在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>
 
分享到:
评论

相关推荐

    常用的染色设备和染色方法.pptx

    染色设备和染色方法 染色设备和染色方法是纺织工业中不可或缺的一部分,它们对染色过程中的各个方面都有着重要的影响。染色设备的选择和使用对染色结果的质量和效率都有着极大的影响。 在染色过程中,染色设备的...

    洛奇染色常用代码

    在游戏《洛奇》中,角色外观自定义是一项深受玩家喜爱的功能。其中,“染色”是实现这一功能的关键技术之一。通过特定的代码,玩家可以改变装备的颜色,从而打造出独一无二的角色外观。本文将详细介绍《洛奇》中的...

    xrkmonitor字符云监控系统 v3.6

    3、分布式日志系统: 支持大规模系统日志上报,日志上报支持频率限制、日志染色、自定义字段等高级功能,控制台日志查看支持按关键字、排除关键字、上报时间、上报机器等方式过滤日志,从茫茫日志中轻松找到您需要的...

    代码 基于全染色算法的图优化代码

    代码 基于全染色算法的图优化代码代码 基于全染色算法的图优化代码代码 基于全染色算法的图优化代码代码 基于全染色算法的图优化代码代码 基于全染色算法的图优化代码代码 基于全染色算法的图优化代码代码 基于全...

    实验二细菌的简单染色、革兰氏染色.doc

    1. 细菌染色技术:染色是观察细菌形态结构的关键步骤,因为细菌体积小且透明,不染色难以在显微镜下清晰观察。染色技术包括简单染色法和革兰氏染色法。 2. 简单染色法:这是一种使用单一染料对细菌进行染色的方法,...

    WasSee2_梦幻西游人物资源染色工具

    《WasSee2_梦幻西游人物资源染色工具》是一款专为梦幻西游游戏爱好者设计的辅助工具,它主要用于从游戏中提取的人物资源进行颜色修改,让玩家能够自定义角色的色彩,赋予游戏更高的个性化程度。在了解这款工具之前,...

    文件夹染色标记工具 iColorFolder

    《文件夹染色标记工具 iColorFolder:个性化管理电脑文件夹的新途径》 在日常的电脑使用中,我们经常会遇到大量的文件夹,每个文件夹都承载着不同的信息和任务。为了更好地管理和区分这些文件夹,一种名为...

    C语言 地图染色问题

    在计算机科学领域,地图染色问题是一个经典的图论问题,它与C语言编程相结合,可以用来展示如何利用数据结构和算法解决复杂问题。这个程序的目标是设计一个算法,使用不超过四种颜色来为一个给定的地图区域染色,...

    染色物理化学-扩散模型.zip

    染色物理化学是一门深入研究染料与纤维相互作用、染色过程以及相关动力学和热力学的学科。在这个领域中,扩散模型是理解和优化染色工艺的关键理论基础。本资料压缩包“染色物理化学-扩散模型.zip”包含三个核心文件...

    文件夹染色工具(文件夹大变身)

    它可以将特定的文件夹设置为用户自定义的颜色,这样在众多的文件夹中,那些标记过的文件夹会立即吸引用户的注意。这不仅可以帮助用户记住哪些文件夹包含重要信息,还可以根据颜色进行分类,比如用不同颜色代表工作、...

    H&E染色实验的样本,冷冻切片的H&E染色组织学图像的核分割数据

    在IT领域,尤其是在生物医学图像分析中,"H&E染色实验的样本,冷冻切片的H&E染色组织学图像的核分割数据"是一个重要的研究主题。H&E(Hematoxylin & Eosin)染色是一种经典的病理学技术,广泛用于观察生物组织的...

    Unity染色系统插件

    首先,该插件可能包含一系列自定义Shader,这些Shader能够处理复杂的颜色混合和过渡效果,允许开发者创建出丰富的色彩动画。例如,它可能有内置的渐变、纹理混合、颜色滤镜等功能,让游戏中的对象可以根据玩家的操作...

    在免疫组织化学分析中,染色细胞的百分比是比染色强度更可靠的参数:大肠癌进展和肝转移中9种分子标记的表达

    我们目前的研究表明,就染色强度和染色癌细胞百分率而言,对不同标志物的评估可被认为是肿瘤进展和肝转移的预后标志物。 已经发现尤其是染色细胞的百分比。 结论:我们的结果表明,与评估染色强度相比,染色结肠癌...

    血细胞染色方法的探讨-论文.zip

    血细胞染色是生物学、医学和临床实验室诊断中不可或缺的技术,尤其在血液学研究和疾病诊断中占有重要地位。这篇名为“血细胞染色方法的探讨”的论文可能深入研究了不同染色技术的原理、应用及其对血细胞观察的影响。...

    电脑的个性玩法(给文件夹染色)

    一个创新且实用的个性化玩法是“给文件夹染色”,这不仅能让我们的工作区域更加美观,还能帮助快速识别和定位不同类型的文件夹。本文将详细介绍如何在Windows操作系统中为文件夹设置颜色,以及相关的注意事项。 在...

    地图染色_四色原理C++

    ### 地图染色与四色定理:深入解析与C++实现 #### 地图染色问题概览 地图染色问题源自于一个著名的数学难题——四色定理,该定理指出任意一张地图(假设地图上的国家是连续且没有飞地的),只需要四种颜色就可以对...

Global site tag (gtag.js) - Google Analytics