Fun Frame Monday

My Roles: Develop UI, Implement Back-End Data
One of my projects while working at The Organic Bloom was to develop an interface for their Fun Frame Monday competition. They needed a way to create contests and have visitors to the blog post upload and submit a picture in one of The Organic Bloom Frames. This was my first soirée into the world of HTML5 Canvas

First I had to determine the best approach to displaying a frame and inserting a picture. After doing some research I saw that the HTML5 canvas allowed for some great image handling and composite operations. The trick was knowing where the opening of the frame was. Luckily I had access to all of the measurement data related to the frames, so after pulling it I was able to quickly develop a clipping region and do a composite operation, overlaying the empty frame over the user's picture. From here it was a simple matter to export the canvas image and use it as a submission.

After the basic proof of concept I settled into making a simple overlay for users to resize and position their pictures after they had been uploaded. I used jQuery UI for this and overlaid the DOM elements on the canvas. This allowed me to pass the positioning data into the canvas operations. Then I added a quick submission form and hooked it into Facebook and Pinterest.

I was also tasked with making a simple, easy-to-use backend for this feature. I structured the plugin to fit in the Wordpress environment. Then I added screens for creating contests, reviewing and selecting winners, and viewing past winners. The creation form utilizes an external library of data on the frames to generate a frame image and the opening data simple from the size and style of the frame. This allowed the user to easily create contests and are then given a shortcode to paste into the post.

The winners are announced in a second blog post, so I created another shortcode that is given to the user at the time the winners are selected. It then pulls the winners and displays them in a nice, simple format.