1
0
Fork 0

clock now shifts between times

master
adrian w kirk 2021-02-03 00:30:34 +00:00
parent 1a496d37c7
commit df39fcae20
2 changed files with 157 additions and 16 deletions

View File

@ -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",

View File

@ -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();
}