From d682accdbf2e46af856e083d9c939ef52f2e2ffc Mon Sep 17 00:00:00 2001 From: Mario Pesch Date: Thu, 6 Jan 2022 10:20:35 +0100 Subject: [PATCH] add autosave and serialmonitor --- src/App.css | 75 +++++++++--------- src/components/CodeEditor/CodeEditor.js | 77 +++++++++++++----- src/components/CodeEditor/SerialMonitor.js | 92 ++++++++++++++++++++++ src/components/CodeEditor/Sidebar.js | 28 ++++++- src/components/Navbar.js | 3 +- src/data/arduinoExamples.js | 2 - src/data/versions.js | 2 - 7 files changed, 214 insertions(+), 65 deletions(-) create mode 100644 src/components/CodeEditor/SerialMonitor.js diff --git a/src/App.css b/src/App.css index 1a8a13d..9903a22 100644 --- a/src/App.css +++ b/src/App.css @@ -1,51 +1,50 @@ .wrapper { - min-height: calc(100vh - 60px); /* will cover the 100% of viewport - height of footer (padding-bottom) */ + min-height: calc( + 100vh - 60px + ); /* will cover the 100% of viewport - height of footer (padding-bottom) */ overflow: hidden; display: block; position: relative; padding-bottom: 60px; /* height of your footer + 30px*/ } - -.tutorial img{ +.tutorial img { display: flex; align-items: center; - max-height: 40vH; + max-height: 40vh; max-width: 100%; margin: auto; -} - -.news img{ - display: flex; - align-items: center; - max-height: 40vH; - max-width: 100%; - margin: auto; -} - -.tutorial blockquote{ - background: #f9f9f9; - border-left: 10px solid#4EAF47; - margin: 1.5em 10px; - padding: 0.5em 10px; - quotes: "\201C""\201D""\2018""\2019"; - } - blockquote:before { - color:#4EAF47; - content: open-quote; - font-size: 4em; - line-height: 0.1em; - margin-right: 0.25em; - vertical-align: -0.4em; - } - blockquote p { - display: inline; - } - -.overlay { - display: flex; - flex-direction: column; - align-items: center; } - +.news img { + display: flex; + align-items: center; + max-height: 40vh; + max-width: 100%; + margin: auto; +} + +.tutorial blockquote { + background: #f9f9f9; + border-left: 10px solid#4EAF47; + margin: 1.5em 10px; + padding: 0.5em 10px; + quotes: "\201C""\201D""\2018""\2019"; +} +blockquote:before { + color: #4eaf47; + content: open-quote; + font-size: 4em; + line-height: 0.1em; + margin-right: 0.25em; + vertical-align: -0.4em; +} +blockquote p { + display: inline; +} + +.overlay { + display: flex; + flex-direction: column; + align-items: center; +} diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js index 75d2fb6..38a024d 100644 --- a/src/components/CodeEditor/CodeEditor.js +++ b/src/components/CodeEditor/CodeEditor.js @@ -9,6 +9,7 @@ import { saveAs } from "file-saver"; import Drawer from "@material-ui/core/Drawer"; import Sidebar from "./Sidebar"; import Dialog from "../Dialog"; +import Snackbar from "../Snackbar"; const CodeEditor = (props) => { const [fileHandle, setFileHandle] = useState(); @@ -18,7 +19,21 @@ const CodeEditor = (props) => { const [open, setOpen] = useState(false); const [error, setError] = useState(""); const editorRef = useRef(null); - + const [autoSave, setAutoSave] = useState(false); + const [time, setTime] = useState(null); + const [value, setValue] = useState(""); + const [defaultValue, setDefaultValue] = useState( + sessionStorage.getItem("ArduinoCode") + ? sessionStorage.getItem("ArduinoCode") + : ` +void setup () { + +} + +void loop() { + +}` + ); const compile = () => { setProgress(true); const data = { @@ -86,6 +101,34 @@ const CodeEditor = (props) => { editorRef.current.setValue("test"); }; + const handleChange = () => { + setAutoSave(!autoSave); + }; + + const resetTimeout = (id, newID) => { + clearTimeout(id); + return newID; + }; + + const editValue = (value) => { + setTime(resetTimeout(time, setTimeout(saveValue, 400))); + setValue(value); + }; + + const saveValue = () => { + sessionStorage.setItem("ArduinoCode", value); + setAutoSave(true); + setTimeout(() => setAutoSave(false), 1000); + }; + + const handleClose = (event, reason) => { + if (reason === "clickaway") { + return; + } + + setOpen(false); + }; + return (
@@ -128,15 +171,11 @@ const CodeEditor = (props) => {

Code Editor

{ + editValue(value); + }} defaultLanguage="cpp" - defaultValue={` -void setup () { - -} - -void loop(){ - -}`} + defaultValue={defaultValue} value={fileContent} onMount={(editor, monaco) => { editorRef.current = editor; @@ -176,25 +215,25 @@ void loop(){ > Reset Editor + + -
{Blockly.Msg.tabletDialog_text}
- {Blockly.Msg.tabletDialog_more}{" "} - - https://sensebox.de/app - + Dein Code wird nun kompiliert und anschließend auf deinen Computer + heruntergeladen
diff --git a/src/components/CodeEditor/SerialMonitor.js b/src/components/CodeEditor/SerialMonitor.js new file mode 100644 index 0000000..b40f10b --- /dev/null +++ b/src/components/CodeEditor/SerialMonitor.js @@ -0,0 +1,92 @@ +import { useState } from "react"; +import Button from "@material-ui/core/Button"; + +const SerialMonitor = () => { + const [serialPortContent, setSerialPortContent] = useState([]); + + const [checked, setChecked] = useState(false); + const handleClick = () => setChecked(!checked); + + const connectPort = async () => { + try { + const port = await navigator.serial.requestPort(); + + await port.open({ baudRate: 9600 }); + + while (port.readable) { + const reader = port.readable.getReader(); + + try { + while (true) { + const { value, done } = await reader.read(); + if (done) { + // Allow the serial port to be closed later. + reader.releaseLock(); + break; + } + if (value) { + // byte array to string: https://stackoverflow.com/a/37542820 + const text = String.fromCharCode.apply(null, value); + console.log(text); + setSerialPortContent((prevContent) => [ + ...prevContent, + [new Date(), text], + ]); + } + } + } catch (error) { + setSerialPortContent((prevContent) => [ + ...prevContent, + [new Date(), error], + ]); + } + } + } catch (error) { + setSerialPortContent((prevContent) => [ + ...prevContent, + [new Date(), error], + ]); + } + }; + + return ( + <> +
+ + + +
+
+ {serialPortContent.map((log) => { + return ( +

+ {checked && ( + {log[0].toISOString()} + )} + + {log[1]} +

+ ); + })} +
+ + ); +}; + +export default SerialMonitor; diff --git a/src/components/CodeEditor/Sidebar.js b/src/components/CodeEditor/Sidebar.js index e051c71..384744b 100644 --- a/src/components/CodeEditor/Sidebar.js +++ b/src/components/CodeEditor/Sidebar.js @@ -6,9 +6,10 @@ import AccordionDetails from "@material-ui/core/AccordionDetails"; import Typography from "@material-ui/core/Typography"; import { LibraryVersions } from "../../data/versions.js"; import { ArduinoExamples } from "../../data/arduinoExamples.js"; -import Editor, { useMonaco } from "@monaco-editor/react"; +import { useMonaco } from "@monaco-editor/react"; import { Button } from "@material-ui/core"; import Dialog from "../Dialog"; +import SerialMonitor from "./SerialMonitor.js"; const Sidebar = () => { const [alert, setAlert] = React.useState(false); @@ -37,6 +38,23 @@ void loop(){ return (
+ {"serial" in navigator ? ( + + + Serial Monitor + + + + + + + + ) : null} + Installierte Libraries - - + +

For Dokumentation take a look at the installed libraries and their source diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 10e3874..a739062 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -34,6 +34,7 @@ import { faChalkboardTeacher, faTools, faLightbulb, + faCode, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import * as Blockly from "blockly"; @@ -232,7 +233,7 @@ class Navbar extends Component { }, { text: "CodeEditor", - icon: faLightbulb, + icon: faCode, link: "/codeeditor", }, { diff --git a/src/data/arduinoExamples.js b/src/data/arduinoExamples.js index 207c203..7d2dbe4 100644 --- a/src/data/arduinoExamples.js +++ b/src/data/arduinoExamples.js @@ -1,5 +1,3 @@ -import * as Blockly from "blockly/core"; - export const ArduinoExamples = () => { return [ { diff --git a/src/data/versions.js b/src/data/versions.js index d5d2e2c..77f7651 100644 --- a/src/data/versions.js +++ b/src/data/versions.js @@ -1,5 +1,3 @@ -import * as Blockly from "blockly/core"; - export const LibraryVersions = () => { return [ {