Skip to content

Commit 13f67e9

Browse files
sophiedezielsophiedeziel
authored
WIP Install a new viewer (#1491)
1 parent b464c35 commit 13f67e9

File tree

10 files changed

+193
-233
lines changed

10 files changed

+193
-233
lines changed

‎Procfile

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
webpack: bin/shakapacker-dev-server --no-stats
2-
rails: bundle exec rails server -p $PORT -b '0.0.0.0'
1+
webpack: bin/shakapacker-dev-server
2+
rails: bundle exec rails server -p $PORT -b 'localhost'
33
//sidekiq: bundle exec sidekiq
44
spooler: bin/spooler
55
filewatcher: bin/filewatcher

‎app/ui/Sections/Files/FileEditor/FileEditor.jsx

+36-18
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import { useQuery, useMutation } from '@apollo/client'
66
import File from './graphql/File.graphql'
77
import UpdateFile from './graphql/UpdateFile.graphql'
88
import GcodeDocs from './GcodeDocs/GcodeDocs.json'
9-
import { GCodeViewer } from 'react-gcode-viewer'
9+
import GCodePreviewUI from '../../../components/GCodePreviewUI'
1010

11-
import { Card, Collapse, Col, Row, Button, Typography, Divider, Input } from 'antd'
11+
import { Card, Collapse, Col, Row, Button, Typography, Divider, Input, Slider } from 'antd'
1212
import { PageHeader } from '@ant-design/pro-layout'
1313
import { FileOutlined } from '@ant-design/icons'
1414

@@ -26,7 +26,11 @@ export default function FileEditor () {
2626
const fileID = match.params.id
2727

2828
const editorRef = useRef(null)
29+
const gcodePreviewRef = useRef(null)
30+
2931
const [lineContent, setLineContent] = useState()
32+
const [selectedLayer, setSelectedLayer] = useState()
33+
const [layerCount, setLayerCount] = useState()
3034
const [filename, setFilename] = useState(null)
3135

3236
const [openedCollapse, setOpenedCollapse] = useState([])
@@ -74,8 +78,13 @@ export default function FileEditor () {
7478
monaco.editor.defineTheme('Tomorrow', Tomorrow)
7579
}
7680

81+
function handleEditorChange (value) {
82+
// gcodePreviewRef.current?.replaceGCode(value)
83+
}
84+
7785
function handleEditorMount (editor) {
7886
editorRef.current = editor
87+
7988
editor.onDidChangeCursorPosition((position) => {
8089
const model = editor.getModel()
8190
const content = model.getValueInRange({
@@ -100,6 +109,7 @@ export default function FileEditor () {
100109
}
101110
}
102111
)
112+
gcodePreviewRef.current?.replaceGCode(editorRef.current.getValue())
103113
}
104114

105115
const onSearch = (event) => {
@@ -269,22 +279,29 @@ export default function FileEditor () {
269279
{
270280
key: '1',
271281
label: 'Preview',
272-
children: <GCodeViewer
273-
orbitControls
274-
showAxes
275-
quality={0.2}
276-
floorProps={{
277-
gridWidth: 300,
278-
gridLength: 300
279-
}}
280-
style={{
281-
top: 0,
282-
left: 0,
283-
width: '100%',
284-
height: '25%'
285-
}}
286-
url={file.downloadUrl}
287-
/>
282+
children:
283+
<Row>
284+
<Col span={4}>
285+
<Slider
286+
vertical
287+
value={selectedLayer}
288+
max={layerCount}
289+
min={1}
290+
onChange={setSelectedLayer}
291+
marks={{ 1: '1', [layerCount]: layerCount }}
292+
/>
293+
</Col>
294+
<Col span={20}>
295+
<GCodePreviewUI
296+
ref={gcodePreviewRef}
297+
startLayer={1}
298+
endLayer={selectedLayer + 1}
299+
lineWidth={20}
300+
renderTubes={true}
301+
gcode={file.fileContent}
302+
/>
303+
</Col>
304+
</Row>
288305
},
289306
{
290307
key: '2',
@@ -330,6 +347,7 @@ export default function FileEditor () {
330347
defaultValue={file.fileContent}
331348
onMount={handleEditorMount}
332349
beforeMount={handleEditorWillMount}
350+
onChange={handleEditorChange}
333351
/>
334352
</Card>
335353
</Col>

‎app/ui/Sections/Files/FilePrinter/FilePrinter.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
22
import { useMatch } from 'react-router'
33
import { useQuery, useMutation } from '@apollo/client'
44
import ReactMarkdown from 'react-markdown'
5-
import { GCodeViewer } from 'react-gcode-viewer'
5+
// import { GCodeViewer } from 'react-gcode-viewer'
66

77
import classes from './FilePrinter.module.less'
88

@@ -104,7 +104,7 @@ export default function FilePrinter () {
104104
</Col>
105105
<Col span={12}>
106106
<Card title="File Preview" >
107-
<GCodeViewer
107+
{/* <GCodeViewer
108108
orbitControls
109109
showAxes
110110
quality={0.2}
@@ -119,7 +119,7 @@ export default function FilePrinter () {
119119
height: '400px'
120120
}}
121121
url={file.downloadUrl}
122-
/>
122+
/> */}
123123
</Card>
124124
<Card title="File informations" >
125125
<Row>

‎app/ui/Sections/Printers/PrinterAdd/PrinterAdd.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function PrinterAdd () {
4545
})
4646
}
4747
}).catch((error) => {
48-
console.log(error)
48+
console.error('pollAPIKey', error)
4949
})
5050
}
5151

‎app/ui/Sections/Printers/PrintersList/NetworkPrinters.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default function NetworkPrinters () {
5858
})
5959
}
6060
}).catch((error) => {
61-
console.log(error)
61+
console.error('pollAPIKey', error)
6262
})
6363
}
6464

‎app/ui/components/GCodePreviewUI.tsx

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import * as GCodePreview from 'gcode-preview';
2+
import React from 'react';
3+
import {
4+
forwardRef,
5+
Ref,
6+
useEffect,
7+
useImperativeHandle,
8+
useRef,
9+
useState
10+
} from 'react';
11+
import { render } from 'react-dom';
12+
import * as THREE from 'three';
13+
14+
interface GCodePreviewProps {
15+
topLayerColor?: string;
16+
lastSegmentColor?: string;
17+
startLayer?: number;
18+
endLayer?: number;
19+
lineWidth?: number;
20+
renderTubes?: boolean;
21+
gcode?: string;
22+
}
23+
24+
interface GCodePreviewHandle {
25+
getLayerCount: () => number;
26+
processGCode: (gcode: string | string[]) => void;
27+
replaceGCode: (gcode: string | string[]) => void;
28+
render(): void;
29+
}
30+
31+
function GCodePreviewUI(
32+
props: GCodePreviewProps,
33+
ref: Ref<GCodePreviewHandle>
34+
): JSX.Element {
35+
const {
36+
topLayerColor = '',
37+
lastSegmentColor = '',
38+
startLayer,
39+
endLayer,
40+
lineWidth,
41+
renderTubes,
42+
gcode
43+
} = props;
44+
const canvasRef = useRef<HTMLCanvasElement | null>(null);
45+
const [preview, setPreview] = useState<GCodePreview.WebGLPreview>();
46+
47+
useEffect(() => {
48+
if (!preview) return
49+
console.log("changed")
50+
preview.endLayer = endLayer
51+
// console.log(preview)
52+
preview.render()
53+
}, [endLayer, startLayer, lineWidth, topLayerColor, lastSegmentColor]);
54+
55+
const resizePreview = () => {
56+
preview?.resize();
57+
console.log("resize")
58+
};
59+
60+
useImperativeHandle(ref, () => ({
61+
getLayerCount() {
62+
console.log("getLayerCount");
63+
return preview?.layers?.length as number;
64+
},
65+
processGCode(gcode) {
66+
console.log("processGCode");
67+
preview?.processGCode(gcode);
68+
},
69+
replaceGCode(gcode) {
70+
console.log("replaceGCode");
71+
preview?.clear();
72+
preview?.processGCode(gcode);
73+
},
74+
render() {
75+
console.log("render");
76+
preview?.render();
77+
}
78+
}));
79+
80+
useEffect(() => {
81+
if (!gcode) return;
82+
console.log("gcode changed")
83+
preview?.clear();
84+
preview?.processGCode(gcode);
85+
}, [gcode, preview]);
86+
87+
useEffect(() => {
88+
setPreview(
89+
GCodePreview.init({
90+
canvas: canvasRef.current as HTMLCanvasElement,
91+
startLayer,
92+
endLayer,
93+
lineWidth,
94+
buildVolume: { x: 250, y: 220, z: 150 },
95+
initialCameraPosition: [0, 200, 400],
96+
allowDragNDrop: false,
97+
renderTubes: renderTubes,
98+
extrusionColor: "#00ff00",
99+
})
100+
101+
);
102+
103+
preview?.resize();
104+
105+
window.addEventListener('resize', resizePreview);
106+
107+
return () => {
108+
window.removeEventListener('resize', resizePreview);
109+
};
110+
}, []);
111+
112+
113+
return (
114+
<div className="gcode-preview" style={{width: '100%'}}>
115+
<canvas ref={canvasRef} width="auto" height="auto" style={{width: '100%'}}></canvas>
116+
117+
<div>
118+
<div>topLayerColor: {topLayerColor}</div>
119+
<div>lastSegmentColor: {lastSegmentColor}</div>
120+
<div>startLayer: {startLayer}</div>
121+
<div>endLayer: {endLayer}</div>
122+
<div>lineWidth: {lineWidth}</div>
123+
</div>
124+
</div>
125+
);
126+
}
127+
128+
export default forwardRef(GCodePreviewUI);

‎babel.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ module.exports = function (api) {
1717

1818
return {
1919
presets: [
20+
'@babel/preset-react', '@babel/preset-typescript',
2021
isTestEnv && [
2122
'@babel/preset-env',
2223
{

‎config/shakapacker.yml

+7-7
Original file line numberDiff line numberDiff line change
@@ -64,21 +64,21 @@ development:
6464
# Reference: https://webpack.js.org/configuration/dev-server/
6565
dev_server:
6666
stats: verbose
67-
server: https
67+
server: http
6868
host: 0.0.0.0
6969
port: 3035
7070
# Hot Module Replacement updates modules while the application is running without a full reload
71-
hmr: false
71+
hmr: true
7272
# Defaults to the inverse of hmr. Uncomment to manually set this.
7373
# live_reload: true
7474
client:
7575
# Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
76-
overlay: true
76+
overlay: false
7777
# May also be a string
78-
webSocketURL:
79-
hostname: "0.0.0.0"
80-
pathname: "/ws"
81-
port: 8080
78+
# webSocketURL:
79+
# hostname: "0.0.0.0"
80+
# pathname: "/ws"
81+
# port: 8080
8282
# Should we use gzip compression?
8383
compress: true
8484
# Note that apps that do not check the host are vulnerable to DNS rebinding attacks

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"cross-fetch": "^4.0.0",
2525
"file-saver": "^2.0.5",
2626
"file-size": "^1.0.0",
27+
"gcode-preview": "^2.17",
2728
"graphql": "^16.8.1",
2829
"graphql-ruby-client": "^1.13.3",
2930
"js-yaml": "^4.1.0",
@@ -32,7 +33,6 @@
3233
"monaco-themes": "^0.4.4",
3334
"react": "^18.3.1",
3435
"react-dom": "^18.3.1",
35-
"react-gcode-viewer": "^2.2.4",
3636
"react-markdown": "^9.0.1",
3737
"react-on-rails": "^14.0.1",
3838
"react-router-dom": "^6.23.1",

0 commit comments

Comments
 (0)