updated jquery-jp4.js (2d52ff11) · Commits · Elphel / elphel-web-393

src/jp4-canvas/elphel.js

+4 −4

Original line number	Diff line number	Diff line
		@@ -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;
		}

src/jp4-canvas/jp4-canvas.html

+4 −4

Original line number	Diff line number	Diff line
		@@ -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>

src/jp4-canvas/jp4-canvas.js

+5 −5

Original line number	Diff line number	Diff line
		@@ -27,9 +27,9 @@

		$(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:2,debug:false,refresh:false});
		let t2 = $("#test2").jp4({src:"http://"+location.host+":"+2324+"/img",width:600,fast:true,lowres:2,debug:false,refresh:false});
		let t3 = $("#test3").jp4({src:"http://"+location.host+":"+2325+"/img",width:600,fast:true,lowres:2,debug:false,refresh:false});
		let t4 = $("#test4").jp4({src:"http://"+location.host+":"+2326+"/img",width:600,fast:true,lowres:2,debug:false,refresh:false});

		});

src/jp4-canvas/jquery-jp4.js

+282 −376

Original line number	Diff line number	Diff line
		@@ -28,15 +28,13 @@
		(function ( $ ) {

		//https://gist.github.com/leolux/c794fc63d9c362013448
		var JP4 = function(element,options){
		let JP4 = function(element,options){

		var elem = $(element);
		var obj = this;
		let elem = $(element);
		let obj = this;

		var settings = $.extend({
		ip: "",
		port: "",
		image: "test.jp4",
		let settings = $.extend({
		src: "test.jp4",
		fromhtmlinput: false,
		refresh: false,
		mosaic: [["Gr","R"],["B" ,"Gb"]],
		@@ -56,22 +54,23 @@
		}
		},options);

		var DEBUG = settings.debug;
		let DEBUG = settings.debug;
		// work time
		let T0, TX;

		// working time
		var T0;
		var TX;
		let BAYER = settings.mosaic;
		let FLIPV = 0;
		let FLIPH = 0;
		let IMAGE_FORMAT = "JPEG";
		let SATURATION = [0,0,0,0];

		var BAYER = settings.mosaic;
		var FLIPV = 0;
		var FLIPH = 0;
		var IMAGE_FORMAT = "JPEG";
		var SATURATION = [0,0,0,0];
		let PIXELS = [];

		var PIXELS = [];
		let INIT = false;

		// https://stackoverflow.com/questions/28495390/thermal-imaging-palette
		var iron_palette = ["#00000a","#000014","#00001e","#000025","#00002a","#00002e","#000032","#000036",
		let iron_palette = [
		"#00000a","#000014","#00001e","#000025","#00002a","#00002e","#000032","#000036",
		"#00003a","#00003e","#000042","#000046","#00004a","#00004f","#000052","#010055",
		"#010057","#020059","#02005c","#03005e","#040061","#040063","#050065","#060067",
		"#070069","#08006b","#09006e","#0a0070","#0b0073","#0c0074","#0d0075","#0d0076",
		@@ -125,55 +124,45 @@
		"#fff5a6","#fff6aa","#fff6af","#fff7b3","#fff7b6","#fff8ba","#fff8bd","#fff8c1",
		"#fff8c4","#fff9c7","#fff9ca","#fff9cd","#fffad1","#fffad4","#fffbd8","#fffcdb",
		"#fffcdf","#fffde2","#fffde5","#fffde8","#fffeeb","#fffeee","#fffef1","#fffef4",
		"#fffff6"];
		"#fffff6"
		];

		function get_palette_color(v){

		v = v*(iron_palette.length-1);
		v_lo = Math.floor(v);
		//v_hi = Math.ceil(v);

		// don't interpolate

		return iron_palette[v_lo];
		}

		// only valid values are allowed otherwise - disable
		if ((settings.lowres!=0)&&(settings.lowres!=1)&&(settings.lowres!=2)&&(settings.lowres!=4)&&(settings.lowres!=8)){
		if (![0,1,2,4,8].includes(settings.lowres)){
		settings.lowres = 0;
		}

		var cnv_working = $("<canvas>",{id:"working"});
		var cnv_display = $("<canvas>",{id:"display"});

		obj.busy = false;

		// 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);

		if (DEBUG){
		TX = Date.now();
		T0 = Date.now();
		TX = T0;
		}

		obj.busy = true;

		if (settings.fromhtmlinput){
		/*
		* if image is being loaded from <input type='file'>
		* make sure the image data starts with: "data:image/jpeg;base64,"
		* EXIF.js does not like empty data type: "data:;base64,"
		*/
		obj.busy = true;
		process_image(settings.image);
		process_image(settings.src);
		}else{
		send_request();
		}
		@@ -181,21 +170,14 @@

		function send_request(){

		var rq = "";

		var http = new XMLHttpRequest();

		if (settings.port!=""&&settings.ip!=""){
		//rq = "/get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=bimg&ts="+Date.now();
		rq = "http://"+settings.ip+"/get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=img&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;
		}
		let rq = settings.src;
		// old, when CORS was not enabled
		//rq = "http://"+settings.ip+"/get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=img&ts="+Date.now();

		let http = new XMLHttpRequest();
		http.open("GET", rq, true);
		http.responseType = "blob";
		//http.responseType = "blob";
		http.responseType = "arraybuffer";
		http.onload = function(e) {

		if (DEBUG){
		@@ -205,57 +187,45 @@

		if (this.status===200) {

		var contentType = http.getResponseHeader("Content-Type");

		let 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);
		//obj.blob = window.URL.createObjectURL(http.response);
		//process_image(obj.blob);
		process_image(http.response);
		}

		delete this;
		//URL.revokeObjectURL(imgdata);
		}
		};

		obj.busy = true;
		http.send();

		}

		this.refresh = function(){
		// skip if busy?
		if (!obj.busy){
		if (DEBUG){
		T0 = Date.now();
		TX = T0;
		}
		send_request();
		}
		}

		this.resize = function(w){

		settings.width = w;
		INIT = false;
		send_request();

		}

		this.setAddr = function(url,port){

		settings.port = port;
		settings.ip = url;

		this.setSrc = function(src){
		settings.src = src;
		return 0;

		}

		this.getFormat = function(){

		return this.format;

		}

		this.getAddr = function(){
		return Array(settings.ip,settings.port);
		}
		this.getFormat = () => this.format;
		this.getSrc = () => settings.src;

		function process_image_tiff(blob){

		@@ -397,89 +367,82 @@

		function process_image(imagedata){

		var canvas = cnv_working;
		//reset format
		IMAGE_FORMAT = "JPEG";
		let img = {};
		img.exifdata = EXIF.readFromBinaryFile(imagedata);
		parseEXIFMakerNote(img);

		var heavyImage = new Image();
		if (DEBUG){
		console.log("#"+elem.attr("id")+", exif parse time: "+(Date.now()-TX)/1000+" s");
		TX = Date.now();
		}

		var heavyImage = new Image();
		heavyImage.onload = function(){

		/*
		if (obj.blob){
		console.log("revoking object");
		window.URL.revokeObjectURL(obj.blob);
		if (DEBUG){
		console.log("#"+elem.attr("id")+", file reload (from Blob) as image time: "+(Date.now()-TX)/1000+" s");
		TX = Date.now();
		}
		*/


		EXIF.getData(this, function() {

		var cnv_w;
		var cnv_h;
		let cnv_w = this.width;
		let cnv_h = this.height;

		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",cnv_w);
		canvas.attr("height",cnv_h);

		parseEXIFMakerNote(this);

		canvas.drawImage({
		x:0, y:0,
		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
		});
		}

		});
		if (!INIT) {
		let w = settings.width;
		let h = (cnv_h/cnv_w*settings.width).toFixed(0);

		};
		heavyImage.src = imagedata;
		if ((cnv_display[0].width!=w)\|\|(cnv_display[0].height!=h)){
		cnv_display[0].width = w;
		cnv_display[0].height = h;
		}

		INIT = true;
		}

		function redraw(){
		if (IMAGE_FORMAT=="JPEG"){

		//URL.revokeObjectURL($(this).source.src);
		//console.log(this);
		let canvas = cnv_display[0];
		//canvas.width = settings.width;
		//canvas.height = Math.floor(cnv_h*settings.width/cnv_w);
		let ctx = canvas.getContext('2d');
		ctx.drawImage(this,0,0,canvas.width,canvas.height);

		//for debugging
		//IMAGE_FORMAT="JPEG";
		conclude_processing();
		}

		$(this).draw({
		fn: function(ctx){
		if ((IMAGE_FORMAT=="JP4")\|\|(IMAGE_FORMAT=="JP46")){

		let canvas = cnv_working[0];
		canvas.width = cnv_w;
		canvas.height = cnv_h;

		let ctx = canvas.getContext('2d');
		ctx.drawImage(this,0,0,cnv_w,cnv_h);

		decode_and_display(ctx);

		if (DEBUG){
		console.log("#"+elem.attr("id")+", raw image drawn time: "+(Date.now()-TX)/1000+" s");
		TX = Date.now();
		}

		if (IMAGE_FORMAT=="JPEG"){
		//delete this.src;
		URL.revokeObjectURL(this.src);

		// if JP4/JP46 it will work through webworker and exit later on workers message
		Elphel.Canvas.drawScaled(cnv_working,cnv_display,settings.width);
		};
		//obj.blob = window.URL.createObjectURL(http.response);
		//process_image(obj.blob);
		heavyImage.src = window.URL.createObjectURL(new Blob([imagedata]));
		}

		function conclude_processing(){
		if (DEBUG){
		console.log("#"+elem.attr("id")+", Total time: "+(Date.now()-T0)/1000+" s");
		}

		$(this).trigger("canvas_ready");
		cnv_working.trigger("canvas_ready");
		obj.busy = false;

		if (settings.refresh) {
		@@ -489,70 +452,20 @@
		}
		send_request();
		}

		}else if ((IMAGE_FORMAT=="JP4")\|\|(IMAGE_FORMAT=="JP46")){

		if (settings.fast){
		quickestPreview(ctx);
		}/*else{
		Elphel.reorderJP4Blocks(ctx,"JP4");

		if (settings.precise){
		PIXELS = Elphel.pixelsToArrayLinear(ctx);
		Elphel.demosaicBilinear(ctx,PIXELS,settings.mosaic,true);
		PIXELS = Elphel.pixelsToArray(ctx);
		}else{
		PIXELS = Elphel.pixelsToArray(ctx);
		Elphel.demosaicBilinear(ctx,PIXELS,settings.mosaic,false);
		PIXELS = Elphel.pixelsToArray(ctx);
		}

		if (settings.channel!="all"){
		Elphel.showSingleColorChannel(ctx,settings.channel);
		}

		if (settings.diff){
		Elphel.diffColorChannels(PIXELS,settings.chn1,settings.chn2,1);
		Elphel.drawImageData(ctx,PIXELS);
		}

		if (settings.ndvi){
		console.log(PIXELS[0]+" "+PIXELS[1]+" "+PIXELS[2]+" "+PIXELS[3]+" ");
		PIXELS = Elphel.someIndex(PIXELS);
		console.log(PIXELS[0]+" "+PIXELS[1]+" "+PIXELS[2]+" "+PIXELS[3]+" ");
		Elphel.drawImageData(ctx,PIXELS);
		}

		}
		*/
		// RGB -> YCbCr x SATURATION -> RGB
		// Taking SATURATION[0] = 1/GAMMA[0] (green pixel of GR-line)
		//saturation(ctx,SATURATION[0]);
		}

		// too early
		//console.log("#"+elem.attr("id")+", time: "+(Date.now()-t0)/1000+" s");
		}
		});
		}

		function quickestPreview(ctx){
		function decode_and_display(ctx){

		var worker = new Worker(settings.webworker_path+'/webworker.js');
		let worker = new Worker(settings.webworker_path+'/webworker.js');

		if (DEBUG){
		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);
		var pixels = image.data;
		let width = ctx.canvas.width;
		let height = ctx.canvas.height;
		let image = ctx.getImageData(0,0,width,height);
		let pixels = image.data;

		if (DEBUG){
		console.log("#"+elem.attr("id")+", data from canvas for webworker time: "+(Date.now()-TX)/1000+" s");
		@@ -574,42 +487,34 @@
		},
		},[pixels.buffer]);


		worker.onmessage = function(e){

		var pixels = new Uint8Array(e.data.pixels);
		var working_context = cnv_working[0].getContext('2d');

		var width = e.data.width;
		var height = e.data.height;
		let width = e.data.width;
		let height = e.data.height;
		let pixels = new Uint8Array(e.data.pixels);

		if (DEBUG){
		console.log("#"+elem.attr("id")+", worker time: "+(Date.now()-TX)/1000+" s");
		TX = Date.now();
		}

		Elphel.Canvas.putImageData(working_context,pixels,width,height);
		let ctx = cnv_working[0].getContext('2d');
		Elphel.Canvas.putImageData(ctx,pixels,width,height);
		Elphel.Canvas.drawScaled(cnv_working,cnv_display,settings.width);

		if (DEBUG){
		// report time
		console.log("#"+elem.attr("id")+", Total time: "+(Date.now()-T0)/1000+" s");
		}
		//trigger here
		cnv_working.trigger("canvas_ready");
		obj.busy = false;

		if (settings.refresh) {
		if (DEBUG){
		TX = Date.now();
		T0 = Date.now();
		}
		send_request();
		}
		/*
		let ctx = cnv_display[0].getContext('2d');
		let imgdata = new ImageData(new Uint8ClampedArray(pixels), width, height);
		ctx.putImageData(imgdata,0,0);
		let k = settings.width/width;
		ctx.scale(k,k);
		ctx.drawImage(cnv_display[0],0,0);
		ctx.scale(1/k,1/k);
		*/

		conclude_processing();
		this.terminate();
		}

		}

		/**
		@@ -667,6 +572,7 @@
		if (typeof MakerNote !== 'undefined') color_mode=(MakerNote[10]>>4)&0x0f;

		switch(color_mode){
		case 0: IMAGE_FORMAT = "JPEG"; break;
		case 2: IMAGE_FORMAT = "JP46"; break;
		case 5: IMAGE_FORMAT = "JP4"; break;
		//default:

src/jp4-canvas/webworker.js

+33 −32

Original line number	Diff line number	Diff line

		importScripts('elphel.js');

		self.onmessage = function(e) {
		onmessage = async (e) => {

		var W = e.data.width;
		var H = e.data.height;
		var Mosaic = e.data.mosaic;
		var Format = e.data.format;
		let W = e.data.width;
		let H = e.data.height;
		let Mosaic = e.data.mosaic;
		let Format = e.data.format;

		var settings = e.data.settings;
		let settings = e.data.settings;

		var Pixels = new Uint8Array(e.data.pixels);
		let Pixels = new Uint8Array(e.data.pixels);

		let reorderedPixels;

		if (settings.lowres==0){
		var reorderedPixels = Elphel.Pixels.reorderBlocksJPx(Pixels,W,H,Format,Mosaic,settings.fast);
		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);
		reorderedPixels = await Elphel.Pixels.reorderBlocksJP4_lowres(Pixels,W,H,Format,Mosaic,settings.lowres);
		W = W/2;
		H = H/2;
		}
		@@ -35,5 +37,4 @@ self.onmessage = function(e) {

		//Elphel.test();
		this.close();

		};

Admin message