Add data image option to simple data visual console element - #412

pandora_console/general/check_image_module.php

@@ -0,0 +1,25 @@
+<?php
+
+include_once ('include/config.php');
+include_once ('include/functions.php');
+include_once ('include/functions_db.php');
+include_once ('include/auth/mysql.php');
+
+$id = get_parameter('get_image');
+
+$sql = 'SELECT datos FROM tagente_estado WHERE id_agente_modulo = '.$id;
+
+$result = db_get_sql($sql);
+
+$image = strpos($result, 'data:image');
+
+if($image === false){
+  echo 0;
+}
+else{
+  echo 1;
+}
+
+?>
+
+

pandora_console/godmode/reporting/visual_console_builder.editor.js

@@ -84,6 +84,45 @@ function visual_map_main() {
 	//Fixed to wait the load of images.
 	$(window).load(function() {
 		
+		$('#module').change(function(){
+			var txt = $("#module").val();
+			if(selectedItem == 'simple_value' || creationItem == 'simple_value'){
+				$.ajax({
+				async:false,
+				type: "POST",
+				url: "ajax.php",
+				data: {"page" : "general/check_image_module",
+					"get_image" : txt,
+					},
+				success: function(data) {				
+					if(data == 0){
+						$("#data_image_check").html('Off');
+						$('#data_image_container').css('display','none');	
+						$('#data_image_check').css('display','none');
+						$('#data_image_check_label').css('display','none');
+						$('.block_tinymce').remove();
+						$('#process_value_row').css('display','table-row');
+						if($('#process_value').val() != '0'){
+								$('#period_row').css('display','table-row');
+						}					
+						}
+					else{
+						$('#data_image_container').css('display','inline');	
+						$('#data_image_check').css('display','inline');
+						$('#data_image_check_label').css('display','inline');
+						$("#data_image_check").html('On');
+						$('#process_value_row').css('display','none');
+						$('#period_row').css('display','none');
+						$('#text-label_ifr').contents().find('#tinymce').html('_VALUE_');
+						$('.block_tinymce').remove();
+						$('#label_row').append('<div class="block_tinymce" style="background-color:#fbfbfb;position:absolute;left:0px;height:230px;width:100%;opacity:0.7;z-index:5;"></div>');
+					}
+				}
+			});	
+		}
+		});
+		
+		
 		$('#radiobtn0001').click(function(){
 			$("#custom_graph option[value=0]").prop("selected", true);
 		});
@@ -338,10 +377,32 @@ function update_button_palette_callback() {
 			setModuleGraph(idItem);
 			break;
 		case 'simple_value':
-			$("#text_" + idItem).html(values['label']);
+		//checkpoint
+			if(($('#text-label_ifr').contents().find('#tinymce p').html() == '_VALUE_' || 
+			$('#text-label_ifr').contents().find('#tinymce').html() == '_VALUE_') 
+			&& $('#data_image_check').html() != 'On'){
+					alert('_VALUE_ exactly value is only enable for data image. Please change label text or select a data image module.');
+					return;
+			}
+			$("#" + idItem).html(values['label']);
+			if(values['label'].replace( /<.*?>/g, '' ) == '_VALUE_'){
+				$("#text_" + idItem).html('<img style="width:'+values['width_data_image']+'px;" src="images/console/signes/data_image.png">');
+				$("#" + idItem).html('<img style="width:'+values['width_data_image']+'px;" src="images/console/signes/data_image.png">');
+			}
+			else{
+				$("#text_" + idItem).html(
+					'<table><tbody><tr><td></td></tr><tr><td><span style="" id="text_21" class="text">'+values["label"]+'</span></td></tr><tr><td></td></tr></tbody></table>'
+				)
+				$("#" + idItem).html(
+					'<table><tbody><tr><td></td></tr><tr><td><span style="" id="text_21" class="text">'+values["label"]+'</span></td></tr><tr><td></td></tr></tbody></table>'
+				)
+				
+			}
+		
+			
 			//$("#simplevalue_" + idItem)
 				//.html($('<img></img>').attr('src', "images/spinner.gif"));
-			setModuleValue(idItem,values['process_simple_value'], values['period']);
+			setModuleValue(idItem,values['process_simple_value'], values['period'],values['width']);
 			break;
 		case 'label':
 			$("#text_" + idItem).html(values['label']);
@@ -489,6 +550,10 @@ function readFields() {
 	values['background'] = $("#background_image").val();
 	values['period'] = undefined != $("#hidden-period").val() ? $("#hidden-period").val() : $("#period").val();
 	values['width'] = $("input[name=width]").val();
+	values['width_data_image'] = $("#data_image_width").val();
+	if(values['width_data_image'] != 0){
+		values['width'] = values['width_data_image'];
+	}
 	values['height'] = $("input[name=height]").val();
 	values['parent'] = $("select[name=parent]").val();
 	values['map_linked'] = $("select[name=map_linked]").val();
@@ -656,6 +721,7 @@ function create_button_palette_callback() {
 				create_line('step_1', values);
 				break;
 			default:
+			
 				insertDB(creationItem, values);
 				break;
 		}
@@ -933,6 +999,14 @@ function toggle_item_palette() {
 					$( "#text-label_ifr" ).contents().find( "span" ).css("line-height",$('#lineheight').val());
 								
 	}
+	
+	if(creationItem != 'simple_value'){
+		$("#data_image_check").html('Off');
+		$("#data_image_check").css('display','none');
+		$("#data_image_check_label").css('display','none');
+		$("#data_image_container").css('display','none');	
+		$('.block_tinymce').remove();			
+	}	
 }
 
 function fill_parent_select(id_item) {
@@ -1655,12 +1729,13 @@ function setModuleGraph(id_data) {
 
 }
 
-function setModuleValue(id_data, process_simple_value, period) {
+function setModuleValue(id_data, process_simple_value, period,width_data_image) {
 	var parameter = Array();
 	parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
 	parameter.push ({name: "action", value: "get_module_value"});
 	parameter.push ({name: "id_element", value: id_data});
 	parameter.push ({name: "period", value: period});
+	parameter.push ({name: "width", value: width_data_image});
 	parameter.push ({name: "id_visual_console", value: id_visual_console});
 	if (process_simple_value != undefined) {
 		parameter.push ({name: "process_simple_value", value: process_simple_value});
@@ -1672,7 +1747,9 @@ function setModuleValue(id_data, process_simple_value, period) {
 		type: "POST",
 		dataType: 'json',
 		success: function (data) {
-			var currentValue = $("#text_" + id_data).html();
+			
+				var currentValue = $("#text_" + id_data).html();
+			
 			//currentValue = currentValue.replace(/_VALUE_/gi, data.value);
 			$("#text_" + id_data).html(currentValue);
 			//$("#text_" + id_data).html('Data value');
@@ -2183,10 +2260,14 @@ function createItem(type, values, id_data) {
 		case 'simple_value':
 			sizeStyle = '';
 			imageSize = '';
+			if($('#data_image_check').html() == 'On'){
+				values['label'] = '<img style="width:'+$('#data_image_width').val()+'px;" src="images/console/signes/data_image.png">';
+							
+			}
 			item = $('<div id="' + id_data + '" class="item simple_value" style="position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
 					'<span id="text_' + id_data + '" class="text"> ' + values['label'] + '</span> ' + '</div>'
 			);
-			setModuleValue(id_data,values.process_simple_value,values.period);
+			setModuleValue(id_data,values.process_simple_value,values.period,values.width_data_image);
 			break;
 		case 'label':
 			item = $('<div id="' + id_data + '" ' +
@@ -2266,6 +2347,7 @@ function addItemSelectParents(id_data, text) {
 }
 
 function insertDB(type, values) {
+	
 	metaconsole = $("input[name='metaconsole']").val();
 
 	$("#saving_in_progress_dialog").dialog({
@@ -2398,7 +2480,7 @@ function updateDB_visual(type, idElement , values, event, top, left) {
 			if (type == 'simple_value') {
 				setModuleValue(idElement,
 					values.process_simple_value,
-						values.period);
+						values.period,values.width_data_image);
 			}
 			
 			
@@ -2877,6 +2959,39 @@ function eventsItems(drag) {
 		if ((!is_opened_palette) && (autosave)) {
 			toggle_item_palette();
 		}
+		
+		if(selectedItem == 'simple_value'){
+			
+			var found = $('#'+idItem).find("img");
+					
+			if(found.length > 0){
+				$("#data_image_check").css('display','inline');
+				$("#data_image_check_label").css('display','inline');	
+				$('#data_image_container').css('display','inline');		
+				$("#data_image_check").html('On');
+				$('.block_tinymce').remove();
+				$('#label_row').append('<div class="block_tinymce" style="background-color:#fbfbfb;position:absolute;left:0px;height:230px;width:100%;opacity:0.7;z-index:5;"></div>');
+				$('#process_value_row').css('display','none');
+				$('#period_row').css('display','none');
+			}
+			else{
+				$("#data_image_check").html('Off');
+				$("#data_image_check").css('display','none');
+				$("#data_image_check_label").css('display','none');
+				$('#data_image_container').css('display','none');
+				$('.block_tinymce').remove();
+				$('#process_value_row').css('display','table-row');
+				if($('#process_value').val() != 0){
+					$('#period_row').css('display','table-row');		
+				}
+			}
+		}
+		else{
+			$("#data_image_check").css('display','none');
+			$("#data_image_check_label").css('display','none');
+			$('#data_image_container').css('display','none');
+		}	
+		
 	});
 
 	//Set the limit of draggable in the div with id "background" and set drag

pandora_console/include/ajax/visual_console_builder.ajax.php

@@ -422,6 +422,7 @@ switch ($action) {
 					$values['type'] = visual_map_get_simple_value_type(
 						$process_simple_value);
 					$values['period'] = $period;
+					$values['width'] = $width;
 				}
 			case 'percentile_bar':
 			case 'percentile_item':
@@ -897,6 +898,7 @@ switch ($action) {
 				//This allows min, max and avg process in a simple value
 				$values['type'] = visual_map_get_simple_value_type($process_simple_value);
 				$values['period'] = $period;
+				$values['width'] = $width;
 				break;
 			case 'label':
 				$values['type'] = LABEL;

pandora_console/include/functions_visual_map.php

@@ -1438,17 +1438,25 @@ function visual_map_print_item($mode = "read", $layoutData,
 			
 			
 			if(get_parameter('action') == 'edit'){
-							
+								//html_debug($layoutData);
-			//echo 'Data value';
+				//echo 'Data value';
-			
+				if(strip_tags($io_safe_output_text) != '_VALUE_'){
-			echo $io_safe_output_text;
+					echo $io_safe_output_text;
+				}
+				else{
+					echo "<img style='width:".$layoutData['width']."px;' src='images/console/signes/data_image.png'>";
+				}
 								
 				}
 			else{
-		
+				if(strip_tags($io_safe_output_text) != '_VALUE_'){
-			echo str_replace(array('_VALUE_','_value_'), $value, $io_safe_output_text);
+					echo str_replace(array('_VALUE_','_value_'), $value, $io_safe_output_text);
-				
 				}
+				else{
+					echo str_replace('>', ' style="width:'.$layoutData['width'].'px">',$value);
+				}
+				
+			}
 			
 			
 			//Restore db connection
@@ -1575,6 +1583,8 @@ function visual_map_get_simple_value_type($process_simple_value) {
 function visual_map_get_simple_value($type, $id_module, $period = SECONDS_1DAY) {
 	global $config;
 	
+	
+	
 	$unit_text = db_get_sql ('SELECT unit
 		FROM tagente_modulo WHERE id_agente_modulo = ' . $id_module);
 	$unit_text = trim(io_safe_output($unit_text));
@@ -1583,23 +1593,35 @@ function visual_map_get_simple_value($type, $id_module, $period = SECONDS_1DAY)
 		case SIMPLE_VALUE:
 			$value = db_get_value ('datos', 'tagente_estado',
 				'id_agente_modulo', $id_module);
+				
+				
 			if ($value === false) {
 				$value = __('Unknown');
+				
+				$value = preg_replace ('/\n/i','<br>',$value);
+				$value =  preg_replace ('/\s/i','&nbsp;',$value);
 			}
 			else {
-				if ( is_numeric($value) ) {
+				if(strpos($value, 'data:image') !== false){
-					if ($config['simple_module_value']) {
+					$value = '<img class="b64img" src="'.$value.'">';
-						$value = remove_right_zeros(number_format($value, $config['graph_precision']));
+				}
+				else{
+												
+					if ( is_numeric($value) ) {
+						if ($config['simple_module_value']) {
+							$value = remove_right_zeros(number_format($value, $config['graph_precision']));
+						}
 					}
+					if (!empty($unit_text)) {
+						$value .= " " . $unit_text;
+					}
+					
+					$value = preg_replace ('/\n/i','<br>',$value);
+					$value =  preg_replace ('/\s/i','&nbsp;',$value);
+					
 				}
-				if (!empty($unit_text)) {
+				
-					$value .= " " . $unit_text;
-				}
 			}
-			
-			$value = preg_replace ('/\n/i','<br>',$value);
-			$value =  preg_replace ('/\s/i','&nbsp;',$value);
-			
 			return $value;
 			break;
 		case SIMPLE_VALUE_MAX:

pandora_console/include/functions_visual_map_editor.php

@@ -310,8 +310,8 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			$form_items['module_row']['html'] = '<td align="left">' .
 				__('Module') . '</td>
 				<td align="left">' .
-				html_print_select(array(), 'module', '', '', __('Any'), 0, true) .
+				html_print_select(array(), 'module', '', '', __('Any'), 0, true). '<div id="data_image_container" style="display:none;"><span id="data_image_check_label" style="margin-left:20px;">'.__("Data image").': </span><span id="data_image_check">Off</span><span id="data_image_width_label"> - Width: </span><input style="margin-left:5px;width:40px;" type="number" id="data_image_width" value="100"></input></div>
-				'</td>';
+				</td>';
 				
 				
 				$form_items['type_graph'] = array();

pandora_console/operation/visual_console/render_view.php

@@ -278,7 +278,7 @@ $ignored_params['refr'] = '';
 		
 		$(".overlay").removeClass("overlay").addClass("overlaydisabled");
 		
-		$('.item:not(.icon) img').each( function() {
+		$('.item:not(.icon) img:not(.b64img)').each( function() {
 			if ($(this).css('float')=='left' || $(this).css('float')=='right') {
 				$(this).css('margin-top',(parseInt($(this).parent().parent().css('height'))/2-parseInt($(this).css('height'))/2)+'px');
 				$(this).css('margin-left','');