fichnackdissen: Statusbild eines Arbeitsvorganges

Hallo.
Möchte meinen Kunden die Möglichkeit geben, über eine Grafik einzusehen, wie weit Ihre Homepage ist. Soll heißen: ich möchte über eine Prozenteingabe eine best. Grafik laden lassen.

Beispiel:

Die Seite ist zu 30% fertig. Ich tippe in eine Anwendung (what ever)
30 ein und ein Bild mit einem gelben Punkt wird gezeigt.

Die Seite ist zu 60% fertig. Ich tippe in eine Anwendung
60 ein und ein Bild mit einem roten Punkt wird gezeigt.

Da ich jetzt überhaupt keine Plan habe wie das am besten zu realisieren ist wäre ich für jeden Tipp dankbar.

Klar kann ich auch einfach eine Fragik mit einem Punkt basteln aber ich möchte, dass es jeder eingeben kann ohne irgendeine Grafik vorher zu bauen.

Danke für Tipps.

Fisch

ps. sowas ähnliches habe ich auf dieser Seite gesehen:
http://www.ulf-theis.de/

allerdings weiß ich nciht pb das jetzt "dynamisch" oder "statisch" aufgebaut ist..

  1. Also von JavaScript würde ich dir abraten. Eine solche Grafik lässt sich auch mit einer serverseitigen Programmiersprache erzeugen. Den Balken würde ich mir in Rohform speichern - den Rest dann ergänzen.

    1. Kennst du eventuell ein fertiges Script für solch ein Vorhaben. Vielleicht ein PHP-Script? Oder welche Programmiersprache meinst du in erster Linie?

      Fisch

      1. Mir ist keines bekannt, derartiges sollte es aber geben, einfach mal Googlen. Ansonsten setze dich ein wenig mit den Image-Funktionen auseinander. Sollte nicht all zu schwer sein. (Breite des Bildes Minus Rand auslesen. Durch 100 teilen. Einheit mal 100 - auf ganzen Pixel runden. Und dann "hinmalen".)

  2. Moin!

    Da ich jetzt überhaupt keine Plan habe wie das am besten zu realisieren ist wäre ich für jeden Tipp dankbar.

    Es gibt tausend Möglichkeiten, sowas zu realisieren.

    1. Bastel dir für die Prozentstufen 10, 20, 30,..., 100 jeweils eine passende Grafik (wenn mehrere Stufen identisch aussehen sollen, kopier sie), und schreib die eingegebene Prozentzahl als Teil des Namens in die Grafikreferenz: src="torte10.gif", src="torte60.gif" usw.

    2. Bastel dir passende Grafiken nur einmalig und definiere in der server- oder clientseitigen Sprache, welche Grafik für welchen Zahlenbereich angezeigt werden soll. Gib die Grafikreferenz passend aus.

    3. Fortschrittsbalken von 0-100% lassen sich auch realisieren, indem man die Breite oder Höhe einer 1 Pixel breiten bzw. hohen Grafik beeinflußt. Alternativ nimmt man ein anderes Element (z.B. ein DIV), setzt die Grafik als Hintergrundbild ein und verändert passend zum Fortschritt dessen Breite.

    4. Selbstverständlich kann man serverseitig auch Grafiken generieren lassen.

    5. Außerdem kann man mit Javascript im Browser auch selbst Grafiken malen, wenn der Browser das <canvas>-Element unterstützt (der IE leider nicht).

    Und so weiter, und so fort...

    - Sven Rautenberg

    --
    "Love your nation - respect the others."
    1. Hallo Sven,

      1. Außerdem kann man mit Javascript im Browser auch selbst Grafiken malen, wenn der Browser das <canvas>-Element unterstützt (der IE leider nicht).

      Es geht doch wohl nur um die Färbung eines Punktes,  -irgendwie stufenlos zwischen rot und grün- am Spektrum des Regenbogens entlang.

      Man müsste also einen Algorithmus finden, der jeden Prozentwert in einen entsprechenden HEX-Farbwert umrechnet und diesen als Hintergrundfarbe einem quadratisch formatierten Element zuweisen, über/in dem passgenau ein partiell transparentes GIF oder PNG als Maske liegt.

      Gruß Gernot