Merge branch 'develop' of https://github.com/pandorafms/pandorafms into develop

pandora_console/extras/pandoradb_migrate_5.1_to_6.0.mysql.sql

@@ -10,7 +10,7 @@ ALTER TABLE tlayout DROP COLUMN fullscreen;
 
 ALTER TABLE tlayout_data DROP COLUMN no_link_color;
 ALTER TABLE tlayout_data DROP COLUMN label_color;
-
-
-
+ALTER TABLE tlayout_data ADD COLUMN `border_width` INTEGER UNSIGNED NOT NULL default 0;
+ALTER TABLE tlayout_data ADD COLUMN `border_color` varchar(200) DEFAULT "";
+ALTER TABLE tlayout_data ADD COLUMN `fill_color` varchar(200) DEFAULT "";
 

pandora_console/extras/pandoradb_migrate_5.1_to_6.0.oracle.sql

@@ -10,3 +10,6 @@ ALTER TABLE tlayout DROP COLUMN fullscreen;
 
 ALTER TABLE tlayout_data DROP COLUMN no_link_color;
 ALTER TABLE tlayout_data DROP COLUMN label_color;
+ALTER TABLE tlayout_data ADD COLUMN border_width INTEGER NOT NULL default 0;
+ALTER TABLE tlayout_data ADD COLUMN border_color varchar(200) DEFAULT "";
+ALTER TABLE tlayout_data ADD COLUMN fill_color varchar(200) DEFAULT "";

pandora_console/extras/pandoradb_migrate_5.1_to_6.0.postgreSQL.sql

@@ -10,3 +10,6 @@ ALTER TABLE "tlayout" DROP COLUMN "fullscreen";
 
 ALTER TABLE "tlayout_data" DROP COLUMN "no_link_color";
 ALTER TABLE "tlayout_data" DROP COLUMN "label_color";
+ALTER TABLE "tlayout_data" ADD COLUMN "border_width" INTEGER NOT NULL default 0;
+ALTER TABLE "tlayout_data" ADD COLUMN "border_color" varchar(200) DEFAULT "";
+ALTER TABLE "tlayout_data" ADD COLUMN "fill_color" varchar(200) DEFAULT "";

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -16,12 +16,16 @@ var is_opened_palette = false;
 var idItem = 0;
 var selectedItem = null;
 var lines = Array();
+var user_lines = Array();
 var toolbuttonActive = null;
 var autosave = true;
 var list_actions_pending_save = [];
 var temp_id_item = 0;
 var parents = {};
 
+var obj_js_user_lines = null;
+
+
 var SIZE_GRID = 16; //Const the size (for width and height) of grid.
 
 function toggle_advance_options_palette(close) {
@@ -50,9 +54,13 @@ function visual_map_main() {
 	//Fixed to wait the load of images.
 	$(window).load(function() {
 			draw_lines(lines, 'background', true);
+			
+			draw_user_lines("", 0, 0, 0 , 0, 0, true);
 		}
 	);
 	
+	obj_js_user_lines = new jsGraphics("background");
+	
 	$("input[name='radio_choice']").on('change', function() {
 		var radio_value = $("input[name='radio_choice']:checked").val();
 		
@@ -103,8 +111,10 @@ function update_button_palette_callback() {
 	switch (selectedItem) {
 		case 'background':
 			if(values['width'] == 0 && values['height'] == 0) {
-				values['width'] = $("#hidden-background_original_width").val();
-				values['height'] = $("#hidden-background_original_height").val();
+				values['width'] =
+					$("#hidden-background_original_width").val();
+				values['height'] =
+					$("#hidden-background_original_height").val();
 			}
 			$("#background").css('width', values['width']);
 			$("#background").css('height', values['height']);
@@ -129,6 +139,13 @@ function update_button_palette_callback() {
 			
 			idElement = 0;
 			break;
+		case 'box_item':
+			$("#" + idItem + " div").css('background-color', values['fill_color']);
+			$("#" + idItem + " div").css('border-color', values['border_color']);
+			$("#" + idItem + " div").css('border-width', values['border_width'] + "px");
+			$("#" + idItem + " div").css('height', values['height_box'] + "px");
+			$("#" + idItem + " div").css('width', values['width_box'] + "px");
+			break;
 		case 'group_item':
 		case 'static_graph':
 			$("#text_" + idItem).html(values['label']);
@@ -245,6 +262,17 @@ function readFields() {
 	values['id_group'] = $("select[name=group]").val();
 	values['id_custom_graph'] = parseInt(
 		$("#custom_graph option:selected").val());
+	values['width_box'] = parseInt(
+		$("input[name='width_box']").val());
+	values['height_box'] = parseInt(
+		$("input[name='height_box']").val());
+	values['border_color'] = $("input[name='border_color']").val();
+	values['border_width'] = parseInt(
+		$("input[name='border_width']").val());
+	values['fill_color'] = $("input[name='fill_color']").val();
+	values['line_width'] = parseInt(
+		$("input[name='line_width']").val());
+	values['line_color'] = $("input[name='line_color']").val();
 	
 	if (metaconsole != 0) {
 		values['metaconsole'] = 1;
@@ -271,6 +299,8 @@ function create_button_palette_callback() {
 	//VALIDATE DATA
 	var validate = true;
 	switch (creationItem) {
+		case 'box_item':
+			break;
 		case 'group_item':
 		case 'static_graph':
 			if ((values['label'] == '') && (values['image'] == '')) {
@@ -344,11 +374,182 @@ function create_button_palette_callback() {
 	}
 	
 	if (validate) {
+		switch (creationItem) {
+			case 'line_item':
+				create_line('step_1', values);
+				break;
+			default:
 				insertDB(creationItem, values);
+				break;
+		}
+		
+		
 		toggle_item_palette();
 	}
 }
 
+function delete_user_line(idElement) {
+	var found = null;
+	
+	jQuery.each(user_lines, function(iterator, user_line) {
+		if (user_line['id'] == idElement) {
+			found = iterator;
+			return;
+		}
+	});
+	
+	if (found != null) {
+		user_lines.splice(found, 1);
+	}
+}
+
+function update_user_line(type, idElement, top, left) {
+	jQuery.each(user_lines, function(iterator, user_line) {
+		
+		if (user_line['id'] != idElement)
+			return;
+		
+		switch (type) {
+			// -- line_item --
+			case 'handler_start':
+			// ---------------
+				
+				user_lines[iterator]['start_x'] = left;
+				user_lines[iterator]['start_y'] = top;
+				
+				break;
+			// -- line_item --
+			case 'handler_end':
+			// ---------------
+				
+				user_lines[iterator]['end_x'] = left;
+				user_lines[iterator]['end_y'] = top;
+				
+				break;
+		}
+	});
+}
+
+function draw_user_lines(color, thickness, start_x, start_y , end_x,
+	end_y, only_defined_lines) {
+	
+	obj_js_user_lines.clear();
+	
+	// Draw the previous lines
+	for (iterator = 0; iterator < user_lines.length; iterator++) {
+		
+		obj_js_user_lines.setStroke(user_lines[iterator]['line_width']);
+		obj_js_user_lines.setColor(user_lines[iterator]['line_color']);
+		obj_js_user_lines.drawLine(
+			user_lines[iterator]['start_x'],
+			user_lines[iterator]['start_y'],
+			user_lines[iterator]['end_x'],
+			user_lines[iterator]['end_y']);
+		
+	}
+	
+	
+	if (typeof(only_defined_lines) == "undefined") {
+		only_defined_lines = false;
+	}
+	
+	if (!only_defined_lines) {
+		obj_js_user_lines.setStroke(thickness);
+		obj_js_user_lines.setColor(color);
+		obj_js_user_lines.drawLine(start_x, start_y, end_x, end_y);
+	}
+	
+	obj_js_user_lines.paint();
+}
+
+function create_line(step, values) {
+	
+	$('.item').unbind('click');
+	$('.item').unbind('dblclick');
+	$('.item').unbind('dragstop');
+	$('.item').unbind('dragstart');
+	
+	$('#background').unbind('click');
+	$('#background').unbind('dblclick');
+	
+	
+	switch (step) {
+		case 'step_1':
+			$("#background *").css("cursor", "crosshair");
+			
+			
+			$("#background *")
+				.on('mousemove', function(e) {
+					$('#div_step_1').css({
+						left:	e.pageX,
+						top:	e.pageY
+					});
+					$('#div_step_1').show();
+					
+					// 2 for the black border of background
+					values['line_start_x'] =
+						e.pageX - $("#background").position().left - 2;
+					values['line_start_y'] =
+						e.pageY - $("#background").position().top - 2;
+					
+				});
+			
+			
+			$("#background *")
+				.on('click', function(e) {
+					create_line('step_2', values);
+				});
+			
+			break;
+		case 'step_2':
+			$('#div_step_1').hide();
+			$("#background *").off('mousemove');
+			$("#background *").off('click');
+			
+			
+			$("#background *")
+				.on('mousemove', function(e) {
+					$('#div_step_2').css({
+						left:	e.pageX,
+						top:	e.pageY
+					});
+					$('#div_step_2').show();
+					
+					// 2 for the black border of background
+					values['line_end_x'] =
+						e.pageX - $("#background").position().left - 2;
+					values['line_end_y'] =
+						e.pageY - $("#background").position().top - 2;
+					
+					draw_user_lines(
+						values['line_color'],
+						values['line_width'],
+						values['line_start_x'],
+						values['line_start_y'],
+						values['line_end_x'] - 3,
+						values['line_end_y'] - 3);
+				});
+			
+			$("#background *")
+				.on('click', function(e) {
+					create_line('step_3', values);
+				});
+			break;
+		case 'step_3':
+			$('#div_step_2').hide();
+			$("#background *").off('mousemove');
+			$("#background *").off('click');
+			
+			$("#background *").css("cursor", "");
+			
+			insertDB("line_item", values);
+			
+			eventsItems();
+			eventsBackground();
+			break;
+	}
+}
+
 function toggle_item_palette() {
 	var item = null;
 	
@@ -362,6 +563,8 @@ function toggle_item_palette() {
 		activeToolboxButton('icon', true);
 		activeToolboxButton('percentile_item', true);
 		activeToolboxButton('group_item', true);
+		activeToolboxButton('box_item', true);
+		activeToolboxButton('line_item', true);
 		
 		if (typeof(enterprise_activeToolboxButton) == 'function') {
 			enterprise_activeToolboxButton(true);
@@ -386,6 +589,8 @@ function toggle_item_palette() {
 		activeToolboxButton('icon', false);
 		activeToolboxButton('percentile_item', false);
 		activeToolboxButton('group_item', false);
+		activeToolboxButton('box_item', false);
+		activeToolboxButton('line_item', false);
 		
 		activeToolboxButton('copy_item', false);
 		activeToolboxButton('edit_item', false);
@@ -414,7 +619,18 @@ function toggle_item_palette() {
 			
 			item = selectedItem;
 			toolbuttonActive = item;
+			
+			switch (item) {
+				case 'handler_start':
+				case 'handler_end':
+					activeToolboxButton('line_item', true);
+					break;
+				default:
 					activeToolboxButton(toolbuttonActive, true);
+					break;
+			}
+			
+			
 			$("#button_create_row").css('display', 'none');
 			$("#button_update_row").css('display', '');
 			cleanFields();
@@ -553,14 +769,22 @@ function loadFieldsFromDB(item) {
 							$('#' + periodId + '_manual').show();
 						}
 					}
-					if (key == 'width') $("input[name=width]").val(val);
-					if (key == 'height') $("input[name=height]").val(val);
-					if (key == 'parent_item') $("select[name=parent]").val(val);
-					if (key == 'id_layout_linked') $("select[name=map_linked]").val(val);
-					if (key == 'width_percentile') $("input[name=width_percentile]").val(val);
-					if (key == 'max_percentile') $("input[name=max_percentile]").val(val);
-					if (key == 'width_module_graph') $("input[name=width_module_graph]").val(val);
-					if (key == 'height_module_graph') $("input[name=height_module_graph]").val(val);
+					if (key == 'width')
+						$("input[name=width]").val(val);
+					if (key == 'height')
+						$("input[name=height]").val(val);
+					if (key == 'parent_item')
+						$("select[name=parent]").val(val);
+					if (key == 'id_layout_linked')
+						$("select[name=map_linked]").val(val);
+					if (key == 'width_percentile')
+						$("input[name=width_percentile]").val(val);
+					if (key == 'max_percentile')
+						$("input[name=max_percentile]").val(val);
+					if (key == 'width_module_graph')
+						$("input[name=width_module_graph]").val(val);
+					if (key == 'height_module_graph')
+						$("input[name=height_module_graph]").val(val);
 					
 					if (key == 'type_percentile') {
 						if (val == 'percentile') {
@@ -597,6 +821,31 @@ function loadFieldsFromDB(item) {
 							$("#id_server_name").val(val);
 						}
 					}
+					
+					if (key == 'width_box')
+						$("input[name='width_box']").val(val);
+					if (key == 'height_box')
+						$("input[name='height_box']").val(val);
+					if (key == 'border_color') {
+						$("input[name='border_color']").val(val);
+						$("#border_color_row .ColorPickerDivSample")
+							.css('background-color', val);
+					}
+					if (key == 'border_width')
+						$("input[name='border_width']").val(val);
+					if (key == 'fill_color') {
+						$("input[name='fill_color']").val(val);
+						$("#fill_color_row .ColorPickerDivSample")
+							.css('background-color', val);
+					}
+					if (key == 'line_width')
+						$("input[name='line_width']").val(val);
+					if (key == 'line_color') {
+						$("input[name='line_color']").val(val);
+						$("#line_color_row .ColorPickerDivSample")
+							.css('background-color', val);
+					}
+					
 				});
 				
 				if (data.type == 1) {
@@ -671,6 +920,7 @@ function setAspectRatioBackground(side) {
 }
 
 function hiddenFields(item) {
+	
 	//The method to hidden and show is
 	//a row have a id and multiple class
 	//then the steps is
@@ -757,6 +1007,28 @@ function hiddenFields(item) {
 	$("#custom_graph_row").css('display', 'none');
 	$("#custom_graph_row." + item).css('display', '');
 	
+	$("#box_size_row").css('display', 'none');
+	$("#box_size_row." + item).css('display', '');
+	
+	$("#border_color_row").css('display', 'none');
+	$("#border_color_row." + item).css('display', '');
+	
+	$("#border_width_row").css('display', 'none');
+	$("#border_width_row." + item).css('display', '');
+	
+	$("#fill_color_row").css('display', 'none');
+	$("#fill_color_row." + item).css('display', '');
+	
+	$("#line_color_row").css('display', 'none');
+	$("#line_color_row." + item).css('display', '');
+	
+	$("#line_width_row").css('display', 'none');
+	$("#line_width_row." + item).css('display', '');
+	
+	
+	
+	
+	
 	$("input[name='radio_choice']").trigger('change');
 	
 	if (typeof(enterprise_hiddenFields) == 'function') {
@@ -791,6 +1063,15 @@ function cleanFields(item) {
 	$("select[name=map_linked]").val('');
 	$("input[name=width_module_graph]").val(300);
 	$("input[name=height_module_graph]").val(180);
+	$("input[name='width_box']").val(300);
+	$("input[name='height_box']").val(180);
+	$("input[name='border_color']").val('#000000');
+	$("input[name='border_width']").val(3);
+	$("input[name='fill_color']").val('#ffffff');
+	$("input[name='line_width']").val(3);
+	$("input[name='line_color']").val('#000000');
+	
+	
 	$("#preview").empty();
 	
 	
@@ -1066,6 +1347,34 @@ function getPercentileBubble(id_data, values) {
 	return img;
 }
 
+function get_image_url(img_src) {
+	var img_url= null;
+	var parameter = Array();
+	parameter.push ({name: "page", value: "include/ajax/skins.ajax"});
+	parameter.push ({name: "get_image_path", value: "1"});
+	parameter.push ({name: "img_src", value: img_src});
+	parameter.push ({name: "only_src", value: "1"});
+	
+	var url_ajax = "ajax.php";
+	if (metaconsole != 0) {
+		url_ajax = "../../ajax.php";
+	}
+	
+	
+	jQuery.ajax ({
+		type: 'POST',
+		url: url_ajax,
+		data: parameter,
+		async: false,
+		timeout: 10000,
+		success: function (data) {
+			img_url = data;
+		}
+	});
+	
+	return img_url;
+}
+
 function getImageElement(id_data) {
 	metaconsole = $("input[name='metaconsole']").val();
 	
@@ -1138,6 +1447,31 @@ function createItem(type, values, id_data) {
 	}
 	
 	switch (type) {
+		case 'box_item':
+			item = $('<div id="' + id_data + '" '
+				+ 'class="item box_item" '
+				+ 'style="text-align: center; '
+					+ 'position: absolute; ' 
+					+ 'display: inline-block; '
+					+ 'z-index: 1; '
+					+ 'top: ' + values['top'] + 'px; '
+					+ 'left: ' + values['left'] + 'px;">'
+					+ '<div '
+					+ 'style=" ' 
+					+ 'width: ' + values['width_box'] + 'px;'
+					+ 'height: ' + values['height_box'] + 'px;'
+					+ 'border-style: solid;'
+					+ 'border-width: ' + values['border_width'] + 'px;'
+					+ 'border-color: ' + values['border_color'] + ';'
+					+ 'background-color: ' + values['fill_color'] + ';'
+					+ '">'
+					+ '</div>'
+				+ '</div>'
+				+ '<input id="hidden-status_' + id_data + '" '
+					+ 'type="hidden" value="' + element_status + '" '
+					+ 'name="status_' + id_data + '">'
+			);
+			break;
 		case 'group_item':
 		case 'static_graph':
 			if ((values['width'] == 0) && (values['height'] == 0)) {
@@ -1305,7 +1639,8 @@ function createItem(type, values, id_data) {
 	}
 	
 	$("#background").append(item);
-	$(".item").css('z-index', '1');
+	$(".item").css('z-index', '2');
+	$(".box_item").css('z-index', '1');
 	
 	if (values['parent'] != 0) {
 		var line = {"id": id_data,
@@ -1358,6 +1693,56 @@ function insertDB(type, values) {
 					addItemSelectParents(id, data['text']);
 					//Reload all events for the item and new item.
 					eventsItems();
+					
+					switch (type) {
+						case 'line_item':
+							var line = {
+								"id": id,
+								"start_x":		values['line_start_x'],
+								"start_y":		values['line_start_y'],
+								"end_x":		values['line_end_x'],
+								"end_y":		values['line_end_y'],
+								"line_width":	values['line_width'],
+								"line_color":	values['line_color']};
+							
+							user_lines.push(line);
+							
+							// Draw handlers
+							radious_handle = 6;
+							
+							// Draw handler start
+							var img_src= get_image_url("images/dot_red.png");
+							
+							item = $('<div id="handler_start_' + id + '" ' +
+								'class="item handler_start" ' +
+								'style="text-align: center; ' +
+									'position: absolute; ' +
+									'top: ' + (values['line_start_y']  - radious_handle) + 'px; ' +
+									'left: ' + (values['line_start_x']  - radious_handle) + 'px;">' +
+									
+									'<img src="' + img_src + '" />' + 
+									
+								'</div>'
+							);
+							$("#background").append(item);
+							
+							// Draw handler stop
+							var img_src= get_image_url("images/dot_green.png");
+							
+							item = $('<div id="handler_end_' + id + '" ' +
+								'class="item handler_end" ' +
+								'style="text-align: center; ' +
+									'position: absolute; ' +
+									'top: ' + (values['line_end_y']  - radious_handle) + 'px; ' +
+									'left: ' + (values['line_end_x']  - radious_handle) + 'px;">' +
+									
+									'<img src="' + img_src + '" />' + 
+									
+								'</div>'
+							);
+							$("#background").append(item);
+							break;
+					}
 				}
 				else {
 					//TODO
@@ -1373,16 +1758,34 @@ function updateDB_visual(type, idElement , values, event, top, left) {
 		url_ajax = "../../ajax.php";
 	}
 	
+	radious_handle = 6;
+	
 	switch (type) {
+		case 'handler_start':
+			$("#handler_start_" + idElement)
+				.css('top', top + 'px');
+			$("#handler_start_" + idElement)
+				.css('left', left + 'px');
+			break;
+		case 'handler_end':
+			$("#handler_end_" + idElement).css('top', (top - radious_handle) + 'px');
+			$("#handler_end_" + idElement).css('left', (left - radious_handle) + 'px');
+			break;
 		case 'group_item':
 		case 'static_graph':
 			if ((event != 'resizestop') && (event != 'show_grid')
 				&& (event != 'dragstop')) {
 				var element_status= null;
 				var parameter = Array();
-				parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
-				parameter.push ({name: "get_element_status", value: "1"});
-				parameter.push ({name: "id_element", value: idElement});
+				parameter.push ({
+					name: "page",
+					value: "include/ajax/visual_console_builder.ajax"});
+				parameter.push ({
+					name: "get_element_status",
+					value: "1"});
+				parameter.push ({
+					name: "id_element",
+					value: idElement});
 				
 				if (metaconsole != 0) {
 					parameter.push ({name: "metaconsole", value: 1});
@@ -1428,7 +1831,8 @@ function updateDB_visual(type, idElement , values, event, top, left) {
 				
 				var params = [];
 				params.push("get_image_path=1");
-				params.push("img_src=images/console/icons/" + values['image'] + suffix);
+				params.push("img_src=" +
+					"images/console/icons/" + values['image'] + suffix);
 				params.push("page=include/ajax/skins.ajax");
 				params.push("only_src=1");
 				jQuery.ajax ({
@@ -1514,6 +1918,8 @@ function updateDB_visual(type, idElement , values, event, top, left) {
 			}
 			break;
 	}
+	
+	draw_user_lines("", 0, 0, 0 , 0, 0, true);
 }
 
 function updateDB(type, idElement , values, event) {
@@ -1537,6 +1943,16 @@ function updateDB(type, idElement , values, event) {
 			//Force to move action when resize a background, for to avoid
 			//lost the label.
 			case 'dragstop':
+				
+				switch (type) {
+					case 'handler_start':
+						idElement = idElement.replace("handler_start_", "");
+						break;
+					case 'handler_end':
+						idElement = idElement.replace("handler_end_", "");
+						break;
+				}
+				
 				action = "move";
 				break;
 		}
@@ -1555,10 +1971,17 @@ function updateDB(type, idElement , values, event) {
 		parameter.push({name: key, value: val});
 	});
 	
+	
+	switch (type) {
+		// -- line_item --
+		case 'handler_start':
+		// ---------------
 			if ((typeof(values['mov_left']) != 'undefined') &&
 				(typeof(values['mov_top']) != 'undefined')) {
-		top = parseInt($("#" + idElement).css('top').replace('px', ''));
-		left = parseInt($("#" + idElement).css('left').replace('px', ''));
+				top = parseInt($("#handler_start_" + idElement)
+					.css('top').replace('px', ''));
+				left = parseInt($("#handler_start_" + idElement)
+					.css('left').replace('px', ''));
 			}
 			else if ((typeof(values['absolute_left']) != 'undefined') &&
 				(typeof(values['absolute_top']) != 'undefined')) {
@@ -1566,6 +1989,51 @@ function updateDB(type, idElement , values, event) {
 				left = values['absolute_left'];
 			}
 			
+			//Added the radious of image point of handler
+			top = top + 6;
+			left = left + 6;
+			
+			update_user_line(type, idElement, top, left);
+			break;
+		// -- line_item --
+		case 'handler_end':
+		// ---------------
+			if ((typeof(values['mov_left']) != 'undefined') &&
+				(typeof(values['mov_top']) != 'undefined')) {
+				top = parseInt($("#handler_end_" + idElement)
+					.css('top').replace('px', ''));
+				left = parseInt($("#handler_end_" + idElement)
+					.css('left').replace('px', ''));
+			}
+			else if ((typeof(values['absolute_left']) != 'undefined') &&
+				(typeof(values['absolute_top']) != 'undefined')) {
+				top = values['absolute_top'];
+				left = values['absolute_left'];
+			}
+			
+			//Added the radious of image point of handler
+			top = top + 6;
+			left = left + 6;
+			
+			update_user_line(type, idElement, top, left);
+			break;
+		default:
+			
+			if ((typeof(values['mov_left']) != 'undefined') &&
+				(typeof(values['mov_top']) != 'undefined')) {
+				top = parseInt($("#" + idElement)
+					.css('top').replace('px', ''));
+				left = parseInt($("#" + idElement)
+					.css('left').replace('px', ''));
+			}
+			else if ((typeof(values['absolute_left']) != 'undefined') &&
+				(typeof(values['absolute_top']) != 'undefined')) {
+				top = values['absolute_top'];
+				left = values['absolute_left'];
+			}
+			break;
+	}
+	
 	if ((typeof(top) != 'undefined') && (typeof(left) != 'undefined')) {
 		if ((typeof(values['top']) == 'undefined') &&
 			(typeof(values['left']) == 'undefined')) {
@@ -1578,6 +2046,7 @@ function updateDB(type, idElement , values, event) {
 		}
 	}
 	
+	
 	success_update = false;
 	if (!autosave) {
 		list_actions_pending_save.push(parameter);
@@ -1590,8 +2059,7 @@ function updateDB(type, idElement , values, event) {
 			data: parameter,
 			type: "POST",
 			dataType: 'text',
-			success: function (data)
-				{
+			success: function (data) {
 				updateDB_visual(type, idElement , values, event, top, left);
 			}
 		});
@@ -1674,9 +2142,22 @@ function deleteDB(idElement) {
 							lines.splice(i, 1);
 						}
 					});
+					
+					if ($("#handler_start_" + idElement).length ||
+						$("#handler_end_" + idElement).length) {
+						
+						// Line item
+						
+						$("#handler_start_" + idElement).remove();
+						$("#handler_end_" + idElement).remove();
+						
+						delete_user_line(idElement);
+					}
+					
+					
 					refresh_lines(lines, 'background', true);
 					
-					
+					draw_user_lines("", 0, 0, 0 , 0, 0, true);
 					
 					$('#' + idElement).remove();
 					activeToolboxButton('delete_item', false);
@@ -1694,10 +2175,12 @@ function activeToolboxButton(id, active) {
 	}
 	
 	if (active) {
-		$("input." + id + "[name=button_toolbox2]").removeAttr('disabled');
+		$("input." + id + "[name=button_toolbox2]")
+			.removeAttr('disabled');
 	}
 	else {
-		$("input." + id + "[name=button_toolbox2]").attr('disabled', true);
+		$("input." + id + "[name=button_toolbox2]")
+			.attr('disabled', true);
 	}
 }
 
@@ -1725,6 +2208,7 @@ function eventsItems(drag) {
 	//$(".item").resizable(); //Disable but run in ff and in the waste (aka micro$oft IE) show ungly borders
 	
 	$('.item').bind('click', function(event, ui) {
+		
 		event.stopPropagation();
 		if (!is_opened_palette) {
 			var divParent = $(event.target);
@@ -1734,6 +2218,15 @@ function eventsItems(drag) {
 			unselectAll();
 			$(divParent).css('border', '2px blue dotted');
 			
+			if ($(divParent).hasClass('box_item')) {
+				creationItem = null;
+				selectedItem = 'box_item';
+				idItem = $(divParent).attr('id');
+				activeToolboxButton('copy_item', true);
+				activeToolboxButton('edit_item', true);
+				activeToolboxButton('delete_item', true);
+				activeToolboxButton('show_grid', false);
+			}
 			if ($(divParent).hasClass('static_graph')) {
 				creationItem = null;
 				selectedItem = 'static_graph';
@@ -1797,6 +2290,24 @@ function eventsItems(drag) {
 				activeToolboxButton('delete_item', true);
 				activeToolboxButton('show_grid', false);
 			}
+			if ($(divParent).hasClass('handler_start')) {
+				idItem = $(divParent).attr('id')
+					.replace("handler_start_", "");
+				creationItem = null;
+				selectedItem = 'handler_start';
+				activeToolboxButton('edit_item', true);
+				activeToolboxButton('delete_item', true);
+				activeToolboxButton('show_grid', false);
+			}
+			if ($(divParent).hasClass('handler_end')) {
+				idItem = $(divParent).attr('id')
+					.replace("handler_end_", "");
+				creationItem = null;
+				selectedItem = 'handler_end';
+				activeToolboxButton('edit_item', true);
+				activeToolboxButton('delete_item', true);
+				activeToolboxButton('show_grid', false);
+			}
 			
 			//Maybe receive a click event any Enterprise item.
 			if (typeof(enterprise_click_item_callback) == 'function') {
@@ -1807,6 +2318,7 @@ function eventsItems(drag) {
 	
 	//Double click in the item
 	$('.item').bind('dblclick', function(event, ui) {
+		
 		event.stopPropagation();
 		if ((!is_opened_palette) && (autosave)) {
 			toggle_item_palette();
@@ -1818,12 +2330,16 @@ function eventsItems(drag) {
 	$(".item").draggable({containment: "#background", grid: drag});
 	
 	$('.item').bind('dragstart', function(event, ui) {
+		
 		event.stopPropagation();
 		if (!is_opened_palette) {
 			unselectAll();
 			$(event.target).css('border', '2px blue dotted');
 			
 			selectedItem = null;
+			if ($(event.target).hasClass('box_item')) {
+				selectedItem = 'box_item';
+			}
 			if ($(event.target).hasClass('static_graph')) {
 				selectedItem = 'static_graph';
 			}
@@ -1845,6 +2361,12 @@ function eventsItems(drag) {
 			if ($(event.target).hasClass('icon')) {
 				selectedItem = 'icon';
 			}
+			if ($(event.target).hasClass('handler_start')) {
+				selectedItem = 'handler_start';
+			}
+			if ($(event.target).hasClass('handler_end')) {
+				selectedItem = 'handler_end';
+			}
 			
 			if (selectedItem == null) {
 				//Maybe receive a click event any Enterprise item.
@@ -1855,7 +2377,28 @@ function eventsItems(drag) {
 			
 			if (selectedItem != null) {
 				creationItem = null;
+				
+				switch (selectedItem) {
+					// -- line_item --
+					case 'handler_start':
+					// ---------------
+						idItem = $(event.target).attr('id')
+							.replace("handler_end_", "");
+						idItem = $(event.target).attr('id')
+							.replace("handler_start_", "");
+						break;
+					// -- line_item --
+					case 'handler_end':
+					// ---------------
+						idItem = $(event.target).attr('id')
+							.replace("handler_end_", "");
+						idItem = $(event.target).attr('id')
+							.replace("handler_end_", "");
+						break;
+					default:
 						idItem = $(event.target).attr('id');
+						break;
+				}
 				activeToolboxButton('copy_item', true);
 				activeToolboxButton('edit_item', true);
 				activeToolboxButton('delete_item', true);
@@ -1864,6 +2407,7 @@ function eventsItems(drag) {
 	});
 	
 	$('.item').bind('dragstop', function(event, ui) {
+		
 		event.stopPropagation();
 		
 		var values = {};
@@ -1872,6 +2416,89 @@ function eventsItems(drag) {
 		
 		updateDB(selectedItem, idItem, values, 'dragstop');
 	});
+	
+	$('.item').bind('drag', function(event, ui) {
+		if ($(event.target).hasClass('handler_start')) {
+			selectedItem = 'handler_start';
+		}
+		if ($(event.target).hasClass('handler_end')) {
+			selectedItem = 'handler_end';
+		}
+		
+		var values = {};
+		values['mov_left'] = ui.position.left;
+		values['mov_top'] = ui.position.top; 
+		
+		switch (selectedItem) {
+			// -- line_item --
+			case 'handler_start':
+			// ---------------
+				idElement = $(event.target).attr('id')
+					.replace("handler_end_", "");
+				idElement = $(event.target).attr('id')
+					.replace("handler_start_", "");
+				break;
+			// -- line_item --
+			case 'handler_end':
+			// ---------------
+				idElement = $(event.target).attr('id')
+					.replace("handler_end_", "");
+				idElement = $(event.target).attr('id')
+					.replace("handler_end_", "");
+				break;
+		}
+		
+		switch (selectedItem) {
+			// -- line_item --
+			case 'handler_start':
+			// ---------------
+				if ((typeof(values['mov_left']) != 'undefined') &&
+					(typeof(values['mov_top']) != 'undefined')) {
+					var top = parseInt($("#handler_start_" + idElement)
+						.css('top').replace('px', ''));
+					var left = parseInt($("#handler_start_" + idElement)
+						.css('left').replace('px', ''));
+				}
+				else if ((typeof(values['absolute_left']) != 'undefined') &&
+					(typeof(values['absolute_top']) != 'undefined')) {
+					var top = values['absolute_top'];
+					var left = values['absolute_left'];
+				}
+				
+				//Added the radious of image point of handler
+				top = top + 6;
+				left = left + 6;
+				
+				update_user_line('handler_start', idElement, top, left);
+				
+				draw_user_lines("", 0, 0, 0 , 0, 0, true);
+				break;
+			// -- line_item --
+			case 'handler_end':
+			// ---------------
+				if ((typeof(values['mov_left']) != 'undefined') &&
+					(typeof(values['mov_top']) != 'undefined')) {
+					top = parseInt($("#handler_end_" + idElement)
+						.css('top').replace('px', ''));
+					left = parseInt($("#handler_end_" + idElement)
+						.css('left').replace('px', ''));
+				}
+				else if ((typeof(values['absolute_left']) != 'undefined') &&
+					(typeof(values['absolute_top']) != 'undefined')) {
+					top = values['absolute_top'];
+					left = values['absolute_left'];
+				}
+				
+				//Added the radious of image point of handler
+				top = top + 6;
+				left = left + 6;
+				
+				update_user_line('handler_end', idElement, top, left);
+				
+				draw_user_lines("", 0, 0, 0 , 0, 0, true);
+				break;
+		}
+	});
 }
 
 /**
@@ -1996,6 +2623,14 @@ function click_button_toolbox(id) {
 			toolbuttonActive = creationItem = 'group_item';
 			toggle_item_palette();
 			break;
+		case 'box_item':
+			toolbuttonActive = creationItem = 'box_item';
+			toggle_item_palette();
+			break;
+		case 'line_item':
+			toolbuttonActive = creationItem = 'line_item';
+			toggle_item_palette();
+			break;
 		
 		
 		

pandora_console/godmode/reporting/visual_console_builder.editor.php

@@ -85,8 +85,17 @@ foreach ($layoutDatas as $layoutData) {
 	if ($delete_pending_module == 1 || $disabled_module == 1)
 		continue;
 	
-	
+	switch ($layoutData['type']) {
+		case LINE_ITEM:
+			visual_map_print_user_line_handles($layoutData);
+			visual_map_print_user_lines("write", $layoutData);
+			break;
+		default:
 			visual_map_print_item("write", $layoutData);
+			break;
+	}
+	
+	
 	
 	
 	html_print_input_hidden('status_' . $layoutData['id'], $layoutData['status_calculated']);

pandora_console/godmode/reporting/visual_console_builder.elements.php

@@ -143,6 +143,15 @@ foreach ($layoutDatas as $layoutData) {
 			$table->data[$i + 1]['icon'] =
 				html_print_image('images/photo.png', true, array('title' => __('Icon')));
 			break;
+		case BOX_ITEM:
+			$table->data[$i + 1]['icon'] =
+				html_print_image('images/box_item.png', true, array('title' => __('Box')));
+			break;
+		case LINE_ITEM:
+			$table->data[$i + 1]['icon'] =
+				html_print_image('images/line_item.png', true,
+					array('title' => __('Line')));
+			break;
 		default:
 			if (enterprise_installed()) {
 				$table->data[$i + 1]['icon'] =
@@ -159,43 +168,75 @@ foreach ($layoutDatas as $layoutData) {
 	//First row
 	
 	//Label
-	if ($layoutData['type'] != ICON) {
+	switch ($layoutData['type']) {
+		case ICON:
+		case BOX_ITEM:
+		case LINE_ITEM:
+			// hasn't the label.
+			$table->data[$i + 1][0] = '';
+			break;
+		default:
 			$table->data[$i + 1][0] = '<span style="width: 150px; display: block;">' .
 				html_print_input_hidden('label_' . $idLayoutData, $layoutData['label'], true) .
 				'<a href="javascript: show_dialog_label_editor(' . $idLayoutData . ');">' . __('Edit label') .'</a>' .                      
 				'</span>';
+			break;
 	}
-	else {
-		//Icon haven't the label.
-		$table->data[$i + 1][0] = '';
-	}
-	
-	
 	
 	
 	//Image
-	if (($layoutData['type'] == STATIC_GRAPH) || ($layoutData['type'] == ICON)) {
-		$table->data[$i + 1][1] = html_print_select ($images_list, 'image_' . $idLayoutData, $layoutData['image'], '', 'None', '', true,  false, true, '', false, "width: 120px");
-	}
-	else {
+	switch ($layoutData['type']) {
+		case STATIC_GRAPH:
+		case ICON:
+			$table->data[$i + 1][1] =
+				html_print_select ($images_list,
+					'image_' . $idLayoutData, $layoutData['image'], '',
+					'None', '', true,  false, true, '', false,
+					"width: 120px");
+			break;
+		default:
 			$table->data[$i + 1][1] = '';
+			break;
 	}
 	
 	
 	
 	//Width and height
+	switch ($layoutData['type']) {
+		case LINE_ITEM:
+			// hasn't the width and height.
+			$table->data[$i + 1][2] = '';
+			break;
+		default:
 			$table->data[$i + 1][2] = html_print_input_text('width_' . $idLayoutData, $layoutData['width'], '', 2, 5, true) .
 				'x' .
 				html_print_input_text('height_' . $idLayoutData, $layoutData['height'], '', 2, 5, true);
+			break;
+	}
 	
 	//Position
+	switch ($layoutData['type']) {
+		case LINE_ITEM:
+			// hasn't the width and height.
+			$table->data[$i + 1][3] = '';
+			break;
+		default:
 			$table->data[$i + 1][3] = '(' . html_print_input_text('left_' . $idLayoutData, $layoutData['pos_x'], '', 2, 5, true) .
 				',' . html_print_input_text('top_' . $idLayoutData, $layoutData['pos_y'], '', 2, 5, true) .
 				')';
+			break;
+	}
 	
 	//Parent
+	switch ($layoutData['type']) {
+		case BOX_ITEM:
+		case LINE_ITEM:
+			$table->data[$i + 1][4] = "";
+			break;
+		default:
 			$table->data[$i + 1][4] = html_print_select_from_sql ('SELECT id, label FROM tlayout_data WHERE id_layout = '. $idVisualConsole . ' AND id !=' . $idLayoutData,
 				'parent_' . $idLayoutData, $layoutData['parent_item'], '', 'None', 0, true, false, true, false, 'width: 120px;');
+	}
 	
 	//Delete row button
 	if (!defined('METACONSOLE')) {
@@ -217,8 +258,10 @@ foreach ($layoutDatas as $layoutData) {
 	
 	//Agent
 	switch ($layoutData['type']) {
+		case BOX_ITEM:
 		case ICON:
 		case LABEL:
+		case LINE_ITEM:
 			$table->data[$i + 2][0] = '';
 			break;
 		default:
@@ -268,6 +311,8 @@ foreach ($layoutDatas as $layoutData) {
 	switch ($layoutData['type']) {
 		case ICON:
 		case LABEL:
+		case BOX_ITEM:
+		case LINE_ITEM:
 			$table->data[$i + 2][1] = '';
 			break;
 		default:
@@ -328,9 +373,18 @@ foreach ($layoutDatas as $layoutData) {
 	}
 	
 	//Map linked
+	switch ($layoutData['type']) {
+		case LINE_ITEM:
+		case BOX_ITEM:
+			$table->data[$i + 2][4] = "";
+			break;
+		default:
 			$table->data[$i + 2][4] = html_print_select_from_sql(
 				'SELECT id, name FROM tlayout WHERE id != ' . $idVisualConsole,
 				'map_linked_' . $idLayoutData, $layoutData['id_layout_linked'], '', 'None', '', true,  false, true, '', false, "width: 120px");
+			break;
+	}
+	
 	$table->data[$i + 2][5] = '';
 	
 	if ($alternativeStyle) {

pandora_console/include/ajax/visual_console_builder.ajax.php

@@ -71,6 +71,19 @@ $id_agent = get_parameter('id_agent', null);
 $id_metaconsole = get_parameter('id_metaconsole', null);
 $id_group = (int)get_parameter('id_group', 0);
 $id_custom_graph = get_parameter('id_custom_graph', null);
+$height_module_graph = get_parameter('id_custom_graph', null);
+$width_module_graph = get_parameter('id_custom_graph', null);
+$border_width = get_parameter('border_width', 0);
+$border_color = get_parameter('border_color', '');
+$fill_color = get_parameter('fill_color', '');
+$width_box = get_parameter('width_box', 0);
+$height_box = get_parameter('height_box', 0);
+$line_start_x = (int)get_parameter('line_start_x', 0);
+$line_start_y = (int)get_parameter('line_start_y', 0);
+$line_end_x = (int)get_parameter('line_end_x', 0);
+$line_end_y = (int)get_parameter('line_end_y', 0);
+$line_width = (int)get_parameter('line_width', 0);
+$line_color = get_parameter('line_color', '');
 
 $get_element_status = get_parameter('get_element_status', 0);
 $get_image_path_status = get_parameter('get_image_path_status', 0);
@@ -347,12 +360,29 @@ switch ($action) {
 				if ($label !== null) {
 					$values['label'] = $label;
 				}
+				
+				switch ($type) {
+					// -- line_item --
+					case 'handler_end':
+					// ---------------
+						if ($left !== null) {
+							$values['width'] = $left;
+						}
+						if ($top !== null) { 
+							$values['height'] = $top;
+						}
+						break;
+					default:
 						if ($left !== null) {
 							$values['pos_x'] = $left;
 						}
 						if ($top !== null) { 
 							$values['pos_y'] = $top;
 						}
+						break;
+				}
+				
+				
 				
 				if (defined('METACONSOLE') && $metaconsole) {
 					if ($server_name !== null) {
@@ -382,6 +412,21 @@ switch ($action) {
 					$values['id_layout_linked'] = $map_linked;
 				}
 				switch ($type) {
+					// -- line_item --
+					case 'handler_start':
+					case 'handler_end':
+					// ---------------
+						$values['border_width'] = $line_width;
+						$values['border_color'] = $line_color;
+						break;
+					case 'box_item':
+						$values['border_width'] = $border_width;
+						$values['border_color'] = $border_color;
+						$values['fill_color'] = $fill_color;
+						$values['period'] = $period;
+						$values['width'] = $width_box;
+						$values['height'] = $height_box;
+						break;
 					case 'group_item':
 						$values['id_group'] = $id_group;
 						break;
@@ -447,8 +492,26 @@ switch ($action) {
 					// Don't change the label because only change the positions
 					unset($values['label']);
 					// Don't change background color in graphs when move
-					if ($type == 'module_graph') {
+					
+					switch ($type) {
+						case 'module_graph':
 							unset($values['image']);
+							break;
+						case 'box_item':
+							unset($values['border_width']);
+							unset($values['border_color']);
+							unset($values['fill_color']);
+							unset($values['period']);
+							unset($values['width']);
+							unset($values['height']);
+							break;
+						// -- line_item --
+						case 'handler_start':
+						case 'handler_end':
+						// ---------------
+							unset($values['border_width']);
+							unset($values['border_color']);
+							break;
 					}
 				}
 				
@@ -464,9 +527,17 @@ switch ($action) {
 	case 'load':
 		switch ($type) {
 			case 'background':
-				$backgroundFields = db_get_row_filter('tlayout', array('id' => $id_visual_console), array('background', 'height', 'width'));
+				$backgroundFields = db_get_row_filter(
+					'tlayout',
+					array('id' => $id_visual_console),
+					array('background', 'height', 'width'));
 				echo json_encode($backgroundFields);
 				break;
+			// -- line_item --
+			case 'handler_start':
+			case 'handler_end':
+			// ---------------
+			case 'box_item':
 			case 'percentile_bar':
 			case 'percentile_item':
 			case 'static_graph':
@@ -549,6 +620,21 @@ switch ($action) {
 						$elementFields['width_module_graph'] = $elementFields['width'];
 						$elementFields['height_module_graph'] = $elementFields['height'];
 						break;
+					case 'box_item':
+						$elementFields['width_box'] = $elementFields['width'];
+						$elementFields['height_box'] = $elementFields['height'];
+						$elementFields['border_color'] = $elementFields['border_color'];
+						$elementFields['border_width'] = $elementFields['border_width'];
+						$elementFields['fill_color'] = $elementFields['fill_color'];
+						break;
+					
+					// -- line_item --
+					case 'handler_start':
+					case 'handler_end':
+					// ---------------
+						$elementFields['line_width'] = $elementFields['border_width'];
+						$elementFields['line_color'] = $elementFields['border_color'];
+						break;
 					
 				}
 				//Support for max, min and svg process on simple value items
@@ -612,6 +698,24 @@ switch ($action) {
 		$values['id_custom_graph'] = $id_custom_graph;
 		
 		switch ($type) {
+			case 'line_item':
+				$values['type'] = LINE_ITEM;
+				$values['border_width'] = $line_width;
+				$values['border_color'] = $line_color;
+				$values['pos_x'] = $line_start_x;
+				$values['pos_y'] = $line_start_y;
+				$values['width'] = $line_end_x;
+				$values['height'] = $line_end_y;
+				break;
+			case 'box_item':
+				$values['type'] = BOX_ITEM;
+				$values['border_width'] = $border_width;
+				$values['border_color'] = $border_color;
+				$values['fill_color'] = $fill_color;
+				$values['period'] = $period;
+				$values['width'] = $width_box;
+				$values['height'] = $height_box;
+				break;
 			case 'module_graph':
 				$values['type'] = MODULE_GRAPH;
 				$values['height'] = $height_module_graph;
@@ -710,9 +814,14 @@ switch ($action) {
 			$return['id_data'] = $idData;
 			$return['text'] = $text;
 			$return['type'] = visual_map_type_in_js($values['type']);
-		}
 			
-		html_debug_print($return, true);
+			switch ($values['type']) {
+				case BOX_ITEM:
+					$return['values']['width_box'] = $values['width'];
+					$return['values']['height_box'] = $values['height'];
+					break;
+			}
+		}
 		
 		echo json_encode($return);
 		break;

pandora_console/include/constants.php

@@ -190,6 +190,8 @@ define('SIMPLE_VALUE_AVG', 8);
 define('PERCENTILE_BUBBLE',	9);
 define('SERVICE',			10); //Enterprise Item.
 define('GROUP_ITEM',		11);
+define('BOX_ITEM',			12);
+define('LINE_ITEM',			13);
 //Some styles
 define('MIN_WIDTH',			300);
 define('MIN_HEIGHT',		120);

pandora_console/include/functions_visual_map.php

@@ -47,6 +47,45 @@ function visual_map_print_item_toolbox($idDiv, $text, $float) {
 	echo '</div>';
 }
 
+function visual_map_print_user_line_handles($layoutData) {
+	$id = $layoutData['id'];
+	
+	$start_x = $layoutData['pos_x'];
+	$start_y = $layoutData['pos_y'];
+	$end_x = $layoutData['width'];
+	$end_y = $layoutData['height'];
+	$z_index = 2;
+	
+	$sizeStyle = "";
+	
+	$radious_handle = 12 / 2;
+	
+	
+	//Handle of start
+	echo '<div id="handler_start_' . $id . '" class="item handler_start" ' .
+		'style="z-index: ' .$z_index . ';' .
+			'position: absolute; top: ' . ($start_y - $radious_handle) . 'px; ' .
+			'left: ' . ($start_x - $radious_handle) . 'px;' .
+			'text-align: center;' .
+			'display: inline-block; ' . $sizeStyle . '">';
+	
+	html_print_image("images/dot_red.png");
+	
+	echo "</div>";
+	
+	//Handle of end
+	echo '<div id="handler_end_' . $id . '" class="item handler_end" ' .
+		'style="z-index: ' .$z_index . ';' .
+			'position: absolute; top: ' . ($end_y - $radious_handle) . 'px; ' .
+			'left: ' . ($end_x - $radious_handle) . 'px;' .
+			'text-align: center;' .
+			'display: inline-block; ' . $sizeStyle . '">';
+	
+	html_print_image("images/dot_green.png");
+	
+	echo "</div>";
+}
+
 function visual_map_print_item($mode = "read", $layoutData,
 	$proportion = 1, $show_links = true) {
 	global $config;
@@ -65,6 +104,9 @@ function visual_map_print_item($mode = "read", $layoutData,
 	$id_module = $layoutData['id_agente_modulo'];
 	$type = $layoutData['type'];
 	$period = $layoutData['period'];
+	$border_width = $layoutData['border_width'];
+	$border_color = $layoutData['border_color'];
+	$fill_color = $layoutData['fill_color'];
 	
 	$sizeStyle = '';
 	$borderStyle = '';
@@ -553,7 +595,9 @@ function visual_map_print_item($mode = "read", $layoutData,
 		}
 	}
 	
-	$z_index = 1;
+	//  + 1 for to avoid the box and lines items are on the top of
+	// others
+	$z_index = 1 + 1;
 	
 	switch ($type) {
 		case STATIC_GRAPH:
@@ -573,13 +617,13 @@ function visual_map_print_item($mode = "read", $layoutData,
 			}
 			
 			if ($status == VISUAL_MAP_STATUS_CRITICAL_BAD)
-				$z_index = 3;
+				$z_index = 3 + 1;
 			elseif ($status == VISUAL_MAP_STATUS_WARNING)
-				$z_index = 2;
+				$z_index = 2 + 1;
 			elseif ($status == VISUAL_MAP_STATUS_CRITICAL_ALERT)
-				$z_index = 4;
+				$z_index = 4 + 1;
 			else
-				$z_index = 1;
+				$z_index = 1 + 1;
 			break;
 		case ICON:
 			if ($layoutData['image'] != null) {
@@ -592,7 +636,7 @@ function visual_map_print_item($mode = "read", $layoutData,
 				$imageSize = 'width="' . $width . '" height="' . $height . '"';
 			}
 			
-			$z_index = 4;
+			$z_index = 4 + 1;
 			break;
 		case PERCENTILE_BAR:
 		case PERCENTILE_BUBBLE:
@@ -669,7 +713,10 @@ function visual_map_print_item($mode = "read", $layoutData,
 			$img = str_replace('>', 'class="image" id="image_' . $id . '" />', $img);
 			break;
 		case LABEL:
-			$z_index = 4;
+			$z_index = 4 + 1;
+			break;
+		case BOX_ITEM:
+			$z_index = 1;
 			break;
 	}
 	
@@ -701,6 +748,9 @@ function visual_map_print_item($mode = "read", $layoutData,
 		case ICON:
 			$class .= "icon";
 			break;
+		case BOX_ITEM:
+			$class .= "box_item";
+			break;
 		default:
 			if (!empty($element_enterprise)) {
 				$class .= $element_enterprise['class'];
@@ -723,6 +773,16 @@ function visual_map_print_item($mode = "read", $layoutData,
 	}
 	
 	switch ($type) {
+		case BOX_ITEM:
+			$style = "";
+			$style .= "width: " . ($width * $proportion) . "px; ";
+			$style .= "height: " . ($height * $proportion) . "px; ";
+			$style .= "border-style: solid; ";
+			$style .= "border-width: " . $border_width . "px; ";
+			$style .= "border-color: " . $border_color . "; ";
+			$style .= "background-color: " . $fill_color . "; ";
+			echo "<div style='" . $style . "'></div>";
+			break;
 		case STATIC_GRAPH:
 		case GROUP_ITEM:
 			if ($layoutData['image'] != null) {
@@ -907,7 +967,8 @@ function visual_map_print_item($mode = "read", $layoutData,
 	
 	//Add the line between elements.
 	if ($layoutData['parent_item'] != 0) {
-		$parent = db_get_row_filter('tlayout_data', array('id' => $layoutData['parent_item']));
+		$parent = db_get_row_filter('tlayout_data',
+			array('id' => $layoutData['parent_item']));
 		
 		echo '<script type="text/javascript">';
 		echo '$(document).ready (function() {
@@ -1610,6 +1671,24 @@ function visual_map_get_status_element($layoutData) {
 	return $status;
 }
 
+function visual_map_print_user_lines($mode = "read", $layout_data, $proportion = 1) {
+	
+	$line = array();
+	$line["id"] = $layout_data['id'];
+	$line["start_x"] = $layout_data['pos_x'] * $proportion;
+	$line["start_y"] = $layout_data['pos_y'] * $proportion;
+	$line["end_x"] = $layout_data['width'] * $proportion;
+	$line["end_y"] = $layout_data['height'] * $proportion;
+	$line["line_width"] = $layout_data['border_width'] * $proportion;
+	$line["line_color"] = $layout_data['border_color'];
+	
+	echo '<script type="text/javascript">';
+	echo '$(document).ready (function() {
+		user_lines.push(' . json_encode($line) . ');
+	});';
+	echo '</script>';
+}
+
 /**
  * Prints visual map
  *
@@ -1720,8 +1799,16 @@ function visual_map_print_visual_map ($id_layout, $show_links = true,
 				continue;
 		}
 		
+		switch ($layout_data['type']) {
+			case LINE_ITEM:
+				visual_map_print_user_lines("read", $layout_data,
+					$proportion);
+				break;
+			default:
 				visual_map_print_item("read", $layout_data,
 					$proportion, $show_links);
+				break;
+		}
 	}
 	
 	// End main div
@@ -1738,9 +1825,12 @@ function visual_map_print_visual_map ($id_layout, $show_links = true,
 		
 		var lines = Array();
 		
+		var user_lines = Array();
+		
 		//Fixed to wait the load of images.
 		$(window).load(function() {
 				draw_lines(lines, 'background');
+				draw_user_lines_read();
 			}
 		);
 		/* ]]> */
@@ -1881,6 +1971,10 @@ function visual_map_create_internal_name_item($label = null, $type, $image, $age
 	if (empty($label))
 	{
 		switch ($type) {
+			case 'box_item':
+			case BOX_ITEM:
+				$text = __('Box');
+				break;
 			case 'module_graph':
 			case MODULE_GRAPH:
 				$text = __('Module graph');
@@ -2009,6 +2103,12 @@ function visual_map_type_in_js($type) {
 		case GROUP_ITEM:
 			return 'group_item';
 			break;
+		case BOX_ITEM:
+			return 'box_item';
+			break;
+		case LINE_ITEM:
+			return 'line_item';
+			break;
 	}
 }
 

pandora_console/include/functions_visual_map_editor.php

@@ -57,7 +57,9 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 				'simple_value' => __('Simple value'),
 				'label' => __('Label'),
 				'icon' => __('Icon'),
-				'group_item' => __('Group'));
+				'group_item' => __('Group'),
+				'box_item' => __('Box'),
+				'line_item' => __('Line'));
 			
 			if (enterprise_installed()) {
 				enterprise_visual_map_editor_add_title_palette($titles);
@@ -75,6 +77,81 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			<?php
 			$form_items = array();
 			
+			$form_items['line_width_row'] = array();
+			$form_items['line_width_row']['items'] =
+				array('datos', 'line_item', 'handler_start', 'handler_end');
+			$form_items['line_width_row']['html'] = '<td align="left">' . __('Width') . '</td>
+				<td align="left">' .
+				html_print_input_text('line_width', 3, '', 3, 5, true) .
+				'</td>';
+			
+			
+			$form_items['line_color_row'] = array();
+			$form_items['line_color_row']['items'] =
+				array('datos', 'line_item', 'handler_start', 'handler_end');
+			$form_items['line_color_row']['html'] = 
+				'<td align="left" valign="top" style="">' .
+					__('Border color') .
+				'</td>' .
+				'<td align="left" style="">' .
+					html_print_input_text_extended ('line_color',
+						'#000000', 'text-line_color', '', 7, 7, false,
+						'', 'class="line_color"', true) .
+				'</td>';
+			
+			
+			$form_items['box_size_row'] = array();
+			$form_items['box_size_row']['items'] = array('datos', 'box_item');
+			$form_items['box_size_row']['html'] =
+				'<td align="left">' . __('Size') . '</td>
+				<td align="left">' .
+				html_print_input_text('width_box', 300, '', 3, 5, true) . 
+				' X ' .
+				html_print_input_text('height_box', 180, '', 3, 5, true) .
+				'</td>';
+			
+			
+			$form_items['border_color_row'] = array();
+			$form_items['border_color_row']['items'] = array('datos', 'box_item');
+			$form_items['border_color_row']['html'] = 
+				'<td align="left" valign="top" style="">' .
+					__('Border color') .
+				'</td>' .
+				'<td align="left" style="">' .
+					html_print_input_text_extended ('border_color',
+						'#000000', 'text-border_color', '', 7, 7, false,
+						'', 'class="border_color"', true) .
+				'</td>';
+			
+			
+			$form_items['border_width_row'] = array();
+			$form_items['border_width_row']['items'] = array('datos', 'box_item');
+			$form_items['border_width_row']['html'] =
+				'<td align="left">' . __('Border width') . '</td>
+				<td align="left">' .
+				html_print_input_text('border_width', 3, '', 3, 5, true) . 
+				'</td>';
+			
+			
+			$form_items['fill_color_row'] = array();
+			$form_items['fill_color_row']['items'] = array('datos', 'box_item');
+			$form_items['fill_color_row']['html'] = 
+				'<td align="left" valign="top" style="">' . __('Fill color') . '</td>' .
+				'<td align="left" style="">' .
+				html_print_input_text_extended ('fill_color', '#ffffff',
+					'text-fill_color', '', 7, 7, false, '',
+					'class="fill_color"', true) .
+				'</td>';
+			
+			$form_items['module_graph_size_row'] = array();
+			$form_items['module_graph_size_row']['items'] = array('module_graph', 'datos');
+			$form_items['module_graph_size_row']['html'] = '<td align="left">' . __('Size') . '</td>
+				<td align="left">' .
+				html_print_input_text('width_module_graph', 300, '', 3, 5, true) . 
+				' X ' .
+				html_print_input_text('height_module_graph', 180, '', 3, 5, true) .
+				'</td>';
+			
 			
 			$form_items['label_row'] = array();
 			$form_items['label_row']['items'] = array('label',
@@ -358,7 +435,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			$form_items_advance['position_row'] = array();
 			$form_items_advance['position_row']['items'] = array('static_graph',
 				'percentile_bar', 'percentile_item', 'module_graph',
-				'simple_value', 'label', 'icon', 'datos');
+				'simple_value', 'label', 'icon', 'datos', 'box_item');
 			$form_items_advance['position_row']['html'] = '
 				<td align="left">' . __('Position') . '</td>
 				<td align="left">(' . html_print_input_text('left', '0', '', 3, 5, true) .
@@ -419,7 +496,35 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 	</table>
 	<?php
 	//------------------------------------------------------------------------------
+	
+	
+	
+	
+	
 	echo '</div>';
+	
+	echo '<div id="div_step_1" class="forced_title_layer"
+		style="display: none; position: absolute; z-index: 99;">' .
+			__('Click start point<br />of the line') .
+		'</div>';
+	
+	echo '<div id="div_step_2" class="forced_title_layer"
+		style="display: none; position: absolute; z-index: 99;">' .
+			__('Click end point<br />of the line') .
+		'</div>';
+	
+	ui_require_css_file ('color-picker');
+	
+	ui_require_jquery_file ('colorpicker');
+	?>
+	<script type="text/javascript">
+		$(document).ready (function () {
+			$(".border_color").attachColorPicker();
+			$(".fill_color").attachColorPicker();
+			$(".line_color").attachColorPicker();
+		});
+	</script>
+	<?php
 }
 
 function visual_map_editor_print_toolbox() {
@@ -434,6 +539,8 @@ function visual_map_editor_print_toolbox() {
 		visual_map_print_button_editor('label', __('Label'), 'left', false, 'label_min', true);
 		visual_map_print_button_editor('icon', __('Icon'), 'left', false, 'icon_min', true);
 		visual_map_print_button_editor('group_item', __('Group'), 'left', false, 'group_item_min', true);
+		visual_map_print_button_editor('box_item', __('Box'), 'left', false, 'box_item_min', true);
+		visual_map_print_button_editor('line_item', __('Line'), 'left', false, 'line_item_min', true);
 		
 		enterprise_hook("enterprise_visual_map_editor_print_toolbox");
 		
@@ -443,7 +550,7 @@ function visual_map_editor_print_toolbox() {
 		visual_map_print_button_editor('show_grid', __('Show grid'), 'right', true, 'grid_min', true);
 		visual_map_print_button_editor('edit_item', __('Update item'), 'right', true, 'config_min', true);
 		visual_map_print_button_editor('delete_item', __('Delete item'), 'right', true, 'delete_min', true);
-		visual_map_print_button_editor('copy_item', __('Copy item'), 'right', true, 'delete_min', true);
+		visual_map_print_button_editor('copy_item', __('Copy item'), 'right', true, 'copy_item', true);
 	echo '</div>';
 	echo '</div>';
 	echo '<div style="clear: right; margin-bottom: 10px;"></div>';

pandora_console/include/javascript/pandora_visual_console.js

@@ -123,3 +123,25 @@ function refresh_lines (lines, id_div, editor) {
 	delete_lines (id_div);
 	draw_lines (lines, id_div, editor);
 }
+
+
+function draw_user_lines_read() {
+	var obj_js_user_lines = new jsGraphics("background");
+	
+	obj_js_user_lines.clear();
+	
+	// Draw the previous lines
+	for (iterator = 0; iterator < user_lines.length; iterator++) {
+		console.log(user_lines[iterator]);
+		obj_js_user_lines.setStroke(parseInt(user_lines[iterator]['line_width']));
+		obj_js_user_lines.setColor(user_lines[iterator]['line_color']);
+		obj_js_user_lines.drawLine(
+			parseInt(user_lines[iterator]['start_x']),
+			parseInt(user_lines[iterator]['start_y']),
+			parseInt(user_lines[iterator]['end_x']),
+			parseInt(user_lines[iterator]['end_y']));
+		
+	}
+	
+	obj_js_user_lines.paint();
+}

pandora_console/include/styles/pandora.css

@@ -758,6 +758,18 @@ input.icon_min {
 input.icon_min[disabled] {
 	background: #fefefe url(../../images/photo.disabled.png) no-repeat center !important;
 }
+input.box_item {
+	background: #fefefe url(../../images/box_item.png) no-repeat center !important;
+}
+input.box_item[disabled] {
+	background: #fefefe url(../../images/box_item.disabled.png) no-repeat center !important;
+}
+input.line_item {
+	background: #fefefe url(../../images/line_item.png) no-repeat center !important;
+}
+input.line_item[disabled] {
+	background: #fefefe url(../../images/line_item.disabled.png) no-repeat center !important;
+}
 input.copy_item {
 	background: #fefefe url(../../images/copy_visualmap.png) no-repeat center !important;
 }

pandora_console/pandoradb.postgreSQL.sql

@@ -1100,7 +1100,10 @@ CREATE TABLE "tlayout_data" (
 	"enable_link" SMALLINT NOT NULL default 1,
 	"id_metaconsole" INTEGER NOT NULL default 0,
 	"id_group" INTEGER NOT NULL default 0,
-	"id_custom_graph" INTEGER NOT NULL default 0
+	"id_custom_graph" INTEGER NOT NULL default 0,
+	"border_width" INTEGER NOT NULL default 0,
+	"border_color" varchar(200) DEFAULT "",
+	"fill_color" varchar(200) DEFAULT ""
 );
 
 -- ---------------------------------------------------------------------

pandora_console/pandoradb.sql

@@ -1189,6 +1189,9 @@ CREATE TABLE IF NOT EXISTS `tlayout_data` (
 	`id_metaconsole` int(10) NOT NULL default 0,
 	`id_group` INTEGER UNSIGNED NOT NULL default 0,
 	`id_custom_graph` INTEGER UNSIGNED NOT NULL default 0,
+	`border_width` INTEGER UNSIGNED NOT NULL default 0,
+	`border_color` varchar(200) DEFAULT "",
+	`fill_color` varchar(200) DEFAULT "",
 	PRIMARY KEY(`id`)
 ) ENGINE = InnoDB DEFAULT CHARSET=utf8;