Menü

Login

Aktuelle Version

Forum > Anmeldestatus *

DOTLAN Intranet / Portal >> Konfiguration, Erweiterungen, Addons > Anmeldestatus
 Antwort erstellen
Autor Thema: Anmeldestatus
Funstar
29.11.2005 um 13:06 QuoteProfileSend PM
NEW

Clan: Freaknet
Postings: 124

Funstar
Gibt es irgendwo ein HowTo, wie man eine Anmeldestatusanzeige wie z. B. auf http://www.thezenith.de/ oder http://www.junien.de/ erstellen kann? So mit einer dynamischen Grafik?
__________________
https://www.freaknet.de/
 
[LF]Demonhunter
29.11.2005 um 21:57 QuoteProfileSend PM
NEW

Clan: LANd-Forces e.V.
Postings: 173

[LF]Demonhunter
[EDIT:] Habe das ganze nochmal komplett überarbeitet, es sind nun 3 Versionen, die ihr unabhängig benutzen könnt, je nach Vorwissen und Möglichkeiten auf eurem Server![/EDIT]

[EDIT:]Beim Bierglas zeigt jetzt der Schaum die "nur" angemeldeten, daher ein paar Änderungen![/EDIT]

~~~ 1. Möglichkeit: Die DIV-Geschichte ~~~
Die Zenith-Flasche nachzuahmen ist auch mit HTML-Boardmitteln "relativ" easy (ohne irgendwelche libs, als "Einsteigerversion", natürlich auch nicht so schön!)

Zuerst malst du dir eine Grafik (in dem Fall die Flasche) und machst du Mitte transparent (also da wo die Füllung rein soll). Dann noch eine 1px*1px-Grafik der Flaschenfüllung.

Dann misst du die Pixel der Flasche bis oben und nimmst die Teilnehmerzahl und errechnest dann, wie viele Teilnehmer ein Pixel Flaschenfüllung sind. ($anz_maximal / $pixel_flasche) Damit weisst du, wie viele Teilnehmer es für einen Pixel braucht.

Jetzt teilst du die Anzahl der aktuellen Teilnehmer ganzzahlig durch die gerade errechnete Zahl floor($anz_bezahlt (oder eben $anz_angemeldet) % $gerade_errechnete_zahl). Damit hast die Anzahl der Pixel die dargestellt werden sollen.

Jetzt kommen 2 DIVs ins Spiel, die sollten beide an der gleichen position sitzen. der einfachheit halber habe ich 0:0 genommen, du kannst sie aber auch woanders hinsetzen... das ganze sieht dann so aus:

Zitat:
<div style="position: absolute; left: 0px; top: $pixel_flasche-$errechnete_pixel"><img src="fuellung.gif" width="42" height="$errechnete_pixel" alt="" border="0"></div>
<div style="position: absolute; left: 0px; top: 0px;"><img src="bezahlt.gif" width="42" height="$pixel_flasche" alt="" border="0"></div>


Quick'n'Dirty, aber tut ohne lib oder ähnliches. Zur Verdeutlichung: http://www.land-forces.de/_flaschen...he.php?pixel=70 (pixel gibt die Höhe der Füllung an, ich rechne nicht, sondern gebe den Wert direkt ein). Sicherlich hätte ich die Flasche noch halbtransparent machen können o.ä. aber im Grunde - it does the trick!

~~~ 2. Möglichkeit: Die GDLib-Einsteiger-Version ~~~

Mit der GD-Lib, die bei PHP meist mitkompiliert ist, hat man die Sache noch netter lösbar. Statt mit DIVs zu handtieren, die man kompliziert übereinander schiebt, "malt" man sich hier ein Bild von seinem Füllstand. Eigentlich sind der Fantasie keine Grenzen gesetzt, ich habe einfach mal ein Bierglas genommen.

Der Einfachheit halber besteht mein Tut aus zwei Dateien. Damit kann man hinterher problemlos die inhalte der index.php in seinen eigenen dotLAN-Style einbauen, wenn das Glas gefällt Die Bild-erzeugende Datei heisst bierglas.php, die aufrufende heisst index.php.

Zuerst habe ich mit das Glas genommen und in dem Bildbearbeitungprogramm meiner Wahl das Bier vom Glas und den Schaum vom Bier getrennt, so dass ich einmal ein leeres Glas und einmal den passenden Inhalt habe. Da ein leeres Glas keine goldenen Bodenreflektionen hat, habe ich eine zweite - graustufige - Version des Glases gemacht. Achtung: Damit es später perfekt wird (und nach 6 Bier mutiere ich zum perfekten Perfektionisten ) mache ich nicht nur das Glasinnere transparent, sondern auch den kompletten oberen Rand weg. Von diesem speichere ich den hinteren Rand einzeln, den vorderen merge ich wieder mit dem Glas - warum wird gleich noch erklärt.

Ich habe also jetzt 5 Dateien:


glas_bg.gif / glas_bg2.gif / bier.gif / schaum.gif / rand_hinten.gif

Bitte nicht wundern, dass auch die Rand-Datei die Ausmaße des Bieres hat, anders wäre es zu kompliziert mit dem Tut

Jetzt geht es ans Programmieren. Zuerst einmal habe ich dem Bild die Daten der Anmeldung übergeben, falls es einer mal braucht, errechne ich auch noch die nicht bezahlten:

Meine Datei soll zudem ein jpeg-Bild werden, daher die Header-Angabe.

Code:
header("Content-type: image/jpeg");



$anz_maximal = $_GET['anz_maximal'];

$anz_angemeldet = $_GET['anz_angemeldet'];

$anz_bezahlt = $_GET['anz_bezahlt'];

$anz_frei = $_GET['anz_frei'];


$anz_nichtbezahlt = $anz_angemeldet-$anz_bezahlt;[/code]

Dann gebe ich der Seite an, wie viele Pixel mein Glas hat und errechne für wieviele Teilnehmer ein Pixel steht. Dann errechne ich wie hoch der Füllstand der Bezahlten sein wird. Wichtig hier: Die 42 Extra-Pixel gleichen den Rand aus, der oben immer sein muss, damit volle Party= schönes Bier mit Schaum! (Für spätere Zwecke errechne ich auch die Pixelanzahl der Nur-Angemeldeten!)

Code:
$pixel_glas = 240;

$teilnehmer_pro_pixel = $anz_maximal / $pixel_glas;



$pixel_bezahlt = floor($anz_bezahlt / $teilnehmer_pro_pixel) + 42;

if($pixel_glas-$pixel_bezahlt < 0)

	$pixel_bezahlt = floor($anz_bezahlt / $teilnehmer_pro_pixel);

$pixel_angemeldet = floor($anz_angemeldet / $teilnehmer_pro_pixel);


Danach lade ich die einzelnen Bilder in GD-Bild-Objekte mit denen ich später arbeiten kann. Wenn mehr als 40 Pixel Bier-Bild zu sehen sind (die ersten gelben/goldenen Pixel) nehme ich den gelben Glasboden, ansonsten den transparenten (weissen).

Code:
if($pixel_bezahlt < 40)

	$img_bierglas = imagecreatefromgif("glas_bg.gif"); //Das Bierglas drumherum

else

	$img_bierglas = imagecreatefromgif("glas_bg2.gif"); //Das Bierglas drumherum

$img_inhalt_schaum = imagecreatefromgif("schaum.gif"); //Das eigentliche Bier

$img_inhalt = imagecreatefromgif("bier.gif"); //Das eigentliche Bier

$img_randhinten = imagecreatefromgif("rand_hinten.gif"); // Der hintere Teil vom oberen Glasrand


Jetzt bestimme ich schnell die Höhe und Breite des Bildes, das könnte ich auch statisch machen, so kann ich aber evtl. die Bilder ändern, ohne gross an den Quellcode zu müssen.

Code:
$width_bierglas = imagesx($img_bierglas);

$height_bierglas = imagesy($img_bierglas);


Anschliessend erzeuge ich ein neues Bild im Speicher erzeugen und fülle es mit weisser Hintergrundfarbe

Code:
$img_speicher = imagecreatetruecolor($width_bierglas, $height_bierglas);

$color = ImageColorAllocate($img_speicher, 255, 255, 255); 

imagefill($img_speicher, 0, 0, $color);


Daraufhin fange ich an auf der Zeichenfläche rumzumalen: Zuerst painte ich den hinteren Glasrand. Das liegt einfach daran, dass es sein kann, dass das Bier über die 90%-Marke geht. Dann sieht man den hinteren Rand nicht mehr (er wird vom Bier überdeckt). Es folgt das Bier und das Glas, welches unten wiederrum das überstehende Bier verdeckt.

Code:
ImageCopy($img_speicher, $img_randhinten, 0, 0, 0, 0, $width_bierglas, $height_bierglas);

ImageCopy($img_speicher, $img_randhinten, 0, 0, 0, 0, $width_bierglas, $height_bierglas);

ImageCopy($img_speicher, $img_inhalt_schaum, 0, ($pixel_glas-$pixel_angemeldet), 0, 0, $width_bierglas, $height_bierglas);

ImageCopy($img_speicher, $img_inhalt_bier, 0, ($pixel_glas-$pixel_bezahlt), 0, 0, $width_bierglas, $height_bierglas);

ImageCopy($img_speicher, $img_bierglas, 0, 0, 0, 0, $width_bierglas, $height_bierglas);


Wenn jetzt jemand nicht die Originalgröße des Bildes braucht, kann er eine Variable $_GET['bildhoehe'] mitgeben. Ist diese gesetzt, wird das Bild zur Qualitätssteigerung resampled und mit der neuen Größe erzeugt. Das Glas hat das Verhältnis 2,5:1, da ich nur die Höhe angeben kann, errechnet sich die Breite automatisch.

Habe ich keine bildhoehe angegeben, wird das Bild mit den Standard-Maßen ausgegeben.

Code:
if(isset($_GET['bildhoehe'])) {

	// Wenn andere Ausgabegroessen gewünscht sind, hier schnell nochmal resamplen...

	$img_ausgabe = imagecreatetruecolor(($_GET['bildhoehe']*0.4), $_GET['bildhoehe']);

	imagecopyresampled ($img_ausgabe, $img_speicher, 0, 0, 0, 0, ($_GET['bildhoehe']*0.4), $_GET['bildhoehe'], $width_bierglas, $height_bierglas);

	imagejpeg($img_ausgabe);

}

else {

	// ...ansonsten eifach ausgeben

	imagejpeg($img_ausgabe);

}


Zuletzt wird noch der Speicher freigeschaufelt:

Code:
imagedestroy($img_speicher);

imagedestroy($img_bierglas);


Das ganze rufe ich nun in meiner /html/templates/<styleName>/box/box_event.tpl auf:

Code:


<img src="/<meinVerzeichnis>/bierglas.php?bildhoehe=170&anz_maximal={$anz_maximal}&anz_angemeldet={$anz_angemeldet}&anz_bezahlt={$anz_bezahlt}&anz_frei={$anz_frei}" alt="Füllstand" border="0">


Am Ende haben wir ein nettes Bild wie hier -> www.LANd-Forces.de (rechte Seite)

~~~ 3. Möglichkeit: Die GDLib-Profi-Version ~~~

... hier folgt die Möglichkeit mit der GDLib so nette Spiele wie Kuchengrafiken zu erstellen!

[Editiert von [LF]Demonhunter am 01.Dec.2005 um 21:47]
__________________
[LF]Demonhunter
Team LANd-Forces e.V.
LAN-Partys im Ruhrgebiet


 
Metus
01.12.2005 um 18:40 QuoteProfileSend PM
NEW

Clan: Zocker Group Siegen e.V.
Postings: 244

Wow, super Anleitung, vielen Dank!
@Demonhunter: Haben wir uns eigentlich auf der Junien getroffen? Mein Personengedächtnis ist so lausig...
 
[LF]Demonhunter
01.12.2005 um 21:37 QuoteProfileSend PM
NEW

Clan: LANd-Forces e.V.
Postings: 173

[LF]Demonhunter
Kann schon sein, ich bin der mit dem so alten .LAN gewesen, dass er eh nicht mitreden konnte
__________________
[LF]Demonhunter
Team LANd-Forces e.V.
LAN-Partys im Ruhrgebiet


 
[ Antwort erstellen ]