FacebookTwitterGoogle+Share

Icon Files: interface(s)

Bradicon was mostly working. We’d pushed through the tedium and had made it all the way back to fun – designing the interface!

There were two main constraints (requirements, if you will) to Bradicon’s interface: a way to upload files, and a way to download the generated icons.

I decided that I wanted an upload progress bar, and that I wanted it all to work on a single page. SWFUpload was an easy answer to the upload progress bar. Having used it before, I knew I could write appropriate callback functions to do that. Plus, there was the added benefit of uploading more than one file at once.

Next came the actual design, which I did in Photoshop. I then cut it up and formatted it with HTML and CSS, which sounds boring but I actually find it really relaxing.

There were some issues with SWFUpload‘s loadUI() function not being called in IE on refresh, but Karl and I fixed that up.

var movie = document.getElementById(swfu.movieName);
if (movie != null && !document.getElementById(swfu.movieName+"BrowseBtn")) {
	if(movie.PercentLoaded() == 100) swfu.loadUI();
}

I didn’t want the page to have to refresh. My first thought was to go with an iframe, but that was ugly. I decided to pull the content from the iframe and put it into a div. But that didn’t work the way I wanted it to work – the code wasn’t as pretty as I would have liked. So, I did my first ever xmlhttprequest! 🙂 Now Bradicon is all ajaxed up.

I decided to make two versions of Bradicon’s interface: A simple version, and an advanced version. The simple version would just sport a regular HTML form, redirecting back to itself once the upload had completed, and displaying the appropriate icon files. The simple version would redirect to the advanced version using Javascript, that way as long as a user had Javascript enabled, they would get sent to the advanced version.

The interface was done, and seemed to work. The only thing left was to remove the icon files that it created. I wrote a simple garbage collector function that goes through and tries to delete up to X files that are older than Y number of days.

At this point, I thought I was done. That it was over. That Bradicon was complete. But I was wrong. Oh, was I ever wrong. Shelds, you see, told me to make a logo for it. A shiny box with an arrow in it, he said. And so, I did.

Finally, BRADICON!

Bradicon's logo

Bradicon

Comments

You must be logged in to post a comment.