diff --git a/ui (gen4)/experiments/canvas-waveform.html b/ui (gen4)/experiments/canvas-waveform.html
index 3e862da2..991eafad 100644
--- a/ui (gen4)/experiments/canvas-waveform.html
+++ b/ui (gen4)/experiments/canvas-waveform.html
@@ -1,6 +1,40 @@
@@ -18,22 +52,22 @@ Filters.getPixels = function(img, w, h){
var w = w || img.width
var h = h || img.height
var c = this.getCanvas(w, h)
- var ctx = c.getContext('2d')
+ var context = c.getContext('2d')
if(img == null){
- ctx.rect(0, 0, w, h)
- ctx.fillStyle = "black"
- ctx.fill()
+ context.rect(0, 0, w, h)
+ context.fillStyle = "black"
+ context.fill()
} else {
- ctx.drawImage(img, 0, 0, w, h)
+ context.drawImage(img, 0, 0, w, h)
}
- return ctx.getImageData(0,0,c.width,c.height)
+ return context.getImageData(0,0,c.width,c.height)
}
Filters.setPixels = function(c, data, w, h){
c.width = data.width
c.height = data.height
- var ctx = c.getContext('2d')
- ctx.putImageData(data, 0, 0)
- //ctx.drawImage(data, 0, 0, w, h)
+ var context = c.getContext('2d')
+ context.putImageData(data, 0, 0)
+ //context.drawImage(data, 0, 0, w, h)
}
@@ -218,18 +252,72 @@ var histogram = function(img, canvas, mode){
Filters.setPixels(canvas, w)
}
-var start = function(){
- waveform(document.getElementById('input'), document.getElementById('waveform'), 'color')
- histogram(document.getElementById('input'), document.getElementById('histogram'), 'color')
+var makeWaveform = function(img, mode, controls){
+ // XXX
+ var type = 'waveform'
+ var graph = waveform
+
+ var buttons
+
+ var update = function(mode){
+ mode = mode || 'color'
+ graph(img, canvas, mode)
+ ;(buttons || [])
+ .forEach(function(b){
+ b.classList.contains(mode) ?
+ b.classList.add('current')
+ : b.classList.remove('current') }) }
+
+ // container...
+ var container = document.createElement('div')
+ container.classList.add('graph', type)
+ // canvas...
+ var canvas = document.createElement('canvas')
+ container.appendChild(canvas)
+ // controls...
+ if(controls || controls === undefined){
+ var controls = document.createElement('div')
+ controls.classList.add('controls')
+ // buttons...
+ buttons = ['luminance', 'color', 'R', 'G', 'B']
+ .map(function(m){
+ var button = document.createElement('button')
+ button.innerText = m
+ button.classList.add(m)
+ button.onclick =
+ function(){ update(m) }
+ controls.appendChild(button)
+ return button })
+ container.appendChild(controls) }
+
+ // meta stuff...
+ container.setAttribute('graph-width', canvas.width)
+ container.setAttribute('graph-height', canvas.height)
+ container.setAttribute('image-width', img.width)
+ container.setAttribute('image-height', img.height)
+
+ update(mode)
+
+ return container
}
+
+var start = function(){
+ //waveform(document.getElementById('input'), document.getElementById('waveform'), 'color')
+ //histogram(document.getElementById('input'), document.getElementById('histogram'), 'color')
+
+ document.body.appendChild(makeWaveform(document.getElementById('input')))
+}
+
+
+
+
+
+
+
+
+
diff --git a/ui (gen4)/features/ui-slideshow.js b/ui (gen4)/features/ui-slideshow.js
index ad728fe8..5263c170 100755
--- a/ui (gen4)/features/ui-slideshow.js
+++ b/ui (gen4)/features/ui-slideshow.js
@@ -137,7 +137,7 @@ var SlideshowActions = actions.Actions({
return browse.makeLister(null,
function(path, make){
// fields...
- that.makeEditor(make,
+ that.showEditor(make,
spec = spec
|| [
{ title: '$Interval: ',
diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js
index 38f21521..be5faf5b 100755
--- a/ui (gen4)/features/ui-widgets.js
+++ b/ui (gen4)/features/ui-widgets.js
@@ -814,12 +814,10 @@ var DialogsActions = actions.Actions({
`,
makeUIDialog(function(list, options){
options = Object.create(options || {})
-
// defaults...
options.sortable = options.sortable === undefined ?
true
: options.sortable
-
return browse.makeLister(null,
function(path, make){
make.EditableList(list, options)
@@ -1338,17 +1336,17 @@ var EditorActions = actions.Actions({
// - ...
},
- makeEditor: ['- Interface/',
+ showEditor: ['- Interface/',
core.doc`Make editor dialog or editor section...
Make an editor dialog...
- .makeEditor(spec)
- .makeEditor(spec, callback)
+ .showEditor(spec)
+ .showEditor(spec, callback)
-> dialog
Make an editor dialog section...
- .makeEditor(make, spec)
- .makeEditor(make, spec, callback)
+ .showEditor(make, spec)
+ .showEditor(make, spec, callback)
-> make
@@ -1443,10 +1441,6 @@ var EditorActions = actions.Actions({
_callback = null
},
}) })],
-
-
- // XXX add editors for config lists and values...
- // XXX
})
var Editor =
@@ -1457,6 +1451,7 @@ module.Editor = core.ImageGridFeatures.Feature({
tag: 'ui-editor',
depends: [
'ui',
+ 'ui-dialogs',
],
actions: EditorActions,