[Zooper] expertise 03 : construction horloge analogique

Par edem84 - Le 12/02/14 - Affichages : 4262
Je poursuis mon étude sur Zooper,après :
- [Zooper] expertise 01 : fontes et icônes dynamiques
- [Zooper] expertise 02 : Texte enrichi par BBCode
nous continuons la découverte de Zooper Widget avec la construction une horloge analogique du plus bel effet :)

Image

Composition de celle-ci :
Cette horloge, que vous pourrez aisément customiser, est composée de 7 éléments qui sont tous des modules “rectangles” :
1 - un contour que j’ai arrondi en cercle en ne gardant que le pourtour
2 et 3 - les aiguilles des heures/minutes, affinées par un effet de courbure
4, 5, 6 et 7 - des repères pour le cadran (12, 6, 3 et 9h)

C’est tout !
La magie réside dans la programmation à l’intérieur des modules rectangles composant les aiguilles des heures/minutes.
Nous détaillerons cela plus bas dans le tuto.

Comment faire ?

1 - nous allons commencer par placer un widget Zooper de 1x1 sur l’écran, puis nous lui donnons la dimension souhaitée. Ensuite on clique dessus pour entrer dans l’application Zooper et on choisi “Vide”.
Tous les modules que nous allons poser, on laissera “Centrer” par défaut, pour être certain d’avoir une horloge bien faite :)

2 - on clique sur “disposition” pour créer le premier module, en cliquant sur le signe “+” en haut, puis on choisi un module de type “Rectangle”.
On règle ce module comme ci-dessous :
Image
Notre contour étant fait, nous allons construire l’aiguille des minutes.

3 - créez un module rectangle, laissez “fixer sur l’écran = centrer” et 0 en x et y. Mettre une couleur de votre choix, puis 2 en largeur et 32 en hauteur. Vous aurez remarqué que mes aiguilles sont fines au bout, la raison : j’ai réglé la courbure sur -5. Voir ci-dessous.
Image

Après avoir construit cette aiguille des minutes, nous allons la programmer. Pour ce faire, dans l’édition du module, nous descendons tout en bas et cliquons sur “Paramètres avancés”, ce qui nous affiche un éditeur de code.
Le code à rentrer (en respectant à la lettre les non-espaces et les retours de lignes) est celui-ci :
Code: Select All Code
[ar]15[/ar]
[as]$(360/60*#dm#)$[/as]
[r] $(360/60*#dm#)$[/r]


Image
Une fois le code saisi, vous validez par la coche en haut à droite de l’éditeur.
Votre aiguille des minutes est fonctionnelle, reste à faire celle des heures ;)

4 - On créé un autre module rectangle, auquel on donne les dimensions suivantes :
2 en largeur, 24 en hauteur, courbure de -8.
On rentre dans les paramètres avancés et on tape le code suivant :
Code: Select All Code
[ar]12[/ar]
[as]$(360/(12*60)*(#dh#*60+#dm#))$[/as]
[r]$(360/(12*60)*(#dh#*60+#dm#))$[/r]


Votre aiguille des heures (ici en blanc) est, elle aussi, fonctionnelle ;)

Ce qu’il vous reste à construire, ce sont 4 rectangles de 1 de largeur et 10 de hauteur, que vous placerez où il le faut pour partager le cadran.

Pas très difficile, si ce n’est la partie code qui doit être de la rigolade pour ceux qui ont la bosse des maths ;)
4 réponse(s) -