S'inscrire |

 
TEAM
Avatar de Booster2000
Booster2000 est déconnecté Booster2000 est un Homme 03/03
XP de Booster2000 1 268 Nombre total de messages de Booster2000
| Traducteur |
  #1 (permalink)  
Vieux 14/02/2011, 21h28
Www [CSS/PHP] Faire varier une couleur en fonction du temps, de l'heure

Salut à tous,

Je vous propose ici un petit tutoriel/script pour faire varier la teinte d'une couleur en fonction du temps. J'utiliserai sans doute quelques anglicismes mais ils sont propres à l'informatique, je vous prierai donc de m'en excuser.



Introduction

Il y a quelques mois, j'ai monté un petit site. Son contenu a peu d'importance, ce qui nous intéresse ici c'est un des aspects visuels de ce site. Au premier abord, rien ne semble particulier... et pourtant une partie du site est dynamique: la couleur change en fonction de l'heure, du moment de la journée.

J'avais cherché sur le web des codes (scripts) pour réaliser cet effet mais mes recherches n'ont pas portés leurs fruits. J'ai donc dû me creuser un peu la cervelle et me documenter sur "les couleurs".

Comme vous le savez sans doute, dans nos CSS (où dans votre code HTML pour les moins propres) on utilise souvent des codes RGB (RVB en fr.) exprimés en hexadécimal. Or, je ne voyais pas du tout comment faire varier la teinte d'une couleur en fonction de l'heure en modifiant le code hexa. Après m'être creusé encore un peu la tête et avoir fait pas mal de recherches, j'ai trouvé d'autres moyens d'exprimer une couleur, dont deux en particuliers: HSV (TSV en fr.) et HSL (TSL en fr) ou, respectivement, Hue Saturation Value (Teinte Saturation Valeur) et Hue Saturation Lightness (Teinte Saturation Lumière). Ces deux modèles cylindriques permettent d'appréhender les couleurs RGB de manière plus humaine. Comme ils sont cylindriques, ils correspondent assez bien à ce que je cherchais, un moyen de faire correspondre le temps (un cercle de 24 heures) avec la teinte (base du cylindre HSV ou HSL). Sur la page Wikipédia, il y avait même les formules pour passer de RGB à HSV et inversement. Il n'y avait donc plus qu'à poser tout ça sur papier et passer à la programmation de l'algorithme.



En pratique

Il va nous falloir trois fichiers: 1 CSS template (modèle) et 2 fichier PHP index.php et functions.php.

_style.css
Code:
[...]
div#header
{  
	width: 100%;
	height: 175px;
	border-bottom: 5px solid #003399;
}

[...]

div#logo-bg03
{  
	background-color:#0066ff;
	width: 374px;
	height:175px;
	float:left;
}


[...]

div#menu ul li a:link
{
	color: #b8cee3;
	text-decoration:none;
}

[...]
Voici les propriétés de base de mon "header/logo" que je changerai par la suite. J'ai déjà un accord de couleurs avec les trois que j'ai choisi, en gardant de côté les différentes de teinte, saturation et valeur de ces couleurs.


functions.php
Code:
	function HSVtoRGB($H,$S,$V)
	{
		// [0,1[ Normalisation des variables
		$H = floatval($H/360);
		if ($H == 1) $H = 0;
		$S = floatval($S / 100);
		$V = floatval($V / 100);
		if ($H < 0 || $H > 359 || $S < 0 || $S > 1 || $V < 0 || $V > 1) return 0;
		
		//Calcule de la valeur RGB/RVB
		if ($S == 0) {
			$R = dechex($V * 255);
			$G = dechex($V * 255);
			$B = dechex($V * 255);
			return $R.$G.$B;
		}		
		else {
			$Hc = $H * 6;
			if ($Hc == 6) $Hc = 0;
			
			$vi = floor($Hc);
			$v1 = $V * ( 1 - $S );
			$v2 = $V * ( 1 - $S * ( $Hc - $vi) );
			$v3 = $V * ( 1 - $S * ( 1 - ( $Hc - $vi) ) );
			
			if ($vi == 0) 		{ $vR = $V;		$vG = $v3;	$vB = $v1; }
			elseif ($vi == 1) 	{ $vR = $v2;	$vG = $V;	$vB = $v1; }
			elseif ($vi == 2) 	{ $vR = $v1;	$vG = $V;	$vB = $v3; }
			elseif ($vi == 3) 	{ $vR = $v1;	$vG = $v2;	$vB = $V; }
			elseif ($vi == 4) 	{ $vR = $v3;	$vG = $v1;	$vB = $V; }
			else 				{ $vR = $V;		$vG = $v1;	$vB = $v2; }
			
			$R = dechex(255 * $vR);
			$G = dechex(255 * $vG);
			$B = dechex(255 * $vB);
			if (strlen($R) == 1) $R = '0'.$R;
			if (strlen($G) == 1) $G = '0'.$G;
			if (strlen($B) == 1) $B = '0'.$B;
			return $R.$G.$B;
		}
	}
Ici, la formule que j'ai trouvée sur Wikipédia pour passer du HSV(TSV) au RGB(RVB) codée en PHP5. On lui passe les trois paramètres de Hue, Saturation et Value et elle retourne une couleur RGB (hexadécimale).


index.php
Code:
<?php
	include('functions.php'); // On inclue le fichier de fonctions

	$hour = date('G') * 60; // l'heure en minutes
	$min = date('i');
	$H = ($hour + $min) /  4; // On passe d'un espace [0,1440[ (les heures exprimées en minutes) à un espace [0,360[ pour la teinte 

//On a notre teinte, la saturation et la valeur ne change jamais, elles sont donc codées en dur. (Comme je le disais plus haut, il fallait garder les codes HSV des couleurs du CSS, ce sont les deux dernières valeurs qui nous intéressent ici vu que le H est défini par l'heure du serveur.)	
	$dark =		HSVtoRGB($H,100,42);
	$mid =		HSVtoRGB($H,100,83);
	$light =	HSVtoRGB($H,19,89);

//Je load le CSS modèle et je remplace mes codes hexa par les nouveaux générés ci-dessus.
	$css = file_get_contents('_style.css');
	$css = str_replace('003399',$dark,$css);
	$css = str_replace('0066ff',$mid,$css);
	$css = str_replace('b8cee3',$light,$css);

//Création du 'vrai' style.css qui sera utiliser sur le site
	$handle = fopen('style.css', 'w');
	fwrite($handle, $css);
	fclose($handle);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>
		<link rel="stylesheet" type="text/css" title="style" href="style.css" />
[...]
	</head>
	<body>
[...]
	</body>
</html>


Conclu

Bon, je ne suis pas sur que ça servira à grand monde mais au moins c'est une exclu IK

Enjoy!

Dernière modification par Booster2000 ; 14/02/2011 à 21h40.
Réponse avec citation
ReV
TEAM
Avatar de ReV
ReV est déconnecté ReV est un Homme 06/04
XP de ReV 555 Nombre total de messages de ReV
---------
  #2 (permalink)  
Vieux 14/02/2011, 21h39
Sympa ton astuce J'avoue que c'est pas forcément les choses les plus compliquées qui sont les plus difficiles à faire. Quand on veut innover il faut souvent se creuser la tête !

En tout je prend note de ta façon de faire. Merci beaucoup de partager !

Petite question cependant, le chargement de la page est pas trop influencé par la réécriture du CSS ?
Souvent, le navigateur met en cache le fichier CSS, et il faut faire un CTRL+F5 pour le recharger, est-ce que malgré cela, le CSS écrit par la fonction est bien celui utilisé à chaque rechargement de la page ?
Réponse avec citation
TEAM
Avatar de Booster2000
Booster2000 est déconnecté Booster2000 est un Homme 03/03
XP de Booster2000 1 268 Nombre total de messages de Booster2000
| Traducteur |
  #3 (permalink)  
Vieux 14/02/2011, 21h48
En effet, je me suis poser la question de la charge serveur, il est possible que ca prenne quelques millisecondes en plus lors du chargement (rien de significatif à mon avis). J'ai même pensé qu'il puisse y avoir des conflits lorsqu'il y a un grand nombre de visiteurs (création d'un même fichier sur des infimes périodes de temps.).
En ce qui concerne le cache, je n'ai jamais eu le problème donc je ne pense pas.

Une solution alternative serait de réaliser l'opération via JavaScript mais, là, pendant une fraction de seconde, la couleur serait celle par defaut (le temps que toute la page soit chargée et que le navigateur interprète le JS).

La base est là, il faudrait essayer le concept sur un site à gros traffic pour voir si un des problèmes évoqués plus haut se pose.

Dernière modification par Booster2000 ; 14/02/2011 à 21h52.
Réponse avec citation
ReV
TEAM
Avatar de ReV
ReV est déconnecté ReV est un Homme 06/04
XP de ReV 555 Nombre total de messages de ReV
---------
  #4 (permalink)  
Vieux 14/02/2011, 22h10
Pour le trafic, je pense que tu dois pouvoir utiliser ta solution en incluant un timestamp quelque part qui indique la date de création du dernier fichier. Tu le lis en premier, si la création date de moins d'une minute par exemple, tu ne réécris rien, sinon tu entre dans ta modification de ton fichier css. Tu peux mettre le timestamp dans un fichier (lourd), dans une base SQL (mieux je pense).

Je suis d'accord avec toi pour le chargement de la page, le temps ne doit pas être beaucoup influencé, par contre, sur un site à gros trafic, le serveur va avoir du mal à suivre je pense...

Pour le javascript, ce que tu dis est vrai, perso j'essaye toujours d'éviter de mettre du javascript dans mes pages, c'est juste une habitude Donc je préfère la solution php !

Merci pour ta réponse !!!!
Réponse avec citation
Réponse

Outils de la discussion

Config des règles de ce forum
Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


A propos d'IK

Infographik alias IK est un forum d'entre-aide dans le domaine de l'infographie numerique
Depuis plus de 10 ans ce forum propose des tutoriaux un espace communautaire francophone.

We need You !

Faire un don permet de régler les frais de fonctionnement du site tel que l'hebergement, le ndd etc...
Faire un don

Fuseau horaire GMT +2. Il est actuellement 22h41.