From df39fcae20e36c7236e17e1ad9cd90801f1c1355 Mon Sep 17 00:00:00 2001 From: adrian w kirk Date: Wed, 3 Feb 2021 00:30:34 +0000 Subject: [PATCH] clock now shifts between times --- apps.json | 2 +- apps/xclock/xclock.js | 171 ++++++++++++++++++++++++++++++++++++++---- 2 files changed, 157 insertions(+), 16 deletions(-) diff --git a/apps.json b/apps.json index 38d4bf57b..5d6487cbb 100644 --- a/apps.json +++ b/apps.json @@ -216,7 +216,7 @@ { "id": "xclock", "name": "X Clock", "icon": "xclock.png", - "version":"0.01", + "version":"0.02", "description": "Text Readable Time", "tags": "clock", "type":"clock", diff --git a/apps/xclock/xclock.js b/apps/xclock/xclock.js index 70c58e976..c84fa3e33 100644 --- a/apps/xclock/xclock.js +++ b/apps/xclock/xclock.js @@ -9,6 +9,102 @@ const numberStr = ["ZERO","ONE", "TWO", "THREE", "FOUR", "FIVE", "NINETEEN", "TWENTY"]; const tensStr = ["ZERO", "TEN", "TWENTY", "THIRTY", "FOURTY", "FIFTY"]; +/** +* This is a object that initializes itself with a position and +* text after which you can tell it where you want to move to +* using the moveTo method and it will smoothly move the text across +*/ +class ShiftText { + constructor(x,y,txt,font_name, + font_size,speed_x,speed_y,freq_millis){ + this.x = x; + this.tgt_x = x; + this.y = y; + this.tgt_y = y; + this.txt = txt; + this.font_name = font_name; + this.font_size = font_size; + this.speed_x = Math.abs(speed_x); + this.speed_y = Math.abs(speed_y); + this.freq_millis = freq_millis; + this.finished_callback=null; + } + show() { + g.setFont(this.font_name,this.font_size); + g.setColor(1,1,1); + g.drawString(this.txt, this.x, this.y); + } + hide(){ + g.setFont(this.font_name,this.font_size); + g.setColor(0,0,0); + g.drawString(this.txt, this.x, this.y); + } + setText(txt){ + this.txt = txt; + } + setTextPosition(txt,x,y){ + this.hide(); + this.x = x; + this.y = y; + this.txt = txt; + this.show(); + } + moveTo(new_x,new_y){ + this.tgt_x = new_x; + this.tgt_y = new_y; + this._doMove(); + } + onFinished(finished_callback){ + this.finished_callback = finished_callback; + } + /** + * private internal method for directing the text move. + * It will see how far away we are from the target coords + * and move towards the target at the defined speed. + */ + _doMove(){ + this.hide(); + // move closer to the target in the x direction + diff_x = this.tgt_x - this.x; + finished_x = false; + if(Math.abs(diff_x) <= this.speed_x){ + this.x = this.tgt_x; + finished_x = true; + } else { + if(diff_x > 0){ + this.x += this.speed_x; + } else { + this.x -= this.speed_x; + } + } + // move closer to the target in the y direction + diff_y = this.tgt_y - this.y; + finished_y = false; + if(Math.abs(diff_y) <= this.speed_y){ + this.y = this.tgt_y; + finished_y = true; + } else { + if(diff_y > 0){ + this.y += this.speed_y; + } else { + this.y -= this.speed_y; + } + } + this.show(); + finished = finished_x & finished_y; + if(!finished){ + setTimeout(this._doMove.bind(this), this.freq_millis); + } else if(this.finished_callback != null){ + this.finished_callback.call(); + this.finished_callback = null; + } + } +} + + +let hour_shift_txt = new ShiftText(240,50,'',"Vector",40,5,5,100); +let min_shift_txt = new ShiftText(240,100,'',"Vector",20,5,5,100); +let min_remainder_shift_txt = new ShiftText(240,120,'',"Vector",20,5,5,125); function draw_clock(){ console.log("draw_clock"); @@ -20,37 +116,83 @@ function draw_clock(){ } else if(hours > 12){ hours = hours - 12; } - g.clear(); - g.setFont("Vector",40); - g.drawString(numberStr[hours], 20, 50); - // Now display the minutes on 2 lines + // If the hour string has changed then we move out the old + // hours and move in the new hour string + // If its the first time through the text is empty + // so we just display without movement (otherewise the user + // will think its not working + new_hours = numberStr[hours]; + if(new_hours != hour_shift_txt.txt && hour_shift_txt.txt != ''){ + hour_shift_txt.moveTo(-100,50); + hour_shift_txt.onFinished( + function(){ + hour_shift_txt.setTextPosition(new_hours,240,50); + hour_shift_txt.moveTo(20,50); + hour_shift_txt.onFinished(function(){console.log("hour finished");}); + } + ); + } else { + hour_shift_txt.setTextPosition(new_hours,20,50); + } + // If the mins is over 20 we have to display the text on 2 lines + // Otherwise we just output our defined numbers from 1 to 20 let mins = date.getMinutes(); - g.setFont("Vector",20); + new_mins = ''; + new_mins_remainder = ''; if(mins > 20){ - let tens = (mins / 10 | 0); - g.drawString(tensStr[tens], 20, 100); + tens = (mins / 10 | 0); + new_mins = tensStr[tens]; let remainder = mins - tens * 10; if(remainder > 0){ - g.drawString(numberStr[remainder], 20, 125); + new_mins_remainder = numberStr[remainder]; } - } else if(mins > 0) { - g.drawString(numberStr[mins], 20, 100); + new_mins = numberStr[mins]; + } + // If its the first time through the the text is moved in from + // the right + // If the minute text has changed we move the old text + // off screen and the new text on. + if(min_shift_txt.txt == ''){ + min_shift_txt.setTextPosition(new_mins,240,100); + min_shift_txt.moveTo(20,100); + } else if(new_mins != min_shift_txt.txt){ + min_shift_txt.moveTo(-100,100); + min_shift_txt.onFinished( + function(){ + min_shift_txt.setTextPosition(new_mins,240,100); + min_shift_txt.moveTo(20,100); + } + ); + } else { + min_shift_txt.setTextPosition(new_mins,20,100); + } + // finally we deal with the remainder line in the same way. + if(min_remainder_shift_txt.txt == ''){ + min_remainder_shift_txt.setTextPosition(new_mins_remainder,240,125); + min_remainder_shift_txt.moveTo(20,125); + } else if(new_mins_remainder != min_remainder_shift_txt.txt){ + min_remainder_shift_txt.moveTo(-100,125); + min_remainder_shift_txt.onFinished( + function(){ + min_remainder_shift_txt.setTextPosition(new_mins_remainder,240,125); + min_remainder_shift_txt.moveTo(20,125); + } + ); + } else { + min_remainder_shift_txt.setTextPosition(new_mins_remainder,240,125); } console.log(date); } function clearTimers(){ - //console.log("clearTimers"); if(intervalRef) { clearInterval(intervalRef); intervalRef = null; - //console.log("interval is cleared"); } } function startTimers(){ - console.log("startTimers"); let date = new Date(); let secs = date.getSeconds(); let nextMinuteStart = 60 - secs; @@ -59,11 +201,10 @@ function startTimers(){ draw_clock(); } -function scheduleDrawClock(){ +function scheduleDrawClock(){ console.log("scheduleDrawClock"); if(intervalRef) clearTimers(); intervalRef = setInterval(draw_clock, 60*1000); - console.log("scheduleDrawClock is set"); draw_clock(); }