+jp4 viewer - drag and drop local files for preview

684cb0c7 · Oleg Dzhimiev · 9c8a5c45 · 684cb0c7 · 684cb0c7 · 684cb0c7
Commit 684cb0c7 authored Jun 24, 2017 by Oleg Dzhimiev
7 changed files
--- a/Makefile
+++ b/Makefile
 # Runs 'make', 'make install', and 'make clean' in specified subdirectories
-SUBDIRS := src/php_top src/python_tests src/debugfs-webgui src/jp4-canvas src/update src/eyesis4pi src/index src/pointers src/snapshot # src1
+SUBDIRS := src/php_top src/python_tests src/debugfs-webgui src/jp4-canvas src/update src/eyesis4pi src/index src/pointers src/snapshot src/jp4-viewer # src1
 INSTALLDIRS = $(SUBDIRS:%=install-%)
 CLEANDIRS =   $(SUBDIRS:%=clean-%)


--- a/src/index/index.php
+++ b/src/index/index.php
@@ -112,8 +112,9 @@
  <a title="autocampars.php" href="autocampars.php">Parameter Editor</a><br />
  <a title="camogmgui.php" href="camogmgui.php">Recorder</a><br />
  <a title="save snapshots" href="snapshot/">Take snapshot</a><br />
+  <a title="preview jp4 images (drag and drop from PC)" href="jp4-viewer/?width=1200&quality=1">JP4 Viewer</a><br />
  <a title="hwmon.html" href="hwmon.html">Temperature monitor</a><br />
-  <a title="update NAND flash" href="update_software.html">Update</a><br />
+  <a title="update NAND flash" href="update_software.html">Update firmware</a><br />
  <br />
  <a title="docs" href="http://wiki.elphel.com/index.php?title=Tmp_manual">User manual</a><br />
 </div>

--- a/src/jp4-canvas/jquery-jp4.js
+++ b/src/jp4-canvas/jquery-jp4.js
@@ -49,6 +49,7 @@
      chn1: "red",
      chn2: "green",
      ndvi: false,
+      webworker_path: "js",
      debug: false,
      callback: function(){
        console.log("callback");
@@ -270,7 +271,7 @@
        
    function quickestPreview(ctx){
      
-      var worker = new Worker('js/webworker.js');
+      var worker = new Worker(settings.webworker_path+'/webworker.js');
      
      if (DEBUG){
        TX = Date.now();

--- a/src/jp4-viewer/Makefile
+++ b/src/jp4-viewer/Makefile
+DOCUMENTROOT=$(DESTDIR)/www/pages/jp4-viewer
+OWN = -o root -g root
+INSTDOCS = 0644
+INSTALL = install
+DOCS=       index.html \
+            jp4-viewer.js \
+            jp4-viewer.css
+            
+all:
+	@echo "make all in src"
+
+install:
+	@echo "make install in src"
+	$(INSTALL) $(OWN) -d $(DOCUMENTROOT)
+	$(INSTALL) $(OWN) -m $(INSTDOCS) $(DOCS) $(DOCUMENTROOT)
+
+clean:
+	@echo "make clean in src"
--- a/src/jp4-viewer/index.html
+++ b/src/jp4-viewer/index.html
+<!DOCTYPE HTML>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>JP4 format preview, drag&drop w/o uploading</title>
+
+    <script src="../js/elphel.js"></script>
+    <script src="../js/jquery-3.1.1.js"></script>
+    <script src="../js/jcanvas.js"></script>
+    <script src="../js/exif.js"></script>
+    <script src="../js/jquery-jp4.js"></script>
+
+    <script type='text/javascript' src='jp4-viewer.js'></script>
+
+    <link rel='stylesheet' type='text/css' href='jp4-viewer.css'></link>
+    
+  </head>
+  <body>
+  
+    <div id='help'>
+        <b>Click</b> to select a JP4/JPEG image or <b>Drag</b> it here.
+    </div>
+  
+    <div id="up_wrapper" class="uploader">
+        <input type='file' id="up_input" />
+    </div>
+    
+    <img id='smallimage' src="">
+    
+    <div id='jp4view'>
+    </div>
+    
+  </body>
+</html>
--- a/src/jp4-viewer/jp4-viewer.css
+++ b/src/jp4-viewer/jp4-viewer.css
+#up_wrapper{
+    position:absolute;
+    top:0px;
+    left:0px;
+    height:0px;
+    width: 100%;
+    height: 100%;
+/*     background: rgba(200,210,200,1); */
+}
+
+#up_input{
+    
+    position: absolute;
+    top:0px;
+    left:0px;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 2;
+    
+}
+
+#help{
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    position: absolute;
+    left:0px;
+    top:50%;
+    width:100%;
+    height:100%;
+    text-align:center;
+    font-size:20px;
+}
\ No newline at end of file
--- a/src/jp4-viewer/jp4-viewer.js
+++ b/src/jp4-viewer/jp4-viewer.js
+
+/*
+ * 'quality' values 1,2,4,8, where
+ * 1 - best resolution but slowest
+ * 8 - worst resolution but fastest
+ * 
+ * 'width' - canvas width
+ */
+
+
+var SETTINGS = {
+   width: 800,
+   quality: 1
+};
+
+function parseURL(){
+    var parameters=location.href.replace(/\?/ig,"&").split("&");
+    for (var i=0;i<parameters.length;i++) parameters[i]=parameters[i].split("=");
+    for (var i=1;i<parameters.length;i++) {
+        switch (parameters[i][0]) {
+            case "width":   SETTINGS.width = parseInt(parameters[i][1]); break;
+            case "quality": SETTINGS.quality = parseInt(parameters[i][1]); break;
+        }
+    }
+}
+ 
+$(function(){
+    
+    parseURL();
+    init();
+    
+});
+
+function init(){
+    
+    var imageLoader = document.getElementById('up_input');
+    //console.log(imageLoader);
+    imageLoader.addEventListener('change', handleImage, false);
+    
+}
+
+function handleImage(e) {
+    
+    $("#help").hide();
+    
+    var reader = new FileReader();
+    reader.onload = function(event){
+        //$("#smallimage").attr("src",event.target.result);
+        
+        $("#jp4view").html("");
+        var view = $("<div>",{id:"img"});
+
+        //data:image/jpeg;base64,  
+        myimg = event.target.result;
+        
+        if (myimg.indexOf("data:image")==-1){
+            myimg = "data:image/jpeg;base64,"+myimg.substr(13);
+        }
+
+        //console.log(SETTINGS.width);
+        
+        view.jp4({image:myimg, fromhtmlinput: true, width:SETTINGS.width,fast:true, lowres:SETTINGS.quality, webworker_path:"../js"});
+        //view.jp4({image:"test.jp4", input: false, width:1200,fast:true, lowres:1});
+        $("#jp4view").append(view);
+        
+    }
+    reader.readAsDataURL(e.target.files[0]);
+
+}