preview in new tab (7c257729) · Commits · Elphel / eyesis4pi-393-gui

js/eyesis4pi.js

+17 −2

Original line number	Original line	Diff line number	Diff line
	//debug		//debug
	disable_intervals = false;		disable_intervals = false;

			disable_previews = true;

	//global vars		//global vars
	var free_space_interval = false;		var free_space_interval = false;
	var master_ip = "161";		var master_ip = "161";
	@@ -115,7 +117,6 @@ function init(){
	append_hidden_div(i);		append_hidden_div(i);
	}		}


	init_temperatures_table();		init_temperatures_table();


	@@ -344,7 +345,18 @@ function settings_activate() {
	}		}
	}		}

			var preview_tab;

	function previews_activate() {		function previews_activate() {

			if (preview_tab){
			preview_tab.location.reload();
			preview_tab.focus();
			}else{
			preview_tab = open("preview.html");
			}

			/*
	if (!$("#previews").is(":visible")) {		if (!$("#previews").is(":visible")) {
	$("#previews").css({top:'50px',left:'10px','z-index':3}).fadeToggle(300,function(){		$("#previews").css({top:'50px',left:'10px','z-index':3}).fadeToggle(300,function(){
	$(this).toggleClass("window");		$(this).toggleClass("window");
	@@ -357,6 +369,7 @@ function previews_activate() {
	}else{		}else{
	$("#previews").fadeToggle(300);		$("#previews").fadeToggle(300);
	}		}
			*/
	}		}

	function check_status(){		function check_status(){
	@@ -539,11 +552,13 @@ function select_tab(tab){
	}		}

	function refresh_images(){		function refresh_images(){
			if (!disable_previews){
	if (triclops_en)		if (triclops_en)
	refresh_images_triclops();		refresh_images_triclops();
	else		else
	refresh_images_eyesis();		refresh_images_eyesis();
	}		}
			}

	function refresh_images_eyesis(){		function refresh_images_eyesis(){

preview.html

+89 −32

Original line number	Original line	Diff line number	Diff line
	<html>		<html>
	<head>		<head>
	<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
			<title>Preview</title>
			<link rel="shortcut icon" href="favicon.ico" />

			<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
			<script src="js/elphel.js"></script>
			<script src="js/jcanvas.js"></script>
			<script src="js/exif.js"></script>
			<script src="js/jquery-jp4.js"></script>

	<script>		<script>

	@@ -24,57 +32,106 @@
	var cnv;		var cnv;
	var cContext;		var cContext;

	function init(){		function resize(){
	cnv = document.getElementById('canvas');
	cContext = cnv.getContext('2d');		var ratio = baseWidth/baseHeight;
	refresh_images();
			var WW = window.innerWidth;
			var WH = window.innerHeight;

			var WWS = WW/8;
			var WHS = WH/3/ratio;

			console.log(WWS+" vs "+WHS);

			if (WHS<WWS){
			baseWidth = WH/3;
			baseHeight = baseWidth/ratio;
			}else{
			baseHeight = WW/8;
			baseWidth = baseHeight*ratio;
	}		}

	function refresh_images(){		}
	var pic = {};
			function init(){

			//update size
			resize();

			// init canvas
			cnv = document.getElementById('canvas');
			cContext = cnv.getContext('2d');
	cnv.setAttribute('width',baseHeight8);cnv.setAttribute('height',baseWidth3);		cnv.setAttribute('width',baseHeight8);cnv.setAttribute('height',baseWidth3);

			// init hidden canvases
	for(var i=0;i<cams.length;i++){		for(var i=0;i<cams.length;i++){
	pic[i] = new Image();		append_hidden_div(i);
	pic[i].src = "http://"+cams[i].ip+":"+cams[i].port+"/bimg?"+Date.now();		$("#div_"+i).jp4({ip:cams[i].ip,port:cams[i].port,width:baseWidth,fast:true});
	pic[i].index = i;
	pic[i].onload = function(){
	draw_an_image(this);
	};
	}		}
	}		}

	function draw_an_image(img){		function draw_image(img,index){
	var w = baseWidth;		var w = baseWidth;
	var h = baseHeight;		var h = baseHeight;
	var W = 2592;
	var H = 1944;

	cContext.rotate(90*Math.PI/180);		index = +index;

			var dx = Array(0,1,4);
			var dw = Array(0,0,4);

	if (img.index%2==0) {		cContext.rotate(90*Math.PI/180);
	cContext.drawImage(img, 0,0H,W,H, 0w,-1h(img.index+1),w,h);		if (index%2==0) {
	cContext.drawImage(img, 0,1H,W,H, 1w,-1h(img.index+1),w,h);		//drawImage img sx,sy, sw,sh, dx,dy, dw,dh
			cContext.drawImage(img, 0,0h+dx[0], w,h-dw[0], 0w,-1h(index+1), w,h);
			cContext.drawImage(img, 0,1h+dx[1], w,h-dw[1], 1w,-1h(index+1), w,h);
	cContext.scale(-1,1);		cContext.scale(-1,1);
	cContext.drawImage(img, 0,2H,W,H, -3w, -1h(img.index+1), w, h);		cContext.drawImage(img, 0,2h+dx[2], w,h-dw[2], -3w,-1h(index+1), w,h);
	cContext.scale(-1,1);		cContext.scale(-1,1);
	}else{		}else{
	cContext.scale(1,-1); //mirror is needed		cContext.scale(1,-1); //mirror is needed
	cContext.drawImage(img, 0,0H,W,H, 0w,img.index*h,w,h);		cContext.drawImage(img, 0,0h+dx[0], w,h-dw[0], 0w,index*h,w,h);
	cContext.drawImage(img, 0,1H,W,H, 1w,img.index*h,w,h);		cContext.drawImage(img, 0,1h+dx[1], w,h-dw[1], 1w,index*h,w,h);
			cContext.scale(-1,1);
			cContext.drawImage(img, 0,2h+dx[2], w,h-dw[2], -3w,h*(index),w,h);
	cContext.scale(-1,1);		cContext.scale(-1,1);
	cContext.drawImage(img, 0,2H,W,H, -3w,h*(img.index),w,h);		cContext.scale(1,-1);
	cContext.scale(-1,-1);
	}		}

	cContext.rotate(-90*Math.PI/180);		cContext.rotate(-90*Math.PI/180);
	}		}

			function append_hidden_div(index){
			el = $("<div>",{
			id: "div_"+index
			}).css({
			//position: "absolute",
			//top: "1000px",
			//left: (index*200)+"px",
			display: "none"
			});

			el.attr("index",index);

			el.on("canvas_ready",function(){
			//can draw on main canvas
			var cnv = $(this).find("#display")[0];
			var index = $(this).attr("index");

			draw_image(cnv,index);
			});

			$("body").append(el);
			}

			function remove_hidden_div(index){
			$("#div_"+index).off("canvas_ready");
			$("#div_"+index).remove();
			}

	</script>		</script>

	</head>		</head>
	<body onload="init()">		<body onload="init()" style='padding:0px;margin:0px;'>
	<canvas id="canvas" style="background:rgba(100,200,100,0.5);"></canvas>		<canvas id="canvas" style="background:rgba(100,200,100,0.5);margin:0px;"></canvas>
	</body>		</body>
	</html>		</html>
			No newline at end of file

settings.xml

+1 −1

Original line number	Original line	Diff line number	Diff line
	@@ -8,7 +8,7 @@
	<gpsimu_device_name>/dev/sda1</gpsimu_device_name>		<gpsimu_device_name>/dev/sda1</gpsimu_device_name>
	<box_force_jp4>checked</box_force_jp4>		<box_force_jp4>checked</box_force_jp4>
	<input_quality>97</input_quality>		<input_quality>97</input_quality>
	<input_trigger_period>2000</input_trigger_period>		<input_trigger_period>500</input_trigger_period>
	<input_hdrvexpos>0x36000</input_hdrvexpos>		<input_hdrvexpos>0x36000</input_hdrvexpos>
	<input_autoexp_max>30</input_autoexp_max>		<input_autoexp_max>30</input_autoexp_max>
	<input_autoexp_lvl>220</input_autoexp_lvl>		<input_autoexp_lvl>220</input_autoexp_lvl>

Admin message