-
- 
-
-
-
-
-
+
+
- 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
-
+
+
+
+ );
+}
+
+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 (
+ <>
+
+
+
Robot 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
Norm {data.label}
+