Générer une progressbar (barre de progression) en format image

Soyez le premier à donner votre avis sur cette source.

Snippet vu 10 669 fois - Téléchargée 20 fois

Contenu du snippet

Cette source est plutôt destinée à être utilisée pour afficher des états d'avancements de projets, l'avancement de dons comme on peut trouver sur certains sites. Pour résumer, ça sert pour des choses qui avancent doucement.
Donc pour utiliser cette source, il faut placer le code ci-dessous dans un fichier php que vous inclurez dans les pages qui devront utiliser la fonction. Ensuite, il suffit d'appeler la dite fonction et de mémoriser l'emplacement du PNG généré pour l'afficher.
On peut tout paramétrer, taille de l'image, les couleurs des différents éléments. Le pourcentage affiché est centré automatiquement.

La fonction retourne TRUE ou FALSE en fonction du résultat de la création d'image.

Merci à ceacy pour sa source http://www.phpcs.com/codes/SIGNATURE-DYNAMIQUE-PNG_22269.aspx dont je me suis inspiré (il en reste plus grand chose!)

Source / Exemple :


//---- fichier img.progressbar.php
<?php
/*
	Permet de générer une image du type progressbar
	Merci à ceacy pour sa source http://www.phpcs.com/codes/SIGNATURE-DYNAMIQUE-PNG_22269.aspx dont je me suis inspiré (il en reste plus grand chose!)
	
	$img_width = largeur de l'image
	$img_height = hauteur de l'image
	$color_txt = couleur texte
	$color_face = couleur de la partie correspondant au pourcentage
	$color_border = couleur de bordure
	$color_backgrnd = couleur de fond
	$taille_texte = taille du texte compris entre 1 et 5
	$valeur = la valeur virtuelle du pourcentage
	$valeur_max = la valeur virtuelle maxi du pourcentage (virtuel signifie qu'on peut entrer des valeurs comme 1/3, 18/20 ou 421/6854; les pourcentages (sur 100) sont calculé après
	$arrondi = nombre de chiffres après la virgule (peut être = 0)
	$nom_fichier = chemin (relatif) où enregistrer l'image

  • /
function générer_progressbar($img_width, $img_height, $color_txt, $color_face, $color_border, $color_backgrnd, $taille_texte, $valeur, $valeur_max, $arrondi, $nom_fichier){ switch ($taille_texte){ //va permettre de centrer le texte en fonction de la taille du texte choisie case 1: $largeur_caractere = 5; $hauteur_caractere = 7; break; case 2: $largeur_caractere = 6; $hauteur_caractere = 10; break; case 3: $largeur_caractere = 7; $hauteur_caractere = 12; break; case 4: $largeur_caractere = 8; $hauteur_caractere = 13; break; case 5: $largeur_caractere = 9; $hauteur_caractere = 14; break; } if ($valeur === -1){ $pourcent = 0; $str_pourcent = "Aucun parametre !"; } else { $pourcent = $valeur * 100 / $valeur_max; //calcul du vrai pourcentage (sur 100) $str_pourcent = number_format($pourcent, $arrondi, ',', ' '); //met en forme le pourcentage } $len_pourcent = strlen($str_pourcent) + 1; //on récupère le nombre de caractères tu texte qui sera affiché (le +1 c'est parce qu'on ajoutera le sigle %) $pos_pourcent = $pourcent * $img_width / 100; //calcul de la partie à colorer en fonction de la taille de l'image $im = @imagecreate($img_width, $img_height) or die ("Impossible d'initialiser la librairie GD"); // Fond et couleur de texte imagecolorallocate($im, $color_backgrnd[0], $color_backgrnd[1], $color_backgrnd[2]); // background $color_border = imagecolorallocate($im, $color_border[0], $color_border[1], $color_border[2]); //conversion des couleurs $color_face = imagecolorallocate($im, $color_face[0], $color_face[1], $color_face[2]); //conversion des couleurs for ($i = 0; $i < $pos_pourcent; $i++){ //boucle pour colorer la partie correspondant au pourcentage imageline($im, $i, 0, $i, $img_height, $color_face); } imageline($im, 0, 0, $img_width, 0, $color_border); // Bordure horizontale supérieure imageline($im, 0, 0, 0, $img_height, $color_border); // Bordure verticale de gauche imageline($im, 0, $img_height-1, $img_width-1, $img_height-1, $color_border); // Bordure horizontale inférieure imageline($im, $img_width-1, 0, $img_width-1, $img_height-1, $color_border); // Bordure verticale de droite // Texte $posX_str_pourcent = ($img_width - $len_pourcent * $largeur_caractere) / 2; //calcule la position X du texte $posY_str_pourcent = ($img_height - $hauteur_caractere) / 2; //calcule la position Y du texte if ($valeur === -1){ imagestring ($im, $taille_texte, $posX_str_pourcent, $posY_str_pourcent, $str_pourcent, imagecolorallocate($im, $color_txt[0], $color_txt[1], $color_txt[2])); } else { //bool imagestring ( resource $image , int $font , int $x , int $y , string $string , int $color ) imagestring ($im, $taille_texte, $posX_str_pourcent, $posY_str_pourcent, $str_pourcent. "%", imagecolorallocate($im, $color_txt[0], $color_txt[1], $color_txt[2])); } // Création du PNG return imagepng ($im, $nom_fichier, 0, NULL); } ?> //----- à mettre dans vos script pour appeler la fonction <?php //inclure la fonction include("img.progressbar.php"); //pour générer une image (c'est un exemple) générer_progressbar(300, 20, array("231", "231", "231"), array("221", "105", "0"), array("210", "169", "0"), array("48", "48", "57"), 3, 52, 100, 2, "./test.png"); //pour afficher l'image (en fait il suffit de placer une balise image classique) echo "<img src=\"./test.png\" border=\"0\" alt=\"Impossible d'afficher l'image\" /><br>\n"; ?>

Conclusion :


Bien évidement il faut que la librairie GD soit installée sur le serveur.

A voir également

Ajouter un commentaire

Commentaires

bentom32390
Messages postés
25
Date d'inscription
mercredi 28 novembre 2007
Statut
Membre
Dernière intervention
21 février 2009
-
manque les sources
lefter
Messages postés
63
Date d'inscription
lundi 7 juin 2004
Statut
Membre
Dernière intervention
16 mai 2009
-
Il ne manque rien :

//---- fichier img.progressbar.php --//
<?php
/*
Permet de générer une image du type progressbar
Merci à ceacy pour sa source http://www.phpcs.com/codes/SIGNATURE-DYNAMIQUE-PNG_22269.aspx dont je me suis inspiré (il en reste plus grand chose!)

$img_width = largeur de l'image
$img_height = hauteur de l'image
$color_txt = couleur texte
$color_face = couleur de la partie correspondant au pourcentage
$color_border = couleur de bordure
$color_backgrnd = couleur de fond
$taille_texte = taille du texte compris entre 1 et 5
$valeur = la valeur virtuelle du pourcentage
$valeur_max = la valeur virtuelle maxi du pourcentage (virtuel signifie qu'on peut entrer des valeurs comme 1/3, 18/20 ou 421/6854; les pourcentages (sur 100) sont calculé après$arrondi nombre de chiffres après la virgule (peut être 0)
$nom_fichier = chemin (relatif) où enregistrer l'image
*/
function générer_progressbar($img_width, $img_height, $color_txt, $color_face, $color_border, $color_backgrnd, $taille_texte, $valeur, $valeur_max, $arrondi, $nom_fichier){
switch ($taille_texte){ //va permettre de centrer le texte en fonction de la taille du texte choisie
case 1:
$largeur_caractere = 5;
$hauteur_caractere = 7;
break;
case 2:
$largeur_caractere = 6;
$hauteur_caractere = 10;
break;
case 3:
$largeur_caractere = 7;
$hauteur_caractere = 12;
break;
case 4:
$largeur_caractere = 8;
$hauteur_caractere = 13;
break;
case 5:
$largeur_caractere = 9;
$hauteur_caractere = 14;
break;
}
if ($valeur === -1){
$pourcent = 0;
$str_pourcent = "Aucun parametre !";
} else {
$pourcent = $valeur * 100 / $valeur_max; //calcul du vrai pourcentage (sur 100)
$str_pourcent = number_format($pourcent, $arrondi, ',', ' '); //met en forme le pourcentage
}

$len_pourcent = strlen($str_pourcent) + 1; //on récupère le nombre de caractères tu texte qui sera affiché (le +1 c'est parce qu'on ajoutera le sigle %)
$pos_pourcent = $pourcent * $img_width / 100; //calcul de la partie à colorer en fonction de la taille de l'image
$im = @imagecreate($img_width, $img_height) or die ("Impossible d'initialiser la librairie GD");
// Fond et couleur de texte
imagecolorallocate($im, $color_backgrnd[0], $color_backgrnd[1], $color_backgrnd[2]); // background
$color_border = imagecolorallocate($im, $color_border[0], $color_border[1], $color_border[2]); //conversion des couleurs
$color_face = imagecolorallocate($im, $color_face[0], $color_face[1], $color_face[2]); //conversion des couleurs

for ($i = 0; $i < $pos_pourcent; $i++){ //boucle pour colorer la partie correspondant au pourcentage
imageline($im, $i, 0, $i, $img_height, $color_face);
}

imageline($im, 0, 0, $img_width, 0, $color_border); // Bordure horizontale supérieure
imageline($im, 0, 0, 0, $img_height, $color_border); // Bordure verticale de gauche
imageline($im, 0, $img_height-1, $img_width-1, $img_height-1, $color_border); // Bordure horizontale inférieure
imageline($im, $img_width-1, 0, $img_width-1, $img_height-1, $color_border); // Bordure verticale de droite
// Texte
$posX_str_pourcent = ($img_width - $len_pourcent * $largeur_caractere) / 2; //calcule la position X du texte
$posY_str_pourcent = ($img_height - $hauteur_caractere) / 2; //calcule la position Y du texte
if ($valeur === -1){
imagestring ($im, $taille_texte, $posX_str_pourcent, $posY_str_pourcent, $str_pourcent, imagecolorallocate($im, $color_txt[0], $color_txt[1], $color_txt[2]));
} else {
//bool imagestring ( resource $image , int $font , int $x , int $y , string $string , int $color )
imagestring ($im, $taille_texte, $posX_str_pourcent, $posY_str_pourcent, $str_pourcent. "%", imagecolorallocate($im, $color_txt[0], $color_txt[1], $color_txt[2]));
}
// Création du PNG
return imagepng ($im, $nom_fichier, 0, NULL);
}
?>

//----- à mettre dans vos script pour appeler la fonction
<?php
//inclure la fonction
include("img.progressbar.php");

//pour générer une image (c'est un exemple)
générer_progressbar(300, 20, array("231", "231", "231"), array("221", "105", "0"), array("210", "169", "0"), array("48", "48", "57"), 3, 52, 100, 2, "./test.png");

//pour afficher l'image (en fait il suffit de placer une balise image classique)
echo "
\n";
?>

Le fichier test.png doit être générer par le fichier img.progressbar.php, donc tout est là
lefter
Messages postés
63
Date d'inscription
lundi 7 juin 2004
Statut
Membre
Dernière intervention
16 mai 2009
-
Il ne manque que les paramètres de création de l'image elle-même.
cs_Tioneb
Messages postés
193
Date d'inscription
dimanche 16 décembre 2001
Statut
Membre
Dernière intervention
29 juillet 2015
-
LEFTHER: Que veux-tu dire par "Il ne manque que les paramètres de création de l'image elle-même." ? Tu veux dire de pouvoir choisir le format de l'image comme du jpg ou gif? Si c'est le cas, ce n'est pas bien compliqué de l'intégrer. Mais faut savoir que si on génère un jpg, on risque d'avoir de la perte de qualité, et je crois, une image plus grosse (enfin pour cette utilisation).
simonviei
Messages postés
17
Date d'inscription
jeudi 13 avril 2006
Statut
Membre
Dernière intervention
1 décembre 2008
-
On ne met pas d'accent dans la déclaration de fonction.

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.