Yahoo UI and Image Color Palette Generator Updates

After talking to a friend who had been going on and on about it, I decided to take a look at the Yahoo User Interface Library, or YUI. From Yahoo’s own website YUI “is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.”

They’re actually really cool, and surprisingly easily to use. After doing some searching I found a few other free Javascript toolkits: jQuery, Prototype, Mootools, and Google Web Toolkit. This of course isn’t an exhaustive list of all that’s out there, but these seem to be the most popular. I had actually heard of jQuery, but because of it’s name I had always thought it had something to do with SQL or Java.

After a not too extensive check of the available features, I decided to try YUI first. Mostly because I thought their tools looked the nicest and they have an Image Uploader (something I haven’t tried yet, but plan to). I decided to soop-up my Image Color Palette Generator, which has so far been pretty plain. I’m still in the process of adding stuff to it (which I’ll describe below), so it’s currently a mess, but it’s now set up so that once you generate a color palette you can play around with a nifty little slider bar that will allow you to navigate through the HSL color space.

I’m sure a lot people will look at it and think “Ok, so you added a slider bar…”, but it’s pretty freakin’ cool. Once the app is fully complete it’ll come together a lot better. These new tools are great though. I can’t wait to check out some of the others.

On a related note, these toolkits remind me of an interesting article I read a couple months back on the possible emergence of a new SDK that could spell the end for Google’s Gmail. It’s a neat read if you have some time.

Image Color Palette Generator Updates

First, let me say I did some house cleaning on this app and sped it up by 700% on my machine. So if you were having trouble with it before, you should be able to use it fine now (if not, please let me know). I even have some more ideas for speed ups, but they’ll be in the next release. I was a bit sloppy in my initial implementation, I guess I thought I could get away with doing some simple math and string concatenation inside of the loop that looked at the image’s pixels, but those fractions of a second add up fast. I used table lookups to replace the unnecessary calculations. As soon as I’m done with everything on it, I’ll release the source so people can better understand what’s going on.

Aside from that, the program is now set up to generate 4 color palettes for you. The two it generates that get displayed on the left side of the screen represent the color palette for the image and the complimentary color palette for the image. The two it generates that get displayed on the right represent the “Muller Formula” versions of these color palettes. The Muller Formula is something that professor Aemelius Müller from Switzerland came up with that basically predicts what colors users will find pleasing. No actual formula is given on that website, so I had to infer one based on the basic idea. Right now I’m still tweaking it, so it’s still kind of experimental for the moment.

A Story, An Update, and Some Blogs

A Real Programmer?

“I’m not one of these younger guys who don’t really know anything. I’m an older guy, a real programmer with real experience.” So those weren’t his exact words, I’m paraphrasing from memory, but it contains the basic idea he was expressing. I over heard this from the cube next to me while I was eating lunch. Honestly, I was pretty shocked to hear someone say this. While experience does make one a better programmer, I actually haven’t noticed that much of a quality difference between the younger programmers and the older programmers. In fact, the most talented programmer I’ve met at work is 27. It almost seems like programming skill grows logarithmically. You learn and a lot in the beginning, but then as you get more experienced, the skills you pick up only make you slightly better over all. And people who aren’t that great after a year or two, never really become that great.

So hearing some old guy go on and on about himself while bashing on the younger guys sort of ruffled my feathers. Since I had been pretty busy running around all over the place, I wasn’t at my cube but at a “general use” cube (so to speak), so I didn’t know who sat in this area. I was just kind of by myself, eating a sandwich and surfing the web. The voice sounded familiar though. The man continued to trumpet his own skill and put down the “less experienced” when I suddenly realized who he was.

I had actually spent the whole previous day fixing his mangled software. He hadn’t been able to get it to work, even after a 2 week extension, and he had now moved onto another project, so his work had been tasked to me. And I, a younger and “less experienced” programmer, had done what he could not do, and in a day, and now here he was bashing on the younger guys. I was actually pretty annoyed. Even if he had been a good programmer I would have been annoyed. I’m by far the youngest person on my team (by at least 8 years) so part of me had to wonder if he was thinking about me while he gave this little speech. He may have just been trying to talk himself up to his new boss, but what he was saying was still BS.

Anyway, I had enough sense not to interrupt his diatribe or let him know I was around, but I did file it into the back of my mind. Hopefully when I’m 40+ I don’t have an arrogant streak where I go around thinking I’m better just because I’m older, especially if it leaves me blind to my own incompetence.

Image Color Palette Generator Update

I’ve thrown in the towel and done away with the image uploading. The new Color Palette App simply wasn’t being consistent in what it could handle. The ability to upload an image is extremely useful to the user, but since I’m currently under shared hosting (ie, lots of other sites are hosted on the same server), I apparently don’t really have the horse power to handle some of the more heavy duty stuff.

The app is now set up to take in a URL to an image. This shields me from having to worry about people uploading unsavory content (though for safety reasons the app was deleting all images after they had been processed) and it keeps the user from having to worry about me spying on what they upload (something some webmasters do – always be careful about what you upload to websites).

In the future I definitely want to have apps that take in images from a user’s computer, so eventually this issue will be worked out. Anyway, for the time being you can check out the new version of the app here. If it dies on you let me know. This has sort of thrown a wrench in my plans for more image oriented apps, however, I’m still going to charge on and see if I can make the best of this. If worse comes to worse, I’ll just make C# versions.

Oh! And before I forget, I changed the formula for calculating the complimentary colors. I now convert the color space from RGB (red, green, blue) to HSL (hue, saturation, lightness) and then shift the hue by 180 degrees, then I convert back to RGB space. This appears to give much more accurate complimentary colors, though I’m not sure if this is the correct way of doing it. I still cannot find a proper formula for calculating them.

New Blogs

chicanerous – Chicanerous is the author of the popular VB Array Tutorial on this site. And I do mean popular, it now averages over 200 visitors a day. Chic also used to be a regular contributor to a message board I once had. On his blog he says he’ll “probably post poorly written proofs, unastounding thoughts on literature and criticism, overgeneralized musings on strength training and conditioning, and half-hearted ruminations on various other subjects.” Chic’s a cool guy so you should check his site out. Hopefully he doesn’t mind me spamming it here :P.

New Web App: Image Color Palette Generator

After upgrading to PHP5, which was much less painless than I thought it would be, I decided to take a deeper look into how to do image manipulation in PHP. This is usually done with the gd library, which provides an assortment of useful image handling functions. There are certain aspects which were annoying (no Windows bmp support, difficulty in displaying images I didn’t want to keep on the server), but overall it appears to be a pretty handy toolset. If all goes well, I hope to create more image-based online apps. I’ve already got a big list of ideas, but I don’t want to get too far ahead of myself.

Anyway, the new application is Image Color Palette Generator – not the catchiest of names, but it describes what it does, which is create color palettes from images. This is useful when you’re designing a website and you want it to have the same look and feel as a particular image. This program will tell you what the most frequently used colors within an image are. It will also generate a color palette of the complimentary colors to the most frequently used colors. This can be useful if you want a look and feel that’s totally different from your input image.

The current implementation works by placing colors the app encounters into “buckets” which represent similar looking colors. After the image has been fully examined, the color palette is created by taking the average color from the “buckets” that contain the most colors. Pretty simple algorithm, eh? The complimentary colors are generated in RGB-space (Red, Green, Blue). If anyone knows the formula for calculating a complimentary color in the traditional artist color space (Red, Blue, Yellow) please let me know! I googled for at least an hour but couldn’t find any info on how to do it.

In the future I hope to make the program a bit more sophisticated. I’ve studied colors a little bit so I know the human eye is more sensitive to green than it is to red or blue, so colors with lots of green should probably have more weight than colors with less green. People also tend to notice areas where there is change going on in the image, and whether one notices the change can be estimated using the contrast sensitivity function. That may be getting a little too fancy. Though I’ll keep it in mind since it could be a nice tweak to the algorithm.

The app worked great on my machine, but I’m noticing now that it’s on my server that it’s struggling and timing out when larger images are inputted. So for now try and stick with smaller images (less than 40kb). I’m going to look into ways of getting around this. I may be doing something in an suboptimal way which would explain why it’s dying. Or it could just be because I’m on shared hosting and they don’t want me using a lot of resources. I’m not sure.

If you have any problems or suggestions relating to the new app itself, just post a comment in this blog entry or email me (see the About page for an email address).

Update: I’ve made some modifications and the program should now be able to handle images up to 200kb in size without timing out. It looks like the server only gives the php file a certain amount of time to do its thing and then it kills it. I may have to separate the functionality out into several files (even the it’s a small app). Also, right now I’m doing extra processing for gif images, so the program will work best with jpgs or png files.

Spam Blogs

Has anyone encountered these bot generated “automatic blogs” that seem to be all over the internet? I have no idea how long they’ve been around, but as this site has grown, I’ve become more aware of their presence. They seem to work by either grabbing content from other sites or from article databases. They then display this content and hope to grab visitors from search engines. Since these blogs are full of ads, and since 1-2% of users click ads, these phony blogs end up turning a decent profit, even though they don’t really serve a useful function.

To gave an example, on my stat page I noticed an incoming link from the Jessica Alba is Hot Blog (possibly NSFW). This site apparently has some bot that combs the internet looking for posts on Jessica Alba. It found my previous post, and then copped the begining of it saying:

Emily wrote a wonderful post today on “Slider Puzzle Source Code And Other Nonsense.” Here’s a quick excerpt:
I’ve finally gotten around to releasing my Slider Puzzle source code. Hopefully someone out there can find a good use for it. I was tempted to set up a Jessica Alba puzzle on some free web hosting site […]

Normally I welcome incoming links, but there’s something unsettling about an automatic blog spidering through my site just so it can grab content it can use to promote itself. I suppose it’s not really hurting anything, but it does leave a bad taste in my mouth. So far it’s only happened a few times, but I may end up blocking these sites.

No Housewarming Party

My roommate and I have opted not to throw a house party. The majority of you probably don’t know me in real life so you could probably care less, but I figured I’d say something here since I know there was a bunch of talk about it when I first moved in and some of my friends do read this blog and I don’t want them thinking they weren’t invited or anything. The main reason there will be no party is because my roommate and I are kind of lazy and we’re not really the type to throw huge social gatherings. We kind of prefer smaller groups of like 3-6 people. Anyway, if you haven’t seen the place and want to, feel free to shoot me an email. There’s not really a whole lot here, but the apartment complex itself is pretty damn cool.