barre de progression

[rollerman]

bonjour.

j'aimerais faire une barre de progression avec un pourcentage voir ici (tout en bas) mai je n'y arrive pas (je debute en php ).

j'ai donc essayer quelque script dont celui ci c'est exactement ce que je veu mai il fo rentrer un endroi x,y (les pixel de l'ecran) ou l'on veut qu'il s'affiche et si la resolution change ça ne colle plus.

j'ai essayer de le modifier un peu mais la barre n'est plus en face du texte (elle est en dessou).

si quelqu'un pouvait m'aider.

merci

[an0nyme]

tu le fait comment? avec gd ?

[rollerman]

euu c'est quoi gd ?

(gros débutant j'avais prevenu )

[an0nyme]

gd ça veut dire gros débutant jsutement

nan sérieusement c'est le système de manipulation d'images que tu utiliuse avec PHP

il y a un tutoriel sur www.phpdebutant.org, dans la barre à gauche, le 21 : images dynamiques

je pense que c'est ce que tu cherche non?

[sbruchet]

Je trouve que GD est gourmant en resource alors qu'il suffirait d'utiliser un style

ce serait plus simple.

style="background-image: url(barre.jpg);background-position-x :<? echo $pour ?>;background-position-x : 100%"

avec $pour contenant le pourcentage de la barre de progression

non ?

[an0nyme]

justement c'est pas ça qui fait que ça change suivant la résolution ???

[sbruchet]

Oui et non la le style fixe l'image d'arrière plan en fonction de la taille de l'élément ou elle est mise mais si l'élément à un width fixe par exemple 200px ca change pas en fonction de la résolution contrairement si la width est en pourcentage.

Cba

[an0nyme]

en fait faut mettre ça en pourcentage du conteneur non?

avec width : x%;

[sbruchet]

Je sais plus de quoi on parle la

[rollerman]

bon voila j'utilise la methode gd (c'est pas très lisible mais sa marche )

la barre

<?php
header ("Content-type: image/png");
$largeur = 102;
$hauteur = 15;
$im = ImageCreate ($largeur, $hauteur)
		or die ("Erreur lors de la création de l'image"); 
$blanc = ImageColorAllocate ($im, 255, 255, 255); // couleur du fond
$noir = ImageColorAllocate ($im, 0, 0, 0); // couleur du cadre et des chiffres
$gris = ImageColorAllocate ($im, 180, 180, 180); // couleur de la barre d'avancement

// on déssine un rectangle vide pour faire plus jolie :)
ImageRectangle ($im, 0, 0, $largeur-1, $hauteur-1, $noir);

// tracé de la barre
include "wbfhq_bestkill.php";
$rank = $bf2stats['rank'];
$score = $bf2stats['scor'];
$rank0 = 0;
$rank1 = 150;
$rank2 = 500;
$rank3 = 800;
$rank4 = 2500;
$rank5 = 5000;
$rank6 = 8000;
$rank7 = 20000;
$rank8 = 20000;
$rank9 = 50000;
$rank10 = 0;
$rank11 = 200000;
if ($rank == 0)
{
$nxtscore0 = ($score - $rank0) / ($rank1 - $rank0) * 100; // calcul du pourcentage
$pourcentage0 = round($nxtscore0, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage0, 13, $gris);
}}
else if ($rank == 1)
{
$nxtscore1 = ($score - $rank1) / ($rank2 - $rank1) * 100;
$pourcentage1 = round($nxtscore1, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage1, 13, $gris);
}}
else if ($rank == 2)
{
$nxtscore2 = ($score - $rank2) / ($rank3 - $rank2) * 100;
$pourcentage2 = round($nxtscore2, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage2, 13, $gris);
}}
else if ($rank == 3)
{
$nxtscore3 = ($score - $rank3) / ($rank4 - $rank3) * 100;
$pourcentage3 = round($nxtscore3, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage3, 13, $gris);
}}
else if ($rank == 4)
{
$nxtscore4 = ($score - $rank4) / ($rank5 - $rank4) * 100;
$pourcentage4 = round($nxtscore4, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage4, 13, $gris);
}}
else if ($rank == 5)
{
$nxtscore5 = ($score - $rank5) / ($rank6 - $rank5) * 100;
$pourcentage5 = round($nxtscore5, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage5, 13, $gris);
}}
else if ($rank == 6)
{
$nxtscore6 = ($score - $rank6) / ($rank7 - $rank6) * 100;
$pourcentage6 = round($nxtscore6, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage6, 13, $gris);
}}
else if ($rank == 7)
{
$nxtscore7 = ($score - $rank7) / ($rank8 - $rank7) * 100;
$pourcentage7 = round($nxtscore7, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage7, 13, $gris);
}}
else if ($rank == 8)
{
$nxtscore8 = ($score - $rank8) / ($rank9 - $rank8) * 100;
$pourcentage8 = round($nxtscore8, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage8, 13, $gris);
}}
else if ($rank == 9)
{
$nxtscore9 = ($score - $rank9) / ($rank10 - $rank9) * 100;
$pourcentage9 = round($nxtscore9, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage9, 13, $gris);
}}
else if ($rank == 10)
{
$nxtscore10 = ($score - $rank10) / ($rank11 - $rank10) * 100;
$pourcentage10 = round($nxtscore10, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage10, 13, $gris);
}}
else if ($rank == 11)
{
$nxtscore11 = ($score - $rank11) / ($rank12 - $rank11) * 100;
$pourcentage11 = round($nxtscore11, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage11, 13, $gris);
}}
else if ($rank == 12)
{$nxtscore12 = ($score - $rank12) / ($rank12 - $rank12) * 100;
$pourcentage12 = round($nxtscore12, 2);
for ($pourcentage=0; $pourcentage<=100; $pourcentage++) {
ImageFilledRectangle ($im, 1, 1, $pourcentage12, 13, $gris);
}}

ImagePng ($im);
?>

vous me dite s'il existe une methode plus simple parce que la sa fait beaucoup de ligne pour une petite barre

il ne me reste plus qua metre le pourcentage sur la barre et c'est bon .

[rollerman]

bon voila ma barre est fini (enfin presque).

comment je fait pour ajouter le signe "%" ?

encore une petite question, comment je fais pour que mon image soi enregistrable ?

[Baldurien]

En général, une barre de progression c'est un pourcentage de 0 à 1 (ou 0 à 100%).

Si tu prends une image qui fait 1px de largeur, de la couleur de la barre de progression. Et tu détermine la largeur de l'image quand le pourcentage vaut 1 (100%). Ex: 400px = 100%.

Et là, paf:

<img src="mabarre.png" width="<?php echo floor(400*$progress); ?>" alt="<?php echo round($progress*100, 2); ?> %" />

Pas besoin de GD.