mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
added experimental histogram/waveform to metadata view...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
e1aecdfcf4
commit
9f4a378cc3
@ -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 = function(img, canvas, mode, color){
|
||||
var WAVEFORM_SIZE =
|
||||
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 })
|
||||
|
||||
@ -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('update', function(){ this.updatePreview() })
|
||||
.on('attached', function(){
|
||||
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,
|
||||
})
|
||||
})
|
||||
})],
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user