From b0f52c82f17b1bfeb6dacd27e12e58f5ad04f338 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Fri, 15 May 2020 21:23:13 +0300 Subject: [PATCH] added histogram/waveform components... Signed-off-by: Alex A. Naanou --- ui (gen4)/features/metadata.js | 14 +- ui (gen4)/lib/components/canvas-waveform.html | 213 ++++++++++++++++++ .../lib/components/ig-image-graph-worker.js | 27 +++ .../components/ig-image-graph.js} | 25 +- 4 files changed, 265 insertions(+), 14 deletions(-) create mode 100644 ui (gen4)/lib/components/canvas-waveform.html create mode 100644 ui (gen4)/lib/components/ig-image-graph-worker.js rename ui (gen4)/{experiments/ig-image-graph-obj.js => lib/components/ig-image-graph.js} (91%) diff --git a/ui (gen4)/features/metadata.js b/ui (gen4)/features/metadata.js index 1cf7e8e6..83be30e7 100755 --- a/ui (gen4)/features/metadata.js +++ b/ui (gen4)/features/metadata.js @@ -20,7 +20,7 @@ if(typeof(process) != 'undefined'){ try { // do this only if browser is loaded... var graph = window != null ? - requirejs('experiments/ig-image-graph-obj') + requirejs('lib/components/ig-image-graph') : null } catch(e){} } @@ -346,7 +346,7 @@ var MetadataUIActions = actions.Actions({ 'metadata-graph': true, 'metadata-graph-config': { graph: 'waveform', - mode: 'color', + mode: 'luminance', }, }, @@ -408,13 +408,17 @@ var MetadataUIActions = actions.Actions({ that.images.getBestPreview(gid, size || 300, null, true).url : that.getImagePath(gid) var elem = this.graph = - this.graph ? - Object.assign(this.graph, config) - : graph.makeImageGraph(url, config) + Object.assign( + this.graph + || document.createElement('ig-image-graph'), + config) Object.assign(elem.style, { width: '500px', height: '200px', }) + // delay drawing a bit... + setTimeout(function(){ + elem.src = url }, 0) return elem } // preview... diff --git a/ui (gen4)/lib/components/canvas-waveform.html b/ui (gen4)/lib/components/canvas-waveform.html new file mode 100644 index 00000000..f77f6aa5 --- /dev/null +++ b/ui (gen4)/lib/components/canvas-waveform.html @@ -0,0 +1,213 @@ + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+
+
+ + + + + diff --git a/ui (gen4)/lib/components/ig-image-graph-worker.js b/ui (gen4)/lib/components/ig-image-graph-worker.js new file mode 100644 index 00000000..4a5e7fbe --- /dev/null +++ b/ui (gen4)/lib/components/ig-image-graph-worker.js @@ -0,0 +1,27 @@ +/********************************************************************** +* +* +* +* XXX still thinking on how to package this correctly... +* XXX add worker support... +* +**********************************************************************/ + +// var htmlCanvas = document.getElementById("canvas") +// var offscreen = htmlCanvas.transferControlToOffscreen() +// +// var worker = new Worker("offscreencanvas.js") +// worker.postMessage({canvas: offscreen}, [offscreen]) +// +// XXX also test for OffscreenWorker(..)... +onmessage = function(evt){ + var canvas = evt.data.canvas + + + // XXX +} + + + +/********************************************************************** +* vim:set ts=4 sw=4 : */ diff --git a/ui (gen4)/experiments/ig-image-graph-obj.js b/ui (gen4)/lib/components/ig-image-graph.js similarity index 91% rename from ui (gen4)/experiments/ig-image-graph-obj.js rename to ui (gen4)/lib/components/ig-image-graph.js index ba6dcd5d..f278927b 100644 --- a/ui (gen4)/experiments/ig-image-graph-obj.js +++ b/ui (gen4)/lib/components/ig-image-graph.js @@ -1,12 +1,14 @@ -//--------------------------------------------------------------------- -// -// -// XXX still thinking on how to package this correctly... -// -//--------------------------------------------------------------------- +/********************************************************************** +* +* +* +* XXX still thinking on how to package this correctly... +* XXX add worker support... +* +**********************************************************************/ ((typeof define)[0]=='u'?function(f){module.exports=f(require)}:define) (function(require){ var module={} // make module AMD/node compatible... -//--------------------------------------------------------------------- +/*********************************************************************/ var object = require('lib/object') @@ -249,7 +251,7 @@ function(img, canvas, mode, color){ //--------------------------------------------------------------------- // Custom element... -igImageGraph_template = ` +var igImageGraph_template = `