Thursday, July 28, 2011

GSoC 2011 GUI Overhaul: Uploadable Logo with Area Selection

Hi everyone,

When I discovered a problem with the logo url rendered in the homepage, I believe blobstore for the organization logo will be fine. Yeah, until I took pains with redirect response. So here's the specification to implement image area selection in blobstore, so you can crop the uploaded image:

  1. We need coordinate fields, x1 as a horizontally starting-point where the area selection begins, x2 as horizontally end-point, y1 as vertically starting-point where the area selection begins and y2 as vertically end-point. Since we're using blobstore, we need to set BlobReferenceProperty field.
  2. Create the form similar to the tax or enrollment form, but only set the BlobReferenceProperty field. To make it clear, the uploaded file will be handled by Blobstore API and handover to our written handler afterward. In our handler we can set initial values for coordinate fields and redirect again to upload form.
  3. When the blob key is available, we need another handler to request the blob.
  4. To render the uploaded image in the form, we can follow how Google Map is rendered in the profile form.
  5. Image area selection was implemented using jQuery imgAreaSelect. The documentation is pretty obvious.
  6. There should be coordinate fields update handler which is posted when we made selection over the image. There's onSelectEnd paramater that we can passed over when instantiate imgAreaSelect.
  7. To serve the image with area selection, we need to create a handler that reads the blob based on provided blob key. Resized and cropped image will be manipulated here by using Image API.
I can't give you live demo for uploadable logo. I don't have a dashboard in billing-mode. Here's the screenshot if you're wondering:



No comments:

Post a Comment