Commit 7c257729 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev

preview in new tab

parent 8a9aaf00
//debug
disable_intervals = false;
disable_previews = true;
//global vars
var free_space_interval = false;
var master_ip = "161";
......@@ -108,14 +110,13 @@ function init(){
get_free_space("/data/footage");
console.log("previews_init()");
previews_init();
// init hidden canvases
for(var i=0;i<cams.length;i++){
append_hidden_div(i);
}
init_temperatures_table();
......@@ -344,7 +345,18 @@ function settings_activate() {
}
}
var preview_tab;
function previews_activate() {
if (preview_tab){
preview_tab.location.reload();
preview_tab.focus();
}else{
preview_tab = open("preview.html");
}
/*
if (!$("#previews").is(":visible")) {
$("#previews").css({top:'50px',left:'10px','z-index':3}).fadeToggle(300,function(){
$(this).toggleClass("window");
......@@ -357,6 +369,7 @@ function previews_activate() {
}else{
$("#previews").fadeToggle(300);
}
*/
}
function check_status(){
......@@ -539,10 +552,12 @@ function select_tab(tab){
}
function refresh_images(){
if (!disable_previews){
if (triclops_en)
refresh_images_triclops();
else
refresh_images_eyesis();
}
}
function refresh_images_eyesis(){
......
<html>
<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>
var baseWidth = 2592;
......@@ -24,57 +32,106 @@
var cnv;
var cContext;
function resize(){
var ratio = baseWidth/baseHeight;
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 init(){
cnv = document.getElementById('canvas');
cContext = cnv.getContext('2d');
refresh_images();
}
function refresh_images(){
var pic = {};
//update size
resize();
// init canvas
cnv = document.getElementById('canvas');
cContext = cnv.getContext('2d');
cnv.setAttribute('width',baseHeight*8);cnv.setAttribute('height',baseWidth*3);
// init hidden canvases
for(var i=0;i<cams.length;i++){
pic[i] = new Image();
pic[i].src = "http://"+cams[i].ip+":"+cams[i].port+"/bimg?"+Date.now();
pic[i].index = i;
pic[i].onload = function(){
draw_an_image(this);
};
append_hidden_div(i);
$("#div_"+i).jp4({ip:cams[i].ip,port:cams[i].port,width:baseWidth,fast:true});
}
}
}
function draw_an_image(img){
function draw_image(img,index){
var w = baseWidth;
var h = baseHeight;
var W = 2592;
var H = 1944;
cContext.rotate(90*Math.PI/180);
if (img.index%2==0) {
cContext.drawImage(img, 0,0*H,W,H, 0*w,-1*h*(img.index+1),w,h);
cContext.drawImage(img, 0,1*H,W,H, 1*w,-1*h*(img.index+1),w,h);
index = +index;
var dx = Array(0,1,4);
var dw = Array(0,0,4);
cContext.rotate(90*Math.PI/180);
if (index%2==0) {
//drawImage img sx,sy, sw,sh, dx,dy, dw,dh
cContext.drawImage(img, 0,0*h+dx[0], w,h-dw[0], 0*w,-1*h*(index+1), w,h);
cContext.drawImage(img, 0,1*h+dx[1], w,h-dw[1], 1*w,-1*h*(index+1), w,h);
cContext.scale(-1,1);
cContext.drawImage(img, 0,2*H,W,H, -3*w, -1*h*(img.index+1), w, h);
cContext.drawImage(img, 0,2*h+dx[2], w,h-dw[2], -3*w,-1*h*(index+1), w,h);
cContext.scale(-1,1);
}else{
cContext.scale(1,-1); //mirror is needed
cContext.drawImage(img, 0,0*H,W,H, 0*w,img.index*h,w,h);
cContext.drawImage(img, 0,1*H,W,H, 1*w,img.index*h,w,h);
cContext.drawImage(img, 0,0*h+dx[0], w,h-dw[0], 0*w,index*h,w,h);
cContext.drawImage(img, 0,1*h+dx[1], w,h-dw[1], 1*w,index*h,w,h);
cContext.scale(-1,1);
cContext.drawImage(img, 0,2*H,W,H, -3*w,h*(img.index),w,h);
cContext.scale(-1,-1);
cContext.drawImage(img, 0,2*h+dx[2], w,h-dw[2], -3*w,h*(index),w,h);
cContext.scale(-1,1);
cContext.scale(1,-1);
}
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>
</head>
<body onload="init()">
<canvas id="canvas" style="background:rgba(100,200,100,0.5);"></canvas>
<body onload="init()" style='padding:0px;margin:0px;'>
<canvas id="canvas" style="background:rgba(100,200,100,0.5);margin:0px;"></canvas>
</body>
</html>
\ No newline at end of file
......@@ -8,7 +8,7 @@
<gpsimu_device_name>/dev/sda1</gpsimu_device_name>
<box_force_jp4>checked</box_force_jp4>
<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_autoexp_max>30</input_autoexp_max>
<input_autoexp_lvl>220</input_autoexp_lvl>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment