Search code examples
javascriptconstructorprototypecanvasjs

Pomodoro clock canvas ring not registering


Good evening everyone. I'm having some trouble with this bit of code and have been at it for a few hours. If you take a look in the constructor at this.drawArc and then in the prototype, I've logged to the console a couple things. You can see this.count logs a value, but this.drawArc does not. Obviously, this.minutes and this.toSeconds work, or the timer wouldn't start, but why does the drawArc not register the values?? I had this(the status ring) working before placing it in a constructor, but for some reason, it no longer registers any values. I have attached a fiddle.

NOTES: this is not complete - currently you have to re-run if you want to enter a new value into the input field. Once a value has been entered into the input(the small circle above the button) you can hover over the canvas(the larger circle) to view the countdown. The reason it is on hover is for those that don't want to see the ticking clock and prefer just the visual of the status ring. Any ideas??? I've been stuck for a few hours. Thank you in advance
https://jsfiddle.net/asthewaterfalls/szn0mch1/9/

function Pomodoro(userInput) {
    this.minutes = userInput; 
    this.toSeconds = 60 * this.minutes;//seconds - actual
    this.cout = this.toSeconds; //for timer
    this.seconds = 0; //display
    this.count = 0; //for status ring 
    this.circleStart = Math.PI * 1.5;
    this.drawArc = (2 / this.toSeconds) * this.count;
}

Pomodoro.prototype.statusRing = function () {
    if(this.count <= this.toSeconds) {
        dom.canv.beginPath(); 
        dom.canv.arc(125, 125, 121, this.circleStart, Math.PI * (1.5 + this.drawArc), false);
        dom.canv.stroke();
        this.count++;
        console.log(this.count, this.drawArc);
        const timeout = setTimeout(() => this.statusRing(), 1000 );
    }
};

Solution

  • I took a look at your fiddle. With two small changes I got some animation into the blue ring around the clock. I did not check the ratios or angeles.

    I made drawArg a function, calculating with the current value as argument and this.toSeconds as max value:

    this.drawArc = function(arg){ return (2 / this.toSeconds) * arg; };
    

    Second, I calld the function in dom.conv.arc():

    dom.canv.arc(/*...*/, Math.PI * (1.5 + this.drawArc(this.count)), /*...*/);
    

    Here is the complete example:

    function Pomodoro(userInput) {
        this.minutes = userInput;
        this.toSeconds = 60 * this.minutes;//seconds - actual
        this.cout = this.toSeconds; //for timer
        this.seconds = 0; //display
        this.count = 0; //for status ring 
        this.circleStart = Math.PI * 1.5;
        this.drawArc = function(arg){ return (2 / this.toSeconds) * arg; };
    }
    
    Pomodoro.prototype.statusRing = function () {
        if(this.count <= this.toSeconds) {
            dom.canv.beginPath(); 
            dom.canv.arc(125, 125, 121, this.circleStart, Math.PI * (1.5 + this.drawArc(this.count)), false);
            dom.canv.stroke();
            this.count++;
            console.log(this.count, this.drawArc);
            const timeout = setTimeout(() => this.statusRing(), 1000 );
    
        }
    };
    

    Please let me know, if this helps ;)