+
*Arduino emulator with Monaco code editor and visual simulator with wokwi-elements*
-
+
*Interactive component properties dialog and segment-based wire editing*
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4dfe18f..96736bf 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -22,6 +22,23 @@ body {
border-bottom: 2px solid #007acc;
}
+.header-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.header-title h1 {
+ font-size: 24px;
+ margin-bottom: 5px;
+ color: #007acc;
+}
+
+.header-title p {
+ font-size: 14px;
+ color: #aaa;
+}
+
.app-header h1 {
font-size: 24px;
margin-bottom: 5px;
@@ -33,6 +50,26 @@ body {
color: #aaa;
}
+.examples-link {
+ padding: 10px 20px;
+ background-color: #007acc;
+ color: #fff;
+ text-decoration: none;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: 500;
+ transition: all 0.2s;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.examples-link:hover {
+ background-color: #005a9e;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 122, 204, 0.3);
+}
+
.app-container {
flex: 1;
display: flex;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a5d541f..31ca039 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,27 +1,16 @@
-import { CodeEditor } from './components/editor/CodeEditor';
-import { EditorToolbar } from './components/editor/EditorToolbar';
-import { SimulatorCanvas } from './components/simulator/SimulatorCanvas';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import { EditorPage } from './pages/EditorPage';
+import { ExamplesPage } from './pages/ExamplesPage';
import './App.css';
function App() {
return (
-
+
+ );
+};
diff --git a/frontend/src/data/examples.ts b/frontend/src/data/examples.ts
new file mode 100644
index 0000000..9de1c98
--- /dev/null
+++ b/frontend/src/data/examples.ts
@@ -0,0 +1,611 @@
+/**
+ * Arduino Example Projects
+ *
+ * Collection of example projects that users can load and run
+ */
+
+export interface ExampleProject {
+ id: string;
+ title: string;
+ description: string;
+ category: 'basics' | 'sensors' | 'displays' | 'communication' | 'games' | 'robotics';
+ difficulty: 'beginner' | 'intermediate' | 'advanced';
+ code: string;
+ components: Array<{
+ type: string;
+ id: string;
+ x: number;
+ y: number;
+ properties: Record
+
+ ← Back to Editor
+
+
+
+
+
+ {/* Filters */}
+ Featured Projects
+Explore and run example Arduino projects
+
+
+
+ {/* Examples Grid */}
+
+
+
+
+
+
+ {categories.map((category) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {filteredExamples.map((example) => (
+
+
+ {filteredExamples.length === 0 && (
+ onLoadExample(example)}
+ >
+
+ ))}
+
+ {example.thumbnail ? (
+ 
+ ) : (
+
+
+ {getCategoryIcon(example.category)}
+
+ {example.components.length} component{example.components.length !== 1 ? 's' : ''}
+
+
+ )}
+
+
+ {example.title}
+{example.description}
+
+
+ {example.difficulty}
+
+
+ {getCategoryIcon(example.category)} {example.category}
+
+
+
+
+ )}
+ No examples found with the selected filters
+
+
+
+
+ );
+};
diff --git a/frontend/src/pages/ExamplesPage.tsx b/frontend/src/pages/ExamplesPage.tsx
new file mode 100644
index 0000000..c96f758
--- /dev/null
+++ b/frontend/src/pages/ExamplesPage.tsx
@@ -0,0 +1,66 @@
+/**
+ * Examples Page Component
+ *
+ * Displays the examples gallery
+ */
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ExamplesGallery } from '../components/examples/ExamplesGallery';
+import { useEditorStore } from '../store/useEditorStore';
+import { useSimulatorStore } from '../store/useSimulatorStore';
+import type { ExampleProject } from '../data/examples';
+
+export const ExamplesPage: React.FC = () => {
+ const navigate = useNavigate();
+ const { setCode } = useEditorStore();
+ const { setComponents, setWires } = useSimulatorStore();
+
+ const handleLoadExample = (example: ExampleProject) => {
+ console.log('Loading example:', example.title);
+
+ // Load the code into the editor
+ setCode(example.code);
+
+ // Load components into the simulator
+ // Convert component type to metadataId (e.g., 'wokwi-led' -> 'led')
+ setComponents(
+ example.components.map((comp) => ({
+ id: comp.id,
+ metadataId: comp.type.replace('wokwi-', ''),
+ x: comp.x,
+ y: comp.y,
+ properties: comp.properties,
+ }))
+ );
+
+ // Load wires (need to convert to full wire format with positions)
+ // For now, just set empty wires - wire positions will be calculated when components are loaded
+ const wiresWithPositions = example.wires.map((wire) => ({
+ id: wire.id,
+ start: {
+ componentId: wire.start.componentId,
+ pinName: wire.start.pinName,
+ x: 0, // Will be calculated by SimulatorCanvas
+ y: 0,
+ },
+ end: {
+ componentId: wire.end.componentId,
+ pinName: wire.end.pinName,
+ x: 0,
+ y: 0,
+ },
+ color: wire.color,
+ controlPoints: [],
+ isValid: true,
+ signalType: 'digital' as const,
+ }));
+
+ setWires(wiresWithPositions);
+
+ // Navigate to the editor
+ navigate('/');
+ };
+
+ return
+
+
+
+
+ 📚 Browse Examples
+
+ Arduino Emulator
+Local Arduino IDE & Simulator
+
+
+
+
+
+
+
+
+