-
- 
-
-
-
-
-
+
+
- Vite + React
- -
- Edit src/App.tsx and save to test HMR
-
- Click on the Vite and React logos to learn more -
+
+ Robot interaction →
+ Node editor →
+ Logs →
+
)
}
diff --git a/src/pages/Logging/Logging.module.css b/src/pages/Logging/Logging.module.css
new file mode 100644
index 0000000..52191c3
--- /dev/null
+++ b/src/pages/Logging/Logging.module.css
@@ -0,0 +1,17 @@
+.DivToScroll{
+ background-color: color-mix(in srgb, canvas, #000 5%);
+ border: 1px solid color-mix(in srgb, canvas, #000 15%);
+ border-radius: 4px 0 4px 0;
+ color: #3B3C3E;
+ font-size: 12px;
+ font-weight: bold;
+ left: -1px;
+ padding: 10px 7px 5px;
+}
+
+.DivWithScroll{
+ height:50vh;
+ width:100vh;
+ overflow:scroll;
+ overflow-x:hidden;
+}
diff --git a/src/pages/Logging/Logging.tsx b/src/pages/Logging/Logging.tsx
new file mode 100644
index 0000000..31945c1
--- /dev/null
+++ b/src/pages/Logging/Logging.tsx
@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { DATA } from "../../assets/data";
+import styles from './Logging.module.css';
+
+
+// const dataType = DATA as { id: string; level: "debug"|"info"|"warn"|"error"; msg: string; timestamp?: string };
+type Level = "debug" | "info" | "warn" | "error";
+
+// make optional fields optional
+type LogEntry = {
+ id: string;
+ level: Level;
+ timestamp?: string;
+ msg?: string;
+ type?: "speech" | "sensor" | "system" | string;
+
+};
+
+function getLevelColor(level: Level) {
+ switch (level) {
+ case "debug":
+ return "gray";
+ case "info":
+ return "blue";
+ case "warn":
+ return "red";
+ case "error":
+ return "red";
+ default:
+ return "black";
+ }
+}
+
+function Logging() {
+ const [logs, setLogs] = useState
+
+ )
+ return (
+ <>
+
+ {logs.map((log) => (
+
+
+
+ [{log.timestamp}]
+
+
+ {log.msg ? log.msg : "No message"}
+
+
+ ({log.level})
+
+
+ ))}
+ Log Screen
+ { logDiv } +
+
+
+
+
+ )
+}
+
+export default Logging
diff --git a/src/pages/ServerComms/ServerComms.css b/src/pages/ServerComms/ServerComms.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/ServerComms/ServerComms.tsx b/src/pages/ServerComms/ServerComms.tsx
index c16ec81..6d15524 100644
--- a/src/pages/ServerComms/ServerComms.tsx
+++ b/src/pages/ServerComms/ServerComms.tsx
@@ -1,15 +1,12 @@
-import { useState, useEffect } from 'react'
-import { Link } from 'react-router'
-//import Counter from '../../components/components.tsx'
+import { useState, useEffect, useRef } from 'react'
-
-//this is your css file where you can style your buttons and such
-//you can still use css parts from App.css, but also overwrite them
-
-function ServerComms() {
+export default function ServerComms() {
const [message, setMessage] = useState('');
- const [sseMessage, setSseMessage] = useState('');
- const [spoken, setSpoken] = useState
-
Date: Wed, 8 Oct 2025 12:40:01 +0200
Subject: [PATCH 03/17] fix: Keep the conencted robots in a global list
ref: N25B-142
---
src/App.tsx | 23 +++++++++++++++++--
src/pages/ConnectedRobots/ConnectedRobots.tsx | 13 ++++++++---
2 files changed, 31 insertions(+), 5 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index fe6a9ad..eff9667 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
import { Routes, Route, Link } from 'react-router'
+import { useState, useEffect } from 'react'
import './App.css'
import TemplatePage from './pages/TemplatePage/Template.tsx'
import Home from './pages/Home/Home.tsx'
@@ -8,7 +9,16 @@ import Logging from './pages/Logging/Logging.tsx'
import VisProg from "./pages/VisProgPage/VisProg.tsx";
function App(){
-
+
+ // Define what our conencted robot should include
+ type Robot = {
+ id: string;
+ name: string;
+ port: number;
+ };
+
+ const [connectedRobots, setConnectedRobots] = useState([]);
+
return (
([]);
+// Define the expected arguments
+type ConnectedRobotsProps = {
+ connectedRobots: Robot[];
+ setConnectedRobots: React.Dispatch>;
+};
+export default function ConnectedRobots({
+ connectedRobots, setConnectedRobots}: ConnectedRobotsProps) {
+
useEffect(() => {
const eventSource = new EventSource("http://localhost:8000/sse");
eventSource.onmessage = (event) => {
try {
+ console.log("message received :", event.data)
const data = JSON.parse(event.data);
-
+
// Example: data = { event: "robot_connected", id: "pepper_robot1", name: "Pepper", port: 1234 }
if (data.event === "robot_connected") {
From 72d61e398506e135d8aefe037d474c18b1c5e638 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Otgaar?=
Date: Wed, 8 Oct 2025 14:35:20 +0200
Subject: [PATCH 04/17] chore: fixed wrong imports and deleted some unnecessary
prints.
ref: N25B-142
---
src/App.tsx | 3 ++-
src/pages/ConnectedRobots/ConnectedRobots.tsx | 6 +++---
2 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index eff9667..1dd4c9d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
import { Routes, Route, Link } from 'react-router'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
import './App.css'
import TemplatePage from './pages/TemplatePage/Template.tsx'
import Home from './pages/Home/Home.tsx'
@@ -17,6 +17,7 @@ function App(){
port: number;
};
+ // (Acces to) the array of connected robots
const [connectedRobots, setConnectedRobots] = useState([]);
return (
diff --git a/src/pages/ConnectedRobots/ConnectedRobots.tsx b/src/pages/ConnectedRobots/ConnectedRobots.tsx
index cd88158..45559dd 100644
--- a/src/pages/ConnectedRobots/ConnectedRobots.tsx
+++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx
@@ -1,5 +1,4 @@
-import { mergeAriaLabelConfig } from '@xyflow/system';
-import { useState, useEffect } from 'react'
+import { useEffect } from 'react'
// Define the robot type
type Robot = {
@@ -21,7 +20,6 @@ export default function ConnectedRobots({
const eventSource = new EventSource("http://localhost:8000/sse");
eventSource.onmessage = (event) => {
try {
- console.log("message received :", event.data)
const data = JSON.parse(event.data);
// Example: data = { event: "robot_connected", id: "pepper_robot1", name: "Pepper", port: 1234 }
@@ -69,6 +67,7 @@ export default function ConnectedRobots({
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index cb70de0..0c811ac 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -13,6 +13,7 @@ function Home() {
+ ([]);
+
+ useEffect(() => {
+ const eventSource = new EventSource("http://localhost:8000/sse");
+ eventSource.onmessage = (event) => {
+ try {
+ const data = JSON.parse(event.data);
+
+ // Example: data = { event: "robot_connected", id: "pepper_robot1", name: "Pepper", port: 1234 }
+ if (data.event === "robot_connected") {
+
+ // Safeguard id in request.
+ if (data.id === null || data.id === undefined) {
+ console.log("Missing robot id in connection request.")
+ return () => eventSource.close();
+ }
+
+ // Safeguard duplicates
+ if (connectedRobots.some(robot => robot.id === data.id))
+ console.log("connection request was sent for id: ", data.id,
+ " however this id was already present at current time");
+
+ // Add to connected robots while checking name and port for undefineds.
+ else {
+ const name = data.name ?? "no given name";
+ const port = typeof data.port === "number" ? data.port : -1;
+ setConnectedRobots(robots => [...robots, { id: data.id, name: name, port: port }]);
+ }
+ }
+ if (data.event === "robot_disconnected") {
+ // Safeguard id in request.
+ if (data.id === null || data.id === undefined) {
+ console.log("Missing robot id in connection request.")
+ return () => eventSource.close();
+ }
+
+ // Filter out same ids (should only be one)
+ setConnectedRobots(robots => robots.filter(robot => robot.id !== data.id));
+ }
+ } catch {
+ console.log("Unparsable SSE message:", event.data);
+ }
+ };
+ return () => eventSource.close();
+ }, [connectedRobots]);
+
+ return (
+
)
From ec4f45b984528a4dde896486cf00fb132e16a903 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Otgaar?=
+
+
+ );
+}
+
+export default VisualProgrammingUI;
\ No newline at end of file
diff --git a/src/visualProgrammingUI/components/DragDropSidebar.tsx b/src/visualProgrammingUI/components/DragDropSidebar.tsx
new file mode 100644
index 0000000..b3926d9
--- /dev/null
+++ b/src/visualProgrammingUI/components/DragDropSidebar.tsx
@@ -0,0 +1,141 @@
+import { useDraggable } from '@neodrag/react';
+import {
+ useReactFlow,
+ type XYPosition
+} from '@xyflow/react';
+import {
+ type ReactNode,
+ useCallback,
+ useRef,
+ useState
+} from 'react';
+
+
+// improve later to create better automatic IDs
+let id = 0;
+const getId = () => `dndnode_${id++}`;
+
+
+interface DraggableNodeProps {
+ className?: string;
+ children: ReactNode;
+ nodeType: string;
+ onDrop: (nodeType: string, position: XYPosition) => void;
+}
+
+function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeProps) {
+ const draggableRef = useRef(null);
+ const [position, setPosition] = useState({ x: 0, y: 0 });
+
+
+ // @ts-ignore
+ useDraggable(draggableRef, {
+ position: position,
+ onDrag: ({ offsetX, offsetY }) => {
+ // Calculate position relative to the viewport
+ setPosition({
+ x: offsetX,
+ y: offsetY,
+ });
+ },
+ onDragEnd: ({ event }) => {
+ setPosition({ x: 0, y: 0 });
+ onDrop(nodeType, {
+ x: event.clientX,
+ y: event.clientY,
+ });
+ },
+ });
+
+ return (
+
+
+ );
+}
+
+
+// Definitions of Nodes
+
+type StartNodeProps = {
+ id: string;
+ data: startNodeData;
+};
+
+export const StartNode= ({ id, data }: StartNodeProps) => {
+ return (
+ <>
+
+
+
Date: Tue, 7 Oct 2025 15:05:05 +0200
Subject: [PATCH 02/17] feat: Show connected robots in the UI when connection
event is received from CB.
Added two test buttons to mimic events from CB.
UI will listen to port localhost:8000 for data.
use the data.event = "robot_connected" and
data.event = "robot_disconnected".
(robot) ID is required, name and port are optional
but incentivized.
---
src/App.tsx | 2 +
src/pages/ConnectedRobots/ConnectedRobots.tsx | 116 ++++++++++++++++++
src/pages/Home/Home.tsx | 1 +
3 files changed, 119 insertions(+)
create mode 100644 src/pages/ConnectedRobots/ConnectedRobots.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 0833bdb..fe6a9ad 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import './App.css'
import TemplatePage from './pages/TemplatePage/Template.tsx'
import Home from './pages/Home/Home.tsx'
import ServerComms from './pages/ServerComms/ServerComms.tsx'
+import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
import Logging from './pages/Logging/Logging.tsx'
import VisProg from "./pages/VisProgPage/VisProg.tsx";
@@ -18,6 +19,7 @@ function App(){
)
diff --git a/src/pages/ConnectedRobots/ConnectedRobots.tsx b/src/pages/ConnectedRobots/ConnectedRobots.tsx
new file mode 100644
index 0000000..148cfbe
--- /dev/null
+++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx
@@ -0,0 +1,116 @@
+import { mergeAriaLabelConfig } from '@xyflow/system';
+import { useState, useEffect } from 'react'
+
+// Define the robot type
+type Robot = {
+ id: string;
+ name: string;
+ port: number;
+};
+
+export default function ConnectedRobots() {
+ const [connectedRobots, setConnectedRobots] = useStateRobot interaction
+Force robot speech
+
e.key === "Enter" && sendMessage().then(() => setMessage(""))}
placeholder="Enter a message"
/>
-
+
-
-
- Message from Server (SSE):
-{sseMessage}
-
-
- Spoken text (SSE):
-{spoken}
-
- {/* here you link to the homepage, in App.tsx you can link new pages */}
-
-
+
-
-
);
}
-
-export default ServerComms
\ No newline at end of file
diff --git a/src/pages/VisProgPage/VisProg.tsx b/src/pages/VisProgPage/VisProg.tsx
new file mode 100644
index 0000000..ec0055a
--- /dev/null
+++ b/src/pages/VisProgPage/VisProg.tsx
@@ -0,0 +1,11 @@
+import VisProgUI from "../../visualProgrammingUI/VisProgUI.tsx";
+
+function VisProgPage() {
+ return (
+ <>
+
+
Conversation
+Listening {listening ? "🟢" : "🔴"}
+
+ {conversation.map((item) => (
+
+ {item["content"]}
+ ))} +
+
+
+
+
+
+ );
+};
+
+function VisualProgrammingUI(){
+ return (
+
+
+
+
+
+
+
+ {children}
+
+ );
+}
+
+export function Sidebar() {
+ const { setNodes, screenToFlowPosition } = useReactFlow();
+
+ const handleNodeDrop = useCallback(
+ (nodeType: string, screenPosition: XYPosition) => {
+ const flow = document.querySelector('.react-flow');
+ const flowRect = flow?.getBoundingClientRect();
+ const isInFlow =
+ flowRect &&
+ screenPosition.x >= flowRect.left &&
+ screenPosition.x <= flowRect.right &&
+ screenPosition.y >= flowRect.top &&
+ screenPosition.y <= flowRect.bottom;
+
+ // Create a new node and add it to the flow
+ if (isInFlow) {
+ const position = screenToFlowPosition(screenPosition);
+
+ const newNode = () => {
+ switch (nodeType) {
+ case "phase":
+ return {
+ id: getId(),
+ type: nodeType,
+ position,
+ data: {label: `"new"`, number: (-1)},
+ };
+ case "start":
+ return {
+ id: getId(),
+ type: nodeType,
+ position,
+ data: {label: `new start node`},
+ };
+ case "end":
+ return {
+ id: getId(),
+ type: nodeType,
+ position,
+ data: {label: `new end node`},
+ };
+ case "norm":
+ return {
+ id: getId(),
+ type: nodeType,
+ position,
+ data: {label: `new norm node`},
+ };
+ default: {
+ return {
+ id: getId(),
+ type: nodeType,
+ position,
+ data: {label: `new default node`},
+ };
+ }
+ }
+ }
+
+ setNodes((nds) => nds.concat(newNode()));
+ }
+ },
+ [setNodes, screenToFlowPosition],
+ );
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/visualProgrammingUI/components/NodeDefinitions.tsx b/src/visualProgrammingUI/components/NodeDefinitions.tsx
new file mode 100644
index 0000000..b4547b2
--- /dev/null
+++ b/src/visualProgrammingUI/components/NodeDefinitions.tsx
@@ -0,0 +1,111 @@
+import {Handle, NodeToolbar, Position, useReactFlow} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import '../VisProgUI.css';
+
+// Datatypes for NodeTypes
+
+type defaultNodeData = {
+ label: string;
+};
+
+type startNodeData = defaultNodeData;
+type endNodeData = defaultNodeData;
+type normNodeData = defaultNodeData;
+type phaseNodeData = defaultNodeData & {
+ number: number;
+};
+
+export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;
+
+// Node Toolbar definition
+
+type ToolbarProps= {
+ nodeId: string;
+};
+
+export function Toolbar({nodeId}:ToolbarProps) {
+ const { setNodes, setEdges } = useReactFlow();
+
+ const handleDelete = () => {
+ setNodes((nds) => nds.filter((n) => n.id !== nodeId));
+ setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
+ };
+ return (
+
+
+
+ );
+};
+
+type EndNodeProps = {
+ id: string;
+ data: endNodeData;
+};
+
+export const EndNode= ({ id, data }: EndNodeProps) => {
+ return (
+ <>
+ data test {data.label}
+
+
+
+ );
+};
+
+
+type PhaseNodeProps = {
+ id: string;
+ data: phaseNodeData;
+};
+
+export const PhaseNode= ({ id, data }: PhaseNodeProps) => {
+ return (
+ <>
+ {data.label}
+
+
+
+ );
+};
+
+type NormNodeProps = {
+ id: string;
+ data: normNodeData;
+};
+
+export const NormNode= ({ id, data }: NormNodeProps) => {
+ return (
+ <>
+ phase {data.number} {data.label}
+
+
+
+ );
+};
\ No newline at end of file
From b78cd53baa8f3fd73fc6f372cc3e42f2e07b614b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Otgaar?= Norm {data.label}
+
+
+ );
+}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 582357b..422ccfc 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -14,6 +14,7 @@ function Home() {
Robot interaction →
Node editor →
Logs →
+ Connected Robots →
Robots Connected
+
+
+ Connected Robots
+-
+ {connectedRobots.map(robot =>
+
- + {robot.name} (ID: {robot.id}, Port: {robot.port === -1 ? "No given port" : robot.port}) + + )} +
+
+
+
+
+
+
+
+
{/* Should not use inline styles like this */}
@@ -19,7 +29,16 @@ function App(){
)
diff --git a/src/pages/ConnectedRobots/ConnectedRobots.tsx b/src/pages/ConnectedRobots/ConnectedRobots.tsx
index 148cfbe..cd88158 100644
--- a/src/pages/ConnectedRobots/ConnectedRobots.tsx
+++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx
@@ -8,15 +8,22 @@ type Robot = {
port: number;
};
-export default function ConnectedRobots() {
- const [connectedRobots, setConnectedRobots] = useStateConnected Robots
-
{connectedRobots.map(robot =>
+ // Map all the robots in an unordered list
- {robot.name} (ID: {robot.id}, Port: {robot.port === -1 ? "No given port" : robot.port}) @@ -100,6 +99,7 @@ export default function ConnectedRobots({ setConnectedRobots(robots => [...robots, randomConnectionDummy]); }}>'Sent connected event'
Robot Interaction →
Template →
+ Connected Robots →