2013-11-28 09:41:53 +04:00
|
|
|
<html>
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
button,
|
|
|
|
|
details {
|
|
|
|
|
border: solid 1px gray;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
margin: 1px;
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
2013-11-29 03:33:09 +04:00
|
|
|
details {
|
2013-11-29 17:27:59 +04:00
|
|
|
display: inline-block;
|
|
|
|
|
width: 508px;
|
|
|
|
|
min-width: 500px;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
details details {
|
2013-11-29 03:33:09 +04:00
|
|
|
width: 500px;
|
2013-11-29 17:27:59 +04:00
|
|
|
margin: 3px;
|
|
|
|
|
border: solid 1px silver;
|
2013-11-29 03:33:09 +04:00
|
|
|
}
|
2013-11-28 09:41:53 +04:00
|
|
|
details > div {
|
|
|
|
|
margin: 10px;
|
|
|
|
|
}
|
|
|
|
|
summary {
|
|
|
|
|
padding-left: 3px;
|
2013-11-29 17:27:59 +04:00
|
|
|
background: silver;
|
|
|
|
|
}
|
|
|
|
|
details details summary {
|
2013-11-28 09:41:53 +04:00
|
|
|
background: #ddd;
|
|
|
|
|
}
|
|
|
|
|
input[type=range] {
|
|
|
|
|
width: 300px;
|
|
|
|
|
}
|
2013-11-29 17:27:59 +04:00
|
|
|
button:active {
|
|
|
|
|
background: silver;
|
|
|
|
|
}
|
|
|
|
|
button.reset {
|
|
|
|
|
border: solid 1px silver;
|
|
|
|
|
}
|
|
|
|
|
button.reset:hover {
|
|
|
|
|
border: solid 1px gray;
|
|
|
|
|
}
|
|
|
|
|
/*
|
|
|
|
|
button.state:focus {
|
|
|
|
|
background: silver;
|
|
|
|
|
}
|
|
|
|
|
*/
|
2013-11-29 03:33:09 +04:00
|
|
|
/* XXX this is not live...
|
2013-11-28 10:04:33 +04:00
|
|
|
input[type=range]:after {
|
|
|
|
|
content: attr(value);
|
2013-11-28 14:54:26 +04:00
|
|
|
color: black;
|
2013-11-28 10:04:33 +04:00
|
|
|
}
|
2013-11-29 03:33:09 +04:00
|
|
|
*/
|
2013-11-28 09:41:53 +04:00
|
|
|
div > span:first-child {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-28 15:46:28 +04:00
|
|
|
/* range syling... */
|
|
|
|
|
input[type='range'] {
|
|
|
|
|
-webkit-appearance: none !important;
|
|
|
|
|
background: silver;
|
|
|
|
|
height: 4px;
|
|
|
|
|
border: solid 1px gray;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
input[type='range']::-webkit-slider-thumb {
|
|
|
|
|
-webkit-appearance: none !important;
|
|
|
|
|
background: white;
|
|
|
|
|
height: 15px;
|
|
|
|
|
width: 15px;
|
|
|
|
|
border: solid 1px gray;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-29 03:33:09 +04:00
|
|
|
.value {
|
2013-11-29 15:34:54 +04:00
|
|
|
-webkit-appearance: none !important;
|
2013-11-29 03:33:09 +04:00
|
|
|
display: inline-block;
|
|
|
|
|
width: 40px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
margin-right: 5px;
|
2013-11-29 15:34:54 +04:00
|
|
|
background: white;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
}
|
|
|
|
|
input::-webkit-outer-spin-button,
|
|
|
|
|
input::-webkit-inner-spin-button {
|
|
|
|
|
-webkit-appearance: none !important;
|
2013-11-29 03:33:09 +04:00
|
|
|
}
|
|
|
|
|
|
2013-11-28 15:46:28 +04:00
|
|
|
|
|
|
|
|
|
2013-11-28 09:41:53 +04:00
|
|
|
</style>
|
|
|
|
|
<script src="jquery.js"></script>
|
2013-11-29 17:27:59 +04:00
|
|
|
<script src="jquery-ui.js"></script>
|
2013-11-28 09:41:53 +04:00
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
function updateFilter(e, f, v){
|
2013-11-29 03:33:09 +04:00
|
|
|
e = $(e)
|
2013-11-28 09:41:53 +04:00
|
|
|
var state = e
|
|
|
|
|
.css('-webkit-filter')
|
|
|
|
|
state = state == 'none' ? '' : state + ' '
|
2013-11-29 03:33:09 +04:00
|
|
|
//state = state.replace(RegExp(f+'\\s*\\([^\\)]*\\)'), '')
|
|
|
|
|
//state += f+'('+v+')'
|
|
|
|
|
if(RegExp(f).test(state)){
|
|
|
|
|
state = state.replace(RegExp(f+'\\s*\\([^\\)]*\\)'), f+'('+v+')')
|
|
|
|
|
} else {
|
|
|
|
|
state += f+'('+v+')'
|
|
|
|
|
}
|
2013-11-28 09:41:53 +04:00
|
|
|
|
|
|
|
|
e.css({
|
|
|
|
|
'-webkit-filter': state,
|
|
|
|
|
'filter': state
|
|
|
|
|
})
|
|
|
|
|
return v
|
|
|
|
|
}
|
2013-11-29 03:33:09 +04:00
|
|
|
function resetFilter(e, f){
|
|
|
|
|
e = $(e)
|
|
|
|
|
var state = e
|
|
|
|
|
.css('-webkit-filter')
|
|
|
|
|
state = state == 'none' ? '' : state + ' '
|
|
|
|
|
state = state.replace(RegExp(f+'\\s*\\([^\\)]*\\)'), '').trim()
|
|
|
|
|
e.css({
|
|
|
|
|
'-webkit-filter': state,
|
|
|
|
|
'filter': state
|
|
|
|
|
})
|
|
|
|
|
return e
|
|
|
|
|
}
|
2013-11-28 09:41:53 +04:00
|
|
|
|
|
|
|
|
function resetPrevRange(e){
|
|
|
|
|
e = $(e).prev('input[type=range]')
|
|
|
|
|
e.val(e.attr('default'))
|
|
|
|
|
.change()
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-28 10:04:33 +04:00
|
|
|
// XXX this does not set hue correctly...
|
2013-11-29 17:27:59 +04:00
|
|
|
function loadSliderState(target){
|
|
|
|
|
var state = $(target)
|
2013-11-28 09:41:53 +04:00
|
|
|
.css('-webkit-filter')
|
|
|
|
|
.split(/\s*\(\s*|\s*\)\s*/g)
|
|
|
|
|
.reverse()
|
|
|
|
|
.slice(1)
|
|
|
|
|
// reset sliders do defaults...
|
|
|
|
|
$('input[type=range]').each(function(i, e){
|
|
|
|
|
e = $(e)
|
|
|
|
|
e.val(e.attr('default'))
|
|
|
|
|
})
|
|
|
|
|
// set the saved values...
|
|
|
|
|
while(state.length > 0){
|
2013-11-28 10:04:33 +04:00
|
|
|
var e = $('#'+state.pop())
|
2013-11-29 01:32:20 +04:00
|
|
|
if(e.prop('normalize')){
|
|
|
|
|
e.val(v2r(parseFloat(state.pop())))
|
|
|
|
|
} else {
|
|
|
|
|
e.val(parseFloat(state.pop()))
|
|
|
|
|
}
|
2013-11-28 09:41:53 +04:00
|
|
|
}
|
|
|
|
|
}
|
2013-11-29 03:33:09 +04:00
|
|
|
|
|
|
|
|
|
2013-11-29 17:27:59 +04:00
|
|
|
function saveState(target){
|
2013-11-28 09:41:53 +04:00
|
|
|
var l = $('.state').length
|
2013-11-29 17:27:59 +04:00
|
|
|
var state = $(target).css('-webkit-filter')
|
2013-11-28 09:41:53 +04:00
|
|
|
$('<button></button>')
|
|
|
|
|
.text(l)
|
|
|
|
|
.addClass('state '+l)
|
|
|
|
|
.attr('state', state)
|
|
|
|
|
.click(function(){
|
2013-11-29 17:27:59 +04:00
|
|
|
loadSliderState($(target).css('-webkit-filter', state))
|
2013-11-28 09:41:53 +04:00
|
|
|
})
|
|
|
|
|
.appendTo($('.states'))
|
|
|
|
|
}
|
|
|
|
|
function clearStates(){
|
|
|
|
|
$('.state').remove()
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-29 17:27:59 +04:00
|
|
|
function makeAbsRange(text, filter, target, min, max, dfl, step, translate, normalize){
|
|
|
|
|
min = min == null ? 0 : min
|
|
|
|
|
max = max == null ? 1 : max
|
|
|
|
|
dfl = dfl == null ? min : dfl
|
|
|
|
|
step = step == null ? 0.01 : step
|
|
|
|
|
translate = translate == null ? function(v){return v} : translate
|
2013-11-29 03:33:09 +04:00
|
|
|
normalize = normalize == null ? false : true
|
2013-11-29 17:27:59 +04:00
|
|
|
|
2013-11-29 03:33:09 +04:00
|
|
|
var elem = $('<div class="range"></div>')
|
|
|
|
|
$('<span class="title"/>')
|
|
|
|
|
.html(text)
|
|
|
|
|
.appendTo(elem)
|
|
|
|
|
var range = $('<input type="range">')
|
|
|
|
|
.attr({
|
|
|
|
|
id: filter,
|
|
|
|
|
min: min,
|
|
|
|
|
max: max,
|
|
|
|
|
step: step,
|
|
|
|
|
default: dfl,
|
|
|
|
|
})
|
|
|
|
|
.prop('normalize', normalize)
|
|
|
|
|
.val(dfl)
|
|
|
|
|
.change(function(){
|
|
|
|
|
var val = this.valueAsNumber
|
2013-11-29 15:34:54 +04:00
|
|
|
value.val(val)
|
2013-11-29 17:27:59 +04:00
|
|
|
updateFilter(target, this.id, translate(val))
|
2013-11-29 03:33:09 +04:00
|
|
|
})
|
|
|
|
|
.appendTo(elem)
|
2013-11-29 15:34:54 +04:00
|
|
|
var value = $('<input type="number" class="value"/>')
|
|
|
|
|
.attr({
|
|
|
|
|
min: min,
|
|
|
|
|
max: max,
|
|
|
|
|
step: step,
|
|
|
|
|
})
|
|
|
|
|
.val(dfl)
|
|
|
|
|
.change(function(){
|
|
|
|
|
range.val($(this).val())
|
|
|
|
|
})
|
2013-11-29 03:33:09 +04:00
|
|
|
.appendTo(elem)
|
|
|
|
|
$('<button class="reset">x</button>')
|
|
|
|
|
.click(function(){
|
|
|
|
|
range.val(dfl).change()
|
|
|
|
|
resetFilter(target, filter)
|
|
|
|
|
})
|
|
|
|
|
.appendTo(elem)
|
|
|
|
|
return elem
|
|
|
|
|
}
|
|
|
|
|
function makeLogRange(text, filter, target){
|
|
|
|
|
return makeAbsRange(text, filter, target, -100, 100, 0, 0.1, r2v, true)
|
2013-11-29 01:32:20 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var C = 43.47
|
|
|
|
|
|
|
|
|
|
function r2v(r){
|
|
|
|
|
return Math.pow(Math.E, r/C)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function v2r(v){
|
|
|
|
|
return Math.log(v)*C
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-29 17:27:59 +04:00
|
|
|
function makeControls(target){
|
|
|
|
|
var panel = $('<details open/>')
|
|
|
|
|
.addClass('panel')
|
|
|
|
|
.css({
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
})
|
|
|
|
|
.append($('<summary>Edit</summary>'))
|
|
|
|
|
.draggable()
|
|
|
|
|
|
|
|
|
|
$('<details open/>')
|
|
|
|
|
.append($('<summary>Controls</summary>'))
|
|
|
|
|
.append($('<div/>')
|
|
|
|
|
.append(makeLogRange('Brightness:', 'brightness', target))
|
|
|
|
|
.append(makeLogRange('Contrast:', 'contrast', target))
|
|
|
|
|
.append(makeLogRange('Saturation:', 'saturate', target))
|
|
|
|
|
.append(makeAbsRange('Hue:', 'hue-rotate', target, -180, 180, 0, 0.5, function(v){ return v+'deg' }))
|
|
|
|
|
.append($('<hr>'))
|
|
|
|
|
.append(makeAbsRange('Grayscale:', 'grayscale', target))
|
|
|
|
|
.append($('<hr>'))
|
|
|
|
|
.append(makeAbsRange('Invert:', 'invert', target))
|
|
|
|
|
.append(makeAbsRange('Sepia:', 'sepia', target))
|
|
|
|
|
.append($('<hr>'))
|
|
|
|
|
.append($('<button onclick="$(\'.reset\').click()">Reset all</button>'))
|
|
|
|
|
.append($('<hr>'))
|
|
|
|
|
.append($('<div>NOTE: at this point order of operations is '+
|
|
|
|
|
'sometimes segnificant -- might be good to treat the filters '+
|
|
|
|
|
'as layers -- se Adobe CSS filter factory </div>')))
|
|
|
|
|
.appendTo(panel)
|
|
|
|
|
|
|
|
|
|
$('<details open/>')
|
|
|
|
|
.append($('<summary>Snapshots</summary>'))
|
|
|
|
|
.append($('<div/>')
|
|
|
|
|
.append($('<div class="states"/>'))
|
|
|
|
|
.append($('<hr>'))
|
|
|
|
|
.append($('<button/>')
|
|
|
|
|
.click(function(){ saveState(target) })
|
|
|
|
|
.text('Save'))
|
|
|
|
|
.append($('<button/>')
|
|
|
|
|
.click(function(){ clearStates() })
|
|
|
|
|
.text('Clear')))
|
|
|
|
|
.appendTo(panel)
|
|
|
|
|
|
|
|
|
|
return panel
|
|
|
|
|
}
|
|
|
|
|
|
2013-11-29 03:33:09 +04:00
|
|
|
$(function(){
|
2013-11-29 17:27:59 +04:00
|
|
|
var target = '#image'
|
2013-11-29 03:33:09 +04:00
|
|
|
|
2013-11-29 17:27:59 +04:00
|
|
|
$('body').append(makeControls(target))
|
2013-11-29 03:33:09 +04:00
|
|
|
|
2013-11-29 17:27:59 +04:00
|
|
|
saveState(target)
|
2013-11-29 15:34:54 +04:00
|
|
|
|
2013-11-29 03:33:09 +04:00
|
|
|
})
|
|
|
|
|
|
2013-11-28 09:41:53 +04:00
|
|
|
</script>
|
|
|
|
|
<body>
|
|
|
|
|
<img id="image" src="image.jpg">
|
|
|
|
|
|
2013-11-29 17:27:59 +04:00
|
|
|
<!--details open>
|
2013-11-28 09:41:53 +04:00
|
|
|
<summary>Controls</summary>
|
2013-11-29 03:33:09 +04:00
|
|
|
<div class="controls">
|
2013-11-28 09:41:53 +04:00
|
|
|
</div>
|
|
|
|
|
</details>
|
|
|
|
|
|
2013-11-29 03:33:09 +04:00
|
|
|
<details open>
|
2013-11-29 01:32:20 +04:00
|
|
|
<summary>Snapshots</summary>
|
2013-11-28 09:41:53 +04:00
|
|
|
<div>
|
|
|
|
|
<div class="states">
|
|
|
|
|
</div>
|
2013-11-29 17:27:59 +04:00
|
|
|
<button onclick="saveState('#image')">Save</button>
|
2013-11-28 09:41:53 +04:00
|
|
|
<button onclick="clearStates()">Clear</button>
|
|
|
|
|
</div>
|
2013-11-29 17:27:59 +04:00
|
|
|
</details-->
|
2013-11-28 09:41:53 +04:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
