Quiz Fortschrittsbalken PHP/GD (mdQuizbar)

Quizbar Präsentation Eine kleine Idee von mir war es, einen Fortschrittsbalken z.B. für ein Quiz zu erstellen, der anzeigt, an welcher Stelle des Quiz man sich befindet und das mit möglichst einfachen Mitteln.

Es funktioniert über simple Bildmanipulation, wofür wir auch die GD Lib benötigen. Kernstück dieses Beispiel ist ein abgerundetes Rechteck, welches im Innern Transparent/Halbtransparent ist. Dieses Bild legen wir über ein vorher ausgefülltes Bild auf das auch die Markierungen für die Abstände des Fortschritts gezeichnet werden. Danach wird das Bild mit dem abgerundeten Rechteck über dieses erzeugte Bild gelegt und bildet somit einen netten Fortschrittsbalken.

Update:

- Die Grafik wurde auf das nötigste minimiert

- Größe der generierten Grafik wird automatisch ausgelesen

Hier der Code, den wir für das Beispiel verwenden:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


/* how many steps have been done - dynamic */
$barPosition = 3;
/* Startposition where the overlaybar (first pixel) is transparent */
$startPosPX = 2;
/* Position where the last pixel of the overlay ist transparent */
$endPosPX = 294;
/* How many steps are available */
$steps = 15;
/* Width of the stepbreaker in pixel. 0=Very thin */
$stepsWidth = 0;//px

/* Colorsettings */
$backgroundColor 	 = array( 230 , 228 , 216 );
$BarColor 			 = array( 125 , 218 , 18  );
$BarBreakColorDone 	 = array( 106 , 172 , 18  );
$BarBreakColorEnd 	 = array( 50  , 82  , 8   );
$BarBreakColorUndone = array( 140 , 139 , 132 );

/* DONT EDIT ANYTHING BELOW */
$totalBarWidth = $endPosPX - $startPosPX;
$abstand = $totalBarWidth/($steps);

$overlay = imagecreatefrompng("bar_top_layer.png");
$im = @ImageCreatetruecolor (imagesx($overlay), imagesy($overlay));

imagefilledrectangle($im,0,0,imagesx($overlay),imagesy($overlay),imagecolorallocate($im,$backgroundColor[0],$backgroundColor[1],$backgroundColor[2] ));
imagefilledrectangle ($im,0,0,($barPosition*$abstand)+$startPosPX,imagesy($overlay),imagecolorallocate($im,$BarColor[0],$BarColor[1],$BarColor[2]));

for($x=0;$x<$steps-1;$x++)
{
	$einz = $startPosPX + $abstand*($x+1);
	if($x>$barPosition-1){
		$BarBreakColor = $BarBreakColorUndone;
	}elseif($x==$barPosition-1){
		$BarBreakColor = $BarBreakColorEnd;
	}else{
		$BarBreakColor = $BarBreakColorDone;
	}
	imagefilledrectangle($im,$einz,0,$einz+$stepsWidth,imagesy($overlay),imagecolorallocate($im, $BarBreakColor[0],$BarBreakColor[1],$BarBreakColor[2]));
}

ImageCopy($im,$overlay , 0  , 0  ,0  , 0  , imagesx($overlay)  , imagesy($overlay));
header("Content-type: image/png");
imagepng($im);

Hier noch eine Beschreibung zu den Variablen im Script:

Einen Download gibt es hier: MDQuizbar.zip

Wie immer, ich übernehme keine Garantie für die Sicherheit dieses Scripts und hafte nicht für Schäden