Hi,

ich habe folgendes Problem, bei dem auch nicht die FAQ´s oder Google helfen konnte:

es gilt einen Farbverlaufsbalken zu erstellen (von der Farbe grün hin zur Farbe rot, 100px breit, 10 px hoch), der mittels einer zu übergebenen Variablen ($belegung) die noch freien Plätze darstellt in einem Kurs darstellt.

Konkret bedeutet das:
1. Ist die Variable 100, so bedeutet das, dass der Kurs komplett belegt ist und der Farbbalken komplett dargestellt wird mit 100px und bis in den roten Bereich hinein.
2. Ist die Variable z. B. 50, so bedeutet das, dass der Kurs nur zur Hälfte belegt ist und der Fabbalken nur hälftig dargestellt wird mit 50 px, usw..

So soll Symbolisch auf den ersten Blick klar sein, inwieweit ein Kurs gebucht ist. Es soll ein Rahmen (1px) um den Balken in seiner gesamten Größe (100px x 10px) gezogen sein, auch wenn der Balken z. B. nur zur Hälfte oder so dargestellt wird.

So, ich habe folgenden Ansatz für den Farbverlaufsbalken, aber irgendwie schaffe ich nicht den Übergang von einer Farbe zur anderen:

PHP-Code:

function farbverlauf($belegung) {
   $verlauf = ImageCreateTrueColor($belegung,10);
   for($x=0; $x<$belegung; $x++) {
     ImageLine($verlauf, $x, 0, $x, 39, $x<<16);
   }
   ImagePNG(verlauf);
} 


Hat jemand einen Ansatz für mich, wie dies zu realisieren wäre?


Beste Grüße,
preko

Hier gibt es ein javascript tutorial dazu, ich hoffe es hilft dir weiter.

@ ROXON:

danke für den Hiweis, allerdings bin ich, wie im Titel meines Threads aufgeführt, auf PHP als Sprache festgelegt, da ich nicht riskieren kann, dass bei ausgeschaltetem JavaScript dieses Darstellungelement nicht angezeigt wird.

Kommentar:
Außerdem beschränkt sich das Tutorial auf Firefox und Opera, schließt aber den Internet Explorer, sprich ca. 75% oder mehr der Internetnutzer aus! Daher ist es wohl für eine breite Anwendung nicht geeignet.


Beste Grüße,
preko

Warum erstellt du die beiden Grafiken nicht in einem Bildbearbeitungsprogramm.

Und dann berechnest du wie breit beide Grafiken sein müssen.

PHP-Code:

<?
$max_teilnehmer = 44;
$cur_teilnehmer = 20;


// Breite Rotes Image
$breite_rot  =  $cur_teilnehmer/$max_teilnehmer * 100;

// Breite Grünes Image
$breite_gruen = 100-($cur_teilnehmer/$max_teilnehmer) * 100;


echo "<img src=\"red.gif\" height=\"10px\" width=\"{$breite_rot}px\" hspace=\"0\" vspace=\"0\" border=\"0\">";
echo "<img src=\"green.gif\" height=\"10px\" width=\"{$breite_gruen}px\" hspace=\"0\" vspace=\"0\" border=\"0\">";
?>

Dann muss die GDLib nichts machen, was sehr viel Serverresourcen spaart. Funktionierne tut es auch wunderbar auf allen systemen. Denn Breitenangaben in den Grafiken gehen ja schon wirklich seit Uhr-zeiten ,) Alternativ kannst du auch Div-Layer auf die Breiten ziehen und ihnen eben ein Hintergrundbild geben.

Wenn es generell nur 2 Farben sein sollen, kannst du auch einen Div-layer machen in Grün, mit Rahmen usw. Und dann mit dem Rot auffüllen. Das hier ausgerechnete sind Prozentangaben und dann mit width="{$breite_rot}%" arbeiten. Dann ist es sogar noch variabler was das Design angeht. Wenn du die Dinger dann irgendwann mal 200 Pixel breit haben möchtest.

Ich habe es mal nicht mit einem Verlauf, sondern einer Füllstandsanzeige gemacht.
Belegung in % (0-100)

PHP-Code:

function farbverlauf($belegung) {
   /* Bild erstellen */
   $verlauf = ImageCreateTrueColor(100,10);
   
   /* Hintergrund mit Mittelgrün RGB 0,200,0 füllen */
   $color = imagecolorallocate($verlauf,0,200,0);
   imagefilledrectangle($verlauf,0,0,100,10,$color);
   
   /* Abhängig von $belegung einen roten Balken (200,0,0) rüberzeichnen */
   $color = imagecolorallocate($verlauf,200,0,0)
   imagefilledrectangle($verlauf,0,0,$belegung,10,$color);

   /* Pseudoverlauf  -- 2 weitere Linien recht neben den roten Balken zeichnen */
if($belegung<100 and $belegung>0){
   $color = imagecolorallocate($verlauf,150,50,0);
   imageline($verlauf,$belegung+1,0,$belegung+1,10,$color);
   $color = imagecolorallocate($verlauf,50,150,0);
   imageline($verlauf,$belegung+2,0,$belegung+2,10,$color);
   }

   ImagePNG($verlauf);
   imagedestroy($verlauf);
} 


Idee von Michael ist auch super.

mfg chmee

Wen de kein js willst bekommst de php.
Ich hoffe der Code ist selbsterklärend, wen nicht dann
einfach fragen.

PHP-Code:

<?
$deinevariable ="100";//Von 0 – 100
$h=200; //Hohe des Farbverlaufes in Pixel 
//Falls die Höhe auch dynamisch sein soll „ $h=200 “ durch  „ $h= 200 / 100 *  $deinevariable “ ersetzen

$r = 255 / 100 * $deinevariable;
$g = 255 - $r;


$s  = array($r,$g,0); 
$e  = array(0,255,0); 

for ($i = 0; $i<$h; $i++) { 
    $c1 = max(0,$s[0]-((($e[0]-$s[0])/-$h)*$i)); 
    $c2 = max(0,$s[1]-((($e[1]-$s[1])/-$h)*$i)); 
    $c3 = max(0,$s[2]-((($e[2]-$s[2])/-$h)*$i)); 
     
    echo "<div style=\"clear:left; font-size:0px; top:".$i."px; left:0px; height:1px; width:50px; border:0px; background-color:rgb(".round($c1,0 ).", ".round($c2, 0).", ".round($c3,0 ).");\"></div>\n"; 
}
?>

Bitte.

@chmee, @ROXON:

Vielen Dank Euch beiden!


@ROXON:
Habe nun die Lösung von chmee ausprobiert, da diese zuerst da war - funktioniert prima.
Werde mich nun Deiner zuwenden um zu sehen, wie die funktioniert und sie mal mit der anderen vergleichen.


Beste Grüße,
preko

Offtopic:
Wir wollen uns hier verstärkt darum kümmern, dass beantwortete Themen
als Erledigt gekennzeichnet und hilfreiche Tipps bewertet werden.

Also preko, tue Deinen Dienst und hilf unserer Community

Gerne geschehen. mfg chmee