kostenloser Webspace werbefrei: lima-city


Progressbar Bild mit PHP erzeugen

lima-cityForumProgrammiersprachenPHP, MySQL & .htaccess

  1. Autor dieses Themas

    limabone

    Kostenloser Webspace von limabone

    limabone hat kostenlosen Webspace.

    Hallo,
    Ich würde gerne eine Progressbar für meine Homepage machen, die Beispielsweise bei der Registrierung gebraucht wird. Ich weiß zwar, dass man Bilder mit PHP erstellen kann, aber kenn jemand von Euch eine Anleitung bei der ich lerne wie ich sowas in der Art machen kann?

    Sollte ungefähr so aussehen:
    Rahmen 1px mit #ccc und eine 4px hohen Balken mit #09f. Der blaue Balken (#09f) sollte dem Prozentsatz entsprechen, der über (?prozent=xx) in das Bild geladen wird. Zusätzlich sollte noch rechts daneben eine Zahl stehen (zB: xx%) auch in #ccc
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hallo limabone

    Vielleicht stehe ich hier nun völlig auf dem Schlauch ;-). Ich verstehe das so:
    Du möchtest also anzeigen, wie weit die Registrierung fortgeschritten ist. Dafür sehe ich 2 Varianten:

    1. Du zeigst etappenweise an, wie viele Formulare schon ausgefüllt wurden (z.B. 3 von 4 Formulare ausgefüllt = 75%). Bei dieser Methode kennst du ja beim Programmieren bereits, wie weit der Registrationsprozess fortgeschritten ist, deshalb würde ich hier einfach ein normales Bild einfügen.

    2. Du zeigst wie viele Datenfelder bereits ausgefüllt wurden innerhalb des Registrationsprozesses. Falls du dies so willst, kannst du dies nicht via PHP lösen, sondern nur mittels Javascript. Wie dies genau funktioniert weiss ich nicht.

    Damit dir hier aber jemand eine brauchbare Lösung vorschlagen kann, musst du zuerst deine Vorstellung präzisieren.

    Beste Grüsse
    Meron

  4. privatecitypage

    Kostenloser Webspace von privatecitypage

    privatecitypage hat kostenlosen Webspace.

    tipp benutze divs und ajax dann sollte es gehen.

    wenn du ein example brauchst kann ich dir ein zusammen stellen :)

    meinst du das soo?

    €dit: Code bekommst du späda über Pastebin :P

    Wichtig ist nur der Div Berei da kannste alles machen ;)



    Beitrag zuletzt geändert: 6.9.2010 18:09:19 von privatecitypage
  5. Die Frage ist, gehts dir darum, den Umgang mit gd-lib (zum Zeichnen von Grafiken) zu lernen oder effektiv um einen Ladebalken für deine Page?

    Wenn letzteres würde ich es nicht mit der gd-lib machen, weil da immer erst eine Grafik gezeichnet und diese eingebunden werden muss, was unnötig Resourcen frisst. Effektiver wäre es da, eine Grafik von 1 x 4 Pixel zu nehmen und diese den Prozent entsprechend zu erweitern.

    Siehe Beispiel:

    Ladebalken-Beispiel

    Das Beispiel kannst du über die Parameter in der URL steuern. "weite" ist die vollständige Breite des Balkens, "prozent" steuert, wie weit der Ladebalken angezeigt wird.
    Fürs Beispiel wären grade mal 4 Zeilen nötig:

    $prozent = $_GET['prozent'];
    $p_width = $_GET['weite'];
    $img_width = ($p_width / 100) * $prozent;
    echo "<div><p style='display: inline-block; border: 1px solid #ccc; padding:3px; height: 4px; width:".$p_width."px'><img src='balken.gif' height='4px 'width='".$img_width."'alt='' /></p> ".$prozent."%</div>";



    EDIT:
    Falls du dies so willst, kannst du dies nicht via PHP lösen, sondern nur mittels Javascript. Wie dies genau funktioniert weiss ich nicht.


    Wäre in Javascript fast genauso, da könnte man den Feldern einen eventhandler geben, zB onblur und damit eine funktion aufrufen, die kurz prüft, ob das Feld Inhalt hat und wenn ja die Weite der Balkengrafik ändern.

    Beitrag zuletzt geändert: 6.9.2010 18:11:06 von vertico
  6. Ich weiß nicht, aber hier ging es doch erstmal nur darum so eine Datei anhand der Prozentzahl zu erstellen. Um das Ajax und soweiter ging es doch garnicht oder? (vertigo ist da ausgenommen, da er grade geschrieben hatte als ich antworten wollte)
    Dafür einfach mal die GDfunktionen ansehen. Rechnen kannst du ja und Pixel. http://www.php.net/manual/de/ref.image.php
    Für dich wichtig sind die funktionen imagecreate, imagecolorallocate, imagefillrectangle und imagettftext. Die Farben müsen allerdings in dezimal RGB angegeben werden nicht hexadezimal.
    Beispiele sind da denke ich auch einige da. Prozent mit $_GET einfach auszulesen. einbindung müsste auch klar sein.
    dann viel Spaß.:thumb:

    Ansonsten kann ich aber vertigos Idee auch unterstützen.
  7. Dafür einfach mal die GDfunktionen ansehen. Rechnen kannst du ja und Pixel. http://www.php.net/manual/de/ref.image.php
    Für dich wichtig sind die funktionen imagecreate, imagecolorallocate, imagefillrectangle und imagettftext. Die Farben müsen allerdings in dezimal RGB angegeben werden nicht hexadezimal.
    Beispiele sind da denke ich auch einige da. Prozent mit $_GET einfach auszulesen. einbindung müsste auch klar sein.
    dann viel Spaß.:thumb:

    Ansonsten kann ich aber vertigos Idee auch unterstützen.


    ^^ Danke :-)
    Wie gesagt, kommt drauf an, ob es effektiv nur um einen Ladebalken oder ums Lernen von gd-lib geht. Mit der gd-lib würde er dafür um einiges mehr als 3-4 Zeilen benötigen. Fläche zeichnen, Farben festlegen, Rahmen zeichnen, Balken berechnen und zeichnen, Beschriftung erstellen, Header setzen, komplette Grafik zeichnen lassen, Speicher freigeben (Wenn ich alles noch richtig im Kopf habe)
    Wäre halt resourcenfressender wenns wohl auch wenig merkbar wäre aber Kleinvieh macht ja auch mist ^^

    PS: Warum schreiben mich bloß alle mit g statt c? xD

    Beitrag zuletzt geändert: 6.9.2010 18:19:07 von vertico
  8. Autor dieses Themas

    limabone

    Kostenloser Webspace von limabone

    limabone hat kostenlosen Webspace.

    Danke Vertico!
    Und natürlich auch den anderen ein liebes dankeschön.
    Genauso wie hier wollte ich das, danke dir!
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!