Added individual LED control

src/lib/locales/en.json

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

src/lib/locales/es.json

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

src/lib/locales/nl.json

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

src/routes/+page.svelte

@@ -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>
+		<Control bind:settings bind:status></Control>
-		<Status  bind:settings></Status>
+		<Status  bind:settings bind:status></Status>
 		<Settings bind:settings></Settings>
 	</Row>
 </Container>

src/routes/Control.svelte

@@ -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>

src/routes/Status.svelte

@@ -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; 
-
+    export let status:Writable<{}>;
-    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);
-        });
-    });
 
     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;
     });
 

static/swagger.json

@@ -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",
+          "$ref": "#/components/schemas/RgbColorValueAndHex"
-          "properties": {
+        }
-            "red": {
+      },
-              "type": "integer"
+      "ArrayOfLedsInput": {
-            },
+        "type": "array",
-            "green": {
+        "items": {
-              "type": "integer"
+          "$ref": "#/components/schemas/RgbColorValueOrHex"
-            },
-            "blue": {
-              "type": "integer"
-            },
-            "hex": {
-              "type": "string"
-            }
-          }
         }
       },
       "Settings": {

static/swagger.yml

@@ -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:
+    RgbColorValues:
-      type: array
-      items:
         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: