見出し画像

【アプリ開発】Bangle.jsでカウンターアプリ

Bangle.js用のカウントアッププログラムを作りました。
画面タップでインクリメント。
ボタン押下でリセット。
シンプルなカウンターアプリです。

// カウントを保持する変数
var count = 0;

// 画面の表示設定を行う関数
function setupDisplay() {
  g.clear(); // 画面をクリア
  g.setFontAlign(0, 30); // 文字位置の設定
  g.setFont("6x8", 5); // フォントの設定
  g.setColor(0, 0, 1); // フォントカラーの設定
}

// カウントの描画を行う関数
function drawCount() {
  g.drawString(count.toString(), g.getWidth() / 2, g.getHeight() / 2);
}

// 初期のカウントを表示する関数
function showInitialCount() {
  setupDisplay();
  drawCount();
}

// 指定したテキストを表示する関数
function showMessage(text) {
  setupDisplay();
  g.drawString(text, g.getWidth() / 2, g.getHeight() / 2);
  g.flip(); // 画面の更新
}

// カウントをインクリメントして表示する関数
function incrementCountAndShow() {
  count += 1;
  showMessage(count.toString());
}


// 初期表示
showInitialCount();

// タッチイベント
Bangle.on('touch', incrementCountAndShow);

// ボタン押下イベント
setWatch(function() {
  count = 0;
  showInitialCount();
}, BTN, { edge: "rising", debounce: 50, repeat: true }); // ボタンが押された瞬間, 50ミリ秒間は新たなボタンの押下を無視する, イベントを繰り返すか

この記事が気に入ったらサポートをしてみませんか?