flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-28 18:00:09 +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>
<html>
<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>
<script src="../ext-lib/jquery.js"></script>
@ -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')))
}
</script>
<body>
<img id="input" src="../images/splash-800x500.jpg" onload="start()"/>
<!--
<br>
<canvas id="waveform"></canvas>
<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'), 'G')">G</button>
<button onclick="histogram(getElementById('input'), getElementById('histogram'), 'B')">B</button>
-->
<br>
<br>
<br>
</body>
</html>

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

@ -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: ',

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

@ -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,