Pebble API

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