Pebble Watch Faces
With Rocky.js and CloudPebble I got to build my first Pebble WatchFace without having to learn C or whatever it’s normally built in.
And OK, Pebble and CloudPebble are dead - but you can still buy the watches on Amazon and DIY a CloudPebble server (Rebble.io) if you really want to impress chicks. (WARNING: will not impress chicks.)
The only WatchFace I use has been the original text watch face (and now there are a lot of them out there), but I kinda wanted to build my own (and I love the Zork calendar, so I wanted to add that too).
Because Rocky.js helps port JavaScript to C, it doesn\’t allow for all the regular commands I would use for JavaScript (like d.getFullYear() % 4 != 1 to get see if the year is divisible by 4), but you get the idea.
This isn't the whole project, but it is enough code to get you started.
texttime.js
var rocky = require('rocky');
// -- TIME TO TEXT
function tHour(n){
var arr = ['twelve','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','one','two','coffee','four','five','six','seven','eight','nine','ten','eleven'];
return arr[n];
}
function tMin(n){
var arr = [' ','one','two','three','four','five','six','seven','eight','nine',
'ten','eleven','twelve','thir\nteen','four\nteen','quarter\nafter','sixteen','seven\nteen','eigh\nteen','nine\nteen',
'twenty','twenty one','deuce deuce','twenty three','twenty four','twenty five','twenty six','twenty seven','twenty eight','twenty nine',
'half\npast','thirty one','thirty two','thirty three','thirty four','thirty five','thrity six','thrity seven','thrity eight','thrity nine',
'forty','forty one','forty two','forty three','forty four','quarter\n`till','forty six','forty seven','forty eight','forty nine',
'fiddy','fifty one','fifty\ntwo','fifty three','fifty\nfour','fifty\nfive','fifty\nsix','fifty seven','fifty eight','fifty\nnine'
];
return arr[n];
}
function tColor(n){
// https://developer.pebble.com/guides/tools-and-resources/color-picker/#55AAAA
var arr = ['#AA00FF','#FF55FF','#FF0055','#FF0000','#FF5500','#FFAAFF',
'#FF5555','#FFAAAA','#FFAA00','#FFAA55','#FFFF55','#FFFFAA',
'#AAFF00','#AAFFFF','#00FFAA','#00FFFF','#55AA55','#55AAAA',
'#00AAAA','#00AAFF','#55AAFF','#0055FF','#5555FF','#5555AA'];
return arr[n];
}
function firstDay(m,x){
// find the first DAY of the month
// m = month
// x = 1st day of the week you are looking for Monday/Tuesday/etc
// v = voting year, can only vote on 2-8 cannot vote on a first
var d = new Date();
var arr = [];
d.setMonth(m);
d.setDate(1);
var y = d.getFullYear();
var month = d.getMonth();
// Get the first Monday? in the month
var f = '';
// Get 1st xday ni the month
while (d.getDay() !== x) {
d.setDate(d.getDate() +1 );
}
// Get all the other Xdays in the month
while (d.getMonth() === month) {
arr.push(new Date(d.getTime()));
d.setDate(d.getDate() + 7);
}
// voting year check
var vl = (y.toString().substr(2))/4;
var vote = (!vl.toString().indexOf("."));
if( vote && m==10 && arr[0].getDate()<2){ // checking for voteing year
f = arr[1].getDate();
}else{
f = arr[0].getDate();
}
return m+""+f;
}
function zork(){
var d = new Date();
var mm = ['Estuary','Frobuary','Arch','Oracle','Mage','Jam','Jelly','Augur','Suspendur','Ottobur','Mumberbur','Desmembur'];
var mo = d.getMonth();
var dd = d.getDate();
var yy = d.getFullYear();
var mx = mo+""+dd;
var holidayCheck = mo+""+dd;
var dateReturn = "";
switch (holidayCheck){
case '01':
dateReturn = "Entharion Day";
break;
case '13':
dateReturn = "Undergroundhog's Day";
break;
case '129':
dateReturn = "Antharia Leap Week";
break;
case '211':
dateReturn = "St. Balhu's Day";
break;
case '33':
dateReturn = "King Wurb's Birthday";
break;
case '34':
dateReturn = "St. Foobus' Day";
break;
case '322':
dateReturn = "Coronation Day";
break;
case '40':
dateReturn = "Zero Day";
break;
case '41':
dateReturn = "Mage Day";
break;
case '431':
dateReturn = "St. Honko's Day";
break;
case '64':
dateReturn = "Filfre Day";
break;
case '625':
dateReturn = "St. Quakko's Day?";
break;
case '76':
dateReturn = "St. Bovus' Day";
break;
// -- Labor day
case '96':
dateReturn = "St. Wiskus' Day";
break;
case '931':
dateReturn = "Halloween";
break;
// -- VOTE TODAY
case '1011':
dateReturn = "Veterinarian's Day";
break;
case '1014':
dateReturn = "Curse Day";
break;
case '1125':
dateReturn = "Christmas";
break;
default:
dateReturn = "Day "+dd+", "+mm[mo];
}
// find labor day
if(mx==firstDay(8,1)){ // -- 1st monday september
dateReturn = "Leisure Day";
}
// find voting day
if(mx==firstDay(10,2)){ // -- 1st? tuesday november
dateReturn = "VOTE DAY";
}
// -- return date
return dateReturn+", "+yy;
}
// -- DRAW EVENT
rocky.on('draw', function(event) {
// Get the CanvasRenderingContext2D object
var ctx = event.context;
var cth = event.context;
var ctm = event.context;
var ctd = event.context;
// Clear the screen
ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
cth.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
ctm.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
ctd.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
// Determine the width and height of the display
var w = ctx.canvas.unobstructedWidth;
var h = ctx.canvas.unobstructedHeight;
// Current date/time
var d = new Date();
var th = d.getHours();
var tm = d.getMinutes();
var lv = 0; // light text vertical
var bv = 0; // bold text vertical
var wv = 3; // horizontal space
var lt = ''; // light text
var bt = ''; // bold text
// make the text fancy
// https://developer.pebble.com/docs/rockyjs/CanvasRenderingContext2D/#font
if(tm == '15' || tm == '30' || tm == '45'){
bv = 80;
bt = tHour(th);
lv = 0;
lt = tMin(tm);
}else if(tm=='0'&&th=='0'){
bv = 60;
bt = "mid night";
lv = 0;
lt = "";
}else if(tm=='0'&&th=='12'){
bv = 60;
bt = "noon";
lv = 0;
lt = "";
}else if(tm=='20'&&th=='16'){
bv = 60;
bt = "Tea Time";
lv = 0;
lt = "";
}else{
bv = 10;
bt = tHour(th);
lv = 50;
lt = tMin(tm);
}
cth.fillStyle = tColor(th);
cth.font = '42px bold Bitham';
cth.textAlign = 'left';
cth.fillText(bt, wv, bv, w);
ctm.fillStyle = 'white';
ctm.font = '42px light Bitham';
ctm.textAlign = 'left';
ctm.fillText(lt, wv, lv, w);
ctd.fillStyle = 'gray';
ctd.font = '14px Gothic';
ctd.textAlign = 'center';
ctd.fillText(zork(), w/2, h-20, w);
});
// -- TIME CHANGE EVENTS
rocky.on('minutechange',function(event){
// Display a message in the system logs
//console.log("Another minute with your Pebble!");
// Request the screen to be redrawn on next pass
rocky.requestDraw();
});