web notes - a blog

robots.design™ now has a color palette, which allows you to choose the colors for the skin.

robots.design™ was initially developed as a tool for more cost-effective skinning of applications, but it can also be used by social network providers to allow non-technical users to use the colors from image to change their profile on the site.

Imagine a button that has a picture of an image. The member could click the button and upload an image. This would change the colors for their profile to match the image. The extent of the change can be managed by the network provider.

This does depend on the site/application architecture. The simplest implementation may be to provide a stylesheet for each user, or some other override mechanism that applies the image colors to the site - perhap through javascript. The complexity will vary greatly and will probably reflect the goals and objectives of the site.

In addition to social networks, any system that would like to enhance the user experience may use a derivative of the approach. The advantage is that no technical experience is required, and it is much easier than hand-coding a profile skin.

robots.design™ is a hosted tool, because it can be, and it makes it accessible to everyone.

By reading an image, and extracting the colors from CSS files, then generating sed commands, the design is changed in an extremely efficient manner. There are also shell commands that will find the images, either in a directory or in a CSS file, then display them in a browser, so you can simply create new images, with the same dimensions, with the same names and copy them to complete the transition.

This is also an example of how the whole LAMP stack can be used to reduce the amount of code that has to be written.

Key elements:

• ImageMagick is used for the image processing
• sed handles all substitution. It could have been done with PHP, but sed is already there. The commands displayed are run on the CSS files for the blog - exactly as displayed
• Two open source components were also used to handle the color coding and analysis. They are identified in the credits area
• Providing shell commands gives the user complete control. They can be adjusted to better fit the requirements

The one hesitation people may have about the tool is that they must submit an image. There are several ways the images can be protected. One option is to use software to extract the image colors and paste them into the textbox on the page, in the correct syntax. Another solution would be to create an image with the colors, but no identifying text or images, or use a piece of the image that has the colors. The images are deleted immediately after the colors are extracted, they are not analyzed, viewed, stored or collected in any way.

The code isn’t offered for download for several reasons:

• It isn’t distribution quality code, it is a utility and the code reflects that. The PHP is interspersed with the HTML, and the CSS is in the same document.
• It relies on components from other sources (which are given credit), so distribution would either have to include those components or provide instructions to go get them and install them
• Thus far, the level of interest has not justified a significant investment beyond what has been done

The project began as an investigation to find a cost-effective way to change the colors of an existing design without manually recoding it. This solution meets that requirement.

Image substitution has been added. This allows you to extract the images, and view them and their dimensions. You can then create new images with the same names to change the design.

The color mapper is transitioning to use a more polished interface.