Skip to content

E
eyesis4pi-393-gui
Commit 7c257729 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

preview in new tab

parent 8a9aaf00
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 35 deletions
js/eyesis4pi.js
View file @ 7c257729
//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";
...@@ -108,14 +110,13 @@ function init(){ ...@@ -108,14 +110,13 @@ function init(){
get_free_space("/data/footage"); get_free_space("/data/footage");
console.log("previews_init()"); console.log("previews_init()");
previews_init(); previews_init();
// init hidden canvases // init hidden canvases
for(var i=0;i<cams.length;i++){ for(var i=0;i<cams.length;i++){
append_hidden_div(i); append_hidden_div(i);
} }
init_temperatures_table(); init_temperatures_table();
...@@ -344,7 +345,18 @@ function settings_activate() { ...@@ -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() { ...@@ -357,6 +369,7 @@ function previews_activate() {
}else{ }else{
$("#previews").fadeToggle(300); $("#previews").fadeToggle(300);
} }
*/
} }
function check_status(){ function check_status(){
...@@ -539,10 +552,12 @@ function select_tab(tab){ ...@@ -539,10 +552,12 @@ 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
View file @ 7c257729
<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>
var baseWidth = 2592; var baseWidth = 2592;
...@@ -24,57 +32,106 @@ ...@@ -24,57 +32,106 @@
var cnv; var cnv;
var cContext; 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(){ 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); cnv.setAttribute('width',baseHeight*8);cnv.setAttribute('height',baseWidth*3);
// 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);
if (img.index%2==0) { index = +index;
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); 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.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); cContext.scale(-1,1);
}else{ }else{
cContext.scale(1,-1); //mirror is needed 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,0*h+dx[0], w,h-dw[0], 0*w,index*h,w,h);
cContext.drawImage(img, 0,1*H,W,H, 1*w,img.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.scale(-1,1);
cContext.drawImage(img, 0,2*H,W,H, -3*w,h*(img.index),w,h); 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.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
View file @ 7c257729
...@@ -8,7 +8,7 @@ ...@@ -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>
......
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