18041 sujets

Questions générales et questions de débutants

[Résolu] Conception d'une jauge de progression en PHP et HTML/CSS.

Bonjour à tous,
Et pour commencer, merci de l'attention que vous portez à mon problème.

Mon besoin initial était de concevoir une jauge de progression.
C'est à dire une représentation graphique d'une variable PHP ($var), par rapport à un maximum donné fixé lui aussi par une variable PHP ($var_max), et le tout représenté sous forme de barre dans une div fixe, en pourcentage de la longueur de cette même div (Cf. Schéma 1).
IMPORTANT : cette jauge est dynamique (via PHP) mais "inerte" elle n'a pas vocation à faire office de pré-loader par exemple (comme certaine jauge Flash ou JS rencontrées), elle a juste pour rôle d'être une "indication graphique" fixe pour le visiteur.

Je précise que je ne souhaitais utiliser pour des raisons techniques QUE du Html/Css et PHP au début du projet. Mais autant être honnête et ne pas s'en cacher, alors en fait : je ne veux (voulais ?) pas de Javascript dans la mesure du possible.
N'étant pas familier de ce langage et n'ayant pas vraiment nécessité de l'apprendre globalement (sauf pour un ou deux projet isolés, éventuellement).
En plus de ça beaucoup de gens désactivent le Javascript, ...bref.

J'ai cherché sur Internet (Google mon grand ami, les Forums de dev, etc), mais je n'ai rien trouvé qui corresponde à mon problème. J'ai même cherché une librairie JS qui me permette de faire ça "tout seul", qui réponde à mes besoins...Probablement qu'il en existe une mais j'ai du passer à coté (et je préfèrerais me passer de JS donc, si possible).

http://img217.imageshack.us/img217/4535/testrq.png
Schema 1 : Voilà, une image peut-être plus parlante que ma description plus haut ?
Les valeurs en pourcentages sont fictives et au pifomètre pour l'exemple.

Voici mon code HTML actuel pour tenter de répondre à mon besoin.

<body>
<?php 
$var = 5660;
$var_max = 24000;
$perc_var = ($var * 100) / $var_max;
?>
<table width="90%" border="0">
	<tr>
		<td>
			<div class="bar">
				<div class="barcontent" width="<?php $perc_var?>%"height="20px">
				</div>
			</div>
		</td>
	</tr>
</table>
</body>




.bar {
	width:250px;
	height:20px;
	border: #000000 solid 1px;
	background-color:#E3C574;
	margin:0px;
	padding:0px;
}
.barcontent {
	height:100%;
	background-color:#B82E21;
	margin:0px;
	padding:0px;
}


1° Mon code n'est pas fonctionnel (ni conforme dans l'exemple, j'ai fait ça pour que vous compreniez ce que je voulais globalement faire). Ce n'est plus faisable à partir du moment ou j'essaie d'entrer un paramètre "width" dans une balise div, voir plus loin.
2° Si vous vous dites grosso modo "Oh, bon sang ! Qu'est-ce qu'il a essayé de faire ?!"
Paniquez-pas, j'explique :

- Comme vous pouvez le constater dans le code PHP :
$var : ma variable de la quantité "possédée", dans cet exemple 5660.
$var_max : la variable de la quantité maximale de la jauge, dans cet exemple 21000.
Donc j'ai 5660/21000, je veux savoir combien ça fait en pourcentage :
Je pose mon produit en croix suivant dont le résultat intègrera la variable $perc_var:
21000 = 100%
5660 = ?
qui se traduit par :
$perc_var = ($var * 100) / $var_max;

- Dans mon code CSS :
J'ai .bar ma div de la barre, virtuellement je me la représente "vide".
et .barcontent, qui représente ma barre "remplie".
.bar est toujours fixe en longueur et hauteur (20x250).
.barcontent est toujours fixe en hauteur (100% de son élément mère, .bar), MAIS doit varier en longueur (pour représenter le pourcentage actuel, détenu dans la variable $percent_var).

Maintenant (j'y suis presque !) je dois trouver comment redimensionner un élément stylable avec pour attribut width une variable PHP, dans mon exemple (faussé) ma div .barcontent, pour que sa longueur soit égale à ma variable $percent_var.

J'ai essayé toutes sortes de bidouilles plus ou moins W3C-légales (ou illégales plutôt ce dont j'aimerai bien m'affranchir dans une optique d'optimisation complète).
Comment faire s'il vous plait ?
Une ou plusieurs idées ?

Merci d'avance.
Modifié par Wu Xiang (25 Jul 2010 - 07:17)
Merci pour cette réponse !
En fait je ne sais pas trop si ça me correspond bien...
La barre est certes dynamique mais "animée" en fait, et je souhaitait juste une représentation graphique visuelle inerte (sauf en cas de rafraichissement de la page avec changement de variable php entre temps).
Son système est plus proche du Pré-loader sans JS, à ce que j'en ai vu.
Merci quand même, mais je suis dans l'incapacité d'utiliser correctement son code pour parvenir à mes fins. Je ne comprend pas bien le système de flush, par exemple.

Passé un temps il y'avait sur Wikipédia une jauge de dons (ils avaient besoin de x $ et ça affichait le montant qu'ils avaient déjà obtenu). Si tu rafraichissait, la barre augmentait un peu si quelqu'un avait donné entre temps, sinon la barre était inerte.
Tu vois ce que je veux dire ?

Je suis très proche de boucler mon code : il me manque juste un moyen de redimensionner en longueur le contenu de ma barre .barcontent avec la variable $perc_var comme taille en pixels.
J'espère que quelqu'un pourra m'éclairer à ce sujet...
Bon, après étude de la fonction flush() entre autres, et du fonctionnement du système présent dans le lien que tu m'as donné, j'en déduis qu'il s'agit effectivement d'un pré-loader et que je ne peux pas (hélas) l'appliquer à mon projet...

Donc j'ai toujours besoin d'aide svp.
salut...

fut un temps jadis où j'eu besoin de ce genre de chose...

et la solution (à l'époque) était toute simple


<table>
 <tr>
  <td width="60%">&nbsp;</td><td>&nbsp;</td>
 </tr>
</table>


voilà c'est tout con mais ça gère très bien ce que tu veux faire

je te laisse mettre de la couleur etc etc après tout ce ne sont que de simples <td>
Modifié par pchlj (23 Jul 2010 - 22:24)
Merci bien !
Je vais réfléchir à la viabilité de cette solution et la mettre en pratique, au final je te tiens au courant Smiley cligne
Bonjour à tous,
Mon problème étant résolu, je vais de ce pas changer l'intitulé et le nom de ce post afin qu'il soit "trouvable" par une google search et utile à d'autres petits scarabées comme moi, dans le besoin (qui voudraient quitter le temple d'alsacréation, mais qui ne sont pas encore prêts).

Rappel du Besoin :
a écrit :
Mon besoin initial était de concevoir une jauge de progression.
C'est à dire une représentation graphique d'une variable PHP , par rapport à un maximum donné fixé lui aussi par une variable PHP , et le tout représenté sous forme de barre dans une div fixe, en pourcentage de la longueur de cette même div.
IMPORTANT : cette jauge est dynamique (via PHP) mais "inerte" elle n'a pas vocation à faire office de pré-loader par exemple (comme certaine jauge Flash ou JS rencontrées), elle a juste pour rôle d'être une "indication graphique" fixe pour le visiteur.

Je rappelle aussi que je n'ai pas voulu (volontairement) faire usage de Javascript, pour des raisons précédemment citées (voir plus haut).
Nous n'utiliseront donc que PHP et HTML/CSS.

Pour ce faire j'ai utilisé la librairy PHP : GD qui permet de créer des images et de les transmettre en tant que variables.
Je devais automatiser au maximum la création d'image et pouvoir en modifier les paramètres (taille, couleur, type de barre, etc).
Le script est en 2 parties, une PHP et son appel via la page HTML.

Voici donc le contenu du fichier PHP :

<?php
//on teste la présence de la variable de %age que l'on attribue du GET à une variable fixe.
if(isset($_GET['pc']))
	{
	$pc=$_GET['pc'];
	}
//on teste la présence de la variable de type que l'on attribue du GET à une variable fixe.
if(isset($_GET['type']))
	{
	$type=$_GET['type'];
//on crée un switch ayant pour but de vérifier quel est le type de barre et d'en changer les proportions en fonction du type désiré.
		switch ($type)
		{
//ici il n'y a qu'un seul cas, mais d'autres viendront.
		case "normal":
		$long=250;
		$haut=20;
		break;
		}
	}
//on teste la présence de la variable de couleur que l'on attribue du GET à une variable fixe.
if(isset($_GET['color']))
	{
	$color=$_GET['color'];
//encore une fois : un switch, qui permettra de changer la couleur de la barre.
		switch ($color)
		{
//la variable color contient un "nom" de couleur, la couleur n'étant pas en héxa mais en RGB, on crée selon le contenu de color trois variables qui emporteront les R, G, et B de chaque cas.
		case "rouge":
		$color1=184;
		$color2=46;
		$color3=33;
		break;
		
		case "vert":
		$color1=48;
		$color2=166;
		$color3=1;
		break;
		}
	}
//ici on retrouve les commandes GD relatives à la création d'une image.
     header ("Content-type: image/png");
//on crée une image dont la taille varie selon le case switch plus haut.
     $image = imagecreate($long,$haut);
//on calcule le %age afin de calibrer la longueur réelle de la barre, par rapport à la taille totale de la barre.
     $pv=($pc*$long)/100;

//phase d'attribution des couleurs, la première est celle du fond.
     $blanc=imagecolorallocate($image, 255, 255, 255);
     $noir=imagecolorallocate($image, 0, 0, 0);

//on crée la variable "fond" qui accueille les trois couleurs via les trois variables définies sur le case switch color, plus haut.
     $fond=imagecolorallocate($image, $color1, $color2, $color3);
//puis on crée le fond en lui même dont la couleur sera celle définit juste au dessus.
     imageFilledRectangle($image, 0, 0, $pv, 20, $fond);

//on écrit le contenu de la variable pc, ici concaténée avec un %, en noir dans la barre.
     imagestring($image, 3, 115, 3, $pc."%", $noir);

//pour finir, on envoi l'image puis on la détruit, afin de ne pas mobiliser de mémoire inutilement. Le script s'achève ici.
     imagepng($image);
     imagedestroy($image);
?>


Et le contenu de la page HTML qui permet de faire les appels de jauges.

<img src="jauge.php?type=normal&amp;color=rouge&amp;pc=23">
<img src="jauge.php?type=normal&amp;color=vert&amp;pc=67">
<img src="jauge.php?type=mini&amp;color=jaune&amp;pc=85">


Le premier exemple me donnera une jauge de 250x20 de couleur Rouge indiquant 23%.
Le second exemple me donnera une jauge de 250x20 de couleur Verte indiquant 67%.
Le troisième exemple n'affichera rien d'autre qu'une erreur puisque je n'ai ni de type "mini" ni de couleur "jaune" de définit dans mes case switch, et qu'il n'y a pas de case default.
Notez cependant qu'implanter ces case switch suffit à changer les classes de jauges à afficher.
le &amp; remplace le & classique, qui (affiché seul) empêch(ait) la validation complète via le W3C Validator.

Le code est donc très clean (surtout par rapport à ce que j'avais fait au début) et très flexible.
Je remercie tout ceux qui ont participé (directement ou indirectement) à l'aboutissement de ma recherche et qui ont pu m'éclairer sur des solutions (parfois très involontairement)

Je précise que ce code est librement utilisable, et même publiable sur d'autres forum, mais uniquement sous réserve de linker ce forum et de citer ses sources si vous le faites.
Merci à tous,
Très bonne journée !
Sujet clos
Aller à