initial setup / MVP

in this project you can enter gcode commands and it renders the toolpath very rough interface
Sam-Apostel · Dec 10, 2021 · 5f418b4 · 5f418b4
1 parent 22e1520
commit 5f418b4
Show file tree

Hide file tree

Showing 11 changed files with 37,895 additions and 11,533 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,15 +2,6 @@
   "name": "polar-slicer",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^1.0.1"
-  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -34,5 +25,18 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3",
+    "three": "^0.135.0",
+    "web-vitals": "^1.0.1"
+  },
+  "devDependencies": {
+    "react-use": "^17.3.1"
   }
 }
diff --git a/planned.md b/planned.md
@@ -0,0 +1,23 @@
+# editor
+- grouping commands
+- visual representation of groups
+- editing commands
+- autocomplete/suggest
+- saving and loading files
+- loops
+- variables
+- functional blocks
+
+# viewer
+- display shell object
+- display printed example
+- display build area
+- simulate machine movements
+	- rigging a machine
+	- reverse kinematics
+- autozoom
+- play toolpath as animation
+
+# advanced toolpaths
+- 6 DOF
+- view different machine operations (temperature, feedrate, ...)
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Polar slicer</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,12 @@
 .App {
-  text-align: center;
+	width:100vw;
+	height:100vh;
+	display: grid;
+	grid-template:
+        'editor' 'viewer'
+		/ 1fr 1fr;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+* {
+	box-sizing: border-box;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,18 @@
-import logo from './logo.svg';
 import './App.css';
+import { useState } from 'react';
+import GcodeEditor from './components/GcodeEditor';
+import GcodeViewer from './components/GcodeViewer';
+
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+	const [gcode, setGcode] = useState('');
+	return (
+		<div className="App">
+
+			<GcodeEditor gcode={gcode} onChange={setGcode} />
+			<GcodeViewer gcode={gcode} />
+		</div>
+	);
 }
 
 export default App;
diff --git a/src/components/GcodeEditor/index.js b/src/components/GcodeEditor/index.js
@@ -0,0 +1,138 @@
+import './style.css';
+import { useEffect, useState } from 'react';
+
+
+const GcodeArg = props => {
+	const { children: arg } = props;
+	const argType = arg.slice(0, 1);
+	const argValue = arg.slice(1);
+	return (
+		<div className={`GcodeArg GcodeArg-${argType}`}>
+			<div className="block">
+				<span>{argType}</span>
+				<span>{argValue}</span>
+			</div>
+		</div>
+	);
+};
+
+const Gcode = props => {
+	const { children: code } = props;
+	const [command, ...args] = code.split(' ');
+	const commandType = command.slice(0, 1);
+	const commandValue = command.slice(1);
+	const commands = {
+		G1: {
+			name: 'move'
+		},
+		M204: {
+			name: 'acceleration'
+		}
+	}
+	if (commandType === 'G') {
+		if (commandValue === '1') {
+			return (
+				<div className={`Gcode Gcode-${commandType}-command`}>
+					<div className="block">
+						Move
+						{/* XYZEF */}
+					</div>
+					{args.length > 0 && args.map(arg => <GcodeArg key={arg}>{arg}</GcodeArg>)}
+				</div>
+			);
+		}
+	} else if (commandType === 'M') {
+		if (commandValue === '204') {
+			return (
+				<div className={`Gcode Gcode-${commandType}-command`}>
+					<div className="block">
+						Acceleration
+						{/*
+					        P: printing
+					        T: travel
+					        R: retraction
+						 */}
+					</div>
+					{args.length > 0 && args.map(arg => <GcodeArg key={arg}>{arg}</GcodeArg>)}
+				</div>
+			);
+		}
+	}
+
+	return (
+		<div className={`Gcode Gcode-${commandType}-command`}>
+			<div className="block">
+				<span>{commandType}</span>
+				<span>{commandValue}</span>
+			</div>
+			{args.length > 0 && args.map(arg => <GcodeArg key={arg}>{arg}</GcodeArg>)}
+		</div>
+	);
+};
+
+const GcodeLine = props => {
+	const { children: value } = props;
+	const [code, ...commentParts] = value.split(';');
+	const comment = commentParts.join(';').trim();
+	const hasCode = Boolean(code.replace(/\s/g, '').length);
+	return (
+		<div className={`GcodeLine ${hasCode ? '' : 'noCode'}`}>
+			{hasCode && <Gcode>{code.trim()}</Gcode>}
+			{comment !== '' && <div className="comment">{comment}</div>}
+		</div>
+	);
+};
+
+const GcodeEditor = props => {
+	const {
+		gcode,
+		onChange
+	} = props;
+	const [newLine, setNewLine] = useState(null);
+	const [lineCopy, setLineCopy] = useState(null);
+
+	useEffect(() => {
+		if (lineCopy > 0 && lineCopy < lines.length) setNewLine(lines[lines.length - lineCopy]);
+		if (lineCopy === 0 ) {
+			setNewLine('G1 ');
+		}
+	}, [lineCopy]);
+
+	const lines = gcode.split('\n');
+	return (
+		<div className="GcodeEditor">
+			{lines.map((line, index) =>
+				<GcodeLine key={index}>{line}</GcodeLine>
+			)}
+			{!newLine && <div onClick={() => setNewLine('G1 ')} className="addLine"><div>+</div>add line</div>}
+			{newLine && <div className="newLine"><input
+				type="text"
+				value={newLine}
+				onChange={e => setNewLine(e.target.value)}
+				onKeyUp={e => {
+					switch (e.key) {
+						case 'Enter': {
+							onChange(`${gcode}
+${e.target.value}`);
+							setNewLine('G1 ');
+							setLineCopy(null);
+							break;
+						}
+						case 'ArrowUp': {
+							setLineCopy(lineCopy => lineCopy + 1)
+							break;
+						}
+						case 'ArrowDown': {
+							if (lineCopy !== 0)	setLineCopy(lineCopy => lineCopy - 1);
+							break;
+						}
+						default: break;
+					}
+				}}
+			/><div className="closeNewLine" onClick={() => setNewLine(null)}>×</div></div>}
+
+		</div>
+	);
+};
+
+export default GcodeEditor;
diff --git a/src/components/GcodeEditor/style.css b/src/components/GcodeEditor/style.css
@@ -0,0 +1,100 @@
+.GcodeEditor {
+	height: 100%;
+	overflow-y: scroll;
+	padding: 1rem;
+	background: lch(9% 0 270 / 1);
+	color: lch(80% 0 0);
+	counter-reset: section;
+	font-family: monospace;
+	line-height: 1.2rem;
+}
+
+.GcodeEditor .addLine {
+	display: inline-flex;
+	gap: .5rem;
+	padding: .2rem .8rem .2rem .2rem;
+	margin-top: .1rem;
+	margin-left: calc(4ch + 1rem);
+	border-radius: .2rem;
+	transition: .2s;
+	line-height: 1rem;
+}
+.GcodeEditor .addLine:hover {
+	background: lch(35% 50 270 / .3);
+}
+.GcodeEditor .addLine div{
+	background-color: lch(35% 50 270 / 1);
+	width: 1rem;
+	border-radius: 50%;
+	text-align: center;
+}
+
+.GcodeEditor .newLine {
+	display: flex;
+	gap: .5rem;
+	margin-left: calc(4ch + 1rem);
+	padding: .15rem 0;
+}
+
+.GcodeEditor .newLine div{
+	color: lch(30% 0 0);
+	border: 1px solid currentColor;
+	width: 1.4rem;
+	border-radius: 50%;
+	text-align: center;
+	transition: .2s;
+}
+.GcodeEditor .newLine div:hover{
+	color: lch(70% 0 0);
+}
+
+.GcodeEditor .newLine input{
+	appearance: none;
+	border: none;
+	background: lch(35% 50 270 / .3);
+	color: lch(80% 0 0);
+	font-family: monospace;
+	padding: 0 .4rem;
+	border-radius: .2rem;
+	margin: 0;
+}
+
+.GcodeLine {
+	display: flex;
+	padding: .15rem 0;
+	min-height: 1.2rem;
+	gap: 1rem;
+}
+.GcodeLine.noCode {
+	text-indent: calc(4ch + 1rem);
+	padding: 0;
+}
+.GcodeLine:not(.noCode):before {
+	counter-increment: section;
+	content: counter(section);
+	color: lch(30% 0 0);
+	text-align: right;
+	width: 4ch;
+}
+
+.Gcode {
+	display: flex;
+	gap: .6rem;
+	background-color: lch(30% 0 0);
+	padding: 0 .4rem;
+	border-radius: .2rem;
+}
+
+.Gcode-G-command {
+	background-color: lch(45% 50 30);
+}
+
+.Gcode-M-command {
+	background-color: lch(45% 50 130);
+}
+
+.GcodeLine .comment {
+	color: lch(50% 0 0);
+	white-space: pre-wrap;
+}
+