In order to solve this, I wrote a little python script that transforms the average colour of a product image into a scalar, then generates a CSV file including the colour value in some property, allowing it to be sorted easily by the web shop system of your choice. Images with many different colours are not sorted very well, but it worked for most of the products in my case.

You can see the script in action at shop.paramentextil.de. It generates a CVS file which can be imported by most e-commerce systems. You will certainly have to change the script to your needs, but this should be easy to do even with little programming experience. Changing the sorting mechanism may also be appropriate in some cases. Enjoy.

And here’s the script. The product image names must contain numbers functioning as the product ID and the files must reside in a folder structure reflecting your category names. Of course, you can change all that. You will also have to adopt the script to map the category names to product descriptions, category ids or whatever your system requires in order to import the products.

#!/usr/bin/env python
# -*- coding: latin-1 -*-
 
from PIL import Image
from colorsys import rgb_to_hls
import sys
 
/* calculating the average color */
def average_hls(f):
    r, g, b = 0, 0, 0
    count = 0
    img = Image.open(f)
    data = img.load()
    /* you may not need to count all the pixels of the image,
        to enhance performance you could also just consider
        every 100th pixel or so... */
    for x in xrange(img.size[0]):
        for y in xrange(img.size[1]):
            tempr,tempg,tempb = data[x,y]
            r += tempr
            g += tempg
            b += tempb
            count += 1
    count *= 255
    (r, g, b) = (float(r)/count, float(g)/count, float(b)/count)
    # calculate averages, convert to hls
    return rgb_to_hls((r/count), (g/count), (b/count))
 
if __name__ == '__main__':
    categories = {
/* Folder name without trailing "/" */
        './Category one/Sub category/Sub sub category' : {
            "categories":"9,20",
            "short":"Unicolor; 100x70cm; ",
            "desc":"Description",
            "name":"Unicolor 180g",
            },
        './Category one/Sub category two' : {
            "categories":"11,23",
            "short":"Multicolor; 100x80cm; 220g",
            "desc":"Detailed description",
            "name":"Multicolor 220g",
            },
        }
    for arg in sys.argv[1:]:
        try:
            (h, l, s) = average_hls(arg)
            entry = arg.rpartition('/')
/* for sorting I use the HLS colour value along with the light value */
/* CVS table output is happening here */
            print '"{id}"; "{h:03d}|{l:03d} {name}"; "{cat}"; 12;\
                "{article}"; "{short}"; "{desc}"; "../upload/{article}"'.format(
                id = int(entry[2].replace(".JPG", "").replace("d","")),
                h = int(h*255), l = int(l*10000000),
                a = arg,
                cat = categories[entry[0]]['categories'],
                article = entry[2],
                short = categories[entry[0]]["short"],
                desc = categories[entry[0]]["desc"],
                name = categories[entry[0]]["name"],
                )
        except IOError:
            pass

In Linux you can call it like this, in your folder containing the catalogue (sub-)folders and product images:

find . -exec python ~/Path/To/AverageColor.py {} \;|sort>import.csv

Hello People!

Please have a look at the latest alpha version of my graph library. There are some changes, like now you have a simple option to add labels to connections by passing a label property when creating an edge and a simple overlay option for nodes. Note that the file names have also changed, but this shouldn’t be too hard to adopt to. Some source code refractoring has been done too and the getShape is now called render.

The biggest changes however are some search algorithms I implemented to work with the framework, Dijkstra, Bellman-Ford and Floyd-Warshall along with a priority queue based on a binary heap. I’m just doing this because I have to learn it, but my plans are to break these algorithms down into steps and have them explained visually to the user.

Here are the issues I’m working on until removing the alpha badge, some already pointed out by some of you:

1. Have a render function for every node, no matter how it was created.
2. Provide a convenient way to define the custom render function via json code.
3. Enhance the overlay property to make it easier to use.
4. Enhance the label property for better readability and automatic text aligning.
5. Attach a click handler to the nodes to distinguish between drag and click events.
6. An option to set a random seed for deterministic layouts.
7. Enhancing the layout algorithm to also work with mostly linear graphs.
8. Address the bug with numeric IDs.
9. Better re-using existing connections.

Some of the issues I will address in the future:

• Hide/show nodes
• Set fixed positions for some nodes
• Different layout options
• An algorithm showroom, e.g. for search algorithms, binary trees, minimal spanning trees, maximum flows, etc. (working on it), like all those educational Java applets from the 90′s out there…
• Animations (maybe)
• A web site (working on it)
• Data adaptors
• Different connection modes
• As this library is growing, and not everyone might need everything, some kind of a really basic dependency list would be nice..
• Some measurement method to calculate the quality of some randomly created layouts and then picking the best one
• Use currying wherever it makes sense and results in cleaner code. I love currying!

Here’s what it looks like in action currently (the tool-tip is just a dummy rounded square):

And the Dijkstra algorithm to search the shortest paths from Berlin to any city in the world:

See you next week!

Download

Mit dieser Erweiterung können in Raphael Elemente als Tooltips an andere Elemente angehängt werden. Sie erscheinen, sobald man mit der Maus darüber fährt.

Raphael.el.tooltip = function (tp) {
    this.tp = tp;
    this.tp.ox = 0;
    this.tp.oy = 0;
    this.tp.hide();
    this.hover(
        function(event){ 
            this.mousemove(function(event){ 
                this.tp.translate(event.clientX - 
                    this.tp.ox,event.clientY - this.tp.oy);
                this.tp.ox = event.clientX;
                this.tp.oy = event.clientY;
            });
            this.tp.show().toFront();
        }, 
        function(event){
            this.tp.hide();
            this.unmousemove();
            });
    return this;
};

Verwendet wird das dann einfach so:

var paper = Raphael(10, 50, 320, 200);
paper.circle(100,100,10).tooltip(paper.rect(0,0,20,30));

Leider funktioniert das nicht mit set und ich habe auch nicht herausbekommen, wie man set um Funktionen erweitern kann. Eine weniger schöne Möglichkeit ist, die Elemente über das Attribut items anzusprechen:

var st = paper.set();
st.push(
    paper.circle(10, 10, 5),
    paper.circle(30, 10, 5)
);
st.items[0].tooltip(paper.rect(0,0,20,30));

Viel Spaß damit.

Also nahm ich ein Raphael-JS-Beispiel zum verbinden geometrischer Formen und kombinierte es mit dem eben gefundenen Code. Der Layout-Algorithmus erzielte ganz ordentliche Ergebnisse. Nun kann man sogar Spaß haben und die Knoten mit der Maus umherziehen.

Hier ist ein Beispiel zur Veranschaulichung der Einfachheit der Benutzung (es unterscheidet sich im Grunde gar nicht viel von dem ursprünglichen Beispiel, enthält aber eine Reihe an Verbesserungen):

var redraw;
var height = 300;
var width = 400;
 
/* only do all this when document has finished loading (needed for RaphaelJS) */
window.onload = function() {
 
    var g = new Graph();
    /* add simple nodes */
    g.addNode("strawberry");
    g.addNode("cherry");
 
    /* add a node with a customized label */
    g.addNode("id34", { label : "Tomato" });
 
    /* add a node with a customized shape
       (the Raphael graph drawing implementation can draw this shape, please
       consult the RaphaelJS reference for details http://raphaeljs.com/) */
    g.addNode("id35", {
        label : "Meat" ,
        /* filling the shape with a color makes it easier to be dragged */
        getShape : function(r,x,y) {
            return r.rect(x-30, y-13, 62, 33).attr({"fill": "#f00", "stroke-width": 2});
        }
    });
 
    /* connect nodes with edges */
    g.addEdge("strawberry", "cherry");
    g.addEdge("cherry", "apple");
    g.addEdge("id34", "cherry");
 
    /* customize the colors of that edge */
    g.addEdge("id35", "apple", { color : "#38a" , colorbg : "#bdf" });
 
    /* add an unknown node implicitly by adding an edge */
    g.addEdge("strawberry", "apple");
 
    /* layout the graph using the Spring layout implementation */
    var layouter = new Graph.Layout.Spring(g);
    layouter.layout();
 
    /* draw the graph using the RaphaelJS draw implementation */
    var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
    renderer.draw();
 
    redraw = function() {
        layouter.layout();
        renderer.draw();
    };

Das Ergebnis sieht dann folgendermaßen aus:

Probier es aus unter dracula.ameisenbar.de, hol Dir den Code via launchpad oder lade das zip-Archiv herunter. Es sind noch einige Optimierungen am Algorithmus notwendig, sowie die Programmstruktur zu ordnen. Vieles im Code habe ich bereits kommentiert und es ist eine Beispiel-HTML-Seite im Archiv, welche die Anwendungsmöglichkeiten demonstriert. Viel Spaß!

Für Kommentare bin ich sehr dankbar!

Update: Es gibt eine neue Version zum Probieren!

Es ist Freitag in Israel im Sommer 2003. Sehr heiß. Ich sitze draußen mit ein paar anderen, genieße die staubige trockene Luft, ziehe an der Wasserpfeife und lausche den blubbernden Eiswürfeln darin. Ein Herr setzt sich zu uns, Michael, britisch. Er habe gestern mit Arafat zu Abend gegessen und neulich habe er in der Wäscherei al-Gaddafi gesehen, nun aber stehe ein Telefonat mit einem Sohn Saddam Husseins an. Michael sei ein Diplomat aus London und wegen eines Alkoholproblems hier, aber nicht für lange.

Hier, das ist ein ehemaliger Kibbutz in Galiläa, eine Dorfgemeinschaft, heute eine Pflegeeinrichtung für geistig Behinderte. Es heißt “Kfar Tikva“, das Dorf der Hoffnung. Michael wohnt hier schon seit langem. Alles, was ein Kibbutz so hat, gibt es auch hier, und noch viel mehr: Speisesaal, Waschsalon, Kleiderkammer, Materialausgabe, Verwaltung, Krankenstation, Schwimmbecken, Hundepension, Weinkelterei, Plastikfabrik, Musikzimmer, Kraftraum, Computerrraum, Arbeitsräume, Gebetsraum, Zoo und Töpferei. Die Bewohner, Hebräisch “Chaverim”, also Freunde, arbeiten hier nach ihren Fähigkeiten. Eingesperrt ist niemand, dafür sind alle gut gelaunt.

Es ist Mittag. Ich muss Udi zum Essen begleiten. Er wählt die Toilette passend zum Wochentag, wäscht sich eine halbe Stunde die Hände und isst die Essensbeilagen der Reihe nach. Heute ist Freitag, das heißt zum Einen “Toilette Nummer vier”, und zum Anderen, dass ich den Rest des Tages frei habe. Ein Nationalpark möchte gesehen werden. Vielleicht Beit Shean, die riesige Römerstadt neben der alten ägyptischen Festung nahe der Kreuzfahrerburg? Ich trampe mit einer Kollegin los, ein junges Pärchen nimmt uns mit, der Eintritt wird uns freundlicherweise geschenkt und auf dem Rückweg fährt uns jemand in seinen Kibbutz um uns ein paar reife Früchte von der Mangoplantage zu geben.

Die Landschaft ist toll und meine gefrorene Wasserflasche ist wieder leer. Abends kommen unsere Lieblings-Beduinen ins Dorf. Es gibt Bier und Wodka mit Orangensaft und für die Mädchen Komplimente in gebrochenem Hebräisch. Ein Freund will uns zu einer Goa-Trance-Party in einen Kibbutz fahren. Wir schlafen erstmal bis nachts um eins, und fahren dann los, ins nichts. Ein Dorf eben, mit Kühen und Schafen und indischen Sitzecken, mit Kerzen und Hippies, um drei wird es langsam voll. Es gibt Suppe von Mutti, Wasserpfeife und eine Oma verteilt kostenlos Tüten zum Probieren. Es wird getanzt.

Die ersten Sonnenstrahlen bringen den Kuhmist zum stinken und erinnern uns an die Heimfahrt. Der Freund ist weg, aber einer der Gäste will uns mitnehmen. Er führe zwar eigentlich gar nicht in unsere Richtung, aber er sei so besoffen, dass ihm das egal wäre. Er fährt sicherstes Schritttempo und setzt uns irgendwo ab. Wir stellen uns an das nächste Schild zum trampen (“No hitchhiking!”). Ein paar arabische Juden haben zwar schon jemanden hinten im Laderaum, auf Regalen und raubkopierten CDs, aber für uns ist auch noch Platz. Wir sind wieder daheim.

Zum Schlafen ist es schon zu hell und zu warm. Maurice, ein palästinensischer Christ aus dem Drusendorf, gibt uns kaltes Bier gegen den Kater, dazu Johnny Walker. Wir wollen zum Strand. An der Bushaltestelle plaudert ein netter rumänischer Opa mit uns auf Französisch, er sei vor den Nazis aus Bukarest geflüchtet und seitdem nie wieder dort gewesen. Der Bus kommt nicht, aber ein freundlicher Jemenite räumt extra noch seine Rückbank frei und fährt uns zu einer großen Kreuzung, von wo aus uns ein gut gekleideter Herr (der Sprecher des Finanzministeriums) an den Strand fährt, weil wir ein großes blondes Mädchen dabei hätten und offensichtlich nicht von hier seien. Wir genießen den Strand und seine Besucher, denn morgen wartet ein bunter Arbeitstag auf uns: Wecken, spazieren, rasieren, begleiten, Post besorgen, helfen, Krankenhaus, Ärzte, Essen bringen, anleiten, feiern, ein Freund sein.