preview jp4s in human viewable format

get-image.php

+<?php
+/**
+ * @file get-image.php
+ * @brief combat cross-origin
+ * @copyright Copyright (C) 2016 Elphel Inc.
+ * @author Oleg Dzhimiev <oleg@elphel.com>
+ *
+ * @par <b>License</b>:
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+if (isset($_GET['port']))
+    $port = $_GET['port'];
+else
+    die();
+
+if (isset($_GET['rel']))
+    $rel = $_GET['rel'];
+else
+    die();
+
+if (isset($_GET['ip']))
+    $ip = $_GET['ip'];
+else
+    $ip = "localhost";
+    
+/*
+header("Location: http://{$_SERVER['HTTP_HOST']}:$port/$rel");
+die();
+*/
+
+header('Content-type:image/jpeg');
+echo file_get_contents("http://$ip:$port/$rel");
+
+die();
+
+?> 

index.html

@@ -12,6 +12,12 @@
     <script src="js/jquery-ui-1.12.1.custom/jquery-ui.min.js" type="text/javascript"></script>
     <link rel="stylesheet" type="text/css" href="js/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css" />
     -->
+    
+    <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 src="js/functions.js" type="text/javascript"></script>
     <script src="js/temperatures.js" type="text/javascript"></script>
     <script src="js/settings.js" type="text/javascript"></script>

js/camogm.js

@@ -98,15 +98,10 @@ function camogm_create_table(){
 }
 
 function camogm_get_ssd_free_space(mount_en){
-//     if (mount_en){
-// 	//camogm_cmd("mount",false);
-// 	camogm_cmd("get_hdd_space&mount_point=/var/html/CF",false,camogm_parse_hdd_free_space);
-// 	//camogm_cmd("unmount",true);
-//     }else{
-// 	camogm_cmd("get_hdd_space&mount_point=/var/html/CF",true,camogm_parse_hdd_free_space);
-//     }
-      camogm_cmd("get_free_space&mount_point=/mnt/sda1",true,camogm_parse_hdd_free_space);
-      //camogm_cmd("unmount",true);
+  
+      console.log("get_free_space is disabled");
+      //camogm_cmd("get_free_space&mount_point=/mnt/sda1",true,camogm_parse_hdd_free_space);
+      
 }
 
 function camogm_parse_hdd_free_space(data){

js/eyesis4pi.js

@@ -110,6 +110,12 @@ function init(){
     console.log("previews_init()");
     
     previews_init();
+    // init hidden canvases
+    for(var i=0;i<cams.length;i++){
+      append_hidden_div(i);
+    }
+    
+    
     init_temperatures_table();
     
   
@@ -541,50 +547,69 @@ function refresh_images(){
 
 function refresh_images_eyesis(){
   
-  var pic = new Object();
+  for (var i=0;i<cams.length;i++){
+      remove_hidden_div(i);
+      append_hidden_div(i);
+      $("#div_"+i).jp4({ip:cams[i].ip,port:cams[i].port,width:200,fast:true});
+  }
   
-  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(){
-
-      var w = 200;
-      var h = 150;
-      var W = 2592;
-      var H = 1944;
+}
 
-      var cnv = document.getElementById("cam"+this.index+"_canvas");
-      var cContext = cnv.getContext('2d');
-      cnv.setAttribute('width',h);cnv.setAttribute('height',3*w);
-      cContext.rotate(90*Math.PI/180);
-      
-      var k = 3;
-      
-      //mask out 2s
-      //if ((this.index==0)||(this.index==1)||(this.index==7)) k = 3;
-      
-      /*
-      cContext.drawImage(this, 0,0*H,W,H, 0*w, -1*h,w,h);
-      cContext.drawImage(this, 0,1*H,W,H, 1*w, -1*h,w,h);
-      cContext.drawImage(this, 0,2*H,W,H, 2*w, -1*h,w,h);
-      */
-
-      if (this.index%2==0) {
-        cContext.drawImage(this, 0,0*H,W,H, 0*w,-1*h,w,h);
-        cContext.drawImage(this, 0,1*H,W,H, 1*w,-1*h,w,h);
-        cContext.scale(-1,1);
-        cContext.drawImage(this, 0,2*H,W,H, -3*w, -1*h, w, h);
-      }else{
-	  cContext.scale(1,-1); //mirror is needed
-	  cContext.drawImage(this, 0,0*H,W,H, 0*w,0*h,w,h);
-	  cContext.drawImage(this, 0,1*H,W,H, 1*w,0*h,w,h);
-          cContext.scale(-1,1);
-	  cContext.drawImage(this, 0,2*H,W,H, -3*w,h*(0),w,h);
-      }
-    };
+function draw_single_image_eyesis(img,index){
+  
+  var w = 200;
+  var h = 150;
+  
+  index = +index;
+  
+  var cnv = document.getElementById("cam"+index+"_canvas");
+  var cContext = cnv.getContext('2d');
+  cnv.setAttribute('width',h);
+  cnv.setAttribute('height',3*w);
+
+  //eyesis4pi specific
+  var dx = Array(0,1,4);
+  var dw = Array(0,0,4);
+  
+  cContext.rotate(90*Math.PI/180);
+  if (index%2==0) {
+    cContext.drawImage(img,  0,0*h+dx[0],  w,h-dw[0],  0*w,-1*h,  w,h);
+    cContext.drawImage(img,  0,1*h+dx[1],  w,h-dw[1],  1*w,-1*h,  w,h);
+    cContext.scale(-1,1);
+    cContext.drawImage(img,  0,2*h+dx[2],  w,h-dw[2],  -3*w, -1*h,  w,h);
+  }else{
+    cContext.scale(1,-1); //mirror is needed
+    cContext.drawImage(img,  0,0*h+dx[0],  w,h-dw[0],  0*w,0*h,  w,h);
+    cContext.drawImage(img,  0,1*h+dx[1],  w,h-dw[1],  1*w,0*h,  w,h);
+    cContext.scale(-1,1);
+    cContext.drawImage(img,  0,2*h+dx[2],  w,h-dw[2],  -3*w,h*(0),  w,h);
   }
+  
+}
+
+function append_hidden_div(index){
+  el = $("<div>",{
+    id: "div_"+index
+  }).css({
+    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_single_image_eyesis(cnv,index);
+  });
+  
+  $("body").append(el);
+}
+
+function remove_hidden_div(index){
+  $("#div_"+index).off("canvas_ready");
+  $("#div_"+index).remove();
 }
 
 function refresh_images_triclops(){

js/webworker.js

+
+importScripts('elphel.js');
+
+self.onmessage = function(e) {
+
+  var W = e.data.width;
+  var H = e.data.height;
+  var Mosaic = e.data.mosaic;
+  var Format = e.data.format;
+  
+  var settings = e.data.settings;
+  
+  var Pixels = new Uint8Array(e.data.pixels);
+  
+  if (Format!="JPEG"){
+    var reorderedPixels = Elphel.Pixels.reorderBlocksJPx(Pixels,W,H,Format,Mosaic,settings.fast);
+    //reorder first then downscale
+    if (settings.fast){
+      W = W/2;
+      H = H/2;
+    }
+    
+    Elphel.Pixels.applySaturation(reorderedPixels,W,H,2);
+    
+    postMessage({
+      width: W,
+      height: H,
+      pixels: reorderedPixels.buffer
+    },[reorderedPixels.buffer]);
+    
+  }else{
+
+    //just send back
+    postMessage({
+      width: W,
+      height: H,
+      pixels: Pixels.buffer
+    },[Pixels.buffer]);
+    
+  }
+  
+};
\ No newline at end of file

settings.xml

@@ -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>250</input_trigger_period>
+<input_trigger_period>2000</input_trigger_period>
 <input_hdrvexpos>0x36000</input_hdrvexpos>
 <input_autoexp_max>30</input_autoexp_max>
 <input_autoexp_lvl>220</input_autoexp_lvl>