Update live preview in gui

src/camogmgui/camogmgui.css

@@ -238,4 +238,22 @@ table.state_table td {
 	background-color:white;
 }
 
+.sensor_ports * {
+	vertical-align: middle;
+	margin-left: 5px;
+	margin-right: 5px;
+	margin-top: 0px;
+	margin-bottom: 0px;
+}
 
+#live_image_auto_update_frequency {
+	height: 18px;
+	font-size: 9px;
+	margin: 0px;
+	padding: 0px;
+}
+
+#live_image_auto_update {
+	margin: 0px;
+	padding: 0px;
+}
\ No newline at end of file

src/camogmgui/camogmgui.js

@@ -415,7 +415,15 @@ function update_fps_reduce(parent) {
 	}
 }
 function update_live_image() {
-	document.getElementById('live-picture').src = "http://" + location.host + ":8081/bimg?" + Math.random()*99999999999;
+	var imgsrv_port = 2323;
+	var radios = document.getElementsByName("selected_sensor_port");
+	for (var i = 0; i < radios.length; i++) {
+		if (radios[i].checked) {
+			imgsrv_port = imgsrv_port + i;
+			break;
+		}
+	}
+	document.getElementById('live-picture').src = "http://" + location.host + ":" + imgsrv_port + "/bimg?" + Math.random()*99999999999;
 }
 function size_up_image() {
 	document.getElementById('live-picture').width += 40;
@@ -561,7 +569,7 @@ function lower(target) {
 	update_name_scheme();
 }
 function live_image_auto_update_changed() {
-	if (document.getElementById('live_image_auto_update').value == "yes") {
+	if (document.getElementById('live_image_auto_update').checked == true) {
 		validate_update_freq();
 		update_live_image_loop();
 	}
@@ -573,7 +581,7 @@ function validate_update_freq() {
 		document.getElementById('live_image_auto_update_frequency').value = 1;
 }
 function update_live_image_loop() {
-	if (document.getElementById('live_image_auto_update').value == "yes") {
+	if (document.getElementById('live_image_auto_update').checked == true) {
 		update_live_image();
 		setTimeout('update_live_image_loop()', document.getElementById('live_image_auto_update_frequency').value*1000);
 	}
@@ -650,4 +658,3 @@ function toggle_buffer() {
 		document.getElementById('buffer_toggle_link').style.display = "block";
 	}
 }
-

src/camogmgui/camogmgui.php

@@ -57,6 +57,7 @@
 	$start_str = "camogm -n " . $cmd_pipe . " -p " . $cmd_port;
 	$mode = 0777;
 	$sensor_ports = elphel_num_sensors();
+	$default_imgsrv_port = 2323;
    
 	// check if any compressor is in running state
 	function check_compressors($states)
@@ -343,11 +344,26 @@
 	                    <td width="245px"></td>
                         <td width="100px"><a href="#" onClick="update_live_image();">Update</a></td>
                         <td width="100px">Size: <a href="#" onClick="size_up_image()">+</a> | <a href="#" onClick="size_down_image()">-</a></td>
-                        <td width="300px"><input type="checkbox" onChange="live_image_auto_update_changed();" id="live_image_auto_update" value="yes" name="live_image_auto_update" style="top:3px; position:relative;"> Auto Update every: <input id="live_image_auto_update_frequency" type="text" name="live_image_auto_update_frequency" value="5.0" size="3" onChange="validate_update_freq();" style=" top:1px; position:relative; height:18px; font-size:7px; margin:0px; padding:0px;"> seconds</td> 
+                        <td width="200px">
+                        	<div class="sensor_ports">
+                        	<input id="live_image_auto_update" type="checkbox" onChange="live_image_auto_update_changed();" name="live_image_auto_update"> Auto Update every: 
+                        	<input id="live_image_auto_update_frequency" type="text" name="live_image_auto_update_frequency" value="5.0" size="3" onChange="validate_update_freq();"> seconds
+                        	</div>
+                        </td>
+                        <?php
+                        for ($i = 0; $i < $sensor_ports; $i++) {
+                        	if ($i == 0)
+								echo "<td>" . "<div class=\"sensor_ports\">" . "<input type=\"radio\" name=\"selected_sensor_port\" value=\"$i\" checked=\"true\" onchange=\"update_live_image();\">" .
+								"Port " . $i . "</div>" . "</td>";
+                        	else
+								echo "<td>" . "<div class=\"sensor_ports\">" . "<input type=\"radio\" name=\"selected_sensor_port\" value=\"$i\" onchange=\"update_live_image();\">" .
+                        	"Port " . $i . "</div>" . "</td>";
+                        }
+                        ?>
                     </tr>
                 </table>
         	</div>
-        	<img id="live-picture" style="border:solid 1px #000; margin:3px;" src="http://<? echo $_SERVER['SERVER_NAME']; ?>:8081/bimg" width="400" height="300"><br />
+        	<img id="live-picture" style="border:solid 1px #000; margin:3px;" src="http://<? echo $_SERVER['SERVER_NAME'] . ":" . $default_imgsrv_port; ?>/bimg" width="400" height="300"><br />
 		  </div>
         </div>
     </div>