GÉNÉRER UNE PROGRESSBAR (BARRE DE PROGRESSION) EN FORMAT IMAGE

Signaler
Messages postés
25
Date d'inscription
mercredi 28 novembre 2007
Statut
Membre
Dernière intervention
21 février 2009
-
cs_gilbert1995
Messages postés
3
Date d'inscription
mercredi 28 juillet 2010
Statut
Membre
Dernière intervention
28 juillet 2010
-
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

cs_gilbert1995
Messages postés
3
Date d'inscription
mercredi 28 juillet 2010
Statut
Membre
Dernière intervention
28 juillet 2010

Modification considérable du script !!!

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
toutoos
Messages postés
56
Date d'inscription
mercredi 4 juin 2008
Statut
Membre
Dernière intervention
17 octobre 2009

Moi je trouve le script assez bien. Mais il est possible de le faire en js avec une combinaison de la balise

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.
tuckleberry
Messages postés
12
Date d'inscription
vendredi 15 juin 2007
Statut
Membre
Dernière intervention
11 janvier 2010

Ça me paraît pourtant évident.
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
marcelolipi
Messages postés
91
Date d'inscription
mercredi 15 novembre 2006
Statut
Membre
Dernière intervention
25 juillet 2011

salut tuckleberry

s-t-p argumente un peu tes écrits

quel en serrait la différence . SOIT plus explicatif