web notes - a blog

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.

Color mapper was updated to allow all image formats.

If the colors aren’t from the image you selected, go back to the color mapper page, check the colors in step 1, then click the go button. Upon return to this page, the colors should be updated (browser caching may have to be cleared).

Please remember this is a very simple demonstration. The idea is to show how you can take an image and the color attributes to update CSS files. This isn’t intended to be a user-friendly wizard. It’s a powerful tool, and may take some time to understand and appreciate.

To see the original skin colors, click on web notes at the top of the page. This is the asevo skin for b2evolution, although I changed the colors. The colors on web notes are the ones that are used for the mapping.

Using the link above, you can very quickly choose colors for an attractive color scheme and them augment them with images.

Many applications use hierarchical CSS architectures, where common elements have the same CSS and the skin defines or overrides the ‘main’ design colors.

The idea is to use the ColorToy demo to choose the colors, extract the colors it generates, and then run the color mapper.