Show buffer(s) usage status

src/camogm.c

@@ -1101,7 +1101,6 @@ void  camogm_status(camogm_state *state, char * fn, int xml)
 			"\t\t<buffer_free>%d</buffer_free>\n" \
 			"\t\t<buffer_used>%d</buffer_used>\n" \
 			"\t\t<circbuf_rp>%d</circbuf_rp>\n" \
-			"\t\t<circbuf_size>%d</circbuf_size>\n" \
 			"\t</sensor_port_%d>\n",
 				chn,
 				_active,
@@ -1115,7 +1114,6 @@ void  camogm_status(camogm_state *state, char * fn, int xml)
 				_b_free[chn],
 				_b_used[chn],
 				state->cirbuf_rp[chn],
-				state->circ_buff_size[chn],
 				chn
 				);
 		}
@@ -1179,7 +1177,6 @@ void  camogm_status(camogm_state *state, char * fn, int xml)
 			fprintf(f, "buffer free        \t%d\n",    _b_free[chn]);
 			fprintf(f, "buffer used        \t%d\n",    _b_used[chn]);
 			fprintf(f, "circbuf_rp         \t%d (0x%x)\n", state->cirbuf_rp[chn], state->cirbuf_rp[chn]);
-			fprintf(f, "circbuf_size       \t%d\n",    state->circ_buff_size[chn]);
 			fprintf(f, "\n");
 		}
 	}

src/camogm_jpeg.c

@@ -263,7 +263,7 @@ int camogm_frame_jpeg(camogm_state *state)
 		}
 		close(state->ivf);
 	} else {
-		D6(fprintf(debug_file, "dump iovect array\n"));
+		D6(fprintf(debug_file, "\ndump iovect array for port %u\n", state->port_num));
 		for (int i = 0; i < state->chunk_index - 1; i++) {
 			D6(fprintf(debug_file, "ptr: %p, length: %ld\n", state->packetchunks[i + 1].chunk, state->packetchunks[i + 1].bytes));
 		}

src/camogmgui/camogmgui.css

@@ -200,32 +200,36 @@ table.state_table td {
 	right:30px;
 	padding-right:40px;
 }
-#buffer_bar {
+.buffer_bars_li {
+	list-style-type: none;
+	overflow: hidden;
+	margin: 0;
+	padding: 0;
+}
+.buffer_bar {
+	float: right;
 	right:50px;
-	margin-right:8px;
-	width:340px;
+	margin: 5px 10px 5px 10px;
+	width:420px;
 	height:15px;
 	border:1px solid #0066FF;
-	position:absolute;
 	padding:1px;
 }
-#buffer_free {
+.buffer_free {
 	background-color:#009900;
 	margin-left:5px;
 	height:15px;
 	position:absolute;
-	width:260px;
+	width:320px;
 	display:inline;
-	float:left;
 	text-align:center;
 	color:#FFFFFF;
 	letter-spacing:3px;	
 }
-#buffer_used {
+.buffer_used {
 	background-color:#CC0000;
 	height:15px;
-	position:absolute;
-	width:40px;
+	width:50px;
 	display:inline;
 	float:right;
 	right:1px;

src/camogmgui/camogmgui.js

@@ -422,14 +422,33 @@ function process_recording(xmldoc) {
 	//document.getElementById('ajax_fps').innerHTML = Math.round(frame_number/file_duration*100)/100 + " fps";	
 	document.getElementById('ajax_file_name').innerHTML = file_name.substring(1, file_name.length-1);	
 	
-	//Update Buffer Bar
-	var buffer_free = xmldoc.getElementsByTagName('buffer_free')[0].firstChild.data;
-	var buffer_used = xmldoc.getElementsByTagName('buffer_used')[0].firstChild.data;
-	//var buffer_rp = xmldoc.getElementsByTagName('circbuf_rp')[0].firstChild.data; // buffer read pointer
-	
-	//var buffer_filled = buffer_used - buffer_rp;
-	document.getElementById('buffer_free').style.width = Math.round(buffer_free / 19791872 * 300);
-	document.getElementById('buffer_used').style.width = Math.round(buffer_used / 19791872 * 300);
+	// update buffer size bars
+	var element;
+	var free_sz, used_sz, width;
+	var min_text_width = 40;
+	var buffers_free = xmldoc.getElementsByTagName('buffer_free');
+	var buffers_used = xmldoc.getElementsByTagName('buffer_used');
+	var buffer_size;
+	// this variable is injected into web page from camogmgui.php
+	var sensor_ports = parseInt(document.getElementById('sensor_ports').textContent, 10);
+	var max_bar_len = 370;
+	for (var i = 0; i < sensor_ports; i++) {
+		free_sz = buffers_free[i].firstChild.data;
+		used_sz = buffers_used[i].firstChild.data;
+		buffer_size = parseInt(free_sz, 10) + parseInt(used_sz, 10);
+		console.log('buffer_size: ' + buffer_size + ' free_size: ' + free_sz + ' used_size:' + used_sz);
+		id = "buffer_free_" + i.toString();
+		width = Math.round(free_sz / buffer_size * max_bar_len);
+		document.getElementById(id).style.width = width;
+		element = document.getElementById('buffer_free_text_' + i.toString());
+		set_text_visibility(element, width, min_text_width);
+		
+		id = "buffer_used_" + i.toString();
+		width = Math.round(used_sz / buffer_size * max_bar_len);
+		document.getElementById(id).style.width = width;
+		element = document.getElementById('buffer_used_text_' + i.toString());
+		set_text_visibility(element, width, min_text_width);
+	}
 
 	//get_hdd_space();
         get_space(selected_mountpoint);
@@ -764,17 +783,26 @@ function calc_split_size() {
 	document.getElementById('split_size_calculation').innerHTML = " = " + result;
 }
 function toggle_buffer() {
-	if (document.getElementById('buffer_bar').style.display == "none") {
-		document.getElementById('buffer_bar').style.display = "inline";
+	var new_state;
+	var buffer_name;
+	// this variable is injected into web page from camogmgui.php
+	var sensor_ports = parseInt(document.getElementById('sensor_ports').textContent, 10);
+	
+	if (document.getElementById('buffer_toggle_link').style.display != "none") {
+		new_state = "inline";
 		document.getElementById('buffer_toggle_link').style.display = "none";
 	}
 	else {
-		document.getElementById('buffer_bar').style.display = "none";
+		new_state = "none";
 		document.getElementById('buffer_toggle_link').style.display = "block";
 	}
+	for (var i = 0; i < sensor_ports; i++) {
+		buffer_name = "buffer_bar_" + i.toString();
+		document.getElementById(buffer_name).style.display = new_state;
+	}
 }
 
-/** Enable or disable page controls in accordance to new state which cat be one of 'fast_rec' or 'standart_rec' */
+/** Enable or disable page controls in accordance to new state which can be one of 'fast_rec' or 'standart_rec' */
 function set_controls_state(new_state)
 {
 	var radios = document.getElementsByName('container');
@@ -844,3 +872,15 @@ function process_raw_dev_list(xmldoc)
 		makeRequest('camogm_interface.php', '?cmd=status');
 	}
 }
+
+/** Change text element visibility. This function is used to change buffer bars presentation */
+function set_text_visibility(element, width, min_text_width)
+{
+	if (width < min_text_width) {
+		element.style.display = 'none';
+	} else {
+		if (element.style.display == 'none') {
+			element.style.display = 'inline';
+		}
+	}
+}

src/camogmgui/camogmgui.php

@@ -58,7 +58,25 @@
 	$mode = 0777;
 	$sensor_ports = elphel_num_sensors();
 	$default_imgsrv_port = 2323;
-   
+
+	/** Draw single buffer usage bar */
+	function draw_buffer_bar($port, $ports_num)
+	{
+		echo "<div id=\"buffer_bar_" . $port . "\" class=\"buffer_bar\" " .
+			"onclick=\"toggle_buffer();\" style=\"display:none;\">Buffer " . $port . ": " .
+		"<span id=\"buffer_free_" . $port . "\" class=\"buffer_free\"><div id=\"buffer_free_text_" . $port . "\">free</div></span>" . 
+		"<span id=\"buffer_used_". $port .	"\" class=\"buffer_used\"><div id=\"buffer_used_text_" . $port . "\">used</div></span>" .
+		"</div>";
+	}
+	
+	/** Inject a parameter into web page that may be needed in JavaScript */
+	function inject_param($name, $val)
+	{
+		echo "<div id=\"" . $name . "\" style=\"display:none;\">";
+		echo htmlspecialchars($val);
+		echo "</div>";
+	}
+	
 	// check if any compressor is in running state
 	function check_compressors($states)
 	{
@@ -349,6 +367,9 @@
 
 	</head>
 	<body onLoad="init();">
+	<?php
+	inject_param('sensor_ports', $sensor_ports);
+	?>
     <div id="sitecoloumn">
       <div id="live-image">
         <div id="CollapsiblePanel1" class="CollapsiblePanel">
@@ -385,8 +406,18 @@
     </div>
        	
         <div id="header">HDD / CF Recorder</div>
-        <div id="buffer_toggle"><a id="buffer_toggle_link" onclick="toggle_buffer();" href="#">Show Buffer</a></div>
-	<div id="buffer_bar" onclick="toggle_buffer();" style="display:none;">Buffer: <span id="buffer_free">free</span><span id="buffer_used">used</span></div>
+        <div id="buffer_toggle"><a id="buffer_toggle_link" onclick="toggle_buffer();" href="#">
+        <?php if ($sensor_ports > 1) { echo "Show buffers"; } else { echo "Show buffer";}?></a>
+        </div>
+        <ul>
+		<?php
+		for ($i = 0; $i < $sensor_ports; $i++) {
+			echo "<li class=\"buffer_bars_li\">";
+			draw_buffer_bar($i, $sensor_ports);
+			echo "</li>";
+		}
+		?>
+		</ul>
         <div id="help_link"><a target="_blank" href="http://wiki.elphel.com/index.php?title=Camogmgui">HELP</a></div>
         <table border="0" cellpadding="2" cellspacing="5">
         <tr><td>