quicker JP4 previews

src/jp4-canvas/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:

src/jp4-canvas/jp4-canvas.js

@@ -27,9 +27,9 @@
 
 $(function(){
   
-  var t1 = $("#test1").jp4({port:2323,width:600,fast:true});
-  var t2 = $("#test2").jp4({port:2324,width:600,fast:true});
-  var t3 = $("#test3").jp4({port:2325,width:600,fast:true});
-  var t4 = $("#test4").jp4({port:2326,width:600,fast:true});
+  var t1 = $("#test1").jp4({port:2323,width:600,fast:true,lowres:4});
+  var t2 = $("#test2").jp4({port:2324,width:600,fast:true,lowres:4});
+  var t3 = $("#test3").jp4({port:2325,width:600,fast:true,lowres:4});
+  var t4 = $("#test4").jp4({port:2326,width:600,fast:true,lowres:4});
 
 });

src/jp4-canvas/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,
@@ -68,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);
@@ -82,14 +91,12 @@
       //reset format
       IMAGE_FORMAT = "JPEG";
 
-      TX = Date.now();
-      T0 = Date.now();
-      
       var http = new XMLHttpRequest();
       var rq = "";
 
-      if (settings.port!=""){
-        rq = "get-image.php?port="+settings.port+"&rel=bimg&ts="+Date.now();
+      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;
@@ -97,30 +104,56 @@
 
       http.open("GET", rq, true);
 
-      http.responseType = "blob";
+      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);
         }
@@ -131,6 +164,10 @@
     }
         
     function redraw(){
+      
+      //for debugging
+      //IMAGE_FORMAT="JPEG";
+      
       $(this).draw({
         fn: function(ctx){          
           
@@ -188,8 +225,6 @@
           
           // too early
           //console.log("#"+elem.attr("id")+", time: "+(Date.now()-t0)/1000+" s");
-          // custom event
-          //$(this).trigger("canvas_ready");
           
           if (settings.refresh) get_image();
         }
@@ -200,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);
@@ -218,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);

src/jp4-canvas/webworker.js

@@ -12,13 +12,18 @@ 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;
     }
+  }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);
   
@@ -28,15 +33,6 @@ self.onmessage = function(e) {
     pixels: reorderedPixels.buffer
   },[reorderedPixels.buffer]);
   
-  }else{
-
-    //just send back
-    postMessage({
-      width: W,
-      height: H,
-      pixels: Pixels.buffer
-    },[Pixels.buffer]);
-    
-  }
+  //Elphel.test();
   
 };
\ No newline at end of file