Die Adresse: www.prosite.de

Im Einzelnen haben die Gutscheine folgende Werte – und das dauerhaft (!):

Dynamic Webspace – 1 Euro monatlich
Webspace L       – 2 Euro monatlich
Webspace XL      – 5 Euro monatlich
Webspace XXL     – 8 Euro monatlich

V-Server S       – 2 Euro monatlich
V-Server M       – 4 Euro monatlich
V-Server L       – 6 Euro monatlich

Root Server S    – 10 Euro monatlich
Root Server M    – 15 Euro monatlich
Root Server L    – 20 Euro monatlich

Hier sind die Gutscheine, die obersten sind die neusten:

PR9ccfad
PR02aa58
PR2f89d5

PRbce26b
PRc00101
PRfa1e6a

PR9ae201
PR2d9d4b
PR8e648c

PR8d585a
PRc44fc8
PR789cb9

PR6bea43
PR743df7
PR360603

PRd3aacd
PR3ce125
PR032130

PR1d740e
PR39aea9
PR523eee

PR1e1836
PRd1314e
PR846b6e

PRef432a
PR69d518
PR838d89

PRc0836b33
PRad322ec8
PRb6a2d46c
PRc3755a31
PR030ac02b

Soeben habe ich meinen ersten Online-Shop eröffnet, welcher ab sofort eine Vielzahl einzigartiger, handgefärbter Stoffe bietet! Besonders für KünstlerInnen, welche Quilts und Patchworks arbeiten, werden sich dafür interessieren. Die Adresse ist unikatstoff.de !

Die größte Herausforderung dabei war eben jene große Zahl ähnlicher, aber einzigartiger Artikel und diese dem Besucher ansprechend und übersichtlich zu präsentieren. Dazu habe ich das Layout soweit wie möglich reduziert. Die Stoffe werden nun automatisch der Farbe nach sortiert und lassen sich nach einem Klick vergrößern und verschieben. Damit kann der Besucher ähnliche Stoffe leicht gegeneinander vergleichen, falls die Wahl einmal schwer fällt.

Außerdem bin ich weg von den Tabellen und einer spaltenweisen Darstellung gegangen: Die Stoffe fließen von links nach rechts nach unten und füllen somit den Bildschirm optimal aus, ganz gleich welche Größe er hat.

Unter der Haube sitzt ein kleines Script, wie ich es in einem vorigen Beitrag bereits vorgestellt habe: Es zählt stichprobenartig die Pixel der Bilder und berechnet daraus eine Durchschnittsfarbe, anschließend wird von RGB in den HLS-Farbraum umgerechnet, um die Stoffe einfach auf einer Regenbogenskala zu sortieren. Besonders bei vorwiegend einfarbigen Stoffen funktioniert dieser Ansatz recht gut.

Allerdings muss ein neuer Ansatz für mehrfarbige Stoffe her. Denkbar wäre auch die Einbeziehung menschlicher Gewohnheiten: Helle, kräftige Farben werden beispielsweise stärker wahrgenommen, als dunkle oder blasse. Zudem können ähnliche Stoffe an den anderen Enden der Skala auftauchen – hier kann nur eine neue Anzeigeform helfen.

Für kleinere Bildschirme sind ebenfalls noch Anpassungen nötig. Die Titelseite ist noch etwas karg, mehr Angebote sind in Arbeit. Aber alles zu seiner Zeit.

Viel Spaß beim Einkaufen!

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.

Download Retrohappy Beta WordPress Theme

PS: Wenn Dir dieses Motiv sehr gefallen hat, kannst Du Dich über diesen Link kostenlos und unverbindlich bei Dropbox anmelden und mir (und Dir) damit 250MB kostenlosen Online-Speicherplatz schenken

PPS: Der Download-Link funktioniert wieder!

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!