Barres paramétrables en dégradé de couleur et avec texte dans la barre (par exemple pour les résultats d'un sondage)

Commenter

Contenu du snippet

Une petite fonction de création de barres de couleur (rvb) avec un affichage en dégradé.

Je me suis très fortement inspiré de la très bonne source http://www.phpcs.com/codes/DEGRADE_23470.aspx
sauf que j'ai remplacé l'appel de la page (avec des passages de variables en GET moyennement sécurisé, hum) par une fonction appelable depuis votre code php, avec par exemple en paramètres, les valeurs résultats d'un sondage, et ajouter la possibilité de mettre un texte en surimpression de l'image.

Seule contrainte: il faut activer la librairie GD2 de PHP. (facile à faire sous WAMP ou LAMP)

Source / Exemple : 


function CreateImageFade(

// bar length and height for 100% with a reduction ratio (for example, $percent result of the poll)
$base_x=550, $ratio_x=100, $base_y=25, $ratio_y=100,

// color 1 for fading source
$red1, $green1, $blue1,

// color 2 for fading target
$red2, $green2, $blue2,									

// 1 for horizontal fade (direction x), 1 for vertical fade (direction y), 1 for diagonal fade (direction xy)
$fade_direction,										

// text content and size/position parameters
$text, $text_offset_x, $text_offset_y, $text_size=2,

// image file (format png) to be saved as result
$path_to_root_file_img, $debug=false) {
// -----------------------------------------------
// SOURCES & documentation
// http://www.phpcs.com/codes/DEGRADE_23470.aspx

	// File.extension
	$file_img_bar	= $path_to_root_file_img ;

	// Init: vérif des min/max des couleurs rvb et ratio
	$red1	= (($red1 <= 255) && ($red1 >= 0))? $red1	: 255 ;
	$green1	= (($green1 <= 255) && ($green1 >= 0))?	$green1	: 255 ;
	$blue1	= (($blue1 <= 255) && ($blue1 >= 0))? $blue1	: 255 ;

	$red2	= (($red2 <= 255) && ($red2 >= 0))?	$red2	: 23 ;
	$green2	= (($green2 <= 255) && ($green2 >= 0))?	$green2	: 23 ;
	$blue2	= (($blue2 <= 255) && ($blue2 >= 0))?	$blue2	: 230 ;
	
	$ratio_x = (($ratio_x > 0) && ($ratio_x <= 100))? $ratio_x : 5 ;
	$ratio_y = (($ratio_y > 0) && ($ratio_y <= 100))? $ratio_y : 5 ;
	
		
	$c1 = array('r' => $red1, 'v' => $green1, 'b' => $blue1);
	$c2 = array('r' => $red2, 'v' => $green2, 'b' => $blue2);

	$bar_x	= $ratio_x * $base_x / 100 ;
	$bar_y	= $ratio_y * $base_y / 100 ;

	 switch ($fade_direction)  {
		 case 1 : $t = $bar_x; 			break;
		 case 2 : $t = $bar_y;			break;
		 case 3 : $t = $bar_x + $bar_y;         break;
		 default: $t = $bar_x; 			break;
	 }
	 
	 // DEBUG
	 if ($debug) {
		echo "<br/>DEBUG: long_x = $bar_x, long_y = $bar_y";
	 }
	 
	// Création de l'image
	$img	= imagecreatetruecolor($bar_x, $bar_y);
	$white	= imagecolorallocate($img, 255, 255, 255);		// couleur du fond
 
	// Dégradé : on dessine une ligne verticale, horizontale ou diagonale pour chaque pixel entre 0 et $t
	for ($i=0; $i < $t ; $i++)  {
	
		$r = $c1['r'] + $i * ($c2['r'] - $c1['r']) / $t;
		$v = $c1['v'] + $i * ($c2['v'] - $c1['v']) / $t;
		$b = $c1['b'] + $i * ($c2['b'] - $c1['b']) / $t;
		
		$c = imagecolorallocate($img, $r, $v, $b);
		
		switch ($fade_direction) {
			case 1 : imageline($img, $i, 0, $i, $bar_y, $c); break;
			case 2 : imageline($img, 0, $i, $bar_x, $i, $c); break;
			case 3 : imageline($img, max(0,($i-$bar_y)), min($i,$bar_y), min($i,$bar_x), max(0,($i-$bar_x)), $c); break;
		}
	}

	// Ajout du texte
	$white	= imagecolorallocate($img, 255, 255, 255);			// couleur du texte affiché sur l'image
	imagestring($img, $text_size,  $bar_x - $text_offset_x , $bar_y - $text_offset_y , $text , $white);
	
	 // Sauvegarde de l'image au format png
	 imagepng($img, $file_img_bar);
	 imagedestroy($img);
 
 return $file_img_bar;
 
} /* fin de CreateImageFade */

Conclusion :


Exemple d'appel de la fonction depuis votre code php:

$text="50% de oui";
$percent=50;
$img = CreateImageFade($base_x=550, $ratio_x=$percent, $base_y=25, $ratio_y=100, $red1=230, $green1=230, $blue1=255, $red2=0, $green2=0, $blue2=255, $fade_direction=3, $text, $offset_x= 40, $offset_y=20, $text_size=2, $file_img, $debug=false);

echo '<br/><img src="'. $img . '"/></br>';

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_hornetbzz)