with colors

plotting-preview/package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "konva": "^9.3.14",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-konva": "^18.2.10",
     "recharts": "^2.12.7"
   },
   "devDependencies": {

plotting-preview/src/components/ColorsChart.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useRef, useState } from 'react';
+import { Layer, Rect, Stage } from 'react-konva';
+
+type Colors = 'r' | 'g' | 'b' | 't';
+
+type ColorEvent = {
+    c: Colors,
+    i: number
+}
+
+const intensityClosure = (name: Colors) => {
+    let getHex = (intensity: number) => "#000000";
+    switch (name) {
+        case 'r':
+            getHex = (intensity: number) => `#${intensity.toString(16).padStart(2, '0')}0000`;
+            break;
+        case 'g':
+            getHex = (intensity: number) => `#00${intensity.toString(16).padStart(2, '0')}00`;
+            break;
+        case 'b':
+            getHex = (intensity: number) => `#0000${intensity.toString(16).padStart(2, '0')}`;
+            break;
+        case 't':
+            getHex = (intensity: number) => {
+                const hexIntensity = intensity.toString(16).padStart(2, '0');
+                return `#${hexIntensity}${hexIntensity}${hexIntensity}`;
+            }
+            break;
+        default:
+            getHex = (intensity: number) => "#000000";
+            break;
+    }
+    return getHex;
+};
+
+
+interface OneColorCanvasProps {
+    name: Colors,
+}
+
+export function OneColorCanvas({ name }: OneColorCanvasProps) {
+    const [data, setData] = useState<number[]>([]);
+    const ws = useRef<WebSocket | null>(null);
+
+    useEffect(() => {
+        // Establish WebSocket connection
+        ws.current = new WebSocket('/ws/colors');
+        console.log(ws.current);
+        ws.current.onmessage = (event) => {
+            const parsedData: ColorEvent = JSON.parse(event.data);
+            if (parsedData.c == name) {
+                setData(prevData => {
+                    const newData = [...prevData, parsedData.i];
+                    return newData
+                });
+            }
+        };
+
+        // Cleanup WebSocket connection on component unmount
+        return () => {
+            if (ws.current) {
+                ws.current.close();
+            }
+        };
+    }, []);
+    const getHex = intensityClosure(name);
+
+    return (
+        <div id={name}>
+            <div>On color {name} stuffs</div>
+            <Stage width={window.innerWidth} height={window.innerHeight}>
+                <Layer>
+                    {data.map((intensity, index) => {
+                        const color = getHex(intensity);
+                        <Rect
+                            key={index}
+                            x={20 + (index % 10) * 60} // Example layout
+                            y={20 + Math.floor(index / 10) * 60}
+                            width={50}
+                            height={50}
+                            fill={color}
+                            shadowBlur={5}
+                        />
+                    })}
+                </Layer>
+            </Stage>
+        </div>
+    )
+}
+
+
+
+function ColorsChart() {
+    return (
+        <div className="websocketed">
+            <h3>Colors Data</h3>
+            <OneColorCanvas name={'r'} />
+            <OneColorCanvas name={'g'} />
+            <OneColorCanvas name={'b'} />
+            <OneColorCanvas name={'t'} />
+        </div>
+    );
+}
+
+export default ColorsChart;

plotting-preview/src/components/Konva.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { render } from 'react-dom';
+import { Stage, Layer, Rect, Text } from 'react-konva';
+import Konva from 'konva';
+
+const ColoredRect = () => {
+  const [color, setColor] = useState('green');
+
+  const handleClick = () => {
+    setColor(Konva.Util.getRandomColor());
+  };
+
+  return (
+    <Rect
+      x={20}
+      y={20}
+      width={50}
+      height={50}
+      fill={color}
+      shadowBlur={5}
+      onClick={handleClick}
+    />
+  );
+};
+
+const App = () => {
+  return (
+    <Stage width={window.innerWidth} height={window.innerHeight}>
+      <Layer>
+        <Text text="Try click on rect" />
+        <ColoredRect />
+      </Layer>
+    </Stage>
+  );
+};
+
+render(<App />, document.getElementById('root'));

src/plotting_server/start.py

@@ -1,4 +1,5 @@
 import random
+import numpy as np
 import time
 from fastapi import FastAPI, Response, WebSocket
 from fastapi.middleware.cors import CORSMiddleware
@@ -53,3 +54,50 @@ async def websocket_endpoint(websocket: WebSocket):
         print(f"Error: {e}")
     finally:
         await websocket.close()
+
+
+
+# Generate 10,000 random integers between 0 and 255
+def generate_rgb_array(size=10000):
+    return np.random.randint(0, 256, size=size, dtype=np.uint8)
+
+# Initialize RGB arrays
+r_array = generate_rgb_array()
+g_array = generate_rgb_array()
+b_array = generate_rgb_array()
+
+@app.websocket("/ws/colors")
+async def colors_websocket_endpoint(websocket: WebSocket):
+    await websocket.accept()
+    try:
+        while True:
+            # Simulate data generation
+            now = time.time()
+            # Compute total of RGB values
+            r_total = np.sum(r_array)
+            g_total = np.sum(g_array)
+            b_total = np.sum(b_array)
+            total = r_total + g_total + b_total
+
+            # Generate intensity value as a random 8-bit integer
+            intensity = random.randint(0, 255)
+
+            # Create JSON data format
+            # todo decide if 1 message parsed on the frontend or 3 different messages
+            data = {
+                "c": {
+                    "r": r_total,
+                    "g": g_total,
+                    "b": b_total,
+                    "total": total
+                },
+                "i": intensity
+            }
+
+            # Send JSON data
+            await websocket.send_json(data)
+            await asyncio.sleep(0.1)  # Emit every 100 ms (10 Hz)
+    except Exception as e:
+        print(f"Error: {e}")
+    finally:
+        await websocket.close()