Add new webUI through submodule

This commit is contained in:
Djuri Baars 2023-11-17 19:28:40 +01:00
parent 70fc46a74a
commit 8d94cb4090
22 changed files with 167 additions and 4286 deletions

View File

@ -13,6 +13,8 @@ jobs:
steps:
- uses: actions/checkout@v3
with:
submodules: recursive
- uses: actions/setup-node@v3
with:
node-version: lts/*
@ -23,6 +25,7 @@ jobs:
path: |
~/.cache/pip
~/.platformio/.cache
~/data/node_modules
key: ${{ runner.os }}-pio
- uses: actions/setup-python@v4
with:

3
.gitmodules vendored Normal file
View File

@ -0,0 +1,3 @@
[submodule "data"]
path = data
url = https://github.com/btclock/webui.git

1
data Submodule

@ -0,0 +1 @@
Subproject commit e14e85425eb7a5fdc1d5aab6f4ae091f93ab45a7

View File

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

View File

@ -1,59 +0,0 @@
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 { copy } from 'esbuild-plugin-copy';
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),
copy({
// this is equal to process.cwd(), which means we use cwd path as base path to resolve `to` path
// if not specified, this plugin uses ESBuild.build outdir/outfile options as base path.
resolveFrom: 'cwd',
assets: {
from: ['./src/api.*'],
to: ['./build'],
},
})
],
minify: true,
metafile: false,
sourcemap: false
})
.then(() => console.log("⚡ Build complete! ⚡"))
.catch(() => process.exit(1));

View File

@ -1,24 +0,0 @@
{
"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-copy": "^2.1.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"
}
}

View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="SwaggerUI"
/>
<title>BTClock API</title>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui-bundle.js" crossorigin></script>
<script src="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui-standalone-preset.js" crossorigin></script>
<script>
window.onload = () => {
window.ui = SwaggerUIBundle({
url: 'api.json',
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
layout: "StandaloneLayout",
});
};
</script>
</body>
</html>

View File

@ -1,345 +0,0 @@
{
"openapi": "3.0.3",
"info": {
"title": "BTClock API",
"version": "3.0",
"description": "BTClock V3 API"
},
"servers": [
{
"url": "/api/"
}
],
"paths": {
"/status": {
"get": {
"tags": [
"system"
],
"summary": "Get current status",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/system_status": {
"get": {
"tags": [
"system"
],
"summary": "Get system status",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/settings": {
"get": {
"tags": [
"system"
],
"summary": "Get current settings",
"responses": {
"200": {
"description": "successful operation"
}
}
},
"post": {
"tags": [
"system"
],
"summary": "Save current settings",
"requestBody": {
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Settings"
}
}
}
},
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/action/pause": {
"get": {
"tags": [
"timer"
],
"summary": "Pause screen rotation",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/action/timer_restart": {
"get": {
"tags": [
"timer"
],
"summary": "Restart screen rotation",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/show/screen/{id}": {
"get": {
"tags": [
"screens"
],
"summary": "Set screen to show",
"parameters": [
{
"in": "path",
"name": "id",
"schema": {
"type": "integer",
"default": 1
},
"required": true,
"description": "ID of screen to show"
}
],
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/show/text/{text}": {
"get": {
"tags": [
"screens"
],
"summary": "Set text to show",
"parameters": [
{
"in": "path",
"name": "text",
"schema": {
"type": "string",
"default": "text"
},
"required": true,
"description": "Text to show"
}
],
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/show/custom": {
"post": {
"tags": [
"screens"
],
"summary": "Set text to show (advanced)",
"requestBody": {
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/CustomText"
}
}
}
},
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/full_refresh": {
"get": {
"tags": [
"system"
],
"summary": "Force full refresh of all displays",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/lights/{color}": {
"get": {
"tags": [
"lights"
],
"summary": "Turn on LEDs with specific color",
"parameters": [
{
"in": "path",
"name": "color",
"schema": {
"type": "string",
"default": "FFCC00"
},
"required": true,
"description": "Color in RGB hex"
}
],
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/lights/off": {
"get": {
"tags": [
"lights"
],
"summary": "Turn LEDs off",
"responses": {
"200": {
"description": "successful operation"
}
}
}
},
"/restart": {
"get": {
"tags": [
"system"
],
"summary": "Restart BTClock",
"responses": {
"200": {
"description": "successful operation"
}
}
}
}
},
"components": {
"schemas": {
"Settings": {
"type": "object",
"properties": {
"fetchEurPrice": {
"type": "boolean",
"description": "Fetch EUR price instead of USD"
},
"fgColor": {
"type": "string",
"default": 16777215,
"description": "ePaper foreground (text) color"
},
"bgColor": {
"type": "string",
"default": 0,
"description": "ePaper background color"
},
"ledTestOnPower": {
"type": "boolean",
"default": true,
"description": "Do LED test on power-on"
},
"ledFlashOnUpd": {
"type": "boolean",
"default": false,
"description": "Flash LEDs on new block"
},
"mdnsEnabled": {
"type": "boolean",
"default": true,
"description": "Enable mDNS"
},
"otaEnabled": {
"type": "boolean",
"default": true,
"description": "Enable over-the-air updates"
},
"stealFocusOnBlock": {
"type": "boolean",
"default": false,
"description": "Steal focus on new block"
},
"mcapBigChar": {
"type": "boolean",
"default": false,
"description": "Use big characters for market cap screen"
},
"mempoolInstance": {
"type": "string",
"default": "mempool.space",
"description": "Mempool.space instance to connect to"
},
"ledBrightness": {
"type": "integer",
"default": 128,
"description": "Brightness of LEDs"
},
"fullRefreshMin": {
"type": "integer",
"default": 60,
"description": "Full refresh time of ePaper displays in minutes"
},
"screen[0]": {
"type": "boolean"
},
"screen[1]": {
"type": "boolean"
},
"screen[2]": {
"type": "boolean"
},
"screen[3]": {
"type": "boolean"
},
"screen[4]": {
"type": "boolean"
},
"screen[5]": {
"type": "boolean"
},
"tzOffset": {
"type": "integer",
"default": 60,
"description": "Timezone offset in minutes"
},
"minSecPriceUpd": {
"type": "integer",
"default": 30,
"description": "Minimum time between price updates in seconds"
},
"timePerScreen": {
"type": "integer",
"default": 30,
"description": "Time between screens when rotating in minutes"
}
}
},
"CustomText": {
"type": "array",
"items": {
"type": "string"
},
"minItems": 7,
"maxItems": 7
}
}
}
}

Binary file not shown.

Binary file not shown.

View File

@ -1,201 +0,0 @@
// @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;
$color-mode-type: media-query;
// $border-radius: .675rem;
@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/button-group";
@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+ */
}
@include media-breakpoint-down(xl) {
html {
font-size: 85%;
}
button.btn,
input[type="button"].btn,
input[type="submit"].btn,
input[type="reset"].btn {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
}
}
@include media-breakpoint-down(lg) {
html {
font-size: 75%;
}
}
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;
}
div#output .btclock {
border: 1px solid darkgray;
background: #000;
border-radius: 5px;
padding: 10px;
max-width: 700px;
margin: 0 auto;
.digit,
.splitText,
.mediumText {
border: 2px solid gold;
border-radius: 8px;
@include media-breakpoint-up(sm) {
min-width: 10px;
}
@include media-breakpoint-up(xxl) {
min-width: 70px;
}
text-align: center;
}
}
.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 {
@include media-breakpoint-up(sm) {
font-size: 1.0rem;
padding-top: 8px !important;
padding-bottom: 9px !important;
}
@include media-breakpoint-up(xxl) {
font-size: 1.8rem;
padding-top: 19px !important;
padding-bottom: 20px !important;
}
text-align: center;
}
.mediumText {
font-size: 3rem;
padding-left: 5px;
padding-right: 5px;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.digit {
font-size: 5rem;
@include media-breakpoint-up(sm) {
font-size: 2.5rem;
}
@include media-breakpoint-up(xxl) {
font-size: 5rem;
}
padding-left: 10px;
padding-right: 10px;
}
.digit-blank {
content: "abc";
}
#customText {
text-transform: uppercase;
}
#toggleTimerArea {
cursor: pointer;
}
#system_info {
padding: 0;
li {
list-style: none;
}
}

View File

@ -1,327 +0,0 @@
<!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-expand">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">&#8383;TClock</span>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" target="_blank" href="api.html">API</a>
</li>
</ul>
</div>
</div>
</nav>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h2>Status</h2>
<div class="body">
<div class="btn-group btn-group-sm" role="group" aria-label="Screens 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; running
{{else}}
&#9208; stopped
{{/if}}
</span>
</p>
</div>
<hr>
<div>
<div class="progress" role="progressbar" aria-label="Memory free" aria-valuenow="{{ memFreePercent }}" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped" style="width: {{ memFreePercent }}%">{{ memFreePercent }}%</div>
</div>
<div class="d-flex justify-content-between">
<div>Memory free</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>
WS Price connection:
<span>
{{#if connectionStatus.price}}
&#9989;
{{else}}
&#10060;
{{/if}}
</span>
-
WS Mempool.space connection:
<span>
{{#if connectionStatus.blocks}}
&#9989;
{{else}}
&#10060;
{{/if}}
</span><br>
<small>If you use "Fetch &euro; price" the WS Price connection will show &#10060; since it uses another data source.</small>
</p>
</div>
</div>
</div>
</script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="p-3 border rounded-2">
<h2>Custom text</h2>
<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>
</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>
<hr>
<h2>System info</h2>
<ul class="small" id="system_info">
<li>Version: <span id="gitRev"></span></li>
<li>Build time: <span id="lastBuildTime"></span></li>
<li>IP: <span id="ipAddress"></span></li>
<li>Hostname: <span id="hostname"></span></li>
</ul>
<button type="button" class="btn btn-danger" id="restartBtn">Restart</button>
<button type="button" class="btn btn-warning" id="forceFullRefresh">Force full refresh</button>
</div>
</div>
<div class="col-sm-5">
<div id="output" class="p-3 border rounded-2">Loading, please wait...</div>
</div>
<div class="col-sm-4">
<div class="h-100 p-3 border rounded-2">
<h2>Settings</h2>
<form method="post" action="/api/settings" name="settings" id="settingsForm">
<div class="row">
<label for="fgColor" class="col-sm-6 col-form-label col-form-label-sm">Text color</label>
<div class="col-sm-6">
<select class="form-select form-select-sm" id="fgColor" name="fgColor">
<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 col-form-label-sm">Background color</label>
<div class="col-sm-6">
<select class="form-select form-select-sm" id="bgColor" name="bgColor">
<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 col-form-label-sm">Time per screen</label>
<div class="col-sm-6">
<div class="input-group input-group-sm">
<input type="number" min="1" 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 col-form-label-sm">Full refresh every</label>
<div class="col-sm-6">
<div class="input-group input-group-sm">
<input type="number" min="1" name="fullRefreshMin" id="fullRefreshMin" class="form-control">
<span class="input-group-text">minutes</span>
</div>
</div>
</div>
<div class="row">
<label for="minSecPriceUpd" class="col-sm-6 col-form-label col-form-label-sm">Time between price
updates</label>
<div class="col-sm-6 mb-3">
<div class="input-group input-group-sm">
<input type="number" name="minSecPriceUpd" min="1" id="minSecPriceUpd" class="form-control">
<span class="input-group-text">seconds</span>
</div>
<div class="form-text">Short amounts might shorten lifespan.</div>
</div>
</div>
<div class="row">
<label for="tzOffset" class="col-sm-6 col-form-label col-form-label-sm">Timezone offset</label>
<div class="col-sm-6">
<div class="input-group input-group-sm">
<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">
<label class="col-sm-6 col-form-label col-form-label-sm" 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 col-form-label-sm">Mempool Instance</label>
<div class="col-sm-6">
<input type="text" name="mempoolInstance" id="mempoolInstance" class="form-control">
</div>
</div>
<div class="row">
<label for="hostnamePrefix" class="col-sm-6 col-form-label col-form-label-sm">Hostname prefix</label>
<div class="col-sm-6">
<input type="text" name="hostnamePrefix" id="hostnamePrefix" class="form-control">
<div class="form-text">A restart is required to apply new hostname prefix.</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="ledTestOnPower" name="ledTestOnPower" value="1">
<label class="form-check-label" for="ledTestOnPower">LED power-on test</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<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 new block</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="stealFocusOnBlock" name="stealFocusOnBlock"
value="1">
<label class="form-check-label" for="stealFocusOnBlock">Steal focus on new block</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mcapBigChar" name="mcapBigChar" value="1">
<label class="form-check-label" for="mcapBigChar">Use big characters for market cap</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="otaEnabled" name="otaEnabled" value="1">
<label class="form-check-label" for="otaEnabled">OTA updates (restart required)</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mdnsEnabled" name="mdnsEnabled" value="1">
<label class="form-check-label" for="mdnsEnabled">mDNS (restart required)</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="fetchEurPrice" name="fetchEurPrice" value="1">
<label class="form-check-label" for="fetchEurPrice">Fetch &euro; price (restart required)</label>
</div>
</div>
</div>
<div>
<script id="screens-template" type="text/x-handlebars-template">
<div class="row">
<div class="col-sm-6">
{{#each screens }}
<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>
{{#ifEquals @index 2}}
</div>
<div class="col-sm-6">
{{/ifEquals}}
{{/each}}
</div>
</div>
</script>
<h3>Screens</h3>
<div id="outputScreens"></div>
<div class="d-grid gap-2 d-md-block">
<button type="submit" class="btn btn-secondary">Reset</button>
<button type="submit" class="btn btn-primary" id="saveSettingsBtn">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer>
</footer>
<script src="/js/script.js"></script>
</body>
</html>

View File

@ -1,20 +0,0 @@
//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 > 1 && !aString.startsWith("&")) {
return "<div class=\"mediumText\">" + aString + "</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);
});

View File

@ -1,262 +0,0 @@
import './helpers.js';
var screens = ["Block Height", "Moscow Time", "Ticker", "Time", "Halving countdown", "Market Cap"];
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;
}
let processStatusData = (jsonData) => {
var source = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);
let index = jsonData.data.findIndex(d => d === '[');
if (index !== -1) {
jsonData.data[index] = '&euro;';
}
var context = {
timerRunning: jsonData.timerRunning,
memFreePercent: 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.data,
data: jsonData.data,
screens: screens,
ledStatus: jsonData.ledStatus ? jsonData.ledStatus.map((t) => (t).toString(16)) : [],
connectionStatus: jsonData.connectionStatus
};
document.getElementById('output').innerHTML = template(context);
}
if (!!window.EventSource) {
const connectEventSource = () => {
let source = new EventSource('/events');
source.addEventListener('open', (e) => {
console.log("Status EventSource Connected");
if (e.data) {
processStatusData(JSON.parse(e.data));
}
}, false);
source.addEventListener('error', (e) => {
if (e.target.readyState != EventSource.OPEN) {
console.log("Status EventSource Disconnected");
setTimeout(connectEventSource, 10000);
}
source.close();
}, false);
source.addEventListener('status', (e) => {
processStatusData(JSON.parse(e.data));
}, false);
source.addEventListener('message', (e) => {
if (e.data == "closing") {
console.log("Closing EventSource, trying to reconnect in 10 seconds")
source.close();
setTimeout(connectEventSource, 10000);
}
}, false);
};
connectEventSource();
}
// getBcStatus = () => {
// fetch('/api/status', {
// method: 'get'
// })
// .then(response => response.json())
// .then()
// .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.stealFocusOnBlock)
document.getElementById('stealFocusOnBlock').checked = true;
if (jsonData.mcapBigChar)
document.getElementById('mcapBigChar').checked = true;
if (jsonData.mdnsEnabled)
document.getElementById('mdnsEnabled').checked = true;
if (jsonData.otaEnabled)
document.getElementById('otaEnabled').checked = true;
if (jsonData.ledTestOnPower)
document.getElementById('ledTestOnPower').checked = true;
if (jsonData.fetchEurPrice)
document.getElementById('fetchEurPrice').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('tzOffset').value = jsonData.tzOffset;
document.getElementById('mempoolInstance').value = jsonData.mempoolInstance;
document.getElementById('hostnamePrefix').value = jsonData.hostnamePrefix;
document.getElementById('minSecPriceUpd').value = jsonData.minSecPriceUpd;
if (jsonData.gitRev)
document.getElementById('gitRev').innerHTML = jsonData.gitRev;
if (jsonData.hostname)
document.getElementById('hostname').innerHTML = jsonData.hostname;
if (jsonData.ip)
document.getElementById('ipAddress').innerHTML = jsonData.ip;
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;
}
document.getElementById('forceFullRefresh').onclick = (event) => {
fetch('/api/full_refresh');
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');
}
}

View File

@ -1,227 +0,0 @@
openapi: 3.0.3
info:
title: BTClock API
version: "3.0"
description: BTClock V3 API
servers:
- url: /api/
paths:
/status:
get:
tags:
- system
summary: Get current status
responses:
'200':
description: successful operation
/system_status:
get:
tags:
- system
summary: Get system status
responses:
'200':
description: successful operation
/settings:
get:
tags:
- system
summary: Get current settings
responses:
'200':
description: successful operation
post:
tags:
- system
summary: Save current settings
requestBody:
content:
application/json:
schema:
$ref: '#/components/schemas/Settings'
responses:
'200':
description: successful operation
/action/pause:
get:
tags:
- timer
summary: Pause screen rotation
responses:
'200':
description: successful operation
/action/timer_restart:
get:
tags:
- timer
summary: Restart screen rotation
responses:
'200':
description: successful operation
/show/screen/{id}:
get:
tags:
- screens
summary: Set screen to show
parameters:
- in: path
name: id
schema:
type: integer
default: 1
required: true
description: ID of screen to show
responses:
'200':
description: successful operation
/show/text/{text}:
get:
tags:
- screens
summary: Set text to show
parameters:
- in: path
name: text
schema:
type: string
default: "text"
required: true
description: Text to show
responses:
'200':
description: successful operation
/show/custom:
post:
tags:
- screens
summary: Set text to show (advanced)
requestBody:
content:
application/json:
schema:
$ref: '#/components/schemas/CustomText'
responses:
'200':
description: successful operation
/full_refresh:
get:
tags:
- system
summary: Force full refresh of all displays
responses:
'200':
description: successful operation
/lights/{color}:
get:
tags:
- lights
summary: Turn on LEDs with specific color
parameters:
- in: path
name: color
schema:
type: string
default: FFCC00
required: true
description: Color in RGB hex
responses:
'200':
description: successful operation
/lights/off:
get:
tags:
- lights
summary: Turn LEDs off
responses:
'200':
description: successful operation
/restart:
get:
tags:
- system
summary: Restart BTClock
responses:
'200':
description: successful operation
components:
schemas:
Settings:
type: object
properties:
fetchEurPrice:
type: boolean
description: Fetch EUR price instead of USD
fgColor:
type: string
default: 0xFFFFFF
description: ePaper foreground (text) color
bgColor:
type: string
default: 0x000000
description: ePaper background color
ledTestOnPower:
type: boolean
default: true
description: Do LED test on power-on
ledFlashOnUpd:
type: boolean
default: false
description: Flash LEDs on new block
mdnsEnabled:
type: boolean
default: true
description: Enable mDNS
otaEnabled:
type: boolean
default: true
description: Enable over-the-air updates
stealFocusOnBlock:
type: boolean
default: false
description: Steal focus on new block
mcapBigChar:
type: boolean
default: false
description: Use big characters for market cap screen
mempoolInstance:
type: string
default: mempool.space
description: Mempool.space instance to connect to
ledBrightness:
type: integer
default: 128
description: Brightness of LEDs
fullRefreshMin:
type: integer
default: 60
description: Full refresh time of ePaper displays in minutes
screen[0]:
type: boolean
screen[1]:
type: boolean
screen[2]:
type: boolean
screen[3]:
type: boolean
screen[4]:
type: boolean
screen[5]:
type: boolean
tzOffset:
type: integer
default: 60
description: Timezone offset in minutes
minSecPriceUpd:
type: integer
default: 30
description: Minimum time between price updates in seconds
timePerScreen:
type: integer
default: 30
description: Time between screens when rotating in minutes
CustomText:
type: array
items:
type: string
minItems: 7
maxItems: 7

View File

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

File diff suppressed because it is too large Load Diff

View File

@ -8,7 +8,7 @@
; Please visit documentation for the other options and examples
; https://docs.platformio.org/page/projectconf.html
[platformio]
data_dir = data/build
data_dir = data/build_gz
[env]
platform = https://github.com/platformio/platform-espressif32.git

View File

@ -1,7 +1,36 @@
Import("env")
import os
import gzip
from shutil import copyfileobj, rmtree
from pathlib import Path
def gzip_file(input_file, output_file):
with open(input_file, 'rb') as f_in:
with gzip.open(output_file, 'wb') as f_out:
copyfileobj(f_in, f_out)
def process_directory(input_dir, output_dir):
for root, dirs, files in os.walk(input_dir):
relative_path = os.path.relpath(root, input_dir)
output_root = os.path.join(output_dir, relative_path)
Path(output_root).mkdir(parents=True, exist_ok=True)
for file in files:
# if file.endswith(('.html', '.css', '.js')):
input_file_path = os.path.join(root, file)
output_file_path = os.path.join(output_root, file + '.gz')
gzip_file(input_file_path, output_file_path)
print(f'Compressed: {input_file_path} -> {output_file_path}')
# Build web interface before building FS
def before_buildfs(source, target, env):
env.Execute("cd data && yarn && yarn build")
env.Execute("cd data && yarn && PUBLIC_BASE_URL=\"\" yarn build")
input_directory = 'data/dist'
output_directory = 'data/build_gz'
rmtree(output_directory)
process_directory(input_directory, output_directory)
env.AddPreAction("$BUILD_DIR/littlefs.bin", before_buildfs)

View File

@ -16,9 +16,9 @@ void setupWebserver()
{ client->send("welcome", NULL, millis(), 1000); });
server.addHandler(&events);
server.serveStatic("/css", LittleFS, "/css/");
server.serveStatic("/js", LittleFS, "/js/");
server.serveStatic("/font", LittleFS, "/font/");
// server.serveStatic("/css", LittleFS, "/css/");
// server.serveStatic("/js", LittleFS, "/js/");
server.serveStatic("/build", LittleFS, "/build");
server.serveStatic("/api.json", LittleFS, "/api.json");
server.serveStatic("/api.html", LittleFS, "/api.html");
@ -36,6 +36,10 @@ void setupWebserver()
server.on("/api/show/screen", HTTP_GET, onApiShowScreen);
server.on("/api/show/text", HTTP_GET, onApiShowText);
AsyncCallbackJsonWebHandler *settingsPatchHandler = new AsyncCallbackJsonWebHandler("/api/json/settings", onApiSettingsPatch);
server.addHandler(settingsPatchHandler);
AsyncCallbackJsonWebHandler *handler = new AsyncCallbackJsonWebHandler("/api/show/custom", onApiShowTextAdvanced);
server.addHandler(handler);
@ -53,7 +57,7 @@ void setupWebserver()
server.onNotFound(onNotFound);
DefaultHeaders::Instance().addHeader("Access-Control-Allow-Origin", "*");
DefaultHeaders::Instance().addHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
DefaultHeaders::Instance().addHeader("Access-Control-Allow-Methods", "GET, PATCH, POST, OPTIONS");
DefaultHeaders::Instance().addHeader("Access-Control-Allow-Headers", "*");
server.begin();
@ -233,6 +237,90 @@ void onApiShowTextAdvanced(AsyncWebServerRequest *request, JsonVariant &json)
request->send(200);
}
void onApiSettingsPatch(AsyncWebServerRequest *request, JsonVariant &json)
{
JsonObject settings = json.as<JsonObject>();
bool settingsChanged = true;
if (settings.containsKey("fgColor"))
{
String fgColor = settings["fgColor"].as<String>();
preferences.putUInt("fgColor", strtol(fgColor.c_str(), NULL, 16));
setFgColor(int(strtol(fgColor.c_str(), NULL, 16)));
Serial.print(F("Setting foreground color to "));
Serial.println(strtol(fgColor.c_str(), NULL, 16));
settingsChanged = true;
}
if (settings.containsKey("bgColor"))
{
String bgColor = settings["bgColor"].as<String>();
preferences.putUInt("bgColor", strtol(bgColor.c_str(), NULL, 16));
setBgColor(int(strtol(bgColor.c_str(), NULL, 16)));
Serial.print(F("Setting background color to "));
Serial.println(bgColor.c_str());
settingsChanged = true;
}
if (settings.containsKey("timePerScreen"))
{
preferences.putUInt("timerSeconds", settings["timePerScreen"].as<uint>() * 60);
}
String strSettings[] = {"hostnamePrefix", "mempoolInstance"};
for (String setting : strSettings)
{
if (settings.containsKey(setting))
{
preferences.putString(setting.c_str(), settings[setting].as<String>());
Serial.printf("Setting %s to %s\r\n", setting.c_str(), settings[setting].as<String>());
}
}
String uintSettings[] = {"minSecPriceUpd", "fullRefreshMin", "gmtOffset", "ledBrightness", "mcapBigChar"};
for (String setting : uintSettings)
{
if (settings.containsKey(setting))
{
preferences.putUInt(setting.c_str(), settings[setting].as<uint>());
Serial.printf("Setting %s to %d\r\n", setting.c_str(), settings[setting].as<uint>());
}
}
String boolSettings[] = {"fetchEurPrice", "ledTestOnPower", "ledFlashOnUpd", "mdnsEnabled", "otaEnabled", "stealFocus", "mcapBigChar"};
for (String setting : boolSettings)
{
if (settings.containsKey(setting))
{
preferences.putBool(setting.c_str(), settings[setting].as<boolean>());
Serial.printf("Setting %s to %d\r\n", setting.c_str(), settings[setting].as<boolean>());
}
}
if (settings.containsKey("screens"))
{
for (JsonVariant screen : settings["screens"].as<JsonArray>())
{
JsonObject s = screen.as<JsonObject>();
uint id = s["id"].as<uint>();
String key = "screen[" + String(id) + "]";
String prefKey = "screen" + String(id) + "Visible";
bool visible = s["enabled"].as<boolean>();
preferences.putBool(prefKey.c_str(), visible);
}
}
request->send(200);
if (settingsChanged)
{
queueLedEffect(LED_FLASH_SUCCESS);
}
}
void onApiRestart(AsyncWebServerRequest *request)
{
request->send(200);
@ -265,9 +353,9 @@ void onApiSettingsGet(AsyncWebServerRequest *request)
root["useBitcoinNode"] = preferences.getBool("useNode", false);
root["mempoolInstance"] = preferences.getString("mempoolInstance", DEFAULT_MEMPOOL_INSTANCE);
root["ledTestOnPower"] = preferences.getBool("ledTestOnPower", true);
root["ledFlashOnUpdate"] = preferences.getBool("ledFlashOnUpd", false);
root["ledFlashOnUpd"] = preferences.getBool("ledFlashOnUpd", false);
root["ledBrightness"] = preferences.getUInt("ledBrightness", 128);
root["stealFocusOnBlock"] = preferences.getBool("stealFocus", true);
root["stealFocus"] = preferences.getBool("stealFocus", true);
root["mcapBigChar"] = preferences.getBool("mcapBigChar", true);
root["mdnsEnabled"] = preferences.getBool("mdnsEnabled", true);
root["otaEnabled"] = preferences.getBool("otaEnabled", true);
@ -333,6 +421,32 @@ void onApiSettingsPost(AsyncWebServerRequest *request)
settingsChanged = processEpdColorSettings(request);
int headers = request->headers();
int i;
for (i = 0; i < headers; i++)
{
AsyncWebHeader *h = request->getHeader(i);
Serial.printf("HEADER[%s]: %s\n", h->name().c_str(), h->value().c_str());
}
int params = request->params();
for (int i = 0; i < params; i++)
{
AsyncWebParameter *p = request->getParam(i);
if (p->isFile())
{ // p->isPost() is also true
Serial.printf("FILE[%s]: %s, size: %u\n", p->name().c_str(), p->value().c_str(), p->size());
}
else if (p->isPost())
{
Serial.printf("POST[%s]: %s\n", p->name().c_str(), p->value().c_str());
}
else
{
Serial.printf("GET[%s]: %s\n", p->name().c_str(), p->value().c_str());
}
}
if (request->hasParam("fetchEurPrice", true))
{
AsyncWebParameter *fetchEurPrice = request->getParam("fetchEurPrice", true);
@ -466,6 +580,13 @@ void onApiSettingsPost(AsyncWebServerRequest *request)
std::vector<std::string> screenNameMap = getScreenNameMap();
if (request->hasParam("screens"))
{
AsyncWebParameter *screenParam = request->getParam("screens", true);
Serial.printf(screenParam->value().c_str());
}
for (int i = 0; i < screenNameMap.size(); i++)
{
String key = "screen[" + String(i) + "]";
@ -565,7 +686,7 @@ void onNotFound(AsyncWebServerRequest *request)
}
else
{
request->send(404);
request->send(200);
}
};

View File

@ -30,6 +30,7 @@ void onApiActionPause(AsyncWebServerRequest *request);
void onApiActionTimerRestart(AsyncWebServerRequest *request);
void onApiSettingsGet(AsyncWebServerRequest *request);
void onApiSettingsPost(AsyncWebServerRequest *request);
void onApiSettingsPatch(AsyncWebServerRequest *request, JsonVariant &json);
void onApiFullRefresh(AsyncWebServerRequest *request);
void onApiLightsOff(AsyncWebServerRequest *request);