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 = `