revisited jquery-jp4 - optimized exif reading (don't need findIPTCinJPEG), simplified image loading

b7d797ad · Oleg Dzhimiev · 979e470b · b7d797ad · b7d797ad · b7d797ad
Commit b7d797ad authored May 18, 2020 by Oleg Dzhimiev
5 changed files
--- a/src/jp4-canvas/elphel.js
+++ b/src/jp4-canvas/elphel.js
@@ -129,13 +129,13 @@ var Elphel = {
    * @lowres - valid values: 1 (not scaled), 2, 4, 8 (lowest resolution) 
    *    
    */
-    reorderBlocksJP4_lowres: function(pixels,width,height,format="JP4",mosaic=[["Gr","R"],["B" ,"Gb"]],lowres){
-      
+    //reorderBlocksJP4_lowres: function(pixels,width,height,format="JP4",mosaic=[["Gr","R"],["B" ,"Gb"]],lowres){
+    reorderBlocksJP4_lowres: async function(pixels,width,height,format="JP4",mosaic=[["Gr","R"],["B" ,"Gb"]],lowres){
      // the output image is 1/4 because demosaicing = 4 single color channel pixels are put into 1 rgb pixel 
      var oPixels = new Uint8Array(pixels.length/4);
      
      // check
-      if ((lowres!=1)&&(lowres!=2)&&(lowres!=4)&&(lowres!=8)){
+      if (![1,2,4,8].includes(lowres)){
        lowres = 4;
      }
      
@@ -692,4 +692,4 @@ var Elphel = {
    console.log("Test message from elphel.js: ok");
  }
  
-}
\ No newline at end of file
+}
--- a/src/jp4-canvas/jp4-canvas.html
+++ b/src/jp4-canvas/jp4-canvas.html
@@ -7,12 +7,12 @@
  <body>
    <table>
    <tr>
-      <td><div id='test1'></div></td>
-      <td><div id='test2'></div></td>
+      <td valign='top'><div id='test1'></div></td>
+      <td valign='top'><div id='test2'></div></td>
    </tr>
    <tr>
-      <td><div id='test3'></div></td>
-      <td><div id='test4'></div></td>
+      <td valign='top'><div id='test3'></div></td>
+      <td valign='top'><div id='test4'></div></td>
    </tr>
    </table>
    <script src="js/elphel.js"></script>

--- a/src/jp4-canvas/jp4-canvas.js
+++ b/src/jp4-canvas/jp4-canvas.js
@@ -26,10 +26,10 @@
 */

 $(function(){
-  
-  var t1 = $("#test1").jp4({ip:location.host, port:2323,width:600,fast:true,lowres:4});
-  var t2 = $("#test2").jp4({ip:location.host, port:2324,width:600,fast:true,lowres:4});
-  var t3 = $("#test3").jp4({ip:location.host, port:2325,width:600,fast:true,lowres:4});
-  var t4 = $("#test4").jp4({ip:location.host, port:2326,width:600,fast:true,lowres:4});
+
+  let t1 = $("#test1").jp4({src:"http://"+location.host+":"+2323+"/img",width:600,fast:true,lowres:4,debug:false,refresh:false});
+  let t2 = $("#test2").jp4({src:"http://"+location.host+":"+2324+"/img",width:600,fast:true,lowres:4,debug:false,refresh:false});
+  let t3 = $("#test3").jp4({src:"http://"+location.host+":"+2325+"/img",width:600,fast:true,lowres:4,debug:false,refresh:false});
+  let t4 = $("#test4").jp4({src:"http://"+location.host+":"+2326+"/img",width:600,fast:true,lowres:4,debug:false,refresh:false});

 });
--- a/src/jp4-canvas/jquery-jp4.js
+++ b/src/jp4-canvas/jquery-jp4.js
--- a/src/jp4-canvas/webworker.js
+++ b/src/jp4-canvas/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 (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;
+onmessage = async (e) => {
+
+    let W = e.data.width;
+    let H = e.data.height;
+    let Mosaic = e.data.mosaic;
+    let Format = e.data.format;
+
+    let settings = e.data.settings;
+
+    let Pixels = new Uint8Array(e.data.pixels);
+
+    let reorderedPixels;
+
+    if (settings.lowres==0){
+        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{
+        reorderedPixels = await Elphel.Pixels.reorderBlocksJP4_lowres(Pixels,W,H,Format,Mosaic,settings.lowres);
+        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);

-  postMessage({
-    width: W,
-    height: H,
-    pixels: reorderedPixels.buffer
-  },[reorderedPixels.buffer]);
+    Elphel.Pixels.applySaturation(reorderedPixels,W,H,2);

-  //Elphel.test();
-  this.close();
+    postMessage({
+        width: W,
+        height: H,
+        pixels: reorderedPixels.buffer
+    },[reorderedPixels.buffer]);

-};
\ No newline at end of file
+    //Elphel.test();
+    this.close();
+};