flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 02:10:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

started lib-ifying the graphs experiment...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2019-11-15 17:14:55 +03:00
parent a03b20490d
commit bfcd295127
3 changed files with 114 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
ui (gen4)/experiments/canvas-waveform.html
View File

@ -1,6 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<style> <style>
.graph {
position: relative;
display: inline-block;
width: attr(image-width);
height: attr(graph-height);
}
.graph canvas {
width: 100%;
height: 100%;
}
.graph .controls {
display: inline-block;
position: absolute;
top: 2px;
right: 2px;
}
.graph .controls button {
background: transparent;
border: none;
color: white;
opacity: 0.7;
}
.graph .controls button.current {
text-decoration: underline;
opacity: 0.9;
}
.graph .controls button:hover {
opacity: 1;
}
</style> </style>
<script src="../ext-lib/jquery.js"></script> <script src="../ext-lib/jquery.js"></script>
@ -18,22 +52,22 @@ Filters.getPixels = function(img, w, h){
var w = w || img.width var w = w || img.width
var h = h || img.height var h = h || img.height
var c = this.getCanvas(w, h) var c = this.getCanvas(w, h)
var ctx = c.getContext('2d') var context = c.getContext('2d')
if(img == null){ if(img == null){
ctx.rect(0, 0, w, h) context.rect(0, 0, w, h)
ctx.fillStyle = "black" context.fillStyle = "black"
ctx.fill() context.fill()
} else { } 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){ Filters.setPixels = function(c, data, w, h){
c.width = data.width c.width = data.width
c.height = data.height c.height = data.height
var ctx = c.getContext('2d') var context = c.getContext('2d')
ctx.putImageData(data, 0, 0) context.putImageData(data, 0, 0)
//ctx.drawImage(data, 0, 0, w, h) //context.drawImage(data, 0, 0, w, h)
} }
@ -218,18 +252,72 @@ var histogram = function(img, canvas, mode){
Filters.setPixels(canvas, w) Filters.setPixels(canvas, w)
} }
var start = function(){ var makeWaveform = function(img, mode, controls){
waveform(document.getElementById('input'), document.getElementById('waveform'), 'color') // XXX
histogram(document.getElementById('input'), document.getElementById('histogram'), 'color') 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')))
}
</script> </script>
<body> <body>
<img id="input" src="../images/splash-800x500.jpg" onload="start()"/> <img id="input" src="../images/splash-800x500.jpg" onload="start()"/>
<!--
<br> <br>
<canvas id="waveform"></canvas> <canvas id="waveform"></canvas>
<br> <br>
@ -247,6 +335,13 @@ var start = function(){
<button onclick="histogram(getElementById('input'), getElementById('histogram'), 'R')">R</button> <button onclick="histogram(getElementById('input'), getElementById('histogram'), 'R')">R</button>
<button onclick="histogram(getElementById('input'), getElementById('histogram'), 'G')">G</button> <button onclick="histogram(getElementById('input'), getElementById('histogram'), 'G')">G</button>
<button onclick="histogram(getElementById('input'), getElementById('histogram'), 'B')">B</button> <button onclick="histogram(getElementById('input'), getElementById('histogram'), 'B')">B</button>
-->
<br>
<br>
<br>
</body> </body>
</html> </html>

2
ui (gen4)/features/ui-slideshow.js
View File

@ -137,7 +137,7 @@ var SlideshowActions = actions.Actions({
return browse.makeLister(null, return browse.makeLister(null,
function(path, make){ function(path, make){
// fields... // fields...
that.makeEditor(make, that.showEditor(make,
spec = spec spec = spec
|| [ || [
{ title: '$Interval: ', { title: '$Interval: ',

17
ui (gen4)/features/ui-widgets.js
View File

@ -814,12 +814,10 @@ var DialogsActions = actions.Actions({
`, `,
makeUIDialog(function(list, options){ makeUIDialog(function(list, options){
options = Object.create(options || {}) options = Object.create(options || {})
// defaults... // defaults...
options.sortable = options.sortable === undefined ? options.sortable = options.sortable === undefined ?
true true
: options.sortable : options.sortable
return browse.makeLister(null, return browse.makeLister(null,
function(path, make){ function(path, make){
make.EditableList(list, options) make.EditableList(list, options)
@ -1338,17 +1336,17 @@ var EditorActions = actions.Actions({
// - ... // - ...
}, },
makeEditor: ['- Interface/', showEditor: ['- Interface/',
core.doc`Make editor dialog or editor section... core.doc`Make editor dialog or editor section...
Make an editor dialog... Make an editor dialog...
.makeEditor(spec) .showEditor(spec)
.makeEditor(spec, callback) .showEditor(spec, callback)
-> dialog -> dialog
Make an editor dialog section... Make an editor dialog section...
.makeEditor(make, spec) .showEditor(make, spec)
.makeEditor(make, spec, callback) .showEditor(make, spec, callback)
-> make -> make
@ -1443,10 +1441,6 @@ var EditorActions = actions.Actions({
_callback = null _callback = null
}, },
}) })], }) })],
// XXX add editors for config lists and values...
// XXX
}) })
var Editor = var Editor =
@ -1457,6 +1451,7 @@ module.Editor = core.ImageGridFeatures.Feature({
tag: 'ui-editor', tag: 'ui-editor',
depends: [ depends: [
'ui', 'ui',
'ui-dialogs',
], ],
actions: EditorActions, actions: EditorActions,