Tutoriaux poru créer une barre d'energie

[Akroma]

j'aimerais un tutoriaux pour créer une barre de vie car j'aimerais en develloper

[Shidame]

Il me semble qu'il existe deja un topics la dessus par X-zod ou sur son site c a dois y etre.

[Akroma]

J'ai essayer mais sa marche pas

[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

?>

[X-ZoD]

en effet jai fait un tuto pour en generer avec GD et yen a un de Mark [ancien jeuphpien] qui en avait fait un avec les images...
lexemple de raoule avec le jeu de width est bien aussi

[denisc]

La génération avec GD, c'est bien, mais il faut penser au pauvre serveur qui va passer enormement de temps à générer des barres!!!

Le plus simple est bien sur la gallerie qui contiendrai les 10,20,30,50,100! images des différents pourcentages de la barre (nombre variable en fonction de la taille de l'image).
L'avantage? Un simple calcul de pourcentage x=int(a*n/b) avec a=pts de vie, b=pts de vie max et n nombre d'images et hop on génère la page html avec un lien sur le fichier x.gif...

Maitenant, le plus top est effectivement l'utilisation des "7" images proposées par Raoull... Avec une légère variante qui consisterai à générer l'affichage de la barre non pas en from-server, mais en local chez le client à l'aide de javascript. Ce qui permettrai de faire varier la barre de vie sans accéder au serveur, ou encore de faire s'afficher la perte de points de vie sous forme d'animation au moment de l'affichage de la page (associé à un petit peu d'Atlas, euh non, on appelle ça de l'ajax , et on a quelque chose d'hyper dynamique).

[gtsoul]

En css,
créer un div de la dimension maximale de la barre de vie. Mettre en backgroudn-image, l'image de la barre de vie vide (=fiole vide).
Dans ce div, insérer une image de 1px de largeur qui se répète sur x, fixer la largeur de cette image à la proportion de vie restante.
(Ne marche pas sous IE), créer des classes :before et :after pour la barre de vie, et y insérer les arrondis gauche et droite de cette barre.

[Raoull]

Pas mal du tout gtsoul !
En effet en css, je suis sur qu'il ya plein d'autres possibilités, et qui seront super légères par rapport à toute autre méthode

[_loki_]

J'aimerai juste savoir ce que signifit ce code :

Code PHP :

<?php 

$v=ceil($valeur); 

[Raoull]

Ceil - Arrondit au nombre supérieur

http://fr.php.net/manual/fr/function.ceil.php