Jauge circulaire

Ciloe
Javascript

Alors, je vais essayer d'être claire ^^.

Je veux créer un décompteur "comming soon" grâce à la librairie JQuery. J'ai donc d'abord créé un système pour faire des éléments rond:

Mon html ressemble à celui ci :

<div class="item grid_3 alpha">
  <div class="round">
    <input type="text" id="jours" data-max="100" data-min="0" class="round" name="round">
  </div>
</div>
<div class="item grid_3 alpha">
  <div class="round">
    <input type="text" id="heures" data-max="24" data-min="0" class="round" name="round">
  </div>
</div>
<div class="item grid_3 alpha">
  <div class="round">
    <input type="text" id="minutes" data-max="60" data-min="0" class="round" name="round">
  </div>
</div>
<div class="item grid_3 alpha">
  <div class="round">
    <input type="text" id="secondes" data-max="60" data-min="0" class="round" name="round">
  </div>
</div>

En suite, je vais créer des canvas pour les habiller. Tous ça en JQuery 

$('input.round').wrap('<div class="round" />').each(function(){
        var $input = $(this);
        var $div = $input.parent();
        var min = $input.data('min');
        var max = $input.data('max');
        $cercle = $('<canvas width="220px" height="220px" />');
        $color = $('<canvas width="220px" height="220px" />');
        $div. append($cercle);
        $div. append($color);
        var ctx = $cercle[0].getContext('2d');
        ctx.beginPath();
        ctx.arc(110,110,95,0,2*Math.PI);
        ctx.lineWidth = 20;
        ctx.strokeStyle = "#fff";
        ctx.shadowOffsetX = 2;
        ctx.shadowBlur = 5;
        ctx.shadowColor = "rgba(0,0,0,0.2)";
        ctx.stroke();
        var ratio = ($input.val() - min) / (max - min)
        var ctx = $color[0].getContext('2d');
        ctx.beginPath();
        ctx.arc(110,110,95,-1/2 * Math.PI, ratio*2*Math.PI - 1/2 * Math.PI);
        ctx.lineWidth = 20;
        ctx.strokeStyle = "#2DA2C5";
        ctx.stroke();
    });

En suite je vais remplir mes inputs des valeurs suivant une date: 

function Init(){
        var jours = $('input#jours');
        var heures = $('input#heures');
        var minutes = $('input#minutes');
        var secondes = $('input#secondes');
        var now = new Date();
        var finale = new Date ("April 9 15:15:15 2013");
        var sec = (finale - now) / 1000;
        var n = 24 * 3600;
        if (sec > 0) {
            j = Math.floor (sec / n);
            h = Math.floor ((sec - (j * n)) / 3600);
            mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
            sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
            jours.val(j);
            heures.val(h);
            minutes.val(mn);
            secondes.val(sec);
        }
    }

    Init();

Bref, jusque maintenant ça marche est j'ai bien ça :
http://www.siteduzero.com/forum/sujet/petit-sujet-sympa (image en bas)

Sauf que je n'arrive pas à automatiser le truc. Je veux que lorsque le compteur découle, les input changent de valeur (ça je sais faire) mais les canvas n'évoluent pas... Et il est là le problème....

Par exemple, dans mon each, à la fin, j'aimerais faire une fonction $input.change(function(){}) Et faire à l'intérieur... Sauf que ça marche pas... Alors que si je fais un $div.click(function(event){}) et que je fais un traitement dedans, il le prend en compte...

Quelqu'un peut m'aider?

1 réponse

Ciloe
Auteur
Réponse acceptée

J'ai réussit.

J'ai séparé l'initialisation, puis j'ai intégré la fonction du canvas dans mon compteur. Voilà le code JS:

$(function(){

    $('input.round').wrap('<div class="round" />').each(function(){
        var $input = $(this);
        var $div = $input.parent();
        $cercle = $('<canvas class="cercle" width="220px" height="220px" />');
        $color = $('<canvas class="color" width="220px" height="220px" />');
        $div. append($cercle);
        $div. append($color);
    });

    function Init_temps(){
        var jours = $('input#jours');
        var heures = $('input#heures');
        var minutes = $('input#minutes');
        var secondes = $('input#secondes');
        var now = new Date();
        var finale = new Date ("April 9 15:15:15 2013");
        var sec = (finale - now) / 1000;
        var n = 24 * 3600;
        if (sec > 0) {
            j = Math.floor (sec / n);
            h = Math.floor ((sec - (j * n)) / 3600);
            mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
            sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
            jours.val(j);
            heures.val(h);
            minutes.val(mn);
            secondes.val(sec);
        }

    }

    function Affichage(){

        $('input.round').each(function(){
            var $input = $(this);
            var $div = $input.parent();
            var min = $input.data('min');
            var max = $input.data('max');
            $cercle = $div.children('.cercle');
            $color = $div.children('.color');
            console.log('Init : '+$input.attr('id')+' '+$color.toSource());
            var ctx = $cercle[0].getContext('2d');
            ctx.clearRect(0,0,220,220);
            ctx.beginPath();
            ctx.arc(110,110,95,0,2*Math.PI);
            ctx.lineWidth = 20;
            ctx.strokeStyle = "#fff";
            ctx.shadowOffsetX = 2;
            ctx.shadowBlur = 5;
            ctx.shadowColor = "rgba(0,0,0,0.2)";
            ctx.stroke();
            var ratio = ($input.val() - min) / (max - min);
            var ctx = $color[0].getContext('2d');
            ctx.clearRect(0,0,220,220);
            ctx.beginPath();
            ctx.arc(110,110,95,-1/2 * Math.PI, ratio*2*Math.PI - 1/2 * Math.PI);
            ctx.lineWidth = 20;
            ctx.strokeStyle = "#2DA2C5";
            ctx.stroke();
        });

    }

    Init_temps();
    Affichage();
    Rebour();

    function Rebour() {
        Init_temps();
        Affichage();
        window.setTimeout (Rebour, 1000);
    }
});