quicker preview

js/elphel.js

@@ -105,6 +105,55 @@ var Elphel = {
   // Pixel manipulation
   Pixels:{
     
+    reorderBlocksJP4_lowres: function(pixels,width,height,format="JP4",mosaic=[["Gr","R"],["B" ,"Gb"]],lowres){
+      
+      var oPixels = new Uint8Array(pixels.length/4);
+      
+      // check
+      if ((lowres!=1)&&(lowres!=2)&&(lowres!=4)&&(lowres!=8)){
+        lowres = 4;
+      }
+      
+      var K0 = 3-Math.log(lowres)/Math.log(2);
+      var K1 = 1<<K0;
+      var K2 = K1-1;
+      
+      for(var y=0;y<height/2;y++){
+        for(var x=0;x<width/2;x++){
+          
+          offset = y*width/2+x;
+
+          y0 = 2*K1*(y>>K0)+(y&K2);
+          x0 = 4*K1*(x>>K0)+(x&K2);
+                      
+          if (x0>=width){
+            x0 = x0 - width;
+            y0 = y0 + K1;
+          }
+          
+          offset0 = width*y0 + x0;
+          
+          for(var k=0;k<4;k++){
+            ym = (k>>1)&1;
+            xm = k&1;
+            if      (mosaic[ym][xm]=="R")   r = pixels[4*(offset0+K1*k)+0];
+            else if (mosaic[ym][xm]=="Gr") gr = pixels[4*(offset0+K1*k)+0];
+            else if (mosaic[ym][xm]=="Gb") gb = pixels[4*(offset0+K1*k)+0];
+            else if (mosaic[ym][xm]=="B")   b = pixels[4*(offset0+K1*k)+0];
+          }
+          g = (gr+gb)>>1;
+          
+          oPixels[4*(offset)+0] = r;//pixels[4*(4*offset+1)+0];
+          oPixels[4*(offset)+1] = g;//pixels[4*(4*offset+0)+0];
+          oPixels[4*(offset)+2] = b;//pixels[4*(4*offset+2)+0];
+          oPixels[4*(offset)+3] = 255;
+        }
+      }
+
+      return oPixels;
+      
+    },
+    
     /**
     * Name: reorderJP4Blocks
     * Description: clear from the function's name
@@ -130,6 +179,8 @@ var Elphel = {
     */
     reorderBlocksJPx: function(pixels,width,height,format="JP4",mosaic=[["Gr","R"],["B" ,"Gb"]],nwd=false){
     
+      var nwd2 = true;
+      
       var t0 = Date.now();
       
       // pixels is a long 1-D array with the following structure:
@@ -175,7 +226,7 @@ var Elphel = {
                 macroblock[((y<<1)&0xe)|((y>>3)&0x1)][((x<<1)&0xe)|((x>>3)&0x1)]=pixels[4*(offset+x)];
               }
             }
-          }
+          }    
 
           if (nwd){
             for (y=0;y<8;y++){

js/eyesis4pi.js

@@ -569,7 +569,7 @@ function refresh_images_eyesis(){
   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});
+      $("#div_"+i).jp4({ip:cams[i].ip, port:cams[i].port, width:200, fast:true, lowres:4});
   }
   
 }

js/jquery-jp4.js

@@ -41,6 +41,7 @@
       mosaic: [["Gr","R"],["B" ,"Gb"]],
       fast: false,
       precise: false,
+      lowres: 0, // valid values: 1,2,4,8. 0 to disable
       width: 600,
       channel: "all",
       diff: false,
@@ -69,6 +70,13 @@
     
     // hide working canvas
     cnv_working.css({display:"none"});
+    /*
+    cnv_working.css({
+      position:"absolute",
+      top: "500px",
+      left: "500px"
+    });
+    */
     
     elem.append(cnv_working);
     elem.append(cnv_display);
@@ -112,17 +120,36 @@
           heavyImage.onload = function(){
 
             EXIF.getData(this, function() {
+              
+              var cnv_w;
+              var cnv_h;
+              
+              if (settings.lowres!=0){
+                cnv_w = this.width/settings.lowres;
+                cnv_h = this.height/settings.lowres;
+              }else{
+                cnv_w = this.width;
+                cnv_h = this.height;
+              }
+              
               //update canvas size
-              canvas.attr("width",this.width);
-              canvas.attr("height",this.height);
-
+              canvas.attr("width",cnv_w);
+              canvas.attr("height",cnv_h);
+              
               parseEXIFMakerNote(this);
                       
               canvas.drawImage({
                 x:0, y:0,
                 source: this,
+                width: cnv_w,
+                height: cnv_h,
                 //source: heavyImage,
                 load: redraw,
+                sx: 0,
+                sy: 0,
+                sWidth: this.width,
+                sHeight: this.height,
+                //scale: scale,
                 fromCenter: false
               });
             });
@@ -142,7 +169,7 @@
       //IMAGE_FORMAT="JPEG";
       
       $(this).draw({
-        fn: function(ctx){
+        fn: function(ctx){          
           
           console.log("#"+elem.attr("id")+", raw image drawn time: "+(Date.now()-TX)/1000+" s");
           TX = Date.now();
@@ -208,6 +235,13 @@
       
       var worker = new Worker('js/webworker.js');
       
+      TX = Date.now();
+
+      //ctx.canvas.width = ctx.canvas.width/2;
+      //ctx.canvas.height = ctx.canvas.height/2;
+      //ctx.canvas.style.width = ctx.canvas.style.width/4;
+      //ctx.canvas.style.height = ctx.canvas.style.height/4;
+      
       var width = ctx.canvas.width;
       var height = ctx.canvas.height;
       var image = ctx.getImageData(0,0,width,height);
@@ -226,7 +260,8 @@
           fast:    settings.fast,
           channel: settings.channel,
           diff:    settings.diff,
-          ndvi:    settings.ndvi
+          ndvi:    settings.ndvi,
+          lowres:  settings.lowres
         },
       },[pixels.buffer]);
       

js/webworker.js

@@ -12,31 +12,27 @@ self.onmessage = function(e) {
   
   var Pixels = new Uint8Array(e.data.pixels);
   
-  if (Format!="JPEG"){
+  if (settings.lowres==0){
     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]);
-    
+    var reorderedPixels = Elphel.Pixels.reorderBlocksJP4_lowres(Pixels,W,H,Format,Mosaic,settings.lowres);
+    W = W/2;
+    H = H/2;
   }
   
+  Elphel.Pixels.applySaturation(reorderedPixels,W,H,2);
+  
+  postMessage({
+    width: W,
+    height: H,
+    pixels: reorderedPixels.buffer
+  },[reorderedPixels.buffer]);
+  
+  //Elphel.test();
+  
 };
\ No newline at end of file

preview.html

@@ -67,7 +67,7 @@
           // init hidden canvases
           for(var i=0;i<cams.length;i++){
             append_hidden_div(i);
-            $("#div_"+i).jp4({ip:cams[i].ip,port:cams[i].port,width:baseWidth,fast:true});
+            $("#div_"+i).jp4({ip:cams[i].ip,port:cams[i].port,width:baseWidth,fast:true,lowres:4});
           }
 	}
 

settings.xml

@@ -7,10 +7,10 @@
 <footage_limit>3000</footage_limit>
 <gpsimu_device_name>/dev/sda1</gpsimu_device_name>
 <box_force_jp4>checked</box_force_jp4>
-<input_quality>98</input_quality>
+<input_quality>96</input_quality>
 <input_trigger_period>2000</input_trigger_period>
 <input_hdrvexpos>0x36000</input_hdrvexpos>
-<input_autoexp_max>30</input_autoexp_max>
+<input_autoexp_max>1</input_autoexp_max>
 <input_autoexp_lvl>220</input_autoexp_lvl>
 <input_autoexp_fracpix>98</input_autoexp_fracpix>
 <input_autoexp_frames_ahead>1</input_autoexp_frames_ahead>