Horloge binaire

**Ggcool91** · 03/11/2015, 09h51

Bonjour tout le monde !

M'améliorant de jour en jour en jQuery (qui est, je trouve, un langage formidable) j'ai décidé de faire un plugin. Pour le moment pas sous la forme d'un plugin mais seulement sous la forme d'un fichier .js.

Celui ci se trouve être une horloge binaire.

J'aimerais beaucoup avoir vos avis sur ce que j'ai déjà produit, et vos idées d'amélioration du code, voire d'ajout de possibilités.

Pour utiliser le plugin :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="binaryClock value #bababa red rgb(172,17,97)"></div>
 
arg[0] = 'binaryClock' : Obligatoire c'est le nom de la div qui contiendra l'horloge binaire
arg[1] = 'value' ou 'noValue' : Affiche les valeurs des leds ou non
arg[2] = Couleur leds heures
arg[3] = Couleur leds minutes
arg[4] = Couleur leds secondes

Les couleurs peuvent être renseignées en hexadécimal (avec le # au début), en rgb sous forme : rgb(rouge, vert, bleu), ou au format texte en anglais (green / red / blue / purple ...)

binary.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript" src="binaryClock.js"></script>
        <style>
            div
            {
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div class="binaryClock value #bababa red rgb(172,17,97)"></div>
    </body>
</html>

binaryClock.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
$(document).ready(function(){
    var tabClock = [[  0, 38,   0, 28,   0, 18],
                    [  0, 34,   0, 24,   0, 14],
                    [  0, 32, 232, 22, 132, 12],
                    [316, 31, 216, 21, 116, 11]];
    var tabVal   = [[ 0, 8,  0, 8,  0, 8],
                    [ 0, 4,  0, 4,  0, 4],
                    [ 0, 2, 32, 2, 32, 2],
                    [16, 1, 16, 1, 16, 1]];           
    var classArray = $('.binaryClock').attr('class').split(' ');
 
    var i, j;
    var ledColorHeu = 'red';
    var ledColorMin = 'green';
    var ledColorSec = 'blue';
 
    if(classArray[2] != null)
        ledColorHeu = classArray[2];
    if(classArray[3] != null)
        ledColorMin = classArray[3];
    if(classArray[4] != null)
        ledColorSec = classArray[4];
 
    for(i = 0; i < 4; i++)
    {
        for(j = 0; j < 6; j++)
        {
            if(tabClock[i][j] != 0)
            {
                var hauteur = 32 * i;
                var longueur = 32 * j;
                if(classArray[1] == 'noValue')
                    $('.binaryClock').append('<div class="' + tabClock[i][j] + '" style="top:' + hauteur + 'px;left:' + longueur + 'px;"></div>');
                else if(classArray[1] == 'value')
                    $('.binaryClock').append('<div class="' + tabClock[i][j] + '" style="top:' + hauteur + 'px;left:' + longueur + 'px;">' + tabVal[i][j] + '</div>');
            }
        }
    }
    $('.binaryClock div').width('30px').height('30px').css('border', '1px solid black').css('border-radius', '30px').css('text-align', 'center');
 
    function Clock() {
        $('div').css('background', 'white').css('color', 'black');
        var laDate = new Date();
        Calcul(3, laDate.getHours(), ledColorHeu);
        Calcul(2, laDate.getMinutes(), ledColorMin);
        Calcul(1, laDate.getSeconds(), ledColorSec);
    }
 
    function Calcul(type, valeur, ledColor){
        if(valeur >= 32)
        {
            $('div.' + type + '32').css('background', ledColor).css('color', 'white');
            valeur -= 32;
        }
        if(valeur >= 16)
        {
            $('div.' + type + '16').css('background', ledColor).css('color', 'white');
            valeur -= 16;
        }
        if(valeur >= 8)
        {
            $('div.' + type + '8').css('background', ledColor).css('color', 'white');
            valeur -= 8;
        }
        if(valeur >= 4)
        {
            $('div.' + type + '4').css('background', ledColor).css('color', 'white');
            valeur -= 4;
        }
        if(valeur >= 2)
        {
            $('div.' + type + '2').css('background', ledColor).css('color', 'white');
            valeur -= 2;
        }
        if(valeur >= 1)
        {
            $('div.' + type + '1').css('background', ledColor).css('color', 'white');
            valeur -= 1;
        }
    }
    setInterval(Clock, 1000);
});

Voila. Merci à ceux qui liront.

PS : Y a-t-il moyen d'adapter la position à l'élement parent ? (La div en l'occurence) Merci !

**SylvainPV** · 03/11/2015, 10h04

Très mauvaise idée d'utiliser l'attribut class pour stocker des arguments. Le risque de conflit de classe est élevé, il n'y a aucune garantie que l'ordre des classes soit préservé dans la spec HTML, et personne ne s'attend à ce que ça fonctionne de cette manière (d'autres plugins ou personnes peuvent vouloir ajouter leur classe au milieu des tiennes).

Un plugin jQuery se branche sur le namespace jQuery.fn afin d'appeler directement ta fonction sur un élément sélectionné en jQuery. Cette fonction prend très souvent un objet de configuration, dans lequel tu peux configurer tout ce que tu veux (et utiliser des variables JS, ce qui est bien moins pratique quand cette configuration est stockée dans le HTML)

Voilà un bon tuto de chez nous pour écrire des plugins jQuery : http://synbioz.developpez.com/tutori...plugin-jquery/

Si tu tiens absolument à mettre ta configuration dans le HTML, passe par un data-attribute et non par l'attribut "class".

**Ggcool91** · 03/11/2015, 10h56

Merci pour ta réponse et pour le déplacement du sujet.

Effectivement le fait de passer les valeurs par class m'était très bizarre, mais je ne voyais pas comment faire autrement.

J'ai tout remplacé par des data-attribut et je vais voir le tutoriel que tu m'as envoyé. Pour le moment, le passage des attributs par HTML est la seule chose que je peux utiliser. Je verrais une fois que j'aurais avancé sous forme plugin.

Question : Avec la position 'absolute' et les attributs css 'left' et 'top', on positionne l'élément par rapport à la page ou par rapport à l'élément parent ?

**Ggcool91** · 03/11/2015, 12h27

Voila j'ai pu modifier mes scripts afin que ce soit plus propre à utiliser en passant par du plugin.

Cela se présente comme ceci :

clock.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
(function($){
    $.fn.clock = function(params)
    {
        this.each(function(){
            var defauts = {
                value: false, //Affiche ou non les valeurs des leds (true/false)
                spacing: false, //Effectue un espacement entre heures, minutes et secondes ou non (true/false)
                ledSize: '30', //Taille en px
                Hcolor: '#FF0000', //Couleur des leds Heure
                Mcolor: '#00FF00', //Couleur des leds Minute
                Scolor: '#0000FF'//Couleur des leds Seconde
            };
 
            params = $.extend(defauts, params); //Récupère les valeurs par défaut des valeurs non renseignées
 
            var tabClock = [[  0, 38,   0, 28,   0, 18],
                            [  0, 34,   0, 24,   0, 14],
                            [  0, 32, 232, 22, 132, 12],
                            [316, 31, 216, 21, 116, 11]];
            var tabVal   = [[ 0, 8,  0, 8,  0, 8],
                            [ 0, 4,  0, 4,  0, 4],
                            [ 0, 2, 32, 2, 32, 2],
                            [16, 1, 16, 1, 16, 1]];   
 
            ledColorHeu = params['Hcolor'];
            ledColorMin = params['Mcolor'];
            ledColorSec = params['Scolor'];
 
            var i, j;
 
            for(i = 0; i < 4; i++)
            {
                for(j = 0; j < 6; j++)
                {
                    if(tabClock[i][j] != 0)
                    {
                        var hauteur = (parseInt(params['ledSize']) + 2) * i;
                        var longueur = (parseInt(params['ledSize']) + 2) * j;
 
                        if(params['spacing'] && (j >= 2 && j < 4))
                            longueur = ((parseInt(params['ledSize']) + 2) * j) + 5;
                        if(params['spacing'] && j >= 4)
                            longueur = ((parseInt(params['ledSize']) + 2) * j) + 10;
                        if(!params['value'])
                            $(this).append('<div class="' + tabClock[i][j] + '" style="position:absolute;top:' + hauteur + 'px;left:' + longueur + 'px;"></div>');
                        if(params['value'])
                            $(this).append('<div class="' + tabClock[i][j] + '" style="position:absolute;top:' + hauteur + 'px;left:' + longueur + 'px;">' + tabVal[i][j] + '</div>');
                    }
                }
            }
            $('div', this).width(params['ledSize'] + 'px')
                     .height(params['ledSize'] + 'px')
                     .css('border', '1px solid black')
                     .css('border-radius', params['ledSize'] + 'px')
                     .css('text-align', 'center');
 
            function Clock() {
                $('.binaryClock div').css('background', 'white').css('color', 'black');
                var laDate = new Date();
                Calcul(3, laDate.getHours(), ledColorHeu);
                Calcul(2, laDate.getMinutes(), ledColorMin);
                Calcul(1, laDate.getSeconds(), ledColorSec);
            }
 
            function Calcul(type, valeur, ledColor){
                if(valeur >= 32)
                {
                    $('div.' + type + '32').css('background', ledColor)
                                           .css('color', 'white');
                    valeur -= 32;
                }
                if(valeur >= 16)
                {
                    $('div.' + type + '16').css('background', ledColor)
                                           .css('color', 'white');
                    valeur -= 16;
                }
                if(valeur >= 8)
                {
                    $('div.' + type + '8').css('background', ledColor)
                                          .css('color', 'white');
                    valeur -= 8;
                }
                if(valeur >= 4)
                {
                    $('div.' + type + '4').css('background', ledColor)
                                          .css('color', 'white');
                    valeur -= 4;
                }
                if(valeur >= 2)
                {
                    $('div.' + type + '2').css('background', ledColor)
                                          .css('color', 'white');
                    valeur -= 2;
                }
                if(valeur >= 1)
                {
                    $('div.' + type + '1').css('background', ledColor)
                                          .css('color', 'white');
                    valeur -= 1;
                }
            }
            setInterval(Clock, 1000);
        });
        return this;
    };
})(jQuery);

binary.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script type="text/javascript" src="clock.js"></script>
    </head>
    <body>
        <div class="binaryClock"></div>
        <script>
            $(function(){
                $('.binaryClock').clock({
                    value: false, //Affiche ou non les valeurs des leds (true/false)
                    spacing: true, //Effectue un espacement entre heures, minutes et secondes ou non (true/false)
                    ledSize: '15', //Taille en px
                    Hcolor: 'red', //Couleur des leds Heure
                    Mcolor: '#00FF00', //Couleur des leds Minute
                    Scolor: 'rgb(0,0,255)'//Couleur des leds Seconde
                }); 
             });
             //Les couleurs peuvent êtres renseignées sous toutes les formes que le css permet
        </script>
    </body>
</html>

Y aurait-il d'autres choses à modifier ? Merci des retours !

**SylvainPV** · 03/11/2015, 15h18

C'est beaucoup mieux

Pour ta question CSS, on positionne l'élément en décalage par rapport au plus proche élément parent positionné. Un élément est positionné à partir du moment où tu changes sa propriété CSS position (relative, absolute, sticky etc..). Donc ça peut être la page, ça peut être le parent direct ou ça peut être un élément entre les deux selon ton CSS.

**Ggcool91** · 03/11/2015, 15h40

Donc si jamais je venais a vouloir utiliser ce plugin dans une page web à un endroit précis, il faudrait que je positionne d'abord la div parent à l'endroit ou je veux. Merci c'est bon à savoir.

Si jamais quelqu'un peut me donner des pistes pour l'améliorer, je suis preneur.

**SylvainPV** · 03/11/2015, 19h36

Tiens, je suis passé par une autre technique à base de boxShadow: http://jsbin.com/cigucerumi/edit?html,js,console,output

La technique pour calculer les bits est aussi un peu différente, en passant par le changement de base toString(2). Il y a sûrement encore d'autres approches possibles.

Aussi, y'a une raison pour utiliser 8 bits par bloc alors qu'on dépasse pas les 60 en base dix ? Je me suis contenté de six blocs, mais je ne suis pas expert en horloge binaire

**Ggcool91** · 04/11/2015, 09h24

Salut, je n'utilise que 6 bits par blocs et même seulement 5 sur l'heure.

En fait je viens de me rendre compte que au travail, je n'ai pas accès à jsbin, je verrais ça ce soir donc.

Je n'avais pas pensé au changement de base qui peut être moins lourd à calculer au final.

Horloge binaire

jQuery

Discussions similaires

Partager

Partager