btclock/webui
3
0
Fork 2
Code Issues Pull requests 1 Projects Releases 16 Wiki Activity Actions

Added individual LED control

Browse source
This commit is contained in:
Djuri Baars 2023-11-18 13:55:55 +01:00
parent 58fa1e7ecb
commit d3c6e52f3f
8 changed files with 237 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/lib/locales/en.json
View file

@ -62,5 +62,10 @@
"timer": {
"running": "running",
"stopped": "stopped"
},
"sections": {
"control": {
"keepSameColor": "Keep same color"
}
}
}

5
src/lib/locales/es.json
View file

@ -62,5 +62,10 @@
"timer": {
"running": "funcionando",
"stopped": "detenido"
},
"sections": {
"control": {
"keepSameColor": "Mantén el mismo color"
}
}
}

5
src/lib/locales/nl.json
View file

@ -61,5 +61,10 @@
"timer": {
"running": "actief",
"stopped": "gestopt"
},
"sections": {
"control": {
"keepSameColor": "Behoud zelfde kleur"
}
}
}

28
src/routes/+page.svelte
View file

@ -14,6 +14,17 @@
fgColor: "0"
});
let status = writable({
data: ["L", "O", "A", "D", "I", "N", "G"],
espFreeHeap: 0,
espHeapSize: 0,
connectionStatus: {
"price": false,
"blocks": false
},
leds: []
});
onMount(() => {
fetch( PUBLIC_BASE_URL + `/api/settings`)
.then((res) => res.json())
@ -31,6 +42,19 @@
}
settings.set(data);
});
fetch(`${PUBLIC_BASE_URL}/api/status`)
.then((res) => res.json())
.then((data) => {
status.set(data);
});
const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
evtSource.addEventListener('status', (e) => {
let dataObj = (JSON.parse(e.data));
status.set(dataObj);
});
});
</script>
@ -40,8 +64,8 @@
<Container fluid>
<Row>
<Control bind:settings></Control>
<Status bind:settings></Status>
<Control bind:settings bind:status></Control>
<Status bind:settings bind:status></Status>
<Settings bind:settings></Settings>
</Row>
</Container>

54
src/routes/Control.svelte
View file

@ -1,6 +1,9 @@
<script lang="ts">
import { PUBLIC_BASE_URL } from '$env/static/public';
import { onDestroy } from 'svelte';
import { _ } from 'svelte-i18n';
import type { Subscriber, Unsubscriber } from 'svelte/motion';
import type { Writable } from 'svelte/store';
import {
Button,
ButtonGroup,
@ -19,15 +22,37 @@ import {
export let settings = {};
export let customText:String;
export let ledColor:String = "#FFCC00";
export let status:Writable<{leds:[]}>;
let ledStatus = [];
let keepLedsSameColor = false;
const setCustomText = () => {
fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(err => { });
};
const checkSyncLeds = (e:Event) => {
console.log('checksyncleds', keepLedsSameColor);
if (keepLedsSameColor) {
console.log(e.target.value);
ledStatus.forEach((element, i) => {
if (ledStatus[i].hex != e.target_value) {
ledStatus[i].hex = e.target.value;
}
});
}
}
const setLEDcolor = () => {
console.log(`${PUBLIC_BASE_URL}/api/lights/${ledColor}`);
fetch(`${PUBLIC_BASE_URL}/api/lights/${encodeURIComponent(ledColor.replace(/^#/, ''))}`).catch(err => { });
fetch(`${PUBLIC_BASE_URL}/api/lights`, {
headers: {
'Content-Type': 'application/json'
},
method: 'PATCH',
body: JSON.stringify(ledStatus)
}
).catch(err => { });
};
const turnOffLeds = () => {
@ -42,6 +67,16 @@ const forceFullRefresh = () => {
fetch(`${PUBLIC_BASE_URL}/api/full_refresh`).catch(err => { });
}
let firstLedDataSubscription = () => {};
firstLedDataSubscription = status.subscribe(async(val) => {
if (val && val.leds) {
ledStatus = val.leds.map((obj) => ({ ["hex"]: obj["hex"] }));
firstLedDataSubscription();
}
})
onDestroy(firstLedDataSubscription);
</script>
<Col>
@ -54,7 +89,7 @@ const forceFullRefresh = () => {
<Row>
<Label md={6} for="customText">{ $_('section.control.text') }</Label>
<Col md="6">
<Input type="text" id="customText" bind:value={customText} bsSize="sm" maxLength="{$settings.numScreens}"/>
<Input type="text" id="customText" bind:value={customText} bsSize="sm" maxLength="{$settings.numScreens}" />
</Col>
</Row>
<Button color="primary" on:click={setCustomText}>{ $_('section.control.showText') }</Button>
@ -66,7 +101,18 @@ const forceFullRefresh = () => {
<Row>
<Label md={6} for="ledColorPicker" size="sm">{ $_('section.control.ledColor') }</Label>
<Col md="6">
<Input type="color" id="ledColorPicker" bind:value="{ledColor}" />
<Row class="justify-content-between">
{#if ledStatus}
{#each ledStatus as led, i }
<Col>
<Input type="color" id="ledColorPicker[{i}]" bind:value="{led.hex}" class="mx-auto" on:change="{checkSyncLeds}" />
</Col>
{/each}
{/if}
<Col>
<Input bind:checked={keepLedsSameColor} type="switch" class="mx-auto" label="{ $_('sections.control.keepSameColor') }" />
</Col>
</Row>
</Col>
</Row>
<Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>{ $_('section.control.turnOff') }</Button>

32
src/routes/Status.svelte
View file

@ -3,36 +3,12 @@
import { onMount } from 'svelte';
import { _ } from 'svelte-i18n';
import { writable } from 'svelte/store';
import { writable, type Writable } from 'svelte/store';
import { Row, Input, Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress,CardTitle } from 'sveltestrap';
import Rendered from './Rendered.svelte';
export let settings;
const status = writable({
data: ["L", "O", "A", "D", "I", "N", "G"],
espFreeHeap: 0,
espHeapSize: 0,
connectionStatus: {
"price": false,
"blocks": false
}
});
onMount(() => {
fetch(`${PUBLIC_BASE_URL}/api/status`)
.then((res) => res.json())
.then((data) => {
status.set(data);
});
const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
evtSource.addEventListener('status', (e) => {
let dataObj = (JSON.parse(e.data));
status.set(dataObj);
});
});
export let status:Writable<{}>;
const toTime = (secs:Number) => {
var hours = Math.floor(secs / (60 * 60));
@ -60,11 +36,11 @@
let memoryFreePercent:number = 50;
let lightMode:boolean = false;
status.subscribe((value) => {
status.subscribe((value: {}) => {
memoryFreePercent = Math.round(value.espFreeHeap / value.espHeapSize * 100);
});
settings.subscribe((value) => {
settings.subscribe((value: {}) => {
lightMode = value.bgColor > value.fgColor;
});

109
static/swagger.json
View file

@ -7,7 +7,7 @@
},
"servers": [
{
"url": "/api/"
"url": "http://192.168.20.231/api/"
}
],
"paths": {
@ -216,7 +216,37 @@
"summary": "Get LEDs status",
"responses": {
"200": {
"description": "successful operation"
"description": "successful operation",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/ArrayOfLeds"
}
}
}
}
}
},
"patch": {
"tags": [
"lights"
],
"summary": "Set individual LEDs",
"requestBody": {
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/ArrayOfLedsInput"
}
}
}
},
"responses": {
"200": {
"description": "succesful operation"
},
"400": {
"description": "invalid colors or wrong amount of LEDs"
}
}
}
@ -275,24 +305,69 @@
},
"components": {
"schemas": {
"RgbColorValues": {
"type": "object",
"properties": {
"red": {
"type": "integer",
"minimum": 0,
"maximum": 255,
"example": 255
},
"green": {
"type": "integer",
"minimum": 0,
"maximum": 255,
"example": 204
},
"blue": {
"type": "integer",
"minimum": 0,
"maximum": 255,
"example": 0
}
}
},
"RgbColorHex": {
"type": "object",
"properties": {
"hex": {
"type": "string",
"pattern": "^#(?:[0-9a-fA-F]{3}){1,2}$",
"example": "#FFCC00"
}
}
},
"RgbColorValueAndHex": {
"allOf": [
{
"$ref": "#/components/schemas/RgbColorValues"
},
{
"$ref": "#/components/schemas/RgbColorHex"
}
]
},
"RgbColorValueOrHex": {
"oneOf": [
{
"$ref": "#/components/schemas/RgbColorValues"
},
{
"$ref": "#/components/schemas/RgbColorHex"
}
]
},
"ArrayOfLeds": {
"type": "array",
"items": {
"type": "object",
"properties": {
"red": {
"type": "integer"
},
"green": {
"type": "integer"
},
"blue": {
"type": "integer"
},
"hex": {
"type": "string"
}
}
"$ref": "#/components/schemas/RgbColorValueAndHex"
}
},
"ArrayOfLedsInput": {
"type": "array",
"items": {
"$ref": "#/components/schemas/RgbColorValueOrHex"
}
},
"Settings": {

54
static/swagger.yaml → static/swagger.yml
View file

@ -4,7 +4,7 @@ info:
version: '3.0'
description: BTClock V3 API
servers:
- url: /api/
- url: http://192.168.20.231/api/
paths:
/status:
get:
@ -135,6 +135,24 @@ paths:
responses:
'200':
description: successful operation
content:
application/json:
schema:
$ref: '#/components/schemas/ArrayOfLeds'
patch:
tags:
- lights
summary: Set individual LEDs
requestBody:
content:
application/json:
schema:
$ref: '#/components/schemas/ArrayOfLedsInput'
responses:
"200":
description: succesful operation
"400":
description: invalid colors or wrong amount of LEDs
/lights/{color}:
get:
tags:
@ -169,19 +187,47 @@ paths:
description: successful operation
components:
schemas:
ArrayOfLeds:
type: array
items:
RgbColorValues:
type: object
properties:
red:
type: integer
minimum: 0
maximum: 255
example: 255
green:
type: integer
minimum: 0
maximum: 255
example: 204
blue:
type: integer
minimum: 0
maximum: 255
example: 0
RgbColorHex:
type: object
properties:
hex:
type: string
pattern: ^#(?:[0-9a-fA-F]{3}){1,2}$
example: "#FFCC00"
RgbColorValueAndHex:
allOf:
- $ref: '#/components/schemas/RgbColorValues'
- $ref: '#/components/schemas/RgbColorHex'
RgbColorValueOrHex:
oneOf:
- $ref: '#/components/schemas/RgbColorValues'
- $ref: '#/components/schemas/RgbColorHex'
ArrayOfLeds:
type: array
items:
$ref: '#/components/schemas/RgbColorValueAndHex'
ArrayOfLedsInput:
type: array
items:
$ref: '#/components/schemas/RgbColorValueOrHex'
Settings:
type: object
properties: