BangleApps/apps/barclock/clock-bar.js

/* jshint esversion: 6 */
/**
 * A simple digital clock showing seconds as a bar
 **/
// Check settings for what type our clock should be
let locale = require("locale");
{ // add some more info to locale
  let date = new Date();
  date.setFullYear(1111);
  date.setMonth(1, 3); // februari: months are zero-indexed
  const localized = locale.date(date, true);
  locale.dayFirst = /3.*2/.test(localized);
  locale.hasMeridian = (locale.meridian(date)!=="");
}

let barW = 0,prevX = 0;
function renderBar(l) {
  "ram";
  if (l) prevX = 0; // called from Layout: drawing area was cleared
  else l = clock.layout.bar;
  let x2 = l.x+barW;
  if (clock.powerSave && Bangle.isLocked()) x2 = 0; // hide bar
  if (x2===prevX) return; // nothing to do
  if (x2===0) x2--; // don't leave 1px line
  if (x2<Math.max(0, prevX)) g.setBgColor(l.bgCol || g.theme.bg).clearRect(x2+1, l.y, prevX, l.y2);
  else g.setColor(l.col||g.theme.fg).fillRect(prevX+1, l.y, x2, l.y2);
  prevX = x2;
}


function timeText(date) {
  if (!clock.is12Hour) {
    return locale.time(date, true);
  }
  const date12 = new Date(date.getTime());
  const hours = date12.getHours();
  if (hours===0) {
    date12.setHours(12);
  } else if (hours>12) {
    date12.setHours(hours-12);
  }
  return locale.time(date12, true);
}
function ampmText(date) {
  return (clock.is12Hour && locale.hasMeridian) ? locale.meridian(date) : "";
}
function dateText(date) {
  const dayName = locale.dow(date, true),
    month = locale.month(date, true),
    day = date.getDate();
  const dayMonth = locale.dayFirst ? `${day} ${month}` : `${month} ${day}`;
  return `${dayName}  ${dayMonth}`;
}

const ClockFace = require("ClockFace"),
  clock = new ClockFace({
    precision:1,
    settingsFile:'barclock.settings.json',
    init: function() {
      const Layout = require("Layout");
      this.layout = new Layout({
        type: "v", c: [
          {
            type: "h", c: [
              {id: "time", label: "88:88", type: "txt", font: "6x8:5", col:g.theme.fg, bgCol: g.theme.bg}, // updated below
              {id: "ampm", label: "  ", type: "txt", font: "6x8:2", col:g.theme.fg, bgCol: g.theme.bg},
            ],
          },
          {id: "bar", type: "custom", fillx: 1, height: 6, col: g.theme.fg2, render: renderBar},
          this.showDate ? {height: 40} : {},
          this.showDate ? {id: "date", type: "txt", font: "10%", valign: 1} : {},
        ],
      }, {lazy: true});
      // adjustments based on screen size and whether we display am/pm
      let thickness; // bar thickness, same as time font "pixel block" size
      if (this.is12Hour && locale.hasMeridian) {
        // Maximum font size = (<screen width> - <ampm: 2chars * (2*6)px>) / (5chars * 6px)
        thickness = Math.floor((Bangle.appRect.w-24)/(5*6));
      } else {
        this.layout.ampm.label = "";
        thickness = Math.floor(Bangle.appRect.w/(5*6));
      }
      let bar = this.layout.bar;
      bar.height = thickness+1;
      if (this.font===1) { // vector
        const B2 = process.env.HWVERSION>1;
        if (this.is12Hour && locale.hasMeridian) {
          this.layout.time.font = "Vector:"+(B2 ? 50 : 60);
          this.layout.ampm.font = "Vector:"+(B2 ? 20 : 40);
        } else {
          this.layout.time.font = "Vector:"+(B2 ? 60 : 80);
        }
      } else {
        this.layout.time.font = "6x8:"+thickness;
      }
      this.layout.update();
      bar.y2 = bar.y+bar.height-1;
    },
    update: function(date, c) {
      "ram";
      if (c.m) this.layout.time.label = timeText(date);
      if (c.h) this.layout.ampm.label = ampmText(date);
      if (c.d && this.showDate) this.layout.date.label = dateText(date);
      if (c.m) this.layout.render();
      if (c.s) {
        barW = Math.round(date.getSeconds()/60*this.layout.bar.w);
        renderBar();
      }
    },
    resume: function() {
      prevX = 0; // force redraw of bar
      this.layout.forgetLazyState();
    },
  });

// power saving: only update once a minute while locked, hide bar
if (clock.powerSave) {
  Bangle.on("lock", lock => {
    clock.precision = lock ? 60 : 1;
    clock.tick();
    renderBar(); // hide/redraw bar right away
  });
}

clock.start();