adding sample project

Author: MerzSebastian

logic-editor/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import ReactFlow, {
   addEdge,
   MiniMap,
@@ -12,6 +12,7 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import { downloadJson, uploadJson } from './utils';
 import { bytecodeToString, generateBytecode } from './bytecode-gen';
+import { defaultProject } from './sample-project';
 
 // Improved ID management
 let nodeIdCounter = 0;
@@ -313,6 +314,11 @@ export default function App() {
     toggleNode: ToggleNode,
   }), []);
 
+  // Load default project on first render
+  useEffect(() => {
+    loadProjectData(defaultProject);
+  }, []);
+
   const handleInitialStateChange = useCallback((nodeId: string, initialState: number) => {
     setNodes((nds) =>
       nds.map((n) =>
@@ -417,32 +423,56 @@ export default function App() {
     downloadJson({ nodes, edges, board: selectedBoard }, 'my-logic-project');
   };
 
+  // Function to load project data (reusable)
+  const loadProjectData = (data: any) => {
+    // Reset ID counter based on loaded nodes
+    resetIdCounter(data.nodes);
+
+    // Add event handlers to all nodes when loading
+    const updatedNodes = data.nodes.map((node: any) => ({
+      ...node,
+      data: {
+        ...node.data,
+        selectedBoard: data.board || selectedBoard,
+        onChangePin: handlePinChange,
+        onChangeInputs: handleInputsChange,
+        onChangeInitialState: node.type === 'latchNode' || node.type === 'toggleNode' ? handleInitialStateChange : undefined,
+        onChangePulseLength: node.type === 'pulseNode' ? handlePulseLengthChange : undefined,
+        onChangeInterval: node.type === 'pulseNode' ? handleIntervalChange : undefined,
+      },
+    }));
+
+    setNodes(updatedNodes);
+    setEdges(data.edges);
+    if (data.board) setSelectedBoard(data.board);
+  };
+
   const handleUpload = () => {
     uploadJson((data) => {
       if (data.nodes && data.edges) {
-        // Reset ID counter based on loaded nodes
-        resetIdCounter(data.nodes);
-
-        // Add event handlers to all nodes when loading
-        const updatedNodes = data.nodes.map((node: any) => ({
-          ...node,
-          data: {
-            ...node.data,
-            selectedBoard: data.board || selectedBoard,
-            onChangePin: handlePinChange,
-            onChangeInputs: handleInputsChange,
-          },
-        }));
-
-        setNodes(updatedNodes);
-        setEdges(data.edges);
-        if (data.board) setSelectedBoard(data.board);
+        loadProjectData(data);
       } else {
         alert('Invalid project file');
       }
     });
   };
 
+  // Reset UI function
+  const handleReset = () => {
+    setNodes([]);
+    setEdges([]);
+    nodeIdCounter = 0;
+    setUploadStatus('UI has been reset');
+    setTimeout(() => setUploadStatus(null), 3000);
+  };
+
+  // Load default project function
+  const loadDefaultProject = () => {
+    loadProjectData(defaultProject);
+    setUploadStatus('Default project loaded');
+    setTimeout(() => setUploadStatus(null), 3000);
+  };
+
   const getArduinoInoFile = async () => {
       const githubUrl = 'https://raw.githubusercontent.com/MerzSebastian/OpenPLC/refs/heads/main/arduino/arduino.ino';
       const response = await fetch(githubUrl);
@@ -609,26 +639,32 @@ export default function App() {
           </div>
         ))}
 
-        <button onClick={handleDownload} className="mt-6 w-full bg-blue-500 text-white p-1 rounded">
+        <button onClick={handleUpload} className="mt-6 w-full bg-gray-500 text-white p-1 rounded">
+          Load Project
+        </button>
+        <button onClick={handleDownload} className="mt-1 w-full bg-blue-500 text-white p-1 rounded">
           Download Project
         </button>
-        <button onClick={handleUpload} className="mt-1 w-full bg-gray-500 text-white p-1 rounded">
-          Load Project
+        <button onClick={handleReset} className="mt-1 w-full bg-red-500 text-white p-1 rounded">
+          Reset Project
         </button>
-        <button onClick={copyBytecode} className="mt-1 w-full bg-green-600 text-white p-1 rounded">
+        <button onClick={loadDefaultProject} className="mt-1 w-full bg-indigo-500 text-white p-1 rounded">
+          Load Default Project
+        </button>
+        <button onClick={uploadBytecodeViaWebSerial} className="mt-6 w-full bg-purple-600 text-white p-1 rounded">
+          Upload Project to Arduino
+        </button>
+        <button onClick={copyBytecode} className="mt-1 mb-5 w-full bg-green-600 text-white p-1 rounded">
           Copy Code for testing on Wokwi.com
         </button>
         <button onClick={copyArduinoCode} className="mt-1 w-full bg-orange-600 text-white p-1 rounded">
           Copy Arduino Code
         </button>
-        <button onClick={uploadBytecodeViaWebSerial} className="mt-1 w-full bg-purple-600 text-white p-1 rounded">
-          Upload Project to Arduino
-        </button>
         When you want to test on Wokwi.com you can use see the default project <a className='text-blue-700' href='https://wokwi.com/projects/441553408946374657'>here</a>
 
         {uploadStatus && (
           <div className={`mt-2 p-2 text-center text-sm rounded ${
-            uploadStatus.includes('success') || uploadStatus.includes('copied') 
+            uploadStatus.includes('success') || uploadStatus.includes('copied') || uploadStatus.includes('loaded') || uploadStatus.includes('reset')
               ? 'bg-green-100 text-green-800' 
               : 'bg-red-100 text-red-800'
           }`}>

logic-editor/src/sample-project.ts

@@ -0,0 +1 @@
+export const defaultProject = { "nodes": [{ "id": "dndnode_0", "type": "orNode", "position": { "x": 241.241969952952, "y": 216.73858248031 }, "data": { "label": "orNode", "inputs": 2, "selectedBoard": "arduino_nano" }, "width": 109, "height": 76, "selected": false, "positionAbsolute": { "x": 241.241969952952, "y": 216.73858248031 }, "dragging": false }, { "id": "dndnode_1", "type": "inputNode", "position": { "x": 99.0525726762845, "y": 120.38101845944 }, "data": { "label": "inputNode", "inputs": 2, "selectedBoard": "arduino_nano", "pin": "2" }, "width": 100, "height": 62, "selected": false, "positionAbsolute": { "x": 99.0525726762845, "y": 120.38101845944 }, "dragging": false }, { "id": "dndnode_2", "type": "outputNode", "position": { "x": 583.847337035519, "y": 260.636051960996 }, "data": { "label": "outputNode", "inputs": 2, "selectedBoard": "arduino_nano", "pin": "8" }, "width": 100, "height": 62, "selected": false, "positionAbsolute": { "x": 583.847337035519, "y": 260.636051960996 }, "dragging": false }, { "id": "dndnode_3", "type": "inputNode", "position": { "x": 99.4330577928179, "y": 186.453426300785 }, "data": { "label": "inputNode", "inputs": 2, "selectedBoard": "arduino_nano", "pin": "3" }, "width": 100, "height": 62, "selected": false, "positionAbsolute": { "x": 99.4330577928179, "y": 186.453426300785 }, "dragging": false }, { "id": "dndnode_4", "type": "inputNode", "position": { "x": 99.1067031003101, "y": 251.878940946015 }, "data": { "label": "inputNode", "inputs": 2, "selectedBoard": "arduino_nano", "pin": "4" }, "width": 100, "height": 62, "selected": false, "positionAbsolute": { "x": 99.1067031003101, "y": 251.878940946015 }, "dragging": false }, { "id": "dndnode_5", "type": "inputNode", "position": { "x": 98.912141723119, "y": 316.686258832949 }, "data": { "label": "inputNode", "inputs": 2, "selectedBoard": "arduino_nano", "pin": "5" }, "width": 100, "height": 62, "selected": false, "positionAbsolute": { "x": 98.912141723119, "y": 316.686258832949 }, "dragging": false }, { "id": "dndnode_6", "type": "inputNode", "position": { "x": 98.0021028990381, "y": 383.119092990855 }, "data": { "label": "inputNode", "inputs": 2, "selectedBoard": "arduino_nano", "pin": "6" }, "width": 100, "height": 62, "selected": false, "positionAbsolute": { "x": 98.0021028990381, "y": 383.119092990855 }, "dragging": false }, { "id": "dndnode_8", "type": "notNode", "position": { "x": 259.629661527553, "y": 143.97344363477 }, "data": { "label": "notNode", "inputs": 2, "selectedBoard": "arduino_nano" }, "width": 80, "height": 48, "selected": false, "positionAbsolute": { "x": 259.629661527553, "y": 143.97344363477 }, "dragging": false }, { "id": "dndnode_12", "type": "andNode", "position": { "x": 446.273766755506, "y": 259.353231519314 }, "data": { "label": "andNode", "inputs": 4, "selectedBoard": "arduino_nano" }, "width": 100, "height": 65, "selected": false, "dragging": false, "positionAbsolute": { "x": 446.273766755506, "y": 259.353231519314 } }, { "id": "dndnode_13", "type": "toggleNode", "position": { "x": 240.352027954439, "y": 319.013558181499 }, "data": { "label": "toggleNode", "inputs": 2, "selectedBoard": "arduino_nano" }, "width": 115, "height": 62, "selected": false, "positionAbsolute": { "x": 240.352027954439, "y": 319.013558181499 }, "dragging": false }, { "id": "dndnode_14", "type": "latchNode", "position": { "x": 240.352027954439, "y": 413.701592373082 }, "data": { "label": "latchNode", "inputs": 2, "selectedBoard": "arduino_nano" }, "width": 115, "height": 90, "selected": false, "positionAbsolute": { "x": 240.352027954439, "y": 413.701592373082 }, "dragging": false }, { "id": "dndnode_15", "type": "inputNode", "position": { "x": 97.8163169107269, "y": 447.95045580408 }, "data": { "label": "inputNode", "inputs": 2, "selectedBoard": "arduino_nano", "pin": "7" }, "width": 100, "height": 62, "selected": false, "positionAbsolute": { "x": 97.8163169107269, "y": 447.95045580408 }, "dragging": false }], "edges": [{ "source": "dndnode_1", "sourceHandle": "out", "target": "dndnode_8", "targetHandle": "in", "id": "reactflow__edge-dndnode_1out-dndnode_8in" }, { "source": "dndnode_3", "sourceHandle": "out", "target": "dndnode_0", "targetHandle": "in0", "id": "reactflow__edge-dndnode_3out-dndnode_0in0" }, { "source": "dndnode_4", "sourceHandle": "out", "target": "dndnode_0", "targetHandle": "in1", "id": "reactflow__edge-dndnode_4out-dndnode_0in1" }, { "source": "dndnode_8", "sourceHandle": "out", "target": "dndnode_12", "targetHandle": "in0", "id": "reactflow__edge-dndnode_8out-dndnode_12in0" }, { "source": "dndnode_0", "sourceHandle": "out", "target": "dndnode_12", "targetHandle": "in1", "id": "reactflow__edge-dndnode_0out-dndnode_12in1" }, { "source": "dndnode_12", "sourceHandle": "out", "target": "dndnode_2", "targetHandle": "in", "id": "reactflow__edge-dndnode_12out-dndnode_2in" }, { "source": "dndnode_5", "sourceHandle": "out", "target": "dndnode_13", "targetHandle": "in", "id": "reactflow__edge-dndnode_5out-dndnode_13in" }, { "source": "dndnode_13", "sourceHandle": "out", "target": "dndnode_12", "targetHandle": "in2", "id": "reactflow__edge-dndnode_13out-dndnode_12in2" }, { "source": "dndnode_6", "sourceHandle": "out", "target": "dndnode_14", "targetHandle": "set", "id": "reactflow__edge-dndnode_6out-dndnode_14set" }, { "source": "dndnode_15", "sourceHandle": "out", "target": "dndnode_14", "targetHandle": "reset", "id": "reactflow__edge-dndnode_15out-dndnode_14reset" }, { "source": "dndnode_14", "sourceHandle": "out", "target": "dndnode_12", "targetHandle": "in3", "id": "reactflow__edge-dndnode_14out-dndnode_12in3" }], "board": "arduino_nano" };