BangleApps/apps/clck3x2/clock3x2.js

(() => {

    // place your const, vars, functions or classes here
	
	const ox=10; // x offset
	const oy=80;
	const pw=20; // pixel width
	const ps=5; // pixel spacing
	const ds=10; // digit spacing
	const ms=20; // middle space

	const x00=ox; // digit 0, pixel 0, x position
	const x01=x00+pw+ps;
	const x10=x01+pw+ds;
	const x11=x10+pw+ps;
	const x20=x11+pw+ms;
	const x21=x20+pw+ps;
	const x30=x21+pw+ds;
	const x31=x30+pw+ps;
	const xSpace=[[x00,x01], // all pixel x spacing
				  [x10,x11],
				  [x20,x21],
				  [x30,x31]];

	const y0=oy; // y spacing
	const y1=y0+pw+ps;
	const y2=y1+pw+ps;
	const ySpace=[y0, y1, y2];

	const pixels =  [[[0,0], // digit on/off pixels
					  [1,1],
					  [1,1]],
						 [[0,1], // digit 1
						  [0,1],
						  [0,1]],
					 [[0,1],
					  [1,0],
					  [1,1]],
						 [[1,1],
						  [0,1],
						  [1,1]],
					 [[1,0],
					  [1,1],
					  [0,1]],
						 [[1,1],
						  [1,0],
						  [0,1]],
					 [[1,0],
					  [1,1],
					  [1,1]],
						 [[1,1],
						  [0,1],
						  [0,1]],
					 [[1,1],
					  [1,1],
					  [1,1]],
						 [[1,1],
						  [1,1],
						  [0,1]]];

	let id = null; // timer interval id

	function drawTime() {
	  g.clear();
	  let d = Date();
	  let h = d.getHours();
	  let m = d.getMinutes();

	  let digit = [Math.floor(h/10), h%10, Math.floor(m/10), m%10]; // time digit

	  for (let id=0; id<4; id++){
		for (let xp=0; xp<2; xp++){
		  for (let yp=0; yp<3; yp++){
			if (pixels[digit[id]][yp][xp]==1){
			  g.fillRect(xSpace[id][xp], ySpace[yp], xSpace[id][xp]+pw, ySpace[yp]+pw);
			}
		  }
		}
	  }
	}

	function planNextUpdate() {
	  let d = Date();
	  let t = d.getSeconds()*1000 + d.getMilliseconds();
	  let delta = (60000 - t) % 60000; // time till next minute
	  idTimeout = setTimeout(updateTime, delta);
	}

	function stopPlanning() {
	  if(idTimeout) {
		clearTimeout(idTimeout);
	  }
	}

	function updateTime() {
	  drawTime();
	  planNextUpdate();
	}

	Bangle.on('gesture', function(gesture) {
	  if (gesture && !Bangle.isLCDOn()) {
		  Bangle.setLCDPower(true);
	  }
	});

    // special function to handle display switch on
    Bangle.on('lcdPower', (on) => {
        if (on) {
        	drawWidgets();
            // call your app function here
			updateTime();
		} else {
			stopPlanning();
		}
	});

    // call your app function here 
	Bangle.setLCDTimeout(30);
	updateTime();

})();