Skip to content

E
elphel-web-393
Commit 684cb0c7 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

+jp4 viewer - drag and drop local files for preview

parent 9c8a5c45
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 3 deletions
Makefile
View file @ 684cb0c7
# Runs 'make', 'make install', and 'make clean' in specified subdirectories # 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-%) INSTALLDIRS = $(SUBDIRS:%=install-%)
CLEANDIRS = $(SUBDIRS:%=clean-%) CLEANDIRS = $(SUBDIRS:%=clean-%)
......
src/index/index.php
View file @ 684cb0c7
...@@ -112,8 +112,9 @@ ...@@ -112,8 +112,9 @@
<a title="autocampars.php" href="autocampars.php">Parameter Editor</a><br /> <a title="autocampars.php" href="autocampars.php">Parameter Editor</a><br />
<a title="camogmgui.php" href="camogmgui.php">Recorder</a><br /> <a title="camogmgui.php" href="camogmgui.php">Recorder</a><br />
<a title="save snapshots" href="snapshot/">Take snapshot</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="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 /> <br />
<a title="docs" href="http://wiki.elphel.com/index.php?title=Tmp_manual">User manual</a><br /> <a title="docs" href="http://wiki.elphel.com/index.php?title=Tmp_manual">User manual</a><br />
</div> </div>
......
src/jp4-canvas/jquery-jp4.js
View file @ 684cb0c7
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
chn1: "red", chn1: "red",
chn2: "green", chn2: "green",
ndvi: false, ndvi: false,
webworker_path: "js",
debug: false, debug: false,
callback: function(){ callback: function(){
console.log("callback"); console.log("callback");
...@@ -270,7 +271,7 @@ ...@@ -270,7 +271,7 @@
function quickestPreview(ctx){ function quickestPreview(ctx){
var worker = new Worker('js/webworker.js'); var worker = new Worker(settings.webworker_path+'/webworker.js');
if (DEBUG){ if (DEBUG){
TX = Date.now(); TX = Date.now();
......
src/jp4-viewer/Makefile 0 → 100644
View file @ 684cb0c7
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"
src/jp4-viewer/index.html 0 → 100644
View file @ 684cb0c7
<!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>
src/jp4-viewer/jp4-viewer.css 0 → 100644
View file @ 684cb0c7
#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
src/jp4-viewer/jp4-viewer.js 0 → 100644
View file @ 684cb0c7
/*
* '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]);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment