Horloge analogique [et numerique] en image

0/5 (6 avis)

Vue 27 343 fois - Téléchargée 1 700 fois

Description

Image en GD, avec un grand nombre de possibilite d'optimisation, couleur, forme etc..

Des variable sont a definir:
activer ou non la possibilite de definir des option dans la barre d'adresse (methode GET)
largeur et heuteur de l'image;
couleur de fond;
affichage au non du cercle pour l'horloge analogique ainsi que ca couleur;
longueur, epaisseur et couleur de chacune des aiguilles;
affichage au non de l'heure en numerique
le format (type date, taille, couleur) de l'heure
sa position
et sa police (fichier *.gdf, ou police php) (un .gdf est fournit)
et il est aussi possible de definir des informations dans la barre d'adresse : (si on a active l'otpion)
http://monsite.com/horloge.php?W=100&H=100&CHA=T&AHN=T&T=1066646 (pourquoi pas..)
W = largeur | Si l'un des deux n'est pas defini l'horloge \
H = hauteur | sera un carre avec le cote de l'autre
CHA = [T / F] T active le cercle pour l'horloe analogique / F le desactive
AHN = [T / F] idem mais pour l'horloge numerique
T = heure en format timestamp (nombre de seconde depuis le 1er janvier 1970)
LAH LAM / TAH TAM permettent de modifier la Longueur et la Taille des Aiguilles pour les Heures ou les Minutes
PHNX / PHNY = position en % de l'heure
----
apres c'est tres facile a ajouter ! il suffit de faire du copier colle...

Source / Exemple :


<?php
//----------
//VARIABLES
//----------
	// Pour la description de toutes les possibilite avec le GET, ce refere
	// plus pas : "TRAITEMENT DES GET"
$GET_Active = true;
/*

    • Toutes les variables suivante ne sont que des valeurs par default, vous pourrez les modifier grace au varible GET si $GET_Active = true
    • sinon mettre and "$GET_Active = false" et ses valeurs sont des valeurs fixe
    • ATTENTION, toujours respecter la caste des possibilites !
  • /
// is_int() / en Pixel $Largeur_Image = 100; // is_int() / en pixel / inutile si il s'agit d'un carre #$Hauteur_Image = 100; // is_string() / format "255,255,255" ou "#FFF" ou "#FFFFFF" $Couleur_Fond = "#000"; $Cercle_Horloge_Active = true; // modifiable avec CHA [ `T ` / `F `] $Couleur_Cercle_Horloge = "#FFF"; // is_int() / en pixel $Longueur_Aiguille_H = 32; // modifiable avec LAH // is_int() / en pixel $Longueur_Aiguille_M = 45; // modifiable avec LAM // is_string() / format "255,255,255" ou "#FFF" ou "#FFFFFF" $Couleur_Aiguille_H = "#555"; // is_string() / format "255,255,255" ou "#FFF" ou "#FFFFFF" $Couleur_Aiguille_M = "#333"; $Taille_Aiguille_H = 2; // modifiable avec TAH $Taille_Aiguille_M = 2; // modifiable avec TAM // permet d'afficher l'heure de façon analogique ( `true` or `false`) $Afficher_Heure_Numerique = true; // // Inutile si $Afficher_Heure_Numerique = false // // Format de l'heure analogique au format type Date //(voir http://bcst.webmaster.free.fr/doc.php.nexen/function.date.html) $Format_HN = "H:i"; // Taille de la police de l'heure analogique //$Taille_HN = 123; // THN // is_string() / format "255,255,255" ou "#FFF" ou "#FFFFFF" $Couleur_HN = "#FFF"; // Position de l'HA sur X en % $Position_HN_x = 50; // PHNX // Positionnement de le cadre de position de l'HN sur X / Possibilite : // "gauche", "droite", "centre" $Positionnement_HN_x = "centre"; // Position de l'HA sur Y en % $Position_HN_y = 50; // PHNY // Positionnement de le cadre de position de l'HN sur Y / Possibilite : // "haut", "bas", "milieu" $Positionnement_HN_y = "milieu"; // police personnel, vous pouvez en trouvez par exemple sur // "http://www.devtrolls.com/gdf_fonts/fonts.html" // si le liens est mort fait comme rechercher "php imageloadfont" vous // trouverez des liens en cherchant un peut. // is_string() $font_police_file = "bmreceipt.gdf"; // sinon police php // is_int() / [0-5] $font_police = 5; /*
    • FinInutile
  • /
//---------- //TRAITEMENT DES GET //---------- if ((isset($_GET["W"]) or isset($_GET["H"])) and $GET_Active) { if (isset($_GET["W"]) and !isset($_GET["H"])) { $Largeur_Image = $_GET["W"]; $Hauteur_Image = $_GET["W"]; } elseif (isset($_GET["H"]) and !isset($_GET["W"])) { $Largeur_Image = $_GET["H"]; $Hauteur_Image = $_GET["H"]; } else { $Largeur_Image = $_GET["W"]; $Hauteur_Image = $_GET["H"]; } } // // retourne 'vrais' si le GET de $GET = T // ou retourne 'false' si $GET = F // sinon retourne la valeur de $default // function GET_true_false($GET, $default, $GET_Active) { if (isset($_GET[$GET]) and ($_GET[$GET] == "T" or $_GET[$GET] == "F") and $GET_Active) { if ($_GET[$GET] == "T") return true; else return false; } return $default; } $Cercle_Horloge_Active = GET_true_false("CHA", $Cercle_Horloge_Active, $GET_Active); $Afficher_Heure_Numerique = GET_true_false("AHN", $Afficher_Heure_Numerique, $GET_Active); if (isset($_GET['LAH']) and $GET_Active) $Longueur_Aiguille_H = $_GET['LAH']; if (isset($_GET['LAM']) and $GET_Active) $Longueur_Aiguille_M = $_GET['LAM']; if (isset($_GET['TAH']) and $GET_Active) $Taille_Aiguille_H = $_GET['TAH']; if (isset($_GET['TAM']) and $GET_Active) $Taille_Aiguille_M = $_GET['TAM']; if (isset($_GET['THN']) and $GET_Active) $Taille_HN = $_GET['THN']; if (isset ($_GET['PHNX']) and $GET_Active) $Position_HN_x = $_GET['PHNX']; if (isset ($_GET['PHNY']) and $GET_Active) $Position_HN_y = $_GET['PHNY']; if (isset ($_GET['FPF']) and $GET_Active) $font_police_file = $_GET['FPF']; //---------- //TRAITEMENT DES VARIABLES //---------- if (!isset($Hauteur_Image) and isset($Largeur_Image)) $Hauteur_Image = $Largeur_Image; else if (!isset($Largeur_Image) and isset($Hauteur_Image)) $Largeur_Image = $Hauteur_Image; else if (!isset($Largeur_Image) and !isset($Hauteur_Image)) { echo "error, no variable `Largeur_Image` or `Hauteur_Image`"; exit; } $Position_HN_x = ($Position_HN_x / 100) * $Largeur_Image; $Position_HN_y = ($Position_HN_y / 100) * $Hauteur_Image; //---------- //TRAITEMENT DES HEURES //---------- if (isset ($_GET['T']) and $GET_Active) $Minutes = date("i", $_GET['T']); else $Minutes = date("i"); if (isset ($_GET['T']) and $GET_Active) $Heures = date("h", $_GET['T']); else $Heures = date("h"); //HEURES $Heure2 = $Heures + ($Minutes / 60); $Heure2 = 3 - $Heures; $Heure2 *= pi() / 6 ; // // on prend le cosinus de H2 pour avoir la valeur sur X de l'heure $Heures_x = cos($Heure2); // On la mais a la bonne taille $Heures_x *= $Longueur_Aiguille_H; // On la positionne au bonne endroit $Heures_x += $Largeur_Image / 2; // // on prend le sinus de H2 pour avoir la valeur sur Y de l'heure $Heures_y = sin($Heure2); // On l'inverse, car dans notre calcule le sens de Y est inverse par //rapport au dessin $Heures_y *= -1; // On la met a la bonne taille $Heures_y *= $Longueur_Aiguille_H; // et on la positionne correctement $Heures_y += $Hauteur_Image / 2; // // //MINUTES de même pour les minutes : $Minute2 = 15 - $Minutes; $Minute2 *= pi() / 30; $Minutes_x = cos($Minute2); $Minutes_x *= $Longueur_Aiguille_M; $Minutes_x += $Largeur_Image / 2; $Minutes_y = sin($Minute2); $Minutes_y *= -1; $Minutes_y *= $Longueur_Aiguille_M; $Minutes_y += $Hauteur_Image / 2; $Milieu_x = $Largeur_Image / 2; $Milieu_y = $Hauteur_Image / 2; //---------- //TRAITEMENT DES COULEURS //---------- // // $Regex_RGB = "#([0-2]?[0-9]{1,2}),([0-2]?[0-9]{1,2}),([0-2]?[0-9]{1,2})#"; // $Regex_Hex_6 = "#\#([0-9A-F])([0-9A-F])([0-9A-F])([0-9A-F])([0-9A-F])([0-9A-F])#"; // $Regex_Hex_3 = "#\#([0-9A-F])([0-9A-F])([0-9A-F])#"; // function TesteCouleur ($Couleur) { if (preg_match("#^\#([0-9A-F]){3}$#", $Couleur)) $Couleur = TransformeHex3($Couleur); if (preg_match("#^\#[0-9A-F]{6}$#", $Couleur)) $Couleur = TransformeHex6($Couleur); elseif (preg_match("#^([0-2]?[0-9]{1,2}),([0-2]?[0-9]{1,2}),([0-2]?[0-9]{1,2})$#", $Couleur)) $Couleur = SeparRGB($Couleur); else $Couleur = Array ( "#000000", "0", "0", "0" ); return $Couleur; } function SeparRGB($Couleur) { preg_match("#([0-2]?[0-9]{1,2}),([0-2]?[0-9]{1,2}),([0-2]?[0-9]{1,2})#", $Couleur, $Couleur); return $Couleur; } function TransformeHex6 ($Couleur) { preg_match("#\#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})#", $Couleur, $table); for ($i = 1; $i<count($table); $i++){ $table[$i] = hexdec ($table[$i]); } return $table; } function TransformeHex3 ($Couleur){ //Transforme le format hex en #19D en #1199DD $Couleur = preg_replace("#([0-9A-F])#","$1$1", $Couleur); return $Couleur; } $Couleur_Fond = TesteCouleur($Couleur_Fond); $Couleur_Cercle_Horloge = TesteCouleur($Couleur_Cercle_Horloge); $Couleur_Aiguille_H = TesteCouleur($Couleur_Aiguille_H); $Couleur_Aiguille_M = TesteCouleur($Couleur_Aiguille_M); $Couleur_HN = TesteCouleur($Couleur_HN); //---------- //GENERATION DE L'IMAGE //---------- function imagelinethick($image, $x1, $y1, $x2, $y2, $color, $thick = 1) { // // de cette maniere, ca ne marche bien que pour les lignes orthogonales // imagesetthickness($image, $thick); // return imageline($image, $x1, $y1, $x2, $y2, $color); // if ($thick == 1) return imageline($image, $x1, $y1, $x2, $y2, $color); $t = $thick / 2 - 0.5; if ($x1 == $x2 || $y1 == $y2) return imagefilledrectangle($image, round(min($x1, $x2) - $t), round(min($y1, $y2) - $t), round(max($x1, $x2) + $t), round(max($y1, $y2) + $t), $color); $k = ($y2 - $y1) / ($x2 - $x1); //y = kx + q $a = $t / sqrt(1 + pow($k, 2)); $points = array( round($x1 - (1+$k)*$a), round($y1 + (1-$k)*$a), round($x1 - (1-$k)*$a), round($y1 - (1+$k)*$a), round($x2 + (1+$k)*$a), round($y2 - (1-$k)*$a), round($x2 + (1-$k)*$a), round($y2 + (1+$k)*$a), ); imagefilledpolygon($image, $points, 4, $color); return imagepolygon($image, $points, 4, $color); } $im = imagecreate($Largeur_Image, $Hauteur_Image) or die ("Impossible d'initialiser la bibliotheque GD"); $background = imagecolorallocate($im, $Couleur_Fond[1], $Couleur_Fond[2], $Couleur_Fond[3]); //---------- //TRAITEMENT DE L'HEURE ANALOGIQUE //---------- if ($Afficher_Heure_Numerique) { if (isset ($_GET['T']) && $GET_Active) $string = date($Format_HN, $_GET['T']); else $string = date($Format_HN); $Couleur_HN = imagecolorallocate($im, $Couleur_HN[1], $Couleur_HN[2], $Couleur_HN[3]); $font = @imageloadfont($font_police_file); if (!$font) $font = $font_police; $fontWidth = imagefontwidth($font); $fontHeight = imagefontheight($font); if ($Positionnement_HN_x == "centre") $Position_HN_x -= (strlen($string) * $fontWidth) / 2; elseif ($Positionnement_HN_x == "droite") $Position_HN_x -= strlen($string) * $fontWidth; if ($Positionnement_HN_y == "milieu") $Position_HN_y -= $fontHeight / 2; elseif ($Positionnement_HN_y == "bas") $Position_HN_y -= $fontHeight; } if ($Cercle_Horloge_Active) { $Couleur_Cercle_Horloge = imagecolorallocate($im, $Couleur_Cercle_Horloge[1], $Couleur_Cercle_Horloge[2], $Couleur_Cercle_Horloge[3]); imageellipse($im, $Milieu_x, $Milieu_y, $Largeur_Image - 1, $Hauteur_Image - 1, $Couleur_Cercle_Horloge); } $Couleur_Aiguille_H = imagecolorallocate($im, $Couleur_Aiguille_H[1], $Couleur_Aiguille_H[2], $Couleur_Aiguille_H[3]); $Couleur_Aiguille_M = imagecolorallocate($im, $Couleur_Aiguille_M[1], $Couleur_Aiguille_M[2], $Couleur_Aiguille_M[3]); imagelinethick($im, $Milieu_x, $Milieu_y, $Minutes_x, $Minutes_y, $Couleur_Aiguille_M, $Taille_Aiguille_M); imagelinethick($im, $Milieu_x, $Milieu_y, $Heures_x, $Heures_y, $Couleur_Aiguille_H, $Taille_Aiguille_H); if ($Afficher_Heure_Numerique) imagestring($im, $font, $Position_HN_x, $Position_HN_y, $string, $Couleur_HN ); header("Content-type: image/gif"); imagegif($im); imagedestroy($im); ?>

Conclusion :


Voila, amusez vous bien !!!

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
vendredi 25 août 2006
Statut
Membre
Dernière intervention
15 mars 2008

bonjour a tous,

et merci pour vos conseil, bon,
- guill76, en realite, a la base, le code n'a pas ete fait pour mettre les secondes.. c'est d'ailleur pour ca qu'elles n'y sont pas..
A la base j'ai utilise cette image en deux temps d'abord l'image était toutes petite a tel point qu'on ne distingue pas l'heure inscrite, avec un javascript je l'agrandi au passage de la sourrie ce qui a aussi pour butte de la remettre a l'heure..
J'ai incorporer le timestamp justement pour les heures fixes, comme les heures de fichier etc..

- codefalse, je ne connais malheureusement pas les objets, et je n'ai d'ailleurs pas compris leurs utilites.. mais je suis toujours avide d'en apprendre plus ! Si tu connais un bon site pour apprendre a les utilisers je m'y attelerais... ^_^

- malalam, merci de me soutenir :-)
Bon je te l'accorde le code est atroce, en realite ca fait quelque temps que j'ai fais ce code.. Et avant de poster j'ai eu la fleme de le decouper :-)

- voilaaa, coucou747 a compris le principe de base de cette horloge :D mais je suis sur qu'il y a des truc a faire !!

m'enfin si vous avez d'autre commentaire, n'hesitez pas !
Messages postés
1123
Date d'inscription
mardi 8 janvier 2002
Statut
Modérateur
Dernière intervention
21 avril 2009
1
@Malalam : En fait quand je parlais d'objet ici, je voyais plutot le sens d'un namespace, histoire de regrouper l'usage du code.
Il est vrai que l'usage d'une heure peut-être sympa, mais comme dit précédement, pour utiliser gd, mieux vaut le faire dans le cas d'une horaire différée afin d'éviter une surcharge inutile :)
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
41
ca peut servir pour un jeu video pour afficher quand ta flotte redeviendra disponible par exemple. avoir un truc fige, c'est pas forcement mauvais. (ou un cahier de rdv : on clique sur un rdv, il l'affiche, en affichant l'heure du rdv.)

tout les utilisateurs ont deja l'heure actuelle sur le cote, alors a quoi bon reafficher l'heure actuelle ?
Messages postés
10839
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
23
Hello,

je vais m'en mêler, et une fois n'est pas coutume, défendre l'auteur ;-)
Moi, je trouve l'idée très sympa. Bon, certes, quand j'ai vu le titre du code hier (ou avant hier chais plus), je me suis dit : impossible en php, ou alors il fait un truc rigolo mais mortel pour un serveur web. Puis j'ai lu le descriptif et le code. Ben ma foi, pourquoi pas! Je suis sur un site, je clique sur un lien pour voir l'heure sur une horloge classieuse dessinée avec GD. Ca ne sert à rien, mais je trouve ça sympa. Par contre, il serait encore plus sympa d'aller un peu plus loin...mais j'y reviens.
Le code : en l'état, faire une classe ne servirait à rien. Ce serait faire de l'objet pour faire de l'objet. Je ferais plutôt quelques fonctions supplémentaires moi. Et puis là, le code est bordélique est difficile à lire, un peu d'organisation ne lui ferait pas de mal.
Je suis d'accord avec codefalse pour dire qu'une implémentation un peu personnalisé devient compliquée, en l'état.
J'aime bien l'idée des paramètres passés en GET, mais une fonction simple permettrait d'utiliser ça en get, post, ou avec un appel direct à la fonction.
Par contre, on pourrait revenir à l'objet si on appronfondissait un peu le sujet : pourquoi ne pas proposer une page interactive ? Le mec va sur ta page et voit a jolie horloge. Via un menu, il peut choisir un affichage classique ou digital, voir l'heure à Moscou, avoir un affichage digital sur 12 ou 24h, etc etc...le tout via Ajax parce que ce sera plus sympa. Tu obtiendrais un peu plus de dynamisme, sans pour autant tuer un serveur (enfin, pour peu que tu n'aies pas des milliers de visiteurs à l'heure...).
Et là, une réorganisation en objets peut avoir son intérêt.
Messages postés
1123
Date d'inscription
mardi 8 janvier 2002
Statut
Modérateur
Dernière intervention
21 avril 2009
1
Je ne dirai pas mieux que Guill76 sur ce coup la. Juste te proposer une alternative tout à fait intéressante.
Ton image propose actuellement une image de type "horloge". Or, en tant qu'horloge, on attends à voir bouger les secondes, les minutes. C'est logique. Dans ton cas c'est pas le cas (et c'est fortement déconseillé d'utliser de l'ajax pour rafraichir ton php toutes les secondes afin d'avoir un truc qui bouge wahouu c'est joli, car tu va faire péter ton serveur).

Maintenant, si tu partait sur un affichage d'un temps en format numérique, mais stylé. L'idée ensuite, serait qu'il pourrait être intégré à des documents. Par exemple quand tu génère un pdf, quand tu affiche la date de derniere modification d'une page, tu lui colle l'image, et là ca parrait plus sensé (on s'attends plus à un rafraichissement). Une aiguille, c'est vivant, ca doit bouger, des nombres, pas forcément.

J'ai un peu parcouru ton code, et la premiere chose qui me vient à l'esprit, c'est pourquoi tu ne l'a pas fait en Objet. Est-ce que tu à déjà pratiqué ? quelques connaissances ? car je te le conseille fortement. Imagine ton futur code :

<?php
require ('TimeMaker.php');
$oTM = new TimeMaker (time ()); // On prends la date en miliseconds que le code convertira (c'est une possibilité)
$oTM->fontPoliceFile = "bmreceipt.gdf"; // ceci est possible à partir de php5 en utilisant les méthodes magiques __get et __set
// Du coup tu peux faire ca pour toutes tes propriétés

// et finalement
header("Content-type: image/gif");
echo $oTM->generate ();
?>

5 lignes sans les commentaires. Bon bien sur, ton code dans le fichier TimeMaker sera un peu plus fournit :p
L'idée de la poo, c'est d'éviter de refaire le code plusieurs fois.
Dans ton cas, tu ne peux pas utiliser ton actuel code sans devoir faire beaucoup de modifications.

Pense y ;)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.