Skip to content

Instantly share code, notes, and snippets.

@mikecarroll
Last active December 15, 2015 05:59
Show Gist options
  • Save mikecarroll/5213093 to your computer and use it in GitHub Desktop.
Save mikecarroll/5213093 to your computer and use it in GitHub Desktop.
Coffeescript code that allows user to choose an Caman image filter from a dropdown list (using select2), creates a slider with the appropriate values for that filter, and then saves the final set of adjustments as a hash that can be sent back to the server and stored for later reference.
camanCache = {}
imageValues = {}
$('.blimage, .largedisplay').each (->
imgName = $(@).attr('id')
loc = $(@).html()
camanCache[imgName] = Caman(loc, "##{imgName}")
$(@).css('height', '')
imageValues[imgName] = {}
)
imageToolsList = [
{id: 'Opacity', text: 'Opacity'}
{id: 'Brightness', text: 'Brightness'}
{id: 'Contrast', text: 'Contrast'}
{id: 'Exposure', text: 'Exposure'}
{id: 'Gamma', text: 'Gamma'}
{id: 'Hue', text: 'Hue'}
{id: 'Noise', text: 'Noise'}
{id: 'Saturation', text: 'Saturation'}
{id: 'Sepia', text: 'Sepia'}
{id: 'Vibrance', text: 'Vibrance'}
]
changify = (imageClipName) ->
camanCache[imageClipName].revert ->
clip = camanCache[imageClipName]
for id, methods of imageValues when id == imageClipName
for name, arg of methods
clip = clip[name](arg)
clip.render()
console.log(imageValues)
sliderDef =
Brightness: {
sliderVals: { min: -30, max: 30, value: 0, step: 5, range: "min"}
tool: (imageClipName) ->
(event, ui) ->
imageValues[imageClipName]["brightness"] = ui.value
changify(imageClipName)
}
Contrast: {
sliderVals: { min: -100, max: 100, value: 0, step: 10, range: "min"}
tool: (imageClipName) ->
(event, ui) ->
imageValues[imageClipName]["contrast"] = ui.value
changify(imageClipName)
}
Exposure: {
sliderVals: { min: -100, max: 100, value: 0, step: 5, range: "min"}
tool: (imageClipName) ->
(event, ui) ->
imageValues[imageClipName]["exposure"] = ui.value
changify(imageClipName)
}
Gamma: {
sliderVals: { min: 0, max: 4, value: 1, step: 0.5, range: "min"}
tool: (imageClipName) ->
(event, ui) ->
imageValues[imageClipName]["gamma"] = ui.value
changify(imageClipName)
}
Hue: {
sliderVals: { min: 0, max: 100, value: 0, step: 5, range: "min"}
tool: (imageClipName) ->
(event, ui) ->
imageValues[imageClipName]["hue"] = ui.value
changify(imageClipName)
}
Noise: {
sliderVals: { min: 0, max: 100, value: 0, step: 5, range: "min"}
tool: (imageClipName) ->
(event, ui) ->
imageValues[imageClipName]["noise"] = ui.value
changify(imageClipName)
}
Saturation: {
sliderVals: { min: -100, max: 100, value: 0, step: 5, range: "min"}
tool: (imageClipName) ->
(event, ui) ->
imageValues[imageClipName]["saturation"] = ui.value
changify(imageClipName)
}
Sepia: {
sliderVals: { min: 0, max: 100, value: 0, step: 5, range: "min"}
tool: (imageClipName) ->
(event, ui) ->
imageValues[imageClipName]["sepia"] = ui.value
changify(imageClipName)
}
Vibrance: {
sliderVals: { min: -100, max: 100, value: 0, step: 5, range: "min"}
tool: (imageClipName) ->
(event, ui) ->
imageValues[imageClipName]["vibrance"] = ui.value
changify(imageClipName)
}
Opacity: {
sliderVals: { min: 0, max: 1, value: 1, step: 0.01, range: "min"}
tool: (imageClipName) ->
(event, ui) ->
console.log("##{imageClipName}")
$("##{imageClipName}").css('opacity', ui.value)
}
$(".image_tools_select").each ->
$(@).select2
placeholder: "Add an adjustment tool"
data: imageToolsList
$(@).on("change", (i) ->
imageTooler JSON.stringify(
val: i.val
clipName: $(@).closest('.clip').attr('id')
)
)
imageTooler = (i) ->
imageData = jQuery.parseJSON(i)
iId = imageData.val
imageClipName = imageData.clipName
createSlider(iId, imageClipName)
createSlider = (id, imageClipName) ->
newTool = "<div id=#{id}><label>#{id}</label><div class='slider#{id}'></div></div>"
img = "img_" + imageClipName
slide = sliderDef[id].tool(img)
args = $.extend({ }, sliderDef[id].sliderVals, slide: slide)
$("##{imageClipName}").find(".imagetoolfields").append newTool
$(".slider#{id}").slider(args)
$(".reset_button").click( ->
img = "img_" + $(@).closest(".clip").attr('id')
$("##{img}").css('opacity', 1)
imageValues[img] = {}
console.log($("[class^='slider']"))
$("[class^='slider']").slider("value", 0)
changify(img)
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment