Commit 75cce656 authored by Mikhail Karpenko's avatar Mikhail Karpenko
Browse files

Update live preview in gui

parent f8ad5f0e

src/camogmgui/camogmgui.css

+18 −0
Original line number Original line Diff line number Diff line
@@ -238,4 +238,22 @@ table.state_table td { 
	background-color:white;

	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

+11 −4
Original line number Original line Diff line number Diff line
@@ -415,7 +415,15 @@ function update_fps_reduce(parent) { 
	}

	}

}

}

function update_live_image() {

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() {

function size_up_image() {

	document.getElementById('live-picture').width += 40;

	document.getElementById('live-picture').width += 40;
@@ -561,7 +569,7 @@ function lower(target) { 
	update_name_scheme();

	update_name_scheme();

}

}

function live_image_auto_update_changed() {

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();

		validate_update_freq();

		update_live_image_loop();

		update_live_image_loop();

	}

	}
@@ -573,7 +581,7 @@ function validate_update_freq() { 
		document.getElementById('live_image_auto_update_frequency').value = 1;

		document.getElementById('live_image_auto_update_frequency').value = 1;

}

}

function update_live_image_loop() {

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();

		update_live_image();

		setTimeout('update_live_image_loop()', document.getElementById('live_image_auto_update_frequency').value*1000);

		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";

		document.getElementById('buffer_toggle_link').style.display = "block";

	}

	}

}
 
}

src/camogmgui/camogmgui.php

+18 −2
Original line number Original line Diff line number Diff line
@@ -57,6 +57,7 @@ 
	$start_str = "camogm -n " . $cmd_pipe . " -p " . $cmd_port;

	$start_str = "camogm -n " . $cmd_pipe . " -p " . $cmd_port;

	$mode = 0777;

	$mode = 0777;

	$sensor_ports = elphel_num_sensors();

	$sensor_ports = elphel_num_sensors();

	$default_imgsrv_port = 2323;

   

   

	// check if any compressor is in running state

	// check if any compressor is in running state

	function check_compressors($states)

	function check_compressors($states)
@@ -343,11 +344,26 @@ 
	                    <td width="245px"></td>

	                    <td width="245px"></td>

                        <td width="100px"><a href="#" onClick="update_live_image();">Update</a></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="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>

                    </tr>

                </table>

                </table>

        	</div>

        	</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>

        </div>

    </div>

    </div>