2010-07-26 Miguel de Dios <miguel.dedios@artica.es>

* images/mimetypes/text.png: added lost image file in previous commits about
	collections.

	*images/tag_red.disabled.png, images/cross.disabled.png,
	images/chart_curve.disabled.png, images/config.disabled.png,
	images/chart_bar.disabled.png, images/photo.disabled.png,
	images/camera.disabled.png, images/binary.disabled.png: added image files
	for the new palete buttons (when it are disabled) in visual console editor.
	
	* include/styles/pandora.css: added the styles for the new buttons of
	visual console editor (label and icon), and some changes for new style for
	buttons of the palete in this page.
	
	* include/functions_html.php: in function "print_button" added new
	parameter $imageButton to set the button as image button, by default is
	false.
	
	* include/ajax/visual_console_builder.ajax.php,
	godmode/reporting/visual_console_builder.editor.js,
	godmode/reporting/visual_console_builder.editor.php,
	godmode/reporting/visual_console_builder.constans.php: change the buttons
	palete for a palete with more small buttons as icon buttons, added new items
	for visual map (icon and label). And fixed the dinamic change label color
	for any elements.
	
	* include/functions_visual_map.php: added the new items (label and icon)
	and cleaned the source code.
	
	Pending task: #3019641



git-svn-id: https://svn.code.sf.net/p/pandora/code/trunk@3061 c3f86ba8-e40f-0410-aaad-9ba5e7f4b01f

pandora_console/ChangeLog

@@ -1,3 +1,34 @@
+2010-07-26  Miguel de Dios  <miguel.dedios@artica.es>
+	* images/mimetypes/text.png: added lost image file in previous commits about
+	collections.
+
+	*images/tag_red.disabled.png, images/cross.disabled.png,
+	images/chart_curve.disabled.png, images/config.disabled.png,
+	images/chart_bar.disabled.png, images/photo.disabled.png,
+	images/camera.disabled.png, images/binary.disabled.png: added image files
+	for the new palete buttons (when it are disabled) in visual console editor.
+	
+	* include/styles/pandora.css: added the styles for the new buttons of
+	visual console editor (label and icon), and some changes for new style for
+	buttons of the palete in this page.
+	
+	* include/functions_html.php: in function "print_button" added new
+	parameter $imageButton to set the button as image button, by default is
+	false.
+	
+	* include/ajax/visual_console_builder.ajax.php,
+	godmode/reporting/visual_console_builder.editor.js,
+	godmode/reporting/visual_console_builder.editor.php,
+	godmode/reporting/visual_console_builder.constans.php: change the buttons
+	palete for a palete with more small buttons as icon buttons, added new items
+	for visual map (icon and label). And fixed the dinamic change label color
+	for any elements.
+	
+	* include/functions_visual_map.php: added the new items (label and icon)
+	and cleaned the source code.
+	
+	Pending task: #3019641
+
 2010-07-26  Dario Rodriguez  <dario.rodriguez@integria.es>
 
 	* include/styles/pandora.css: Added css classes for separator.
@@ -44,7 +75,7 @@
 
 	* godmode/agentes/massive_config.php: Use better text in title and button.
 
-2010-07-21  Miguel de Dios  <miguel.dedios@artica.es>
+2010-07-22  Miguel de Dios  <miguel.dedios@artica.es>
 
 	* operation/snmpconsole/snmp_view.php: added the show more data when click
 	in the icon eye.

pandora_console/godmode/reporting/visual_console_builder.constans.php

@@ -17,4 +17,6 @@ define('STATIC_GRAPH', 0);
 define('PERCENTILE_BAR', 3);
 define('MODULE_GRAPH', 1);
 define('SIMPLE_VALUE', 2);
+define('LABEL', 4);
+define('ICON', 5);
 ?>

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -128,6 +128,9 @@ function updateAction() {
 			break;
 		case 'static_graph':
 			$("#text_" + idItem).html(values['label']);
+			
+			$("#" + idItem).css('color', values['label_color']);
+			
 			$("#image_" + idItem).attr('src', getImageElement(idItem));
 			if ((values['width'] != 0) && (values['height'] != 0)) {
 				$("#image_" + idItem).attr('width', values['width']);
@@ -153,6 +156,26 @@ function updateAction() {
 		case 'simple_value':
 			$("#text_" + idItem).html(values['label']);
 			break;
+		case 'label':
+			$("#" + idItem).css('color', values['label_color']);
+			
+			$("#text_" + idItem).html(values['label']);
+			break;
+		case 'icon':
+			$("#image_" + idItem).attr('src', getImageElement(idItem));
+			if ((values['width'] != 0) && (values['height'] != 0)) {
+				$("#image_" + idItem).attr('width', values['width']);
+				$("#image_" + idItem).attr('height', values['height']);
+				$("#" + idItem).css('width', values['width'] + 'px');
+				$("#" + idItem).css('height', values['height'] + 'px');
+			}
+			else {
+				$("#image_" + idItem).removeAttr('width');
+				$("#image_" + idItem).removeAttr('height');
+				$("#" + idItem).css('width', '');
+				$("#" + idItem).css('height', '');
+			}
+			break;
 	}
 	
 	updateDB(selectedItem, idItem , values);
@@ -196,6 +219,18 @@ function createAction() {
 				validate = false;
 			}
 			break;
+		case 'label':
+			if ((values['label'] == '')) {
+				alert($("#message_alert_no_label").html());
+				validate = false;
+			}
+			break;
+		case 'icon':
+			if ((values['image'] == '')) {
+				alert($("#message_alert_no_image").html());
+				validate = false;
+			}
+			break;
 	}
 	
 	if (validate) {
@@ -212,6 +247,8 @@ function actionClick() {
 		activeToolboxButton('percentile_bar', true);
 		activeToolboxButton('module_graph', true);
 		activeToolboxButton('simple_value', true);
+		activeToolboxButton('label', true);
+		activeToolboxButton('icon', true);
 		
 		$(".item").draggable("enable");
 		$("#background").resizable('enable');
@@ -233,6 +270,9 @@ function actionClick() {
 	activeToolboxButton('percentile_bar', false);
 	activeToolboxButton('module_graph', false);
 	activeToolboxButton('simple_value', false);
+	activeToolboxButton('label', false);
+	activeToolboxButton('icon', false);
+	
 	activeToolboxButton('edit_item', false);
 	activeToolboxButton('delete_item', false);
 	
@@ -391,6 +431,7 @@ function cleanFields() {
 
 function getModuleGraph(id_data) {
 	var parameter = Array();
+	
 	parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
 	parameter.push ({name: "action", value: "get_layout_data"});
 	parameter.push ({name: "id_element", value: id_data});
@@ -557,6 +598,26 @@ function createItem(type, values, id_data) {
 				'</div>'
 			);
 			break;
+		case 'label':
+			var item = $('<div id="' + id_data + '" class="item label" style="color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
+					'<span id="text_' + id_data + '" class="text">' + values['label'] + '</span>' + 
+					'</div>'
+				);
+			break;
+		case 'icon':
+			if ((values['width'] == 0) && (values['height'] == 0)) {
+				var sizeStyle = '';
+				var imageSize = '';
+			}
+			else {
+				var sizeStyle = 'width: ' + values['width']  + 'px; height: ' + values['height'] + 'px;';
+				var imageSize = 'width="' + values['width']  + '" height="' + values['height'] + '"';
+			}
+			var item = $('<div id="' + id_data + '" class="item static_graph" style="color: ' + values['label_color'] + '; text-align: center; position: absolute; ' + sizeStyle + ' margin-top: ' + values['top'] + 'px; margin-left: ' + values['left'] + 'px;">' +
+				'<img id="image_' + id_data + '" class="image" src="' + getImageElement(id_data) + '" ' + imageSize + ' /><br />' + 
+				'</div>'
+			);
+			break;
 	}
 	
 	$("#background").append(item);
@@ -643,6 +704,8 @@ function updateDB(type, idElement , values) {
 					case 'static_graph':
 					case 'percentile_bar':
 					case 'simple_value':
+					case 'label':
+					case 'icon':
 						if ((typeof(values['mov_left']) != 'undefined') &&
 								(typeof(values['mov_top']) != 'undefined')) {
 							$("#" + idElement).css('top', '0px').css('margin-top', top + 'px');
@@ -777,6 +840,20 @@ function eventsItems() {
 				activeToolboxButton('edit_item', true);
 				activeToolboxButton('delete_item', true);
 			}
+			if ($(divParent).hasClass('label')) {
+				creationItem = null;
+				selectedItem = 'label';
+				idItem = $(divParent).attr('id');
+				activeToolboxButton('edit_item', true);
+				activeToolboxButton('delete_item', true);
+			}
+			if ($(divParent).hasClass('icon')) {
+				creationItem = null;
+				selectedItem = 'icon';
+				idItem = $(divParent).attr('id');
+				activeToolboxButton('edit_item', true);
+				activeToolboxButton('delete_item', true);
+			}
 		}
 	});
 	
@@ -824,6 +901,20 @@ function eventsItems() {
 				activeToolboxButton('edit_item', true);
 				activeToolboxButton('delete_item', true);
 			}
+			if ($(divParent).hasClass('label')) {
+				creationItem = null;
+				selectedItem = 'label';
+				idItem = $(divParent).attr('id');
+				activeToolboxButton('edit_item', true);
+				activeToolboxButton('delete_item', true);
+			}
+			if ($(divParent).hasClass('icon')) {
+				creationItem = null;
+				selectedItem = 'icon';
+				idItem = $(divParent).attr('id');
+				activeToolboxButton('edit_item', true);
+				activeToolboxButton('delete_item', true);
+			}
 		}
 	});
 	
@@ -890,9 +981,6 @@ function unselectAll() {
 
 function click2(id) {
 	switch (id) {
-		case 'edit_item':
-			actionClick();
-			break;
 		case 'static_graph':
 			creationItem = 'static_graph';
 			actionClick();
@@ -909,6 +997,18 @@ function click2(id) {
 			creationItem = 'simple_value';
 			actionClick();
 			break;
+		case 'label':
+			creationItem = 'label';
+			actionClick();
+			break;
+		case 'icon':
+			creationItem = 'icon';
+			actionClick();
+			break;
+			
+		case 'edit_item':
+			actionClick();
+			break;
 		case 'delete_item':
 			deleteItem();
 			break;

pandora_console/godmode/reporting/visual_console_builder.editor.php

@@ -46,13 +46,15 @@ foreach ($all_images as $image_file) {
 
 echo '<div id="editor" style="margin-top: -10px;">';
 	echo '<div id="toolbox">';
-		printButtonEditorVisualConsole('static_graph', __('Static Graph'), 'left', false, 'camera');
+		printButtonEditorVisualConsole('static_graph', __('Static Graph'), 'left', false, 'camera_min', true);
-		printButtonEditorVisualConsole('percentile_bar', __('Percentile Bar'), 'left', false, 'percentile');
+		printButtonEditorVisualConsole('percentile_bar', __('Percentile Bar'), 'left', false, 'percentile_min', true);
-		printButtonEditorVisualConsole('module_graph', __('Module Graph'), 'left', false, 'graph');
+		printButtonEditorVisualConsole('module_graph', __('Module Graph'), 'left', false, 'graph_min', true);
-		printButtonEditorVisualConsole('simple_value', __('Simple Value'), 'left', false, 'binary');
+		printButtonEditorVisualConsole('simple_value', __('Simple Value'), 'left', false, 'binary_min', true);
+		printButtonEditorVisualConsole('label', __('Label'), 'left', false, 'label_min', true);
+		printButtonEditorVisualConsole('icon', __('Icon'), 'left', false, 'icon_min', true);
 		
-		printButtonEditorVisualConsole('edit_item', __('Edit item'), 'right', true, 'config');
+		printButtonEditorVisualConsole('edit_item', __('Edit item'), 'right', true, 'config_min', true);
-		printButtonEditorVisualConsole('delete_item', __('Delete item'), 'right', true, 'delete');
+		printButtonEditorVisualConsole('delete_item', __('Delete item'), 'right', true, 'delete_min', true);
 	echo '</div>';
 echo '</div>';
 echo '<div style="clear: right; margin-bottom: 10px;"></div>';
@@ -94,13 +96,16 @@ echo '<div id="properties_panel" style="display: none; position: absolute; borde
 		<span id="title_panel_span_background" class="title_panel_span" style="display: none; visibility:hidden; font-weight: bolder;"><?php echo  __('Background');?></span>
 		<span id="title_panel_span_static_graph" class="title_panel_span" style="display: none; font-weight: bolder;"><?php echo  __('Static Graph');?></span>
 		<span id="title_panel_span_percentile_bar" class="title_panel_span" style="display: none; font-weight: bolder;"><?php echo  __('Percentile Bar');?></span>
+		<span id="title_panel_span_simple_value" class="title_panel_span" style="display: none; font-weight: bolder;"><?php echo  __('Simple value');?></span>
+		<span id="title_panel_span_label" class="title_panel_span" style="display: none; font-weight: bolder;"><?php echo  __('Label');?></span>
+		<span id="title_panel_span_icon" class="title_panel_span" style="display: none; font-weight: bolder;"><?php echo  __('Icon');?></span>
 	</caption>
 	<tbody>
-		<tr id="label_row" style="" class="static_graph percentile_bar module_graph simple_value datos">
+		<tr id="label_row" style="" class="static_graph percentile_bar module_graph simple_value label datos">
 			<td style=""><?php echo __('Label');?></td>
 			<td style=""><?php print_input_text ('label', '', '', 20, 200); ?></td>
 		</tr>
-		<tr id="image_row" style="" class="static_graph datos">
+		<tr id="image_row" style="" class="static_graph icon datos">
 			<td><?php echo __('Image');?></td>
 			<td><?php print_select ($images_list, 'image', '', 'showPreviewStaticGraph(this.value);', 'None', '');?></td>
 		</tr>
@@ -173,7 +178,7 @@ echo '<div id="properties_panel" style="display: none; position: absolute; borde
 		</tr>
 	</tbody>
 	<tbody id="advance_options" style="display: none;">
-		<tr id="position_row" class="static_graph percentile_bar module_graph simple_value datos">
+		<tr id="position_row" class="static_graph percentile_bar module_graph simple_value label icon datos">
 			<td><?php echo __('Position');?></td>
 			<td>
 				<?php
@@ -185,7 +190,7 @@ echo '<div id="properties_panel" style="display: none; position: absolute; borde
 				?>
 			</td>
 		</tr>
-		<tr id="size_row" class="background static_graph datos">
+		<tr id="size_row" class="background static_graph icon datos">
 			<td><?php echo __('Size') . '<a href="#" class="tip">&nbsp;<span>' . __("For use the original image file size, set 0 width and 0 height.") . '</span></a>';?></td>
 			<td>
 				<?php
@@ -195,11 +200,11 @@ echo '<div id="properties_panel" style="display: none; position: absolute; borde
 				?>
 			</td>
 		</tr>
-		<tr id="parent_row" class="static_graph percentile_bar module_graph simple_value datos">
+		<tr id="parent_row" class="static_graph percentile_bar module_graph simple_value label icon datos">
 			<td><?php echo __('Parent');?></td>
 			<td><?php print_select_from_sql('SELECT id, label FROM tlayout_data WHERE id_layout = ' . $visualConsole['id'], 'parent', '', '', __('None'), 0);?></td>
 		</tr>
-		<tr id="map_linked_row" class="static_graph percentile_bar module_graph simple_value datos">
+		<tr id="map_linked_row" class="static_graph percentile_bar module_graph simple_value label datos">
 			<td><?php echo __('Map linked');?></td>
 			<td>
 				<?php
@@ -207,7 +212,7 @@ echo '<div id="properties_panel" style="display: none; position: absolute; borde
 				?>
 			</td>
 		</tr>
-		<tr id="label_color_row" class="static_graph percentile_bar module_graph simple_value datos">
+		<tr id="label_color_row" class="static_graph percentile_bar module_graph simple_value label icon datos">
 			<td><?php echo __('Label color');?></td>
 			<td><?php print_input_text_extended ('label_color', '#000000', 'text-'.'label_color', '', 7, 7, false, '', 'class="label_color"', false);?></td>
 		</tr>				
@@ -246,6 +251,8 @@ echo "</form>";
 
 //Hack to translate messages in javascript
 echo '<span style="display: none" id="message_alert_no_label_no_image">' . __('No image or name defined.') .'</span>';
+echo '<span style="display: none" id="message_alert_no_label">' . __('No label defined.') .'</span>';
+echo '<span style="display: none" id="message_alert_no_image">' . __('No image defined.') .'</span>';
 
 require_css_file ('color-picker');
 

pandora_console/include/ajax/visual_console_builder.ajax.php

@@ -99,6 +99,8 @@ switch ($action) {
 			case 'percentile_bar':
 			case 'static_graph':
 			case 'module_graph':
+			case 'label':
+			case 'icon':
 				$values = array();
 				if ($label !== null) {
 					$values['label'] = $label;
@@ -145,6 +147,7 @@ switch ($action) {
 							$values['height'] = $max_percentile;
 						}
 						break;
+					case 'icon':
 					case 'static_graph':
 						if ($image !== null) {
 							$values['image'] = $image;
@@ -171,6 +174,8 @@ switch ($action) {
 			case 'static_graph':
 			case 'module_graph':
 			case 'simple_value':
+			case 'label':
+			case 'icon':
 				$elementFields = get_db_row_filter('tlayout_data', array('id' => $id_element));
 				$elementFields['agent_name'] = get_agent_name($elementFields['id_agent']);
 				//Make the html of select box of modules about id_agent.
@@ -236,6 +241,15 @@ switch ($action) {
 			case 'simple_value':
 				$values['type'] = SIMPLE_VALUE;
 				break;
+			case 'label':
+				$values['type'] = LABEL;
+				break;
+			case 'icon':
+				$values['type'] = ICON;
+				$values['image'] = $image;
+				$values['width'] = $width;
+				$values['height'] = $height;
+				break;
 		}
 		$idData = process_sql_insert('tlayout_data', $values);
 		

pandora_console/include/functions_html.php

@@ -602,13 +602,20 @@ function print_submit_button ($label = 'OK', $name = '', $disabled = false, $att
  * @param string $script JavaScript to attach
  * @param string $attributes Additional HTML attributes.
  * @param bool $return Whether to return an output string or echo now (optional, echo by default).
+ * @param bool $imageButton Set the button as a image button without text, by default is false.
  *
  * @return string HTML code if return parameter is true.
  */
-function print_button ($label = 'OK', $name = '', $disabled = false, $script = '', $attributes = '', $return = false) {
+function print_button ($label = 'OK', $name = '', $disabled = false, $script = '', $attributes = '', $return = false, $imageButton = false) {
 	$output = '';
 
-	$output .= '<input type="button" id="button-'.$name.'" name="'.$name.'" value="'. $label .'" onClick="'. $script.'" '.$attributes;
+	$alt = $title = '';
+	if ($imageButton) {
+		$alt = $title = $label;
+		$label = '';
+	}
+	
+	$output .= '<input title="' . $title . '" alt="' . $alt . '" type="button" id="button-'.$name.'" name="'.$name.'" value="'. $label .'" onClick="'. $script.'" '.$attributes;
 	if ($disabled)
 		$output .= ' disabled';
 	$output .= ' />';

pandora_console/include/functions_visual_map.php

@@ -19,7 +19,7 @@
  * @subpackage Reporting
  */
 
-function printButtonEditorVisualConsole($idDiv, $label, $float = 'left', $disabled = false, $class= '') {
+function printButtonEditorVisualConsole($idDiv, $label, $float = 'left', $disabled = false, $class= '', $imageButton = false) {
 	if ($float == 'left') {
 		$margin = 'margin-right';
 	}
@@ -27,7 +27,7 @@ function printButtonEditorVisualConsole($idDiv, $label, $float = 'left', $disabl
 		$margin = 'margin-left';
 	}
 	
-	print_button($label, 'button_toolbox2', $disabled, "click2('" . $idDiv . "');", 'class="sub ' . $idDiv . ' ' . $class . '" style="float: ' . $float . '; ' . $margin . ': 5px;"');
+	print_button($label, 'button_toolbox2', $disabled, "click2('" . $idDiv . "');", 'class="sub ' . $idDiv . ' ' . $class . '" style="float: ' . $float . ';"', false, $imageButton);
 	return;
 	
 	if (!$disabled) $disableClass = '';
@@ -112,6 +112,26 @@ function printItemInVisualConsole($layoutData) {
 			echo ' <strong>' . get_db_value ('datos', 'tagente_estado', 'id_agente_modulo', $id_module) . '</strong>';
 			echo '</div>';
 			break;
+		case LABEL:
+			echo '<div id="' . $id . '" class="item label" style="text-align: center; color: ' . $color . '; position: absolute; ' . $sizeStyle . ' margin-top: ' . $top . 'px; margin-left: ' . $left . 'px;">';
+			echo $text;
+			echo "</div>";
+			break;
+		case ICON:
+			if ($layoutData['image'] != null) {
+				$img = getImageStatusElement($layoutData);
+				$imgSizes = getimagesize($img);
+			}
+			if (($width != 0) && ($height != 0)) {
+				$sizeStyle = 'width: ' . $width . 'px; height: ' . $height . 'px;';
+				$imageSize = 'width="' . $width . '" height="' . $height . '"';
+			}
+			echo '<div id="' . $id . '" class="item icon" style="text-align: center; color: ' . $color . '; position: absolute; ' . $sizeStyle . ' margin-top: ' . $top . 'px; margin-left: ' . $left . 'px;">';
+			if ($layoutData['image'] != null) {
+				echo '<img class="image" id="image_' . $id . '" src="' . $img . '" ' . $imageSize . ' /><br />';
+			}
+			echo "</div>";
+			break;
 	}
 	
 	//Add the line between elements.
@@ -234,6 +254,11 @@ function process_wizard_add_modules ($id_modules, $image, $id_layout, $range, $w
  * @return string The color as hexadecimal color in html.
  */
 function getColorLineStatus($layoutData) {
+	if (($layoutData['type'] == 5) || ($layoutData['type'] == 4)) {
+		//ICON ELEMENT OR LABEL ELEMENT
+		$color = "#cccccc";
+	}
+	else {
 		switch (getStatusElement($layoutData)) {
 			case 3:
 				$color = "#cccccc"; // Gray
@@ -249,6 +274,7 @@ function getColorLineStatus($layoutData) {
 				$color = "#ff0000"; // Red
 				break;
 		}
+	}
 	
 	return $color;
 }
@@ -262,6 +288,12 @@ function getColorLineStatus($layoutData) {
  */
 function getImageStatusElement($layoutData) {
 	$img = "images/console/icons/" . $layoutData["image"];
+	
+	if ($layoutData['type'] == 5) {
+		//ICON ELEMENT
+		$img .= ".png";
+	}
+	else {
 		switch (getStatusElement($layoutData)) {
 			case 1:
 			case 4:
@@ -280,6 +312,7 @@ function getImageStatusElement($layoutData) {
 				$img .= ".png";
 				// Default is Grey (Other)
 		}
+	}
 	
 	return $img;
 }
@@ -500,8 +533,9 @@ function print_pandora_visual_map ($id_layout, $show_links = true, $draw_lines =
 						$img .= "_warning.png";
 						break;
 					default:
-					$img .= ".png";
 						// Default is Grey (Other)
+						$img .= ".png";
+						break;
 				}
 				
 				if (is_file($img))
@@ -537,11 +571,106 @@ function print_pandora_visual_map ($id_layout, $show_links = true, $draw_lines =
 				echo "</div>";
 			}
 
+			switch ($layout_data['type']) {
+				case 4:
+					// ****************************************************************
+					// LABEL (type = 4)
+					// ****************************************************************
+					$z_index = 4;
+					if ($resizedMap)
+						echo '<div style="text-align: center; z-index: '.$z_index.'; '.($layout_data['label_color'][0] == '#' ? 'color: '.$layout_data['label_color'].';' : '').' position: absolute; margin-left: '.((integer)($proportion * $layout_data['pos_x'])).'px; margin-top:'.((integer)($proportion * $layout_data['pos_y'])).'px;" id="layout-data-'.$layout_data['id'].'" class="layout-data">';
+					else
+						echo '<div style="text-align: center; z-index: '.$z_index.'; '.($layout_data['label_color'][0] == '#' ? 'color: '.$layout_data['label_color'].';' : '').' position: absolute; margin-left: '.$layout_data['pos_x'].'px; margin-top:'.$layout_data['pos_y'].'px;" id="layout-data-'.$layout_data['id'].'" class="layout-data">';
+					
+					$endTagA = false;
+					if ($show_links) {
+						if (!isset($id_agent)) $id_agent = 0;
+						if (($id_agent > 0) && ($layout_data['id_layout_linked'] == "" || $layout_data['id_layout_linked'] == 0)) {
+							// Link to an agent
+							echo '<a style="' . ($layout_data['label_color'][0] == '#' ? 'color: '.$layout_data['label_color'].';' : '') . '" href="index.php?sec=estado&amp;sec2=operation/agentes/ver_agente&amp;id_agente='.$id_agent.'">';
+							$endTagA = true;
+						} 
+						elseif ($layout_data['id_layout_linked'] > 0) {
+							// Link to a map
+							echo '<a style="' . ($layout_data['label_color'][0] == '#' ? 'color: '.$layout_data['label_color'].';' : '') . '" href="index.php?sec=visualc&amp;sec2=operation/visual_console/render_view&amp;pure='.$config["pure"].'&amp;id='.$layout_data["id_layout_linked"].'">';
+							$endTagA = true;
+						}
+					}
+					if ($layout_data['label_color'][0] == '#') {
+						echo "<br />";
+						echo $layout_data['label'];	
+					}
+					if ($endTagA) echo "</a>";
+					echo "</div>";
+					break;
+				case 5:
+					// ****************************************************************
+					// ICON (type = 5)
+					// ****************************************************************
+					$z_index = 4;
+					if ($resizedMap)
+						echo '<div style="text-align: center; z-index: '.$z_index.'; '.($layout_data['label_color'][0] == '#' ? 'color: '.$layout_data['label_color'].';' : '').' position: absolute; margin-left: '.((integer)($proportion * $layout_data['pos_x'])).'px; margin-top:'.((integer)($proportion * $layout_data['pos_y'])).'px;" id="layout-data-'.$layout_data['id'].'" class="layout-data">';
+					else
+						echo '<div style="text-align: center; z-index: '.$z_index.'; '.($layout_data['label_color'][0] == '#' ? 'color: '.$layout_data['label_color'].';' : '').' position: absolute; margin-left: '.$layout_data['pos_x'].'px; margin-top:'.$layout_data['pos_y'].'px;" id="layout-data-'.$layout_data['id'].'" class="layout-data">';
+					
+					$endTagA = false;
+					if ($show_links) {
+						if (!isset($id_agent)) $id_agent = 0;
+						if (($id_agent > 0) && ($layout_data['id_layout_linked'] == "" || $layout_data['id_layout_linked'] == 0)) {
+							// Link to an agent
+							echo '<a style="' . ($layout_data['label_color'][0] == '#' ? 'color: '.$layout_data['label_color'].';' : '') . '" href="index.php?sec=estado&amp;sec2=operation/agentes/ver_agente&amp;id_agente='.$id_agent.'">';
+							$endTagA = true;
+						} 
+						elseif ($layout_data['id_layout_linked'] > 0) {
+							// Link to a map
+							echo '<a style="' . ($layout_data['label_color'][0] == '#' ? 'color: '.$layout_data['label_color'].';' : '') . '" href="index.php?sec=visualc&amp;sec2=operation/visual_console/render_view&amp;pure='.$config["pure"].'&amp;id='.$layout_data["id_layout_linked"].'">';
+							$endTagA = true;
+						}
+					}
+				
+					$img_style = array ();
+					$img_style["title"] = $layout_data["label"];
+				
+					if (!empty ($layout_data["width"])) {
+						$img_style["width"] = $layout_data["width"];
+					} 
+					if (!empty ($layout_data["height"])) {
+						$img_style["height"] = $layout_data["height"];
+					}
+				
+					$img = "images/console/icons/".$layout_data["image"] . ".png";
+				
+					if (is_file($img))
+						$infoImage = getimagesize($img);
+				
+					if (!empty ($layout_data["width"])) {
+						if ($resizedMap)
+							$img_style["width"] = (integer)($proportion * $layout_data["width"]);
+						else
+							$img_style["width"] = $layout_data["width"];
+					}
+					else
+						$img_style["width"] = (integer)($proportion * $infoImage[0]);
+				
+					if (!empty ($layout_data["height"])) {
+						if ($resizedMap)
+							$img_style["height"] = (integer)($proportion * $img_style["height"]);
+						else
+							$img_style["height"] = $layout_data["height"];
+					}
+					else
+						$img_style["height"] = (integer)($proportion * $infoImage[1]);
+				
+					print_image ($img, false, $img_style);
+					
+					if ($endTagA) echo "</a>";
+					
+					echo "</div>";
+					break;
+				case 2:
 					// ****************************************************************
 					// SIMPLE DATA VALUE (type = 2)
 					// ****************************************************************
-			switch ($layout_data['type']) {
-			case 2:
 					if ($resizedMap)
 						echo '<div style="z-index: 1; color: '.$layout_data['label_color'].'; position: absolute; margin-left: '.((integer)($proportion *$layout_data['pos_x'])).'px; margin-top:'.((integer)($proportion *$layout_data['pos_y'])).'px;" id="layout-data-'.$layout_data['id'].'" class="layout-data">';
 					else
@@ -550,13 +679,10 @@ function print_pandora_visual_map ($id_layout, $show_links = true, $draw_lines =
 					echo get_db_value ('datos', 'tagente_estado', 'id_agente_modulo', $layout_data['id_agente_modulo']);
 					echo '</strong></div>';
 					break;	
-
+				case 3:
 					// ****************************************************************
 					// Progress bar
 					// ****************************************************************	
-			case 3:
-				
-					// Percentile bar (type = 3)
 					if ($resizedMap)
 						echo '<div style="text-align: center; z-index: 1; color: '.$layout_data['label_color'].'; position: absolute; margin-left: '.((integer)($proportion *$layout_data['pos_x'])).'px; margin-top:'.((integer)($proportion *$layout_data['pos_y'])).'px;" id="layout-data-'.$layout_data['id'].'" class="layout-data">';
 					else
@@ -577,13 +703,11 @@ function print_pandora_visual_map ($id_layout, $show_links = true, $draw_lines =
 						echo "<img src='".$config["homeurl"]."/include/fgraph.php?tipo=progress&height=15&width=$width&mode=1&percent=$percentile'>";
 	
 					echo '</div>';
-				//}
 					break;
-
+				case 1;
 					// ****************************************************************
 					// Single module graph
 					// ****************************************************************
-			case 1;
 					// SINGLE GRAPH (type = 1)
 					if ($resizedMap)
 						echo '<div style="text-align: center; z-index: 1; color: '.$layout_data['label_color'].'; position: absolute; margin-left: '.((integer)($proportion * $layout_data['pos_x'])).'px; margin-top:'.((integer)($proportion * $layout_data['pos_y'])).'px;" id="layout-data-'.$layout_data['id'].'" class="layout-data">';
@@ -613,18 +737,6 @@ function print_pandora_visual_map ($id_layout, $show_links = true, $draw_lines =
 					echo "</div>";
 					break;
 			}
-			// Line, not implemented in editor
-			/*
-			} elseif ($layout_data['type'] == 2) {
-				$line['id'] = $layout_data['id'];
-				$line['x'] = $layout_data['pos_x'];
-				$line['y'] = $layout_data['pos_y'];
-				$line['width'] = $layout_data['width'];
-				$line['height'] = $layout_data['height'];
-				$line['color'] = $layout_data['label_color'];
-				array_push ($lines, $line);
-			}
-			*/
 			
 			// ****************************************************************
 			// Lines joining objects

pandora_console/include/styles/pandora.css

@@ -284,6 +284,10 @@ input.copy, input.add, input.graph, input.percentile, input.binary,
 input.camera, input.config, input.cancel {
 	padding-right: 21px;
 }
+input.delete_min, input.graph_min, input.percentile_min, input.binary_min,
+input.camera_min, input.config_min, input.label_min, input.icon_min {
+	padding-right: 25px;
+}
 input.next {
 	background: #e5e5e5 url(../../images/go.png) no-repeat right 2px;
 }
@@ -293,9 +297,6 @@ input.upd {
 input.wand {
 	background: #e5e5e5 url(../../images/wand.png) no-repeat right 3px;
 }
-input.delete {
-	background: #e5e5e5 url(../../images/cross.png) no-repeat right 3px;
-}
 input.search {
 	background: #e5e5e5 url(../../images/zoom.png) no-repeat right 3px;
 }
@@ -308,6 +309,12 @@ input.ok {
 input.add {
 	background: #e5e5e5 url(../../images/add.png) no-repeat right 3px;
 }
+input.cancel {
+	background: #e5e5e5 url(../../images/cancel.png) no-repeat right 3px;
+}
+input.delete {
+	background: #e5e5e5 url(../../images/cross.png) no-repeat right 3px;
+}
 input.graph {
 	background: #e5e5e5 url(../../images/chart_curve.png) no-repeat right 3px;
 }
@@ -323,8 +330,53 @@ input.camera {
 input.config {
 	background: #e5e5e5 url(../../images/config.png) no-repeat right 3px;
 }
-input.cancel {
+input.delete_min {
-	background: #e5e5e5 url(../../images/cancel.png) no-repeat right 3px;
+	background: #e5e5e5 url(../../images/cross.png) no-repeat center;
+}
+input.delete_min[disabled] {
+	background: #e5e5e5 url(../../images/cross.disabled.png) no-repeat center;
+}
+input.graph_min {
+	background: #e5e5e5 url(../../images/chart_curve.png) no-repeat center;
+}
+input.graph_min[disabled] {
+	background: #e5e5e5 url(../../images/chart_curve.disabled.png) no-repeat center;
+}
+input.percentile_min {
+	background: #e5e5e5 url(../../images/chart_bar.png) no-repeat center;
+}
+input.percentile_min[disabled] {
+	background: #e5e5e5 url(../../images/chart_bar.disabled.png) no-repeat center;
+}
+input.binary_min {
+	background: #e5e5e5 url(../../images/binary.png) no-repeat center;
+}
+input.binary_min[disabled] {
+	background: #e5e5e5 url(../../images/binary.disabled.png) no-repeat center;
+}
+input.camera_min {
+	background: #e5e5e5 url(../../images/camera.png) no-repeat center;
+}
+input.camera_min[disabled] {
+	background: #e5e5e5 url(../../images/camera.disabled.png) no-repeat center;
+}
+input.config_min {
+	background: #e5e5e5 url(../../images/config.png) no-repeat center;
+}
+input.config_min[disabled] {
+	background: #e5e5e5 url(../../images/config.disabled.png) no-repeat center;
+}
+input.label_min {
+	background: #e5e5e5 url(../../images/tag_red.png) no-repeat center;
+}
+input.label_min[disabled] {
+	background: #e5e5e5 url(../../images/tag_red.disabled.png) no-repeat center;
+}
+input.icon_min {
+	background: #e5e5e5 url(../../images/photo.png) no-repeat center;
+}
+input.icon_min[disabled] {
+	background: #e5e5e5 url(../../images/photo.disabled.png) no-repeat center;
 }
 table, img {
 	border: 0px;