GÉNÉRER UNE PROGRESSBAR (BARRE DE PROGRESSION) EN FORMAT IMAGE
bentom32390
Messages postés
25
Date d'inscription
mercredi 28 novembre 2007
Statut
Membre
Dernière intervention
21 février 2009
-
16 mai 2009 à 07:10
cs_gilbert1995 Messages postés 3 Date d'inscription mercredi 28 juillet 2010 Statut Membre Dernière intervention 28 juillet 2010 - 30 sept. 2011 à 03:36
cs_gilbert1995 Messages postés 3 Date d'inscription mercredi 28 juillet 2010 Statut Membre Dernière intervention 28 juillet 2010 - 30 sept. 2011 à 03:36
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/50023-generer-une-progressbar-barre-de-progression-en-format-image
https://codes-sources.commentcamarche.net/source/50023-generer-une-progressbar-barre-de-progression-en-format-image
30 sept. 2011 à 03:36
Crée un fichier X.php
mettre ce code :
<?
function html2rgb($color)
{
if ($color[0] == '#')
$color = substr($color, 1);
if (strlen($color) == 6)
list($r, $g, $b) = array($color[0].$color[1],
$color[2].$color[3],
$color[4].$color[5]);
elseif (strlen($color) == 3)
list($r, $g, $b) = array($color[0].$color[0], $color[1].$color[1], $color[2].$color[2]);
else
return false;
$r hexdec($r); $g hexdec($g); $b = hexdec($b);
return array($r, $g, $b);
}
$img_width = $_GET["img_width"];
$img_height = $_GET["img_height"];
$color_txt = html2rgb($_GET["color_txt"]);
$color_face = html2rgb($_GET["color_face"]);
$color_border = html2rgb($_GET["color_border"]);
$color_backgrnd = html2rgb($_GET["color_backgrnd"]);
$taille_texte = $_GET["taille_texte"];
$valeur = $_GET["valeur"];
$valeur_max = $_GET["valeur_max"];
$arrondi = $_GET["arrondi"];
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
header('Content-Type: image/png');
imagepng ($im);
imagedestroy($im);?>
Pour l'appler on fait comme suit:
2 gros avantage
1. Utilisation de code de couleur html au lieux de RGB
2. Pas de fichier crée doc une réduction considérable des fichier sur le serveur
14 août 2009 à 23:26
De plus avec le procédé que j'utilise on peu faire un rapport avec le temps et on peu donc faire évoluer la barre de progression en direct sur l'écran sans rechargement de la page ou de l'image.
La méthode est même plus légère et plus simple d'utilisation. et en gardant ton principe d'afficher le pourcentage en y ajoutant un petit Div de fond affichant le temps et en faisant varier la barre on a le possibilité de garder un texte visible. Enfin pour les personnes intéressée vous pouvez me MP et je vous prépare une petite source.
9 juil. 2009 à 11:32
La boucle dessine un ensemble de lignes côte à côte pour remplir une zone rectangulaire, alors qu'il existe déjà une commande graphique pour dessiner un rectangle plein.
Donc :
1) c'est plus rapide parce que c'est une commande graphique intégrée
2) c'est plus lisible et on comprends tout de suite ce qui se dessine en lisant le code
8 juil. 2009 à 18:47
s-t-p argumente un peu tes écrits
quel en serrait la différence . SOIT plus explicatif
8 juil. 2009 à 17:38
for ($i = 0; $i < $pos_pourcent; $i++)
imageline($im, $i, 0, $i, $img_height, $color_face);
}
par un simple :
imagefilledrectangle ( $im, 0, 0, $pos_pourcent-1, $img_height, $color_face )
?
2 juin 2009 à 14:33
@marcelolipi => si tu change le nom de l'image à chaque fois, çà devrait le faire.
18 mai 2009 à 14:33
chaque fois un nouveau fichier est creer en écrasant le précédent (avec $valeur differente de la précédente.)
mais j'ai l'impression que la premiere image est gardé en mémoire et que le script ne charge plus les images suivantes.
J'ai don essayé d'utiliser header("Cache-Control: no-cache, must-revalidate"); et header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); pour le cache mais aucun changement.
je pense que je dois orienter ma recherche vers un autre sens du genre :< br/>EXECUTER-SCRIPT-APRES-CERTAIN-DELAI et apres je pourrais resoudre ce problème
18 mai 2009 à 14:07
Sinon, si tu veux vraiment faire un mouvement fluide, tu devrais peut-être te pencher sur un objet flash.
18 mai 2009 à 12:38
merci pour ta source .Elle me serrait particulierrement utile.mais il me reste un souci .j'aimerais que les internautes aient l'impression de voir un progres effectif ($valeur doit progresser dynamiquement).
j'aimerais savoir si quelqu'un a une possibilité
18 mai 2009 à 07:04
16 mai 2009 à 12:51
16 mai 2009 à 09:27
16 mai 2009 à 09:26
//---- 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à
16 mai 2009 à 07:10