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:

js/jquery-jp4.js

@@ -34,12 +34,14 @@
     var obj = this;
     
     var settings = $.extend({
+      ip: "",
       port: "",
       image: "test.jp4",
       refresh: false,
       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,
@@ -51,6 +53,10 @@
       }
     },options);
 
+    // working time
+    var T0;
+    var TX;
+    
     var BAYER = settings.mosaic;
     var FLIPV = 0;
     var FLIPH = 0;
@@ -64,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);
@@ -81,34 +94,66 @@
       var http = new XMLHttpRequest();
       var rq = "";
 
-      if (settings.port!=""){
-        rq = "get-image.php?port="+settings.port+"&rel=bimg&ts="+Date.now();
-        settings.refresh = true;
+      if (settings.port!=""&&settings.ip!=""){
+        rq = "get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=bimg&ts="+Date.now();
+        //rq = "get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=img&ts="+Date.now();
+        //settings.refresh = true;
       }else{
         rq = settings.image;
       }
 
       http.open("GET", rq, true);
 
+      TX = Date.now();
+      T0 = Date.now();
+
       http.responseType = "blob";
       http.onload = function(e) {
+
+        console.log("#"+elem.attr("id")+", file load time: "+(Date.now()-TX)/1000+" s");
+        TX = Date.now();
+
         if (this.status === 200) {
+
           var heavyImage = new Image();
+
           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: heavyImage,
+                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
               });
             });
+
           };
           heavyImage.src = URL.createObjectURL(http.response);
         }
@@ -118,15 +163,28 @@
       
     }
         
-    var T0;
-        
     function redraw(){
+      
+      //for debugging
+      //IMAGE_FORMAT="JPEG";
+      
       $(this).draw({
         fn: function(ctx){          
           
-          T0 = Date.now();
+          console.log("#"+elem.attr("id")+", raw image drawn time: "+(Date.now()-TX)/1000+" s");
+          TX = Date.now();
+                    
+          if (IMAGE_FORMAT=="JPEG"){
+            
+            // if JP4/JP46 it will work through webworker and exit later on workers message
+            Elphel.Canvas.drawScaled(cnv_working,cnv_display,settings.width);
+            
+            console.log("#"+elem.attr("id")+", Total time: "+(Date.now()-T0)/1000+" s");
+            
+            $(this).trigger("canvas_ready");
+            
+          }else if ((IMAGE_FORMAT=="JP4")||(IMAGE_FORMAT=="JP46")){
             
-          if ((IMAGE_FORMAT=="JP4")||(IMAGE_FORMAT=="JP46")){
             if (settings.fast){
               quickestPreview(ctx);
             }/*else{
@@ -165,12 +223,9 @@
             //saturation(ctx,SATURATION[0]);
           }
           
+          // too early
           //console.log("#"+elem.attr("id")+", time: "+(Date.now()-t0)/1000+" s");
           
-          // custom event
-          //$(this).trigger("canvas_ready");
-          //console.log($(this));
-          
           if (settings.refresh) get_image();
         }
       });
@@ -180,11 +235,21 @@
       
       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);
       var pixels = image.data;
       
+      console.log("#"+elem.attr("id")+", data from canvas for webworker time: "+(Date.now()-TX)/1000+" s");
+      TX = Date.now();
+      
       worker.postMessage({
         mosaic: settings.mosaic,
         format: IMAGE_FORMAT,
@@ -195,10 +260,12 @@
           fast:    settings.fast,
           channel: settings.channel,
           diff:    settings.diff,
-          ndvi:    settings.ndvi
+          ndvi:    settings.ndvi,
+          lowres:  settings.lowres
         },
       },[pixels.buffer]);
       
+      
       worker.onmessage = function(e){
         
         var pixels = new Uint8Array(e.data.pixels);
@@ -207,10 +274,14 @@
         var width = e.data.width;
         var height = e.data.height;
         
+        console.log("#"+elem.attr("id")+", worker time: "+(Date.now()-TX)/1000+" s");
+        TX = Date.now();
+        
         Elphel.Canvas.putImageData(working_context,pixels,width,height);
         Elphel.Canvas.drawScaled(cnv_working,cnv_display,settings.width);
         
-        console.log("#"+elem.attr("id")+", time: "+(Date.now()-T0)/1000+" s");
+        // report time
+        console.log("#"+elem.attr("id")+", Total time: "+(Date.now()-T0)/1000+" s");
         //trigger here
         cnv_working.trigger("canvas_ready");
       }

js/panorama_preview.js

@@ -208,7 +208,7 @@ function image_full_name(folder, image_number) {
         for (var i=0;i<8;i++){
             remove_hidden_div(i);
             append_hidden_div(i);
-            $("#div_"+i).jp4({image:image_name[cams[i].index-1],width:200,fast:true});
+            $("#div_"+i).jp4({image:image_name[cams[i].index-1],width:200,fast:true,lowres:4});
         }
       }
     });

js/webworker.js

@@ -12,13 +12,18 @@ self.onmessage = function(e) {
   
   var Pixels = new Uint8Array(e.data.pixels);
   
+  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;
     }
+  }else{
+    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);