v0.02 of Shadow Clock with settings menu

apps/shadowclk/ChangeLog

@@ -1 +1,2 @@
 0.01: New App!
+0.02: New 'Settings Menu' to choose your favorite color and switch between light or dark themes

apps/shadowclk/README.md

@@ -0,0 +1,25 @@
+# Shadow Clock
+
+Shadow Clock uses the "Londrina" font in a user selectable color and surrounds it in the "Londrina Shadow" font to create a visually appealing way to show the time in a clear, easily readable manner. On the Bangle.js 2, the time can be read easily even if the screen is locked and unlit.
+
+## Usage
+
+* Install Shadow Clock through the Bangle.js app loader.
+* Configure it through the default Bangle.js configuration mechanism
+(Settings app, "Apps" menu, "Shadow Clock" submenu).
+* If you like it, make it your default watch face
+(Settings app, "System" menu, "Clock" submenu, select "Shadow Clock").
+
+## Configuration
+
+Anton Clock is configured by the standard settings mechanism of Bangle.js's operating system:
+Open the `Settings` app, then the `Apps` submenu and below it the `Shadow Clock` menu.
+You configure Shadow Clock by selecting a `Light` or `Dark` system wide theme and then selecting the color of the clock numbers.
+
+## Compatibility
+
+Shadow Clock should be compatible with with Bangle.js 1, however it was built and tested with Bangle.js 2
+
+## Creator
+
+[stweedo](https://github.com/stweedo)

apps/shadowclk/app-icon.js

@@ -1 +1 @@
-require("heatshrink").decompress(atob("mEwhHXAH4A/AH4A/AH4A/AH4A/AH4A/AFGsAAQOUA4OBDBYfHo8jAAOBByOssgICkdkF6AWEF5IOHxAHDAAVALx4VEF5AOHA4oAD0ovNoEjo6BCF5AOHF4ccp9dAoVdFxh2CioUCa44OIwIFCirwBjgFBqyNPqxJCEAOIKwOIBxYJChwfBwIABJQ7dHnIkCEAsVBxovDdiMcVYIgHFQgOJR4WIxBdMCoccshUCkdkRYJ6DBxIvDAAlkF5wWLBxQKJOAIvTroOOBQkcmU5aoYAKhwACjiqDqwOOTQQqDGwQvMAAawCcoOsAAQOL642DBAI0EAB1AC4QfBJIU5BxQ2DAAp5FF6ZJFF4xgFAAMOOwyPKjkcCgWsAoMyBxQAB1k5BAMcZAQuPDIS6EYBAIRAHKHCAIhPLAoWswIMEL6OBDIgYGHA4qCCwIKBDIgvPDggnIAw7lBF4J4KR5gVJKgZDDIgQCDMITvXXA47EHxD2aFQhOCBAY8DRiiWLD4aEBMYzuCLzgvEEQK4BFAQCDB4TACF7QA/AH4A/AH4A/AAQA=="))
+require("heatshrink").decompress(atob("mEwxH+64Afq17AAlWq2sBYOtB4Urq2BFzeBwONAAeyHAQvCrPX1g3BlYvb02BjwADF4QmBwdZF4MrleBgAvlgAwBgqQBlcAF72HF46PBwaPDwK/dVoLpBAAwMBweDFTYA/AH4A/AH4A/AF2lAAOsBRIAF6AMDp9Wp+lFyNWkYABitWFwoKCAAsHBgMyBAkVwIuO6EVCod6F50A6+BBI0VMRxGEF6BfBIwZqHABRGCo5EIF4cOgEHAAUA0scBYQDDCAIvMhx7CCYTfDAYIvDK4McNoaODh1PPgcO1jsNiskOYQTBh0cjlW1iDHfwJfDjmeoDKEABSlCgAlCF4QJGcgwPEfQ5eMFQIvDRYIfClesioADEgcrSAguEwJeNh1AAgQkBwOlkkkQoOBvQACIgRAB685F4wJBF5oAGp4UJ1i6CeQK/Dg4ECZYQvTComsnNdrp+B0rADlaKD1l6X52BgAACJIgvEFIcO0sOF4cAAgeISgYvLMg8HKoOBAAIvEAAsOL4bwGFxyuDg/QGoYZBT5AKBXQYvVCYUH1gvFqwjGTwWBGA0AOwIAN6EOhytBAwIFBh1PAoN6g8VskVmUAZoelBQVABQIuPMAS6DfYWBMgI9CwMrq2lDA2Bq1PFqLpCHBAWKMIJGBAgRDEABiKBlYTDAYcA1gKBqwgFlYMBLoIaBCIKZDABh+BDIQVBC4WsF4YOBGAmsBQSgCAIIvQFYIiBKwReDFQI3DEIlWFIIsBCwIABF6JhClZhBZQo8BAYIOBIoh0CBIJ5DAH4AEPYKBDWwSGCAoKIDAoIwcEwJ/CRYICCFoI8BQ4YKBMDhWBEwIjBYQcAAYQKBZIRfdAIJVCQgLkDAYJjCcX4A/AH4A/AFwA=="))

apps/shadowclk/app.js

@@ -20,10 +20,27 @@ Graphics.prototype.setFontLondrinaShadow = function() {
     );
   };
   
+  Graphics.prototype.setFontDotGothic16 = function() {
+    // Actual height 20 (19 - 0)
+    return this.setFontCustom(
+      E.toString(require('heatshrink').decompress(atob('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'))),
+      32,
+      atob("CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoA"),
+      20|65536
+    );
+  };
+  
+  const storage = require('Storage');
+  
+  var settings = Object.assign({
+    // default values
+    color: "#0ff",
+    theme: "light",
+  }, storage.readJSON("shadowclk.json", true) || {});
+  
   (function() {
     let drawTimeout;
   
-  // Actually draw the watch face
     function draw() {
       const x = g.getWidth() / 2;
       const y = g.getHeight() / 2;
@@ -33,14 +50,27 @@ Graphics.prototype.setFontLondrinaShadow = function() {
       if (hour[0] === '0') hour = hour[1];
       var minutes = String(date.getMinutes()).padStart(2, '0');
       const timeStr = hour + ':' + minutes;
-
-    g.setFontAlign(0, 0).setFont("LondrinaSolid").setColor(0, 1, 1).drawString(timeStr, x - 1, y);
+      var color = settings.color;
+      g.setFontAlign(0, 0).setFont("LondrinaSolid").setColor(color).drawString(timeStr, x - 1, y);
       g.reset().setFontAlign(0, 0).setFont("LondrinaShadow").drawString(timeStr, x - 1, y);
   
       const locale = require("locale");
-    const dateStr = locale.date(date, 0).toUpperCase() + "\n" +
-      locale.dow(date, 0).toUpperCase();
-    g.setFontAlign(0, 0).setFont("6x8", 2).drawString(dateStr, x, y + 48);
+      const dayOfMonth = date.getDate();
+      const month = locale.month(date, 1).slice(0, 1).toUpperCase() + locale.month(date, 1).slice(1).toLowerCase();
+      const year = date.getFullYear();
+      var dayOfMonthStr = dayOfMonth.toString();
+      if (dayOfMonth === 1 || dayOfMonth === 21 || dayOfMonth === 31) {
+        dayOfMonthStr += "st";
+      } else if (dayOfMonth === 2 || dayOfMonth === 22) {
+        dayOfMonthStr += "nd";
+      } else if (dayOfMonth === 3 || dayOfMonth === 23) {
+        dayOfMonthStr += "rd";
+      } else {
+        dayOfMonthStr += "th";
+      }
+      const dayOfWeek = locale.dow(date, 0).slice(0, 1).toUpperCase() + locale.dow(date, 0).slice(1).toLowerCase();
+      const dateStr = month + " " + dayOfMonthStr + ", " + year + "\n" + dayOfWeek;
+      g.setFontAlign(0, 0).setFont("DotGothic16").drawString(dateStr, x, y + 48);
   
       if (drawTimeout) clearTimeout(drawTimeout);
       drawTimeout = setTimeout(() => {
@@ -56,8 +86,8 @@ Graphics.prototype.setFontLondrinaShadow = function() {
         drawTimeout = undefined;
       }
     });
-
     Bangle.loadWidgets();
     draw();
     setTimeout(Bangle.drawWidgets, 0);
+    applySettings();
   })();

apps/shadowclk/custom.html

@@ -0,0 +1,231 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="../../css/spectre.min.css">
+  <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
+  <title>3-Bit Color Picker</title>
+  <style>
+    .main-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+    }
+
+    .color-button {
+      width: 30px;
+      height: 30px;
+      border: 1px solid black;
+      margin: 5px;
+      cursor: pointer;
+    }
+
+    .color-0 {
+      background: #000
+    }
+
+    .color-1 {
+      background: #f00
+    }
+
+    .color-2 {
+      background: #0f0
+    }
+
+    .color-3 {
+      background: #ff0
+    }
+
+    .color-4 {
+      background: #00f
+    }
+
+    .color-5 {
+      background: #f0f
+    }
+
+    .color-6 {
+      background: #0ff
+    }
+
+    .color-7 {
+      background: #fff
+    }
+
+    #preview-box {
+      width: 176px;
+      height: 176px;
+      border: 1px solid black;
+      margin-top: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: white;
+    }
+
+    #preview-canvas {
+      display: block;
+    }
+
+    #toggle-bg {
+      margin-top: 20px;
+    }
+
+    #upload {
+      margin-top: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="main-container">
+    <h1>3-Bit Color Picker</h1>
+    <div>
+      <script>
+        const colors = ['#000', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff'];
+        colors.forEach((color, i) => {
+          document.write(`<button class="color-button color-${i}" data-color="${color}"></button>`);
+        });
+      </script>
+    </div>
+    <button id="toggle-bg" class="btn btn-primary"onclick="toggleBackground()">Light/Dark</button>
+    <div id="preview-box">
+      <canvas id="preview-canvas" width="176" height="176"></canvas>
+    </div>
+    <button id="upload" class="btn btn-primary">Upload</button>
+    <script src="../../core/lib/customize.js"></script>
+  </div>
+  <script>
+    let selectedColor = "#0ff";
+    let isDarkBg = false; // Add this line to track the background state
+    document.querySelectorAll(".color-button").forEach(button => {
+      button.addEventListener("click", () => {
+        selectedColor = button.dataset.color;
+        drawText(selectedColor);
+      });
+    });
+
+    function formatTime(date) {
+      const hours = date.getHours();
+      const minutes = date.getMinutes();
+      const formattedHours = hours < 10 ? `${hours}` : `${hours}`;
+      const formattedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
+      return `${formattedHours}:${formattedMinutes}`;
+    }
+
+    function getCurrentDate() {
+      const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+      const suffixes = ["st", "nd", "rd", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "st", "nd", "rd", "th", "th", "th", "th", "th", "th", "th", "st"];
+      const date = new Date();
+      const month = months[date.getMonth()];
+      const day = date.getDate();
+      const suffix = suffixes[day - 1];
+      const year = date.getFullYear();
+      return `${month} ${day}${suffix}, ${year}`;
+    }
+
+    function getCurrentDay() {
+      const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+      const date = new Date();
+      return days[date.getDay()];
+    }
+
+    function toggleBackground() {
+      const previewBox = document.getElementById("preview-box");
+      isDarkBg = !isDarkBg; // Toggle the background state
+      previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
+      drawText(selectedColor); // Redraw the text with updated color
+    }
+
+    function drawText(color) {
+      const canvas = document.getElementById("preview-canvas");
+      const ctx = canvas.getContext("2d");
+
+      // Clear the canvas
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Set the base font and selected color
+      ctx.font = "81px Londrina Solid";
+      ctx.fillStyle = color;
+
+      // Get the current local system time
+      const currentTime = formatTime(new Date());
+
+      // Measure the text width and calculate the horizontal position
+      const timeWidth = ctx.measureText(currentTime).width;
+      let xPos = (canvas.width - timeWidth) / 2;
+
+      // Measure the text height based on the font size and calculate the vertical position
+      const timeHeight = ctx.measureText('M').actualBoundingBoxAscent + ctx.measureText('M').actualBoundingBoxDescent;
+      let yPos = (canvas.height + timeHeight) / 2;
+
+      // Draw the time
+      ctx.fillText(currentTime, xPos, yPos);
+
+      // Set the outline font and color
+      ctx.font = "81px Londrina Shadow";
+
+      // Set the text color based on the background state
+      if (isDarkBg) {
+        ctx.fillStyle = "#fff";
+      } else {
+        ctx.fillStyle = "#000";
+      }
+
+      // Draw the time again
+      ctx.fillText(currentTime, xPos, yPos);
+
+      // Set the font for the date
+      ctx.font = "19px DotGothic16";
+
+      // Get the current date
+      const currentDate = getCurrentDate();
+
+      // Measure the date width and calculate the horizontal position
+      const dateWidth = ctx.measureText(currentDate).width;
+      xPos = (canvas.width - dateWidth) / 2;
+
+      // Draw the date
+      yPos += 20;
+      ctx.fillText(currentDate, xPos, yPos);
+
+      // Get the current day of the week
+      const currentDay = getCurrentDay();
+
+      // Measure the day width and calculate the horizontal position
+      const dayWidth = ctx.measureText(currentDay).width;
+      xPos = (canvas.width - dayWidth) / 2;
+
+      // Draw the day of the week
+      ctx.fillText(currentDay, xPos, yPos + 20);
+    }
+
+    // Update the time every second
+    setInterval(() => {
+      drawText(selectedColor);
+    }, 1000);
+
+    document.getElementById("upload").addEventListener("click", function() {
+      // Prepare data to send to the watch
+      const data = {
+        color: selectedColor,
+        theme: isDarkBg ? "dark" : "light"
+      };
+
+      // Convert the data to JSON
+      const json = JSON.stringify(data);
+
+      // Send app and settings
+      sendCustomizedApp({
+        storage: [
+          { name: "shadowclk.app.js", url: "app.js" },
+          { name: "shadowclk.json", content: json }
+        ]
+      });
+    });
+  </script>
+</body>
+</html>

apps/shadowclk/metadata.json

@@ -1,16 +1,34 @@
 {
   "id": "shadowclk",
   "name": "Shadow Clock",
-  "version": "0.01",
-  "description": "A simple clock using the Londrina font with color and a shadowed outline. Based on the Anton Clock.",
+  "version": "0.02",
+  "description": "A simple clock using the Londrina font in color with a shadowed outline. Based on the Anton Clock.",
   "icon": "app.png",
-  "screenshots": [{"url":"screenshot.png"},{"url":"screenshot-1.png"}],
+  "screenshots": [{
+    "url": "screenshot.png"
+  }, {
+    "url": "screenshot-1.png"
+  }],
   "type": "clock",
   "tags": "clock",
   "supports": ["BANGLEJS", "BANGLEJS2"],
+  //"custom": "custom.html",
   "allow_emulator": true,
-  "storage": [
-    {"name":"shadowclk.app.js","url":"app.js"},
-    {"name":"shadowclk.img","url":"app-icon.js","evaluate":true}
-  ]
+  "storage": [{
+      "name": "shadowclk.app.js",
+      "url": "app.js"
+    },
+    {
+      "name": "shadowclk.settings.js",
+      "url": "settings.js"
+    },
+    {
+      "name": "shadowclk.img",
+      "url": "app-icon.js",
+      "evaluate": true
+    }
+  ],
+  "data": [{
+    "name": "shadowclk.json"
+  }]
 }

apps/shadowclk/settings.js

@@ -0,0 +1,58 @@
+(function (back) {
+  // Constants
+  const LOC = "shadowclk.json";
+  const SYS = "setting.json";
+  const teletextColors = ["#000", "#f00", "#0f0", "#ff0", "#00f", "#f0f", "#0ff", "#fff"];
+  const teletextColorNames = ["Black", "Red", "Green", "Yellow", "Blue", "Magenta", "Cyan", "White"];
+
+  // Load and set default settings
+  let appSettings = Object.assign({
+    color: teletextColors[6],
+    theme: 'light',
+  }, require('Storage').readJSON(LOC, true) || {});
+
+  // Save settings to storage
+  function writeSettings() {
+    require('Storage').writeJSON(LOC, appSettings);
+  }
+
+  // Switch theme and save to storage
+  function switchTheme(mode) {
+    if (mode === g.theme.dark) return;
+    let s = require("Storage").readJSON(SYS, 1) || {};
+    const cl = x => g.setColor(x).getColor();
+    s.theme = mode ? {
+      fg: cl("#fff"), bg: cl("#000"), fg2: cl("#0ff"), bg2: cl("#000"), fgH: cl("#fff"), bgH: cl("#00f"), dark: true
+    } : {
+      fg: cl("#000"), bg: cl("#fff"), fg2: cl("#000"), bg2: cl("#cff"), fgH: cl("#000"), bgH: cl("#0ff"), dark: false
+    };
+    require("Storage").writeJSON("setting.json", s);
+    if (Bangle.CLOCK) load(global.__FILE__);
+  }
+
+  // Show settings menu
+  E.showMenu({
+    "": { "title": "Shadow Clock" },
+    "< Back": () => back(),
+    'Theme:': {
+      value: (appSettings.theme === 'dark'),
+      format: v => v ? "Dark" : "Light",
+      onchange: v => {
+        const newTheme = v ? 'dark' : 'light';
+        switchTheme(newTheme === 'dark');
+        appSettings.theme = newTheme;
+        writeSettings();
+      }
+    },
+    'Color:': {
+      value: teletextColors.indexOf(appSettings.color),
+      min: 0,
+      max: 7,
+      onchange: v => {
+        appSettings.color = teletextColors[v];
+        writeSettings();
+      },
+      format: v => teletextColorNames[v]
+    }
+  });
+});