added experimental histogram/waveform to metadata view...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/experiments/ig-image-graph-obj.js

@@ -3,10 +3,20 @@
 //
 // XXX still thinking on how to package this correctly...
 //
+//---------------------------------------------------------------------
+((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')
+
+
+
 //---------------------------------------------------------------------
 // image manipulation basics...
 
-var Filters = {
+var Filters = 
+module.Filters = {
 	makeCanvas: function(w, h){
 		var c = document.createElement('canvas')
 		c.width = w
@@ -213,14 +223,23 @@ var Filters = {
 //---------------------------------------------------------------------
 // helpers...
 
-var WAVEFORM_SIZE = 1000
+var WAVEFORM_SIZE =
-var waveform = function(img, canvas, mode, color){
+module.WAVEFORM_SIZE = 1000
+
+var waveform = 
+module.waveform = 
+function(img, canvas, mode, color){
 	var d = Filters.getPixels(img, WAVEFORM_SIZE)
 	var w = Filters.waveform(d, mode, color)
 	Filters.setPixels(canvas, w) }
 
-var HISTOGRAM_SIZE = 1000
+
-var histogram = function(img, canvas, mode, color){
+var HISTOGRAM_SIZE =
+module.HISTOGRAM_SIZE = 1000
+
+var histogram = 
+module.histogram = 
+function(img, canvas, mode, color){
 	var d = Filters.getPixels(img)
 	var w = Filters.histogram(d, mode, color)
 	Filters.setPixels(canvas, w) }
@@ -274,7 +293,9 @@ igImageGraph_template = `
 <div class="controls"></div>
 `
 
+
 var igImageGraph = 
+module.igImageGraph = 
 object.Constructor('igImageGraph', HTMLElement, {
 	template: 'ig-image-graph',
 	graphs: {
@@ -324,6 +345,7 @@ object.Constructor('igImageGraph', HTMLElement, {
 		this.update() },
 	get src(){
 		return this.getAttribute('src') },
+	// XXX make this async...
 	set src(value){
 		var that = this
 		this.__update_handler = this.__update_handler 
@@ -425,6 +447,8 @@ object.Constructor('igImageGraph', HTMLElement, {
 			.forEach(function(button){
 				controls.appendChild(button) })
 		return this },
+	// XXX add option to update graph in a worker...
+	// XXX show a spinner while updating...
 	update: function(){
 		var that = this
 		var mode = this.mode
@@ -458,7 +482,11 @@ window.customElements.define('ig-image-graph', igImageGraph)
 
 
 
+//---------------------------------------------------------------------
+// helper...
+
 var makeImageGraph = 
+module.makeImageGraph = 
 function(img, options){
 	var g = document.createElement('ig-image-graph')
 	Object.assign(g, 
@@ -469,5 +497,5 @@ function(img, options){
 
 
 
-//---------------------------------------------------------------------
+/**********************************************************************
-//                                                 vim:set ts=4 sw=4 :
+* vim:set ts=4 sw=4 :                               */ return module })

ui (gen4)/features/metadata.js

@@ -14,6 +14,15 @@ if(typeof(process) != 'undefined'){
 	var fs = requirejs('fs')
 	var path = requirejs('path')
 	var exiftool = requirejs('exiftool')
+
+	// XXX EXPERIMENTAL: graph...
+	// XXX move this to ./components/
+	try {
+		// do this only if browser is loaded...
+		var graph = window != null ?
+			requirejs('experiments/ig-image-graph-obj')
+			: null
+	} catch(e){}
 }
 
 
@@ -332,6 +341,13 @@ var MetadataUIActions = actions.Actions({
 
 			'Mime Type',
 		],
+
+		// XXX EXPERIMENTAL: graph...
+		'metadata-graph': true,
+		'metadata-graph-config': {
+			graph: 'waveform',
+			mode: 'color',
+		},
 	},
 
 	toggleMetadataAutoSelect: ['Interface/Metadata value auto-select',
@@ -380,10 +396,36 @@ var MetadataUIActions = actions.Actions({
 									p.style.width = preview_size +'px'
 								},
 							}) }
+					// XXX EXPERIMENTAL: graph
+					// XXX make this actually update the elem if it exists...
+					// XXX do the calculations in a worker...
+					make.dialog.updateGraph = function(gid, size){
+						if(!graph || !that.config['metadata-graph']){
+							return }
+						gid = that.data.getImage(gid || 'current')
+						var config = that.config['metadata-graph-config'] || {}
+						var url = that.images[gid].preview ?
+							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(elem.style, {
+							width: '500px',
+							height: '200px',
+						})
+						return elem }
 
 					// preview...
 					make(['Preview:', this.updatePreview()], 
 						{ cls: 'preview' })
+					// XXX EXPERIMENTAL: graph
+					// graph...
+					graph 
+						&& that.config['metadata-graph']
+						&& make(['Graph:', $(this.updateGraph())], 
+							{ cls: 'preview' })
 					// NOTE: these are 1-based and not 0-based...
 					make(['Position: ', 
 						$('<small>')
@@ -484,8 +526,16 @@ var MetadataUIActions = actions.Actions({
 					cls: 'table-view metadata-view',
 					showDisabled: false,
 				})
-				.on('attached', function(){ this.updatePreview() })
+				.on('attached', function(){ 
-				.on('update', function(){ this.updatePreview() })
+					this.updatePreview() 
+					graph
+						&& this.updateGraph()
+				})
+				.on('update', function(){ 
+					this.updatePreview() 
+					graph
+						&& this.updateGraph()
+				})
 				// select value of current item...
 				.on('select', function(evt, elem){
 					that.config['metadata-auto-select-mode'] == 'on select'
@@ -495,6 +545,14 @@ var MetadataUIActions = actions.Actions({
 					// XXX
 
 					that.refresh(image)
+
+					// XXX EXPERIMENTAL: graph...
+					// save graph settings...
+					this.graph
+						&& (that.config['metadata-graph-config'] = {
+							graph: this.graph.graph,
+							mode: this.graph.mode,
+						})
 				})
 		})],