2019-05-14 03:55:35 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<style>
|
2019-11-15 17:14:55 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
2019-11-15 18:25:09 +03:00
|
|
|
.graph .controls button.R:hover,
|
|
|
|
|
.graph .controls button.current.R {
|
|
|
|
|
background: red;
|
|
|
|
|
}
|
|
|
|
|
.graph .controls button.G:hover,
|
|
|
|
|
.graph .controls button.current.G {
|
|
|
|
|
background: green;
|
|
|
|
|
}
|
|
|
|
|
.graph .controls button.B:hover,
|
|
|
|
|
.graph .controls button.current.B {
|
|
|
|
|
background: blue;
|
|
|
|
|
}
|
2019-11-15 17:14:55 +03:00
|
|
|
.graph .controls button:hover {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2019-05-14 03:55:35 +03:00
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script src="../ext-lib/jquery.js"></script>
|
|
|
|
|
<script src="../ext-lib/jquery-ui.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="../lib/jli.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Filters = {}
|
|
|
|
|
|
|
|
|
|
// as input takes an HTML Image object...
|
|
|
|
|
Filters.getPixels = function(img, w, h){
|
|
|
|
|
var w = w || img.width
|
|
|
|
|
var h = h || img.height
|
|
|
|
|
var c = this.getCanvas(w, h)
|
2019-11-15 17:14:55 +03:00
|
|
|
var context = c.getContext('2d')
|
2019-05-14 03:55:35 +03:00
|
|
|
if(img == null){
|
2019-11-15 17:14:55 +03:00
|
|
|
context.rect(0, 0, w, h)
|
|
|
|
|
context.fillStyle = "black"
|
|
|
|
|
context.fill()
|
2019-05-14 03:55:35 +03:00
|
|
|
} else {
|
2019-11-15 17:14:55 +03:00
|
|
|
context.drawImage(img, 0, 0, w, h)
|
2019-05-14 03:55:35 +03:00
|
|
|
}
|
2019-11-15 17:14:55 +03:00
|
|
|
return context.getImageData(0,0,c.width,c.height)
|
2019-05-14 03:55:35 +03:00
|
|
|
}
|
|
|
|
|
Filters.setPixels = function(c, data, w, h){
|
|
|
|
|
c.width = data.width
|
|
|
|
|
c.height = data.height
|
2019-11-15 17:14:55 +03:00
|
|
|
var context = c.getContext('2d')
|
|
|
|
|
context.putImageData(data, 0, 0)
|
|
|
|
|
//context.drawImage(data, 0, 0, w, h)
|
2019-05-14 03:55:35 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Filters.getCanvas = function(w, h){
|
|
|
|
|
var c = document.createElement('canvas')
|
|
|
|
|
c.width = w
|
|
|
|
|
c.height = h
|
|
|
|
|
return c
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Filters.filterImage = function(filter, image, var_args){
|
|
|
|
|
var args = [this.getPixels(image)]
|
|
|
|
|
for(var i=2; i<arguments.length; i++){
|
|
|
|
|
args.push(arguments[i])
|
|
|
|
|
}
|
|
|
|
|
return filter.apply(null, args)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Filters.grayscale = function(pixels, args){
|
|
|
|
|
var d = pixels.data
|
|
|
|
|
for(var i=0; i<d.length; i+=4){
|
|
|
|
|
var r = d[i]
|
|
|
|
|
var g = d[i+1]
|
|
|
|
|
var b = d[i+2]
|
|
|
|
|
// CIE luminance for the RGB
|
|
|
|
|
// The human eye is bad at seeing red and blue, so we de-emphasize them.
|
|
|
|
|
var v = 0.2126*r + 0.7152*g + 0.0722*b
|
|
|
|
|
d[i] = d[i+1] = d[i+2] = v
|
|
|
|
|
}
|
|
|
|
|
return pixels
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// XXX need to resize this...
|
2019-11-17 01:50:23 +03:00
|
|
|
Filters.histogram = function(pixels, mode, color){
|
|
|
|
|
color = color || 'fill'
|
2019-05-14 03:55:35 +03:00
|
|
|
mode = mode || 'luminance'
|
|
|
|
|
|
|
|
|
|
var w = 255
|
|
|
|
|
var h = 255
|
|
|
|
|
|
|
|
|
|
// output buffer...
|
|
|
|
|
var out = this.getPixels(null, w, h)
|
|
|
|
|
|
|
|
|
|
// pixel hit buffer...
|
|
|
|
|
var count = []
|
|
|
|
|
|
|
|
|
|
var od = out.data
|
|
|
|
|
var d = pixels.data
|
|
|
|
|
|
|
|
|
|
// get the stats...
|
|
|
|
|
for(var i=0; i<d.length; i+=4){
|
|
|
|
|
var r = d[i]
|
|
|
|
|
var g = d[i+1]
|
|
|
|
|
var b = d[i+2]
|
|
|
|
|
|
|
|
|
|
if(mode == 'luminance'){
|
|
|
|
|
var v = Math.round(0.2126*r + 0.7152*g + 0.0722*b) * 4
|
|
|
|
|
count[v] = count[v+1] = count[v+2] = (count[v] || 0) + 1
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
if(mode == 'color' || mode == 'R'){
|
2019-11-17 01:50:23 +03:00
|
|
|
count[r*4] = (count[r*4] || 0) + 1 }
|
2019-05-14 03:55:35 +03:00
|
|
|
if(mode == 'color' || mode == 'G'){
|
2019-11-17 01:50:23 +03:00
|
|
|
count[g*4+1] = (count[g*4+1] || 0) + 1 }
|
2019-05-14 03:55:35 +03:00
|
|
|
if(mode == 'color' || mode == 'B'){
|
2019-11-17 01:50:23 +03:00
|
|
|
count[b*4+2] = (count[b*4+2] || 0) + 1 } }
|
2019-05-14 03:55:35 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var m = 255 / Math.max(...count.filter(function(){ return true }))
|
|
|
|
|
|
|
|
|
|
var pos = function(i, value){
|
|
|
|
|
return (
|
2019-11-17 01:50:23 +03:00
|
|
|
// horizontal position...
|
2019-05-14 03:55:35 +03:00
|
|
|
i*4
|
|
|
|
|
// value vertical offset...
|
|
|
|
|
+ (255-Math.round(value*m))*w*4) }
|
|
|
|
|
|
2019-11-17 01:50:23 +03:00
|
|
|
// XXX would be nice to have an option to draw full columns...
|
2019-05-14 03:55:35 +03:00
|
|
|
count.forEach(function(v, i){
|
|
|
|
|
var j = pos(i/4, v)
|
2019-11-17 01:50:23 +03:00
|
|
|
while(j < od.length){
|
|
|
|
|
j += w*4
|
|
|
|
|
od[j] = 255
|
|
|
|
|
if(color == 'point'){
|
|
|
|
|
// correct for blue visibility...
|
|
|
|
|
mode != 'luminance'
|
|
|
|
|
&& (i-2)%4 == 0
|
|
|
|
|
&& (od[j-1] = od[j-2] = 180)
|
|
|
|
|
break } } })
|
2019-05-14 03:55:35 +03:00
|
|
|
|
|
|
|
|
return out
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2019-11-15 18:25:09 +03:00
|
|
|
Filters.waveform = function(pixels, mode, color){
|
2019-05-14 03:55:35 +03:00
|
|
|
mode = mode || 'luminance'
|
2019-11-17 01:50:23 +03:00
|
|
|
color = color || 'normalized'
|
2019-05-14 03:55:35 +03:00
|
|
|
|
|
|
|
|
var w = pixels.width
|
|
|
|
|
|
|
|
|
|
// normalize pixel ratio...
|
|
|
|
|
var m = (1/pixels.height)*255
|
|
|
|
|
|
|
|
|
|
var offsetTop = 0
|
|
|
|
|
var offsetBottom = 0
|
|
|
|
|
|
|
|
|
|
// output buffer...
|
|
|
|
|
var out = this.getPixels(null,
|
|
|
|
|
w,
|
|
|
|
|
offsetTop + 255 + offsetBottom)
|
|
|
|
|
|
|
|
|
|
// pixel hit buffer...
|
|
|
|
|
var count = []
|
|
|
|
|
|
|
|
|
|
var od = out.data
|
|
|
|
|
var d = pixels.data
|
|
|
|
|
|
|
|
|
|
var pos = function(i, value){
|
|
|
|
|
return (
|
|
|
|
|
// top margin...
|
|
|
|
|
offsetTop*w*4
|
|
|
|
|
// horixontal position...
|
|
|
|
|
+ i%(w*4)
|
|
|
|
|
// value vertical offset...
|
|
|
|
|
+ (255-Math.round(value))*w*4) }
|
|
|
|
|
|
|
|
|
|
var gain = 100
|
|
|
|
|
|
|
|
|
|
for(var i=0; i<d.length; i+=4){
|
|
|
|
|
|
|
|
|
|
var r = d[i]
|
|
|
|
|
var g = d[i+1]
|
|
|
|
|
var b = d[i+2]
|
2019-11-16 15:55:58 +03:00
|
|
|
var c, j, f, x, y
|
2019-05-14 03:55:35 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
if(mode == 'luminance'){
|
|
|
|
|
// CIE luminance for RGB
|
|
|
|
|
var v = 0.2126*r + 0.7152*g + 0.0722*b
|
|
|
|
|
c = count[j = pos(i, v)] = (count[j] || 0) + m
|
|
|
|
|
od[j] = od[j+1] = od[j+2] = c * gain
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
if(mode == 'color' || mode == 'R'){
|
2019-11-15 18:25:09 +03:00
|
|
|
f = 0.2126
|
|
|
|
|
x = 1
|
|
|
|
|
y = 2
|
2019-05-14 03:55:35 +03:00
|
|
|
j = pos(i, r)
|
|
|
|
|
c = count[j] = (count[j] || 0) + m
|
|
|
|
|
od[j] = c * gain
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(mode == 'color' || mode == 'G'){
|
2019-11-15 18:25:09 +03:00
|
|
|
f = 0.7152
|
|
|
|
|
x = -1
|
|
|
|
|
y = 1
|
2019-05-14 03:55:35 +03:00
|
|
|
j = pos(i, g) + 1
|
|
|
|
|
c = count[j] = (count[j] || 0) + m
|
|
|
|
|
od[j] = c * gain
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(mode == 'color' || mode == 'B'){
|
2019-11-15 18:25:09 +03:00
|
|
|
f = 0.0722
|
|
|
|
|
x = -2
|
|
|
|
|
y = -1
|
2019-05-14 03:55:35 +03:00
|
|
|
j = pos(i, b) + 2
|
|
|
|
|
c = count[j] = (count[j] || 0) + m
|
|
|
|
|
od[j] = c * gain
|
|
|
|
|
}
|
2019-11-15 18:25:09 +03:00
|
|
|
|
|
|
|
|
// normalize...
|
|
|
|
|
mode != 'color'
|
|
|
|
|
&& (color == 'white' ?
|
|
|
|
|
(od[j+x] = od[j+y] = c * gain)
|
|
|
|
|
: color == 'normalized' ?
|
|
|
|
|
(od[j+x] = od[j+y] = c * gain/2 * (1-f))
|
|
|
|
|
: null)
|
2019-05-14 03:55:35 +03:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return out
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var WAVEFORM_SIZE = 1000
|
2019-11-15 18:25:09 +03:00
|
|
|
var waveform = function(img, canvas, mode, color){
|
2019-05-14 03:55:35 +03:00
|
|
|
var d = Filters.getPixels(img, WAVEFORM_SIZE)
|
2019-11-15 18:25:09 +03:00
|
|
|
var w = Filters.waveform(d, mode, color)
|
2019-11-17 01:50:23 +03:00
|
|
|
Filters.setPixels(canvas, w) }
|
2019-05-14 03:55:35 +03:00
|
|
|
|
|
|
|
|
var HISTOGRAM_SIZE = 1000
|
2019-11-15 18:25:09 +03:00
|
|
|
var histogram = function(img, canvas, mode, color){
|
2019-05-14 03:55:35 +03:00
|
|
|
var d = Filters.getPixels(img)
|
2019-11-17 01:50:23 +03:00
|
|
|
var w = Filters.histogram(d, mode, color)
|
|
|
|
|
Filters.setPixels(canvas, w) }
|
2019-05-14 03:55:35 +03:00
|
|
|
|
2019-11-16 15:55:58 +03:00
|
|
|
// XXX should we make this a web components???
|
|
|
|
|
// + would make everything transparent
|
|
|
|
|
// - add a tag
|
|
|
|
|
// - edit props
|
|
|
|
|
// - handle events
|
|
|
|
|
// - not sure what is the differenence practically...
|
|
|
|
|
var makeWaveform = function(img, options){
|
|
|
|
|
var color_modes = ['normalized', 'white', 'color']
|
2019-11-15 18:25:09 +03:00
|
|
|
|
2019-11-16 15:55:58 +03:00
|
|
|
options = options || {}
|
|
|
|
|
options.mode = options.mode || 'color'
|
|
|
|
|
options.color = options.color || color_modes[0]
|
2019-11-15 18:25:09 +03:00
|
|
|
|
|
|
|
|
// XXX configurable...
|
2019-11-15 17:14:55 +03:00
|
|
|
var type = 'waveform'
|
|
|
|
|
var graph = waveform
|
|
|
|
|
|
|
|
|
|
var buttons
|
|
|
|
|
|
2019-11-15 18:25:09 +03:00
|
|
|
var update = function(m){
|
2019-11-16 15:55:58 +03:00
|
|
|
m = options.mode = m || options.mode
|
|
|
|
|
graph(img, canvas, m, options.color)
|
2019-11-15 17:14:55 +03:00
|
|
|
;(buttons || [])
|
|
|
|
|
.forEach(function(b){
|
2019-11-15 18:25:09 +03:00
|
|
|
b.classList.contains(m) ?
|
2019-11-15 17:14:55 +03:00
|
|
|
b.classList.add('current')
|
|
|
|
|
: b.classList.remove('current') }) }
|
|
|
|
|
|
2019-11-16 01:00:07 +03:00
|
|
|
// handle img urls...
|
|
|
|
|
if(typeof(img) == typeof('str')){
|
|
|
|
|
var src = img
|
|
|
|
|
img = document.createElement('img')
|
|
|
|
|
img.onload = function(){
|
|
|
|
|
container.setAttribute('image-width', img.width)
|
|
|
|
|
container.setAttribute('image-height', img.height)
|
|
|
|
|
update() }
|
|
|
|
|
img.src = src }
|
|
|
|
|
|
2019-11-15 17:14:55 +03:00
|
|
|
// container...
|
|
|
|
|
var container = document.createElement('div')
|
|
|
|
|
container.classList.add('graph', type)
|
2019-11-16 15:55:58 +03:00
|
|
|
// XXX not sure why would we need shadow dom here...
|
|
|
|
|
//var shadow = container.attachShadow({mode: 'open'})
|
2019-11-15 17:14:55 +03:00
|
|
|
// 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)
|
2019-11-15 18:25:09 +03:00
|
|
|
button.onclick = function(){
|
2019-11-16 15:55:58 +03:00
|
|
|
update(m) }
|
2019-11-15 17:14:55 +03:00
|
|
|
controls.appendChild(button)
|
|
|
|
|
return button })
|
2019-11-15 18:25:09 +03:00
|
|
|
// color mode switch...
|
|
|
|
|
var button = document.createElement('button')
|
2019-11-16 15:55:58 +03:00
|
|
|
button.innerText = '('+ options.color[0] +')'
|
2019-11-15 18:25:09 +03:00
|
|
|
button.onclick = function(){
|
2019-11-16 15:55:58 +03:00
|
|
|
options.color = color_modes[
|
|
|
|
|
(color_modes.indexOf(options.color) + 1)
|
|
|
|
|
% color_modes.length]
|
|
|
|
|
this.innerText = '('+ options.color[0] +')'
|
2019-11-15 18:25:09 +03:00
|
|
|
update() }
|
|
|
|
|
controls.appendChild(button)
|
|
|
|
|
// add to block...
|
2019-11-15 17:14:55 +03:00
|
|
|
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)
|
|
|
|
|
|
2019-11-15 18:25:09 +03:00
|
|
|
// init...
|
2019-11-16 01:00:07 +03:00
|
|
|
update()
|
2019-11-15 17:14:55 +03:00
|
|
|
|
|
|
|
|
return container
|
2019-05-14 03:55:35 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2019-11-15 17:14:55 +03:00
|
|
|
|
|
|
|
|
var start = function(){
|
|
|
|
|
//waveform(document.getElementById('input'), document.getElementById('waveform'), 'color')
|
|
|
|
|
//histogram(document.getElementById('input'), document.getElementById('histogram'), 'color')
|
|
|
|
|
|
2019-11-15 18:25:09 +03:00
|
|
|
//document.body.appendChild(makeWaveform(document.getElementById('input'), 'color', 'normalized'))
|
2019-11-15 17:14:55 +03:00
|
|
|
document.body.appendChild(makeWaveform(document.getElementById('input')))
|
2019-11-16 01:00:07 +03:00
|
|
|
|
|
|
|
|
document.body.appendChild(makeWaveform('../images/splash-800x500.jpg'))
|
2019-11-15 17:14:55 +03:00
|
|
|
}
|
|
|
|
|
|
2019-11-16 15:55:58 +03:00
|
|
|
|
|
|
|
|
|
|
|
|
|
//---------------------------------------------------------------------
|
|
|
|
|
|
2019-11-17 01:50:23 +03:00
|
|
|
// XXX can't get the non-class version to work...
|
|
|
|
|
// XXX for some reason this takes some time to draw... slower than makeWaveform(..)
|
2019-11-16 15:55:58 +03:00
|
|
|
class igImageGraph extends HTMLElement {
|
2019-11-17 01:50:23 +03:00
|
|
|
graphs = {
|
|
|
|
|
waveform,
|
|
|
|
|
histogram,
|
|
|
|
|
}
|
|
|
|
|
modes = ['luminance', 'color', 'R', 'G', 'B']
|
|
|
|
|
color_modes = ['normalized', 'white', 'point']
|
|
|
|
|
|
2019-11-16 15:55:58 +03:00
|
|
|
constructor(src){
|
|
|
|
|
super()
|
|
|
|
|
// shadow DOM
|
2019-11-17 01:50:23 +03:00
|
|
|
var shadow = this.__shadow =
|
|
|
|
|
this.attachShadow({mode: 'open'})
|
2019-11-16 15:55:58 +03:00
|
|
|
shadow.appendChild(
|
|
|
|
|
document.getElementById('ig-image-graph')
|
2019-11-17 01:50:23 +03:00
|
|
|
.content.cloneNode(true)) }
|
|
|
|
|
connectedCallback(){
|
|
|
|
|
this.update_controls()
|
|
|
|
|
this.update() }
|
2019-11-16 15:55:58 +03:00
|
|
|
|
|
|
|
|
// attributes...
|
|
|
|
|
get observedAttributes(){
|
|
|
|
|
return [
|
|
|
|
|
'src',
|
|
|
|
|
'mode',
|
|
|
|
|
'color',
|
2019-11-17 01:50:23 +03:00
|
|
|
'nocontrols',
|
|
|
|
|
'graph',
|
2019-11-16 15:55:58 +03:00
|
|
|
]}
|
2019-11-17 01:50:23 +03:00
|
|
|
attributeChangedCallback(name, from, to){
|
|
|
|
|
name == 'nocontrols'
|
|
|
|
|
&& this.update_controls()
|
|
|
|
|
this.update() }
|
|
|
|
|
get graph(){
|
|
|
|
|
return this.getAttribute('graph') || 'waveform' }
|
|
|
|
|
set graph(value){
|
|
|
|
|
value in this.graphs
|
|
|
|
|
&& this.setAttribute('graph', value)
|
|
|
|
|
value == ''
|
|
|
|
|
&& this.removeAttribute('graph')
|
|
|
|
|
this.update() }
|
|
|
|
|
get src(){
|
|
|
|
|
return this.getAttribute('src') }
|
|
|
|
|
set src(value){
|
|
|
|
|
var that = this
|
|
|
|
|
this.__update_handler = this.__update_handler
|
|
|
|
|
|| this.update.bind(this)
|
|
|
|
|
var url = typeof(value) == typeof('str')
|
|
|
|
|
// get/create image...
|
|
|
|
|
var img = this.image =
|
|
|
|
|
url ?
|
|
|
|
|
(this.image || document.createElement('img'))
|
|
|
|
|
: value
|
|
|
|
|
img.removeEventListener('load', this.__update_handler)
|
|
|
|
|
img.addEventListener('load', this.__update_handler)
|
|
|
|
|
// set .src and img.src...
|
|
|
|
|
this.setAttribute('src',
|
|
|
|
|
url ?
|
|
|
|
|
(img.src = value)
|
|
|
|
|
: img.src)
|
|
|
|
|
}
|
|
|
|
|
get mode(){
|
|
|
|
|
return this.getAttribute('mode') || 'color' }
|
|
|
|
|
set mode(value){
|
|
|
|
|
this.modes.includes(value)
|
|
|
|
|
&& this.setAttribute('mode', value)
|
|
|
|
|
value === undefined
|
|
|
|
|
&& this.removeAttribute('color')
|
|
|
|
|
this.update_controls()
|
|
|
|
|
this.update() }
|
|
|
|
|
get color(){
|
|
|
|
|
return this.getAttribute('color') || 'normalized' }
|
|
|
|
|
set color(value){
|
|
|
|
|
this.color_modes.includes(value)
|
|
|
|
|
&& this.setAttribute('color', value)
|
|
|
|
|
value === undefined
|
|
|
|
|
&& this.removeAttribute('color')
|
|
|
|
|
this.update() }
|
|
|
|
|
get nocontrols(){
|
|
|
|
|
return this.getAttribute('nocontrols') != null }
|
|
|
|
|
set nocontrols(value){
|
|
|
|
|
value ?
|
|
|
|
|
this.setAttribute('nocontrols', '')
|
|
|
|
|
: this.removeAttribute('nocontrols')
|
|
|
|
|
this.update_controls()
|
|
|
|
|
this.update() }
|
2019-11-16 15:55:58 +03:00
|
|
|
|
2019-11-17 01:50:23 +03:00
|
|
|
// API...
|
|
|
|
|
update_controls(){
|
|
|
|
|
var that = this
|
|
|
|
|
var mode = this.mode
|
|
|
|
|
|
|
|
|
|
var controls = this.__shadow.querySelector('.controls')
|
|
|
|
|
controls.innerHTML = ''
|
|
|
|
|
// modes...
|
|
|
|
|
var buttons = (this.nocontrols ?
|
|
|
|
|
[]
|
|
|
|
|
: this.modes)
|
|
|
|
|
// mode buttons...
|
|
|
|
|
.map(function(m){
|
|
|
|
|
var button = document.createElement('button')
|
|
|
|
|
button.innerText = m
|
|
|
|
|
button.classList.add(m, ...(m == mode ? ['current'] : []))
|
|
|
|
|
button.onclick = function(){
|
|
|
|
|
that.mode = m }
|
|
|
|
|
return button })
|
|
|
|
|
.concat([
|
|
|
|
|
/*
|
|
|
|
|
// color mode switch...
|
|
|
|
|
function(){
|
|
|
|
|
var button = document.createElement('button')
|
|
|
|
|
button.innerText = '('+ that.color[0] +')'
|
|
|
|
|
button.onclick = function(){
|
|
|
|
|
that.color = that.color_modes[
|
|
|
|
|
(that.color_modes.indexOf(that.color) + 1)
|
|
|
|
|
% that.color_modes.length]
|
|
|
|
|
this.innerText = '('+ that.color[0] +')' }
|
|
|
|
|
return button }(),
|
|
|
|
|
//*/
|
|
|
|
|
// reload...
|
|
|
|
|
function(){
|
|
|
|
|
var button = document.createElement('button')
|
|
|
|
|
button.classList.add('update')
|
|
|
|
|
button.innerHTML = '⟳'
|
|
|
|
|
button.onclick = function(){ that.update() }
|
|
|
|
|
return button }(),
|
|
|
|
|
])
|
|
|
|
|
.reverse()
|
|
|
|
|
.forEach(function(button){
|
|
|
|
|
controls.appendChild(button) })
|
|
|
|
|
return this
|
|
|
|
|
}
|
|
|
|
|
update(){
|
|
|
|
|
var that = this
|
|
|
|
|
var mode = this.mode
|
|
|
|
|
|
|
|
|
|
// controls...
|
|
|
|
|
// remove...
|
|
|
|
|
if(!this.nocontrols){
|
|
|
|
|
var controls = this.__shadow.querySelector('.controls')
|
|
|
|
|
// current button state...
|
|
|
|
|
var button = controls.querySelector('button.'+this.mode)
|
|
|
|
|
button
|
|
|
|
|
&& button.classList.add('current')
|
|
|
|
|
}
|
2019-11-16 15:55:58 +03:00
|
|
|
|
2019-11-17 01:50:23 +03:00
|
|
|
// XXX configurable...
|
|
|
|
|
var type = this.graph
|
|
|
|
|
var graph = this.graphs[type]
|
2019-11-16 15:55:58 +03:00
|
|
|
|
2019-11-17 01:50:23 +03:00
|
|
|
var canvas = this.__shadow.querySelector('canvas')
|
2019-11-16 15:55:58 +03:00
|
|
|
|
2019-11-17 01:50:23 +03:00
|
|
|
if(this.image){
|
|
|
|
|
graph(this.image, canvas, this.mode, this.color)
|
2019-11-16 15:55:58 +03:00
|
|
|
|
2019-11-17 01:50:23 +03:00
|
|
|
} else if(this.src){
|
|
|
|
|
this.src = this.src
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return this
|
2019-11-16 15:55:58 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// events...
|
|
|
|
|
// XXX
|
|
|
|
|
}
|
|
|
|
|
window.customElements.define('ig-image-graph', igImageGraph)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2019-05-14 03:55:35 +03:00
|
|
|
</script>
|
|
|
|
|
|
2019-11-16 15:55:58 +03:00
|
|
|
|
|
|
|
|
<template id="ig-image-graph">
|
|
|
|
|
<style>
|
2019-11-17 01:50:23 +03:00
|
|
|
:host {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
|
|
background: black;
|
|
|
|
|
|
|
|
|
|
width: attr(image-width);
|
|
|
|
|
height: attr(graph-height);
|
|
|
|
|
}
|
|
|
|
|
:host canvas {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
:host .controls {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 2px;
|
|
|
|
|
right: 2px;
|
|
|
|
|
left: 2px;
|
|
|
|
|
}
|
|
|
|
|
:host .controls button {
|
|
|
|
|
background: transparent;
|
|
|
|
|
border: none;
|
|
|
|
|
color: white;
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
:host .controls button.current {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
}
|
|
|
|
|
:host .controls button.R:hover,
|
|
|
|
|
:host .controls button.current.R {
|
|
|
|
|
background: red;
|
|
|
|
|
}
|
|
|
|
|
:host .controls button.G:hover,
|
|
|
|
|
:host .controls button.current.G {
|
|
|
|
|
background: green;
|
|
|
|
|
}
|
|
|
|
|
:host .controls button.B:hover,
|
|
|
|
|
:host .controls button.current.B {
|
|
|
|
|
background: blue;
|
|
|
|
|
}
|
|
|
|
|
:host .controls button:hover {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
2019-11-16 15:55:58 +03:00
|
|
|
</style>
|
|
|
|
|
<canvas class="graph"></canvas>
|
2019-11-17 01:50:23 +03:00
|
|
|
<div class="controls"></div>
|
2019-11-16 15:55:58 +03:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
2019-05-14 03:55:35 +03:00
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<img id="input" src="../images/splash-800x500.jpg" onload="start()"/>
|
2019-11-15 17:14:55 +03:00
|
|
|
|
2019-11-16 15:55:58 +03:00
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
<ig-image-graph
|
2019-11-17 01:50:23 +03:00
|
|
|
graph="histogram"
|
2019-11-16 15:55:58 +03:00
|
|
|
src="../images/splash-800x500.jpg"
|
|
|
|
|
mode="color"
|
|
|
|
|
color="normalized"
|
2019-11-17 01:50:23 +03:00
|
|
|
></ig-image-graph>
|
2019-11-16 15:55:58 +03:00
|
|
|
|
|
|
|
|
|
2019-11-15 17:14:55 +03:00
|
|
|
<!--
|
2019-05-14 03:55:35 +03:00
|
|
|
<br>
|
|
|
|
|
<canvas id="waveform"></canvas>
|
|
|
|
|
<br>
|
|
|
|
|
<button onclick="waveform(getElementById('input'), getElementById('waveform'), 'luminance')">Luminance</button>
|
|
|
|
|
<button onclick="waveform(getElementById('input'), getElementById('waveform'), 'color')">Color</button>
|
|
|
|
|
<button onclick="waveform(getElementById('input'), getElementById('waveform'), 'R')">R</button>
|
|
|
|
|
<button onclick="waveform(getElementById('input'), getElementById('waveform'), 'G')">G</button>
|
|
|
|
|
<button onclick="waveform(getElementById('input'), getElementById('waveform'), 'B')">B</button>
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
<canvas id="histogram"></canvas>
|
|
|
|
|
<br>
|
|
|
|
|
<button onclick="histogram(getElementById('input'), getElementById('histogram'), 'luminance')">Luminance</button>
|
|
|
|
|
<button onclick="histogram(getElementById('input'), getElementById('histogram'), 'color')">Color</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'), 'B')">B</button>
|
2019-11-15 17:14:55 +03:00
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
|
2019-05-14 03:55:35 +03:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
2019-11-16 15:55:58 +03:00
|
|
|
<!-- vim:set ts=4 sw=4 : -->
|
