Startseite bisherige Projekte Tools/Snippets Bücherempfehlungen Publikationen Impressum Datenschutzerklärung

Bangle.js 2 - Dots Clock

Im Juli 2022


Die Pebble hatte so ein hübsches Punktezifferblatt. Kann man das nicht nachbauen?
Ohne Animationen kein großes Problem:



Das JavaScript dazu:


const h = g.getHeight();
const w = g.getWidth();
let drawTimeout;
let timeout = 60; // redraw-time in seconds

const radius =5;
const size = 13;
const countx = 13;
const county = 13;
const offset = 3;

let numbers = [
  // 0
  ['111',
    '101',
    '101',
    '101',
    '111'
  ],
  // 1
  [ '001',
   '001',
   '001',
   '001',
   '001'
    ],
  // 2
  [ '111',
   '001',
   '111',
   '100',
   '111'
    ],
  // 3
  [ '111',
   '001',
   '011',
   '001',
   '111'
    ],
  // 4
  [ '101',
   '101',
   '111',
   '001',
   '001'
    ],
  // 5
  [ '111',
   '100',
   '111',
   '001',
   '111'
    ],
  // 6
  [ '100',
   '100',
   '111',
   '101',
   '111'
    ],
  // 7
  [ '111',
   '001',
   '001',
   '001',
   '001'
    ],
  // 8
  [ '111',
   '101',
   '111',
   '101',
   '111'
    ],
  // 9
  [ '111',
   '101',
   '111',
   '001',
   '001'
    ]
];

let array = [];

function queueDraw(seconds) {
  let millisecs = seconds * 1000;
  if (drawTimeout) clearTimeout(drawTimeout);
  drawTimeout = setTimeout(function() {
    drawTimeout = undefined;
    draw();
  }, millisecs - (Date.now() % millisecs));
}


function getTimeString(date) {
  let minute = date.getMinutes();
  let hour = date.getHours();
  let seconds = date.getSeconds();
  return hour + '\n' + minute; // + '\n' + seconds;
}

// write nr starting at sx, sy
function copyNumber(nr, sx, sy) {
  mn = numbers[nr];
  for (y = 0; y < mn.length; y++) {
    for (x = 0; x < mn[y].length; x++){
      array[sy+y][sx+x] = mn[y][x];
    }
  }
}

function draw() {

  g.clear();
  
  let date = new Date();
  let minute = date.getMinutes();
  let hour = date.getHours();

  h1 = Math.floor(hour / 10);
  h2 = Math.floor(hour % 10);
  m1 = Math.floor(minute / 10);
  m2 = Math.floor(minute % 10);

  copyNumber(h1, 3, 1);
  copyNumber(h2, 7, 1);
  copyNumber(m1, 3, 7);
  copyNumber(m2, 7, 7);

  g.setColor(0,0,0);
  g.fillRect(0, 0, w, h);
  //g.setColor(g.theme.bg);
  
  g.setColor(1,1,1);

  for (y = 0; y < county; y++) {
    for (x = 0; x < countx; x++) {
      if (array[y][x] == 0) {
        g.fillCircle(offset + x * size + size/2, offset + y * size + size/2, radius, radius);
      }
    }
  }
  g.setFont('Vector', 90);
  g.setFontAlign(0, 0);
  
  g.setColor(g.theme.fg);
  //g.drawString(g.wrapString(time_string, w-20).join("\n"), w/2, h/2);  
  //g.drawString(time_string, w/2, h/2);  
  //g.setFont("6x8", 1);
  //g.drawString(String(E.getBattery()), 8,8);

  queueDraw(timeout);
  g.flip();
}

// init array
for (y = 0; y < county; y++) {
  array[y] = [];
  for (x = 0; x < countx; x++) {  
    array[y][x] = 0;
  }
}

g.clear();
draw();

// IMPORTANT: Make sure launcher is ALWAYS accessible on middle button press!!!
setWatch(Bangle.showLauncher, BTN1, { repeat: false, edge: "falling" });



Die nötigen Dateien zum Download:
dots.app.js
dots.info
dots.img


Impressum - Datenschutzerklärung