LEDs and buttons working

data/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

data/esbuild.mjs

@@ -0,0 +1,50 @@
+import esbuild from "esbuild";
+import { sassPlugin } from "esbuild-sass-plugin";
+import htmlPlugin from '@chialab/esbuild-plugin-html';
+import handlebarsPlugin from "esbuild-plugin-handlebars";
+import { clean } from 'esbuild-plugin-clean';
+
+import postcss from "postcss";
+import autoprefixer from "autoprefixer";
+
+const hbsOptions = {
+    additionalHelpers: { splitText: "helpers.js" },
+    additionalPartials: {},
+    precompileOptions: {}
+  }
+
+esbuild
+    .build({
+        entryPoints: ["src/css/style.scss", "src/js/script.ts", "src/index.html", "src/js/helpers.js"],
+        outdir: "build",
+        bundle: true,
+        loader: {
+            ".png": "dataurl",
+            ".woff": "dataurl",
+            ".woff2": "dataurl",
+            ".eot": "dataurl",
+            ".ttf": "dataurl",
+            ".svg": "dataurl",
+        },
+        plugins: [
+            clean({
+                patterns: ['./build/*']
+              }),
+            htmlPlugin(),
+            sassPlugin({
+                async transform(source) {
+                    const { css } = await postcss([autoprefixer]).process(
+                        source
+                        , { from: undefined });
+                    return css;
+                },
+            }),
+            handlebarsPlugin(hbsOptions),
+
+        ],
+        minify: true,
+        metafile: false,
+        sourcemap: false
+    })
+    .then(() => console.log("⚡ Build complete! ⚡"))
+    .catch(() => process.exit(1));

data/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "data",
+  "packageManager": "yarn@3.2.1",
+  "scripts": {
+    "build": "node esbuild.mjs"
+  },
+  "dependencies": {
+    "esbuild": "0.19.4"
+  },
+  "devDependencies": {
+    "@chialab/esbuild-plugin-html": "^0.17.2",
+    "@craftamap/esbuild-plugin-html": "^0.5.0",
+    "@esbuilder/html": "^0.0.6",
+    "autoprefixer": "^10.4.16",
+    "bootstrap": "^5.3.2",
+    "esbuild-plugin-clean": "^1.0.1",
+    "esbuild-plugin-handlebars": "^1.0.2",
+    "esbuild-sass-plugin": "^2.16.0",
+    "handlebars": "^4.7.7",
+    "postcss": "^8.4.31",
+    "typescript": "^5.1.6"
+  }
+}

data/src/css/style.scss

@@ -0,0 +1,121 @@
+// @import "../node_modules/bootstrap/scss/bootstrap";
+
+@import "../node_modules/bootstrap/scss/functions";
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
+
+$form-range-track-bg: #fff;
+
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/maps";
+@import "../node_modules/bootstrap/scss/utilities";
+
+@import "../node_modules/bootstrap/scss/root";
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/type";
+@import "../node_modules/bootstrap/scss/containers";
+@import "../node_modules/bootstrap/scss/grid";
+@import "../node_modules/bootstrap/scss/forms";
+@import "../node_modules/bootstrap/scss/buttons";
+@import "../node_modules/bootstrap/scss/navbar";
+@import "../node_modules/bootstrap/scss/nav";
+@import "../node_modules/bootstrap/scss/card";
+@import "../node_modules/bootstrap/scss/progress";
+
+@import "../node_modules/bootstrap/scss/helpers";
+@import "../node_modules/bootstrap/scss/utilities/api";
+
+
+@font-face {
+    font-display: swap;
+    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Oswald';
+    font-style: normal;
+    font-weight: 400;
+    src: url('oswald.woff2') format('woff2'),
+        /* Chrome 36+, Opera 23+, Firefox 39+ */
+        url('oswald.woff') format('woff');
+    /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+nav {
+    margin-bottom: 15px;
+}
+
+.splitText div:first-child::after {
+    display: block;
+    content: '';
+    margin-top: 0px;
+    border-bottom: 2px solid;
+    margin-bottom: 3px;
+}
+
+#btcclock-wrapper {
+    margin: 0 auto;
+}
+
+.btclock {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    align-content: stretch;
+    font-family: 'Oswald', sans-serif;
+}
+
+.btclock>div {
+    padding: 5px;
+}
+
+.fg-ffff .btclock>div {
+    color: #fff;
+    border-color: #fff;
+}
+
+.bg-ffff .btclock>div {
+    background: #fff;
+}
+
+.fg-f800 .btclock>div {
+    color: #f00;
+    border-color: #f00;
+}
+
+.bg-f800 .btclock>div {
+    background: #f00;
+}
+
+.fg-0 .btclock>div {
+    color: #000;
+    border-color: #000;
+}
+
+.bg-0 .btclock>div {
+    background: #000;
+}
+
+.splitText {
+    font-size: 2.2rem;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    text-align: center;
+}
+
+.digit {
+    font-size: 5rem;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.digit-blank {
+    content: "abc";
+}
+
+#customText {
+    text-transform: uppercase;
+}
+
+#toggleTimerArea {
+    cursor: pointer;
+}

data/src/index.html

@@ -0,0 +1,235 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <link href="/css/style.css" rel="stylesheet">
+  <title>&#8383;TClock</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"
+    integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</head>
+
+<body>
+  <nav class="navbar navbar-light bg-light">
+    <div class="container-fluid">
+      <span class="navbar-brand mb-0 h1">&#8383;TClock</span>
+    </div>
+  </nav>
+  <script id="entry-template" type="text/x-handlebars-template">
+        <div class="entry">
+          <h1>Status</h1>
+          <div class="body">
+            <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+              {{#each screens }}
+              <input type="radio" class="btn-check" name="btnradio" id="btnradio{{ @index }}" autocomplete="off" {{#ifEquals @index ../currentScreen }} checked {{/ifEquals}} onclick="changeScreen({{ @index }})">
+              <label class="btn btn-outline-primary" for="btnradio{{ @index }}">{{ this }}</label>
+             {{/each}}
+        
+            </div>
+            <p>Rendered:</p>
+            {{#if rendered }}
+            <div class="btcclock-wrapper" id="btcclock-wrapper">
+              <div class="btclock">
+            {{#each data }}
+              {{{splitText this}}}
+            {{/each}}
+            </div></div>
+            {{/if}}
+            {{#if ledStatus }}
+            <p>LED status:</p>
+
+            {{#each ledStatus }}
+              <div style="background: #{{ this }}">&nbsp;</div>
+            {{/each}}
+            
+            {{/if}}
+            <div>
+              <p>Screen cycle: 
+                <span onclick="toggleTimer({{ timerRunning }})" id="toggleTimerArea">
+                {{#if timerRunning}}
+                &#9205;
+                {{else}}
+                &#9208;
+                {{/if}}
+                </span>
+              </p>
+            </div>
+            <hr>
+            <div>
+              <div class="progress" role="progressbar" aria-label="Memory usage" aria-valuenow="{{ memUsage }}" aria-valuemin="0" aria-valuemax="100">
+                <div class="progress-bar progress-bar-striped" style="width: {{ memUsage }}%">{{ memUsage }}%</div>
+              </div>
+              <div class="d-flex justify-content-between">
+                <div>Memory usage</div>
+                <div>{{ memFree }} / {{ memTotal }} KiB</div>
+              </div>
+            </div>
+            <hr>
+            <div>
+              <p>Uptime: {{#if uptime.h }}{{ uptime.h }}h {{/if}}{{ uptime.m }}m {{ uptime.s }}s</p>
+              <p>
+                Price connection:
+                <span>
+                {{#if connectionStatus.price}}
+                &#9989;
+                {{else}}
+                &#10060;
+                {{/if}}
+                </span>
+                - 
+                Mempool.space connection:
+                <span>
+                  {{#if connectionStatus.price}}
+                  &#9989;
+                  {{else}}
+                  &#10060;
+                  {{/if}}
+                </span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </script>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col">
+        <div class="h-100 p-3 border bg-light">
+          <h1>Custom text</h1>
+          <form name="customText" id="customTextForm">
+            <div class="row">
+              <label for="customText" class="col-sm-4 col-form-label">Text</label>
+              <div class="col-sm-8">
+                <input type="text" class="form-control" id="customText" name="customText" maxlength="7">
+              </div>
+            </div>
+            <footer>
+              <button type="submit" class="btn btn-primary">Show Text</button>
+              <button type="button" class="btn btn-secondary" id="restartBtn">Restart</button>
+            </footer>
+          </form>
+          <hr>
+          <h2>LEDs</h2>
+          <form id="ledsForm" name="ledsForm">
+            <div class="row">
+              <label for="ledColorPicker" class="col-sm-6 col-form-label">LEDs color</label>
+              <div class="col-sm-6">
+                <input type="color" id="ledColorPicker" name="pickedColor" value="#ff8800">
+              </div>
+            </div>
+            <button type="button" class="btn btn-secondary" id="turnOffLedsBtn">Turn off</button>
+            <button type="submit" class="btn btn-primary">Set color</button>
+          </form>
+        </div>
+      </div>
+      <div class="col">
+        <div id="output" class="p-3 border bg-light"></div>
+      </div>
+      <div class="col">
+        <div class="h-100 p-3 border bg-light">
+          <h1>Settings</h1>
+          <form method="post" action="/api/settings" name="settings" id="settingsForm">
+            <div class="row">
+              <label for="fgColor" class="col-sm-6 col-form-label">Text color</label>
+              <div class="col-sm-6">
+                <select class="form-select" id="fgColor" name="fgColor">
+                  <option value="0xF800">Red</option>
+                  <option value="0xFFFF">White</option>
+                  <option value="0x0">Black</option>
+                </select>
+              </div>
+            </div>
+            <div class="row">
+              <label for="bgColor" class="col-sm-6 col-form-label">Background color</label>
+              <div class="col-sm-6">
+                <select class="form-select" id="bgColor" name="bgColor">
+                  <option value="0xF800">Red</option>
+                  <option value="0xFFFF">White</option>
+                  <option value="0x0">Black</option>
+                </select>
+              </div>
+            </div>
+            <div class="row">
+              <label for="timePerScreen" class="col-sm-6 col-form-label">Time per screen</label>
+              <div class="col-sm-6">
+                <div class="input-group mb-3">
+                  <input type="text" name="timePerScreen" id="timePerScreen" class="form-control">
+                  <span class="input-group-text">minutes</span>
+                </div>
+
+              </div>
+            </div>
+            <div class="row">
+              <label for="fullRefreshMin" class="col-sm-6 col-form-label">Full refresh every</label>
+              <div class="col-sm-6">
+                <div class="input-group mb-3">
+                  <input type="text" name="fullRefreshMin" id="fullRefreshMin" class="form-control">
+                  <span class="input-group-text">minutes</span>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <label for="tzOffset" class="col-sm-6 col-form-label">Timezone offset</label>
+              <div class="col-sm-6">
+                <div class="input-group mb-3">
+                  <input type="number" name="tzOffset" id="tzOffset" class="form-control">
+                  <span class="input-group-text">min</span>
+                  <button class="btn btn-outline-secondary" type="button" id="getTzOffsetBtn">Auto</button>
+                </div>
+                <div class="form-text">A restart is required to apply TZ offset.</div>
+              </div>
+            </div>
+            <div class="row">
+              <div class=" col-sm-6">
+                <div class="form-check form-switch">
+                  <input class="form-check-input" type="checkbox" id="ledFlashOnUpdate" name="ledFlashOnUpd" value="1">
+                  <label class="form-check-label" for="ledFlashOnUpdate">LED flash on update</label>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <label class="col-sm-6 col-form-label" for="ledBrightness">LED brightness</label>
+              <div class="col-sm-6">
+                <input type="range" class="form-range" id="ledBrightness" name="ledBrightness" value="128" min="0"
+                  max="255">
+              </div>
+            </div>
+            <div class="row">
+              <label for="mempoolInstance" class="col-sm-6 col-form-label">Mempool Instance</label>
+              <div class="col-sm-6">
+                <input type="text" name="mempoolInstance" id="mempoolInstance" class="form-control">
+              </div>
+            </div>
+            <script id="screens-template" type="text/x-handlebars-template">
+              {{#each screens }}
+              <div class="row">
+                <div class="col-sm-12">
+                <div class="form-check form-switch">
+                  <input class="form-check-input" type="checkbox" id="screen{{id}}" name="screen[{{id}}]" value="1" {{#if enabled}}checked{{/if}}>
+                  <label class="form-check-label" for="screen{{id}}">{{name}}</label>
+                </div>
+              </div>
+              {{/each}}
+            </script>
+            <h3>Screens</h3>
+            <div id="outputScreens"></div>
+            <button type="submit" class="btn btn-secondary">Reset</button>
+            <button type="submit" class="btn btn-primary" id="saveSettingsBtn">Save</button>
+          </form>
+
+        </div>
+      </div>
+    </div>
+  </div>
+  <footer>
+    <small>
+      <span id="gitRev"></span>
+      <span id="lastBuildTime"></span>
+    </small>
+  </footer>
+  <script src="/js/script.js"></script>
+</body>
+
+</html>

data/src/js/helpers.js

@@ -0,0 +1,17 @@
+//import "handlebars/dist/handlebars.js";
+
+Handlebars.registerHelper('splitText', function (aString) {
+    if (aString.includes("/")) {
+      var c = aString.split("/").map((el) => { return "<div class=\"flex-items\">" + el + "</div>"; }).join('');
+      return "<div class=\"splitText\">" + c + "</div>";
+    }
+    if (aString.length == 0 || aString === " ") {
+      aString = "&nbsp;&nbsp;";
+    }
+    //return aString;
+    return "<div class=\"digit\">" + aString + "</div>";
+  });
+
+Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
+    return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
+});

data/src/js/script.ts

@@ -0,0 +1,187 @@
+import './helpers.js';
+
+var screens = ["Block Height", "Moscow Time", "Ticker", "Time", "Halving countdown"];
+
+toTime = (secs) => {
+    var hours = Math.floor(secs / (60 * 60));
+
+    var divisor_for_minutes = secs % (60 * 60);
+    var minutes = Math.floor(divisor_for_minutes / 60);
+
+    var divisor_for_seconds = divisor_for_minutes % 60;
+    var seconds = Math.ceil(divisor_for_seconds);
+
+    var obj = {
+        "h": hours,
+        "m": minutes,
+        "s": seconds
+    };
+    return obj;
+}
+
+getBcStatus = () => {
+    fetch('/api/status', {
+        method: 'get'
+    })
+        .then(response => response.json())
+        .then(jsonData => {
+            var source = document.getElementById("entry-template").innerHTML;
+            var template = Handlebars.compile(source);
+
+            var context = { 
+                timerRunning: jsonData.timerRunning, 
+                memUsage: Math.round(jsonData.espFreeHeap / jsonData.espHeapSize * 100), 
+                memFree: Math.round(jsonData.espFreeHeap / 1024), 
+                memTotal: Math.round(jsonData.espHeapSize / 1024), 
+                uptime: toTime(jsonData.espUptime), 
+                currentScreen: jsonData.currentScreen, 
+                rendered: jsonData.rendered, 
+                data: jsonData.data, 
+                screens: screens, 
+                ledStatus: jsonData.ledStatus ? jsonData.ledStatus.map((t) => (t).toString(16)) : [],
+                connectionStatus: jsonData.connectionStatus
+            };
+
+
+            document.getElementById('output').innerHTML = template(context);
+        })
+        .catch(err => {
+            //error block
+        });
+}
+
+interval = setInterval(getBcStatus, 2500);
+getBcStatus();
+
+fetch('/api/settings', {
+    method: 'get'
+})
+    .then(response => response.json())
+    .then(jsonData => {
+        var fgColor = ("0x" + jsonData.fgColor.toString(16).toUpperCase());
+        if (jsonData.epdColors == 2) {
+            document.getElementById('fgColor').querySelector('[value="0xF800"]').remove();
+            document.getElementById('bgColor').querySelector('[value="0xF800"]').remove();
+        }
+
+        document.getElementById('customText').setAttribute('maxlength', jsonData.numScreens);
+        document.getElementById('output').classList.add("fg-" + jsonData.fgColor.toString(16));
+        document.getElementById('output').classList.add("bg-" + jsonData.bgColor.toString(16));
+
+        document.getElementById('fgColor').value = fgColor;
+        document.getElementById('bgColor').value = "0x" + jsonData.bgColor.toString(16).toUpperCase();
+
+        if (jsonData.ledFlashOnUpdate)
+            document.getElementById('ledFlashOnUpdate').checked = true;
+
+        if (jsonData.useBitcoinNode)
+            document.getElementById('useBitcoinNode').checked = true;
+
+        let nodeFields = ["rpcHost", "rpcPort", "rpcUser", "tzOffset"];
+
+        for (let n of nodeFields) {
+            document.getElementById(n).value = jsonData[n];
+        }
+
+        document.getElementById('timePerScreen').value = jsonData.timerSeconds / 60;
+        document.getElementById('ledBrightness').value = jsonData.ledBrightness;
+        document.getElementById('fullRefreshMin').value = jsonData.fullRefreshMin;
+        document.getElementById('wpTimeout').value = jsonData.wpTimeout;
+        document.getElementById('mempoolInstance').value = jsonData.mempoolInstance;
+
+        if (jsonData.gitRev)
+            document.getElementById('gitRev').innerHTML = "Version: " + jsonData.gitRev;
+
+        if (jsonData.lastBuildTime)
+            document.getElementById('lastBuildTime').innerHTML = " / " + new Date((jsonData.lastBuildTime * 1000)).toLocaleString();
+
+        var source = document.getElementById("screens-template").innerHTML;
+        var template = Handlebars.compile(source);
+        var context = { screens: jsonData.screens };
+        document.getElementById('outputScreens').innerHTML = template(context);
+    })
+    .catch(err => {
+        console.log('error', err);
+    });
+
+
+
+var settingsForm = document.querySelector('#settingsForm');
+settingsForm.onsubmit = (event) => {
+    var formData = new FormData(settingsForm);
+
+    fetch("/api/settings",
+        {
+            body: formData,
+            method: "post"
+        }).then(() => {
+            console.log('Submitted');
+            document.getElementById('saveSettingsBtn')?.classList.add('btn-success');
+        });
+
+    return false;
+}
+
+document.getElementById('restartBtn').onclick = (event) => {
+    fetch('/api/restart');
+    return false;
+}
+
+
+var ledsForm = document.querySelector('#ledsForm');
+ledsForm.onsubmit = (event) => {
+    var formData = new FormData(ledsForm);
+
+    fetch('/api/lights/' + encodeURIComponent(formData.get('pickedColor').substring(1)), {
+        method: 'get'
+    })
+
+    return false;
+}
+
+turnOffLedsBtn.onclick = (event) => {
+    fetch('/api/lights/off', {
+        method: 'get'
+    })
+    return false;
+}
+
+let tzOffsetBtn = document.getElementById('getTzOffsetBtn');
+
+if (tzOffsetBtn)
+    tzOffsetBtn.onclick = (event) => {
+        document.getElementById("tzOffset").value = new Date(new Date().getFullYear(), 0, 1).getTimezoneOffset() * -1;
+        return false;
+    };
+
+var textForm = document.querySelector('#customTextForm');
+textForm.onsubmit = (event) => {
+    var formData = new FormData(textForm);
+
+    fetch('/api/show/text/' + encodeURIComponent(formData.get('customText')), {
+        method: 'get'
+    })
+        .then(response => response.json())
+        .catch(err => {
+            //error block
+        });
+    return false;
+}
+
+changeScreen = (id) => {
+    fetch('/api/show/screen/' + encodeURIComponent(id), {
+        method: 'get'
+    })
+        .then(response => response.json())
+        .catch(err => {
+            //error block
+        });
+}
+
+toggleTimer = (currentStatus) => {
+    if (currentStatus) {
+        fetch('/api/action/pause');
+    } else {
+        fetch('/api/action/timer_restart');
+    }
+}

data/src/wifi.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <link href="/css/style.css" rel="stylesheet">
+  <title>&#8383;TClock WiFi Settings</title>
+</head>
+
+<body>
+  <nav class="navbar navbar-light bg-light">
+    <div class="container-fluid">
+      <span class="navbar-brand mb-0 h1">&#8383;TClock WiFi Settings</span>
+    </div>
+  </nav>
+ 
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col">
+        <div class="h-100 p-3 border bg-light">
+          <h1>WiFi Settings</h1>
+          <form name="customText" id="customTextForm" method="post" action="/setup/wifi">
+            <div class="row">
+              <label for="ssid" class="col-sm-4 col-form-label">SSID</label>
+              <div class="col-sm-8">
+                <input type="text" class="form-control" id="ssid" name="ssid" required>
+              </div>
+            </div>
+            <div class="row">
+                <label for="password" class="col-sm-4 col-form-label">Password</label>
+                <div class="col-sm-8">
+                  <input type="text" class="form-control" id="password" name="password" required>
+                </div>
+              </div>
+            <footer>
+              <button type="submit" class="btn btn-primary">Save and connect</button>
+              <p><small>The BTClock will restart and connect to your network. If it doesn't, reset to factory settings by holding the red button while booting to retry.</small></p>
+            </footer>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>

data/tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "files": ["src/js/**.ts"],
+    "compilerOptions": {
+      "noImplicitAny": true,
+    }
+  }