Tutoriaux poru créer une barre d'energie

[Raoull]

Ya bcp de façons possible de faire :
- générer des barres avec GD
- générer des barres avec GD, en les sauvegardant, comme un cache, afin de ne pas sans cesse les mêmes barre
- plus simple, utiliser une image dont tu fais varier la largeur
- surement plein d'autres qui ne me viennent pas tout de suite...

Dans le style "faire varier la largeur d'une image" voila une vielle fonction maison que j'ai longtemps utilisé dans un site pour afficher des %
Elle se base sur 6 images, en GIF dans la cas présent à cause des bouts arrondis.
On balance à la fonction une valeur, une valeur max, et un texte alternatif (pour affichage quand on passe la souris), et la fonction renvoie une suite de 3 ou 4 balises images qui vont former la barre.

Voila les 6 images que j'utilisais :
Il s'agit donc des 2 bouts vides, des 2 bouts plein, d'une image centrale (vide et pleine) de 1 px dont on fait varier la largeur, et d'une barre noire pour délimiter le plein du vide.
Dessous, 3 rendus possible de barre.



Et voila la fonction, peu commentée... mais facilement adaptable
Je l'ai retouché vite fait à main levée, car elle était uniquement pour des %, mais devrait pas poser de souci.
C'est un peu une antiquité, mais si l'idée peut servir...

Code PHP :

<?

function barre($valeur, $max, $texte_alt="") {

    $v=ceil($valeur);

    $v2=$v;

    $m=intval($max);



    // pour du %, si on a plus de 100%, on limite à 100 pour ne pas avoir une barre de 3km de long...

    // pour des barres au dela du %, remplacer 100 par $m

    if ($v2>100) { $v2=100; }



    if ($v==$m && $valeur!=$m) { $v=floor($valeur); }



    if ($v==0) { // barre vide

        $img1='<img src="img/barre_off_g.gif" title="'.$texte_alt.'" alt="'.$texte_alt.'" />';

        $img2='';

        $img3='<img src="img/barre_off.gif" width="100" height="12" title="'.$texte_alt.'" alt="'.$texte_alt.'" />';

        $img4='<img src="img/barre_off_d.gif" title="'.$texte_alt.'" alt="'.$texte_alt.'" />';

    } // if

    elseif ($v==$m || $v>$m) { // barre pleine

        $img1='<img src="img/barre_on_g.gif" title="'.$texte_alt.'" alt="'.$texte_alt.'" />';

        $img2='<img src="img/barre_on.gif" width="'.$v2.'" height="12" title="'.$texte_alt.'" alt="'.$texte_alt.'" />';

        $img3='';

        $img4='<img src="img/barre_on_d.gif" title="'.$texte_alt.'" alt="'.$texte_alt.'" />';

    } // elseif

    else { // barre non pleine (et non vide)

        $img1='<img src="img/barre_on_g.gif" title="'.$texte_altalt.'" alt="'.$texte_alt.'" />';

        $img2='<img src="img/barre_on.gif" width="'.$v2.'" height="12" title="'.$texte_alt.'" alt="'.$texte_alt.'" /><img src="img/barre_bar.gif" title="'.$texte_alt.'" alt="'.$texte_alt.'" />';



        // portion de barre vide

        $r=$m-$v2;

        if ($r>0) {

            $img3='<img src="img/barre_off.gif" width="'.$r.'" height="12" title="'.$texte_alt.'" alt="'.$texte_alt.'" />';

        } // if

        else { $img3=''; } // else

        

        $img4='<img src="img/barre_off_d.gif" title="'.$texte_alt.'" alt="'.$texte_alt.'" />';

    } // else



    $retval= $img1.$img2.$img3.$img4;



    return $retval;

} // function

?>