Photo Corners

A   S C R A P B O O K   O F   S O L U T I O N S   F O R   T H E   P H O T O G R A P H E R

Enhancing the enjoyment of taking pictures with news that matters, features that entertain and images that delight. Published frequently.

Site Tweak: Interactive Editing Details Share This on LinkedIn   Tweet This   Forward This

17 August 2019

We hadn't planned on publishing Interactive Editing until today but it snuck in the back door yesterday when the automated upload for the slide show also updated our feeds. We hadn't used the special code word in our file name to prevent adding it to the feeds. Oops.

We're still on probation so we hope this won't hurt our chances at full employment here.

To compensate for our error, we finished the story and put it up, updating the feeds with the new URL. You know, as if we'd planned it all along.

But it was a little premature.

The story is about interactive editing, which is a less-than-perfect way of describing a new feature that lets you edit an image in the story. We don't plan to activate it in every story but we think it may be instructive here and there to let you try a few variations on the image.

We can't take credit for all the code. So we want to applaud a few third parties that spiked the punch.

So we borrowed the JavaScript we've been testing in a new Keyboard Maestro macro we've been working on for several weeks, slipping it into an HTML page. Last night and this morning, we made it a little more responsive to your changes but that's it.

It uses HTML5's canvas tag to load an image and perform various mathematical stunts on the RGB elements of each pixel. Those stunts are the filters listed in the popup menu.

And there are quite a few of them. So you can make some dramatic non-destructive alterations to the image. You can't save them but you can see what effect they have.

We can't take credit for all the code. So we want to applaud a few third parties that spiked the punch.

Because the Custom HTML Prompt in Keyboard Maestro does not support the HTML5 color field, we dropped in Jan Odvárko's jscolor.js, a small JavaScript equivalent, which has been minified. For the macro version, we did have to add a hidetext configuration option to paint the text color the same as the background for our duotone color buttons.

Filters started with a set described by Ilmari Heikkinen here and were greatly informed by Alexander Dayan here. The duotone code that applies a gradient to a grayscale rendering came from Matt Kandler.

We added some of our own formulas as well, including the Posterize, Luminance, Contrast and Hue Shifts. Once you get how simple it is to change pixel values, there's no stopping you.

This version doesn't include any convolution filters to do things like blur or sharpen because they just don't seem useful in this context and would, therefore, just make a long popup menu longer. But it could easily be done, so watch out.

As it stands, we plan to keep refining the code in yesterday's story so we've added a Last Updated time stamp to it. When we get it nicely grilled on both sides, we'll minimize it and put it in our library so we can call it at will for any particular story.

BackBack to Photo Corners