added tiff.js

src/index/index.php

@@ -57,6 +57,7 @@
   <!--<script type='text/javascript' src='../js/bootstrap/js/bootstrap.js'></script>-->
   <script src="js/elphel.js"></script>
   <script src="js/jcanvas.js"></script>
+  <script src="js/tiff.js"></script>
   <script src="js/exif.js"></script>
   <script src="js/jquery-jp4.js"></script>
 

src/jp4-canvas/Makefile

@@ -7,6 +7,7 @@ DOCS=       jp4-canvas.html \
 
 LIBS=       elphel.js \
             exif.js \
+            tiff.js \
             jquery-jp4.js \
             jcanvas.js \
             webworker.js

src/jp4-canvas/jp4-canvas.html

@@ -16,6 +16,7 @@
     </tr>
     </table>
     <script src="js/elphel.js"></script>
+    <script src="js/tiff.js"></script>
     <script src="js/jquery-3.1.1.js"></script>
     <script src="js/jcanvas.js"></script>
     <script src="js/exif.js"></script>

src/jp4-canvas/jp4-canvas.js

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

src/jp4-canvas/jquery-jp4.js

@@ -136,8 +136,16 @@
         }
 
         if (this.status === 200) {
-            obj.blob = window.URL.createObjectURL(http.response);
-            process_image(obj.blob);
+
+            var contentType = http.getResponseHeader("Content-Type");
+
+            if (contentType=="image/tiff"){
+              process_image_tiff(http.response);
+            }else{
+              obj.blob = window.URL.createObjectURL(http.response);
+              process_image(obj.blob);
+            }
+
             delete this;
             //URL.revokeObjectURL(imgdata);
         }
@@ -181,6 +189,24 @@
       return Array(settings.ip,settings.port);
     }
 
+    function process_image_tiff(blob){
+
+        var arrayBuffer;
+        var fileReader = new FileReader();
+        fileReader.onload = function(event){
+            arrayBuffer = event.target.result;
+            var tiff = new Tiff({buffer: arrayBuffer});
+            var canvas = tiff.toCanvas();
+
+            cnv_working.trigger("canvas_ready");
+            obj.busy = false;
+
+            Elphel.Canvas.drawScaled($(canvas),cnv_display,settings.width);
+        }
+        fileReader.readAsArrayBuffer(blob);
+
+    }
+
     function process_image(imagedata){
 
         var canvas = cnv_working;