Adding Grbl compatibility

.env.template

@@ -2,8 +2,12 @@
 # The .env file is used to load environmental variables that are not necessary in a production environment (like FLASK_ENV=development)
 # Check the wiki for the available environmental variables
 
-# feeder logger level: 5 -> acks received from the device (and above), level 6 -> lines sent to the device (and above), other standard logging levels of python
-FEEDER_LEVEL=5   
+# feeder logger level: 
+#  * 4 -> log low level commands (used to manage the board status)
+#  * 5 -> acks received from the device (and above) about the drawing process 
+#  * 6 -> lines sent to the device (and above)
+#  *  other standard logging levels of python
+FEEDER_LEVEL=30  
 
 # flask logger level: uses standard python loggin levels (10-debug, 20-info, 30-warning, 40-error, 50-critical). Can set to warning to hide standard http requests
 FLASK_LEVEL=30

.flaskenv

@@ -2,7 +2,11 @@
 # for additional custom variables check the ".env.template" file
 FLASK_APP=server
 
-# feeder logger level: 5 -> acks received from the device (and above), level 6 -> lines sent to the device (and above), other standard logging levels of python
+# feeder logger level: 
+#  * 4 -> log low level commands (used to manage the board status)
+#  * 5 -> acks received from the device (and above) about the drawing process 
+#  * 6 -> lines sent to the device (and above)
+#  *  other standard logging levels of python
 FEEDER_LEVEL=30   
 
 # flask logger level: uses standard python loggin levels (10-debug, 20-info, 30-warning, 40-error, 50-critical). Can set to warning to hide standard http requests

dev_tools/update_frontend_version_hash.py

@@ -0,0 +1,25 @@
+import subprocess
+
+def get_commit_shash():
+    result = subprocess.check_output(['git', 'log', '--pretty=format:"%h"', "-n", "1"])
+    return result.decode(encoding="UTF-8").replace('"', '')  
+
+
+
+# This script save the current git hash in a .env file for react.
+# The script load the last commit hash as version (used by the frontend to check if it is necessary to clear the local storage)
+# Additional variables can be added directly in the list of lines below
+# run it like: (env)$> python dev_tools/update_frontend_version_hash.py
+
+
+file_path = "./frontend/.env"
+
+lines = [
+    "/* THIS FILE IS GENERATED WITH THE FOLLOWING UTIL: */\n",
+    "/* dev_tools/update_frontend_version.py*/\n",
+    "/* Have a look there if you need to put additional variables */\n\n",
+    "REACT_APP_VERSION = {}".format(get_commit_shash())]               # start the server
+
+
+with open(file_path, "w") as f:
+    f.writelines(lines)

frontend/.env

@@ -0,0 +1,5 @@
+/* THIS FILE IS GENERATED WITH THE FOLLOWING UTIL: */
+/* dev_tools/update_frontend_version.py*/
+/* Have a look there if you need to put additional variables */
+
+REACT_APP_VERSION = e23dde3

frontend/src/components/DrawingDataDownloader.js

@@ -4,8 +4,8 @@ import { connect } from 'react-redux';
 import { getRefreshDrawings } from '../structure/tabs/drawings/selector';
 import { setDrawings, setRefreshDrawing } from '../structure/tabs/drawings/Drawings.slice';
 
-import { drawings_request } from '../sockets/SAE';
-import { drawings_refresh_response} from '../sockets/SAC';
+import { drawings_request } from '../sockets/sEmits';
+import { drawings_refresh_response} from '../sockets/sCallbacks';
 
 const mapStateToProps = (state) => {
     return { must_refresh: getRefreshDrawings(state) }

frontend/src/components/PlaylistDataDownloader.js

@@ -4,8 +4,8 @@ import { connect } from 'react-redux';
 import { getRefreshPlaylists } from '../structure/tabs/playlists/selector';
 import { setPlaylists, setRefreshPlaylists } from '../structure/tabs/playlists/Playlists.slice';
 
-import { playlists_request } from '../sockets/SAE';
-import { playlists_refresh_response } from '../sockets/SAC';
+import { playlists_request } from '../sockets/sEmits';
+import { playlists_refresh_response } from '../sockets/sCallbacks';
 
 
 const mapStateToProps = (state) => {

frontend/src/components/SortableElements.js

@@ -72,10 +72,8 @@ class SortableElements extends Component{
 
                     return <ElementCard key={el.id} 
                             handleUnmount={()=>this.removeElement(el.id)}
-                            showCross={this.state.show_child_cross}
-                            onClick={()=>console.log("click2")}>
+                            showCross={this.state.show_child_cross}>
                         <ElementType element={el} 
-                            onClick={()=>console.log("click")}
                             onOptionsChange={(el) => this.props.onElementOptionsChange(el)}
                             hideOptions={this.props.hideOptions}/>
                     </ElementCard>

frontend/src/sockets/SAE.js → frontend/src/sockets/sEmits.js

@@ -1,4 +1,4 @@
-import {socket} from './SAC';
+import {socket} from './sCallbacks';
 
 // sends a gcode command to the feeder
 function send_command(command){
@@ -82,11 +82,20 @@ function queue_set_order(list){
 
 function queue_stop_drawing(){
     socket.emit("queue_stop_drawing");
+    window.show_toast(<div>The drawing is being stopped. <br/>The device will still run until the buffer is empty.</div>)
+}
+
+
+// ---- MANUAL CONTROL ----
+
+function control_emergency_stop(){
+    socket.emit("control_emergency_stop")
 }
 
 
 export {
     send_command,  
+    control_emergency_stop,
     drawing_delete, 
     drawings_request, 
     drawing_queue, 

frontend/src/store.js

@@ -2,7 +2,6 @@ import { createStore } from 'redux';
 import { combineReducers } from '@reduxjs/toolkit';
 
 import settingsReducer from './structure/tabs/settings/Settings.slice';
-import manualControlReducer from './structure/tabs/manual/ManualControl.slice';
 import queueReducer from './structure/tabs/queue/Queue.slice';
 import tabsReducer from './structure/tabs/Tabs.slice';
 import drawingsReducer from './structure/tabs/drawings/Drawings.slice';
@@ -14,13 +13,27 @@ function saveToLocalStorage(state) {
     try {
         const serialisedState = JSON.stringify(state);
         localStorage.setItem("persistantState", serialisedState);
+        localStorage.setItem("version", process.env.REACT_APP_VERSION)
     } catch (e) {
         console.warn(e);
     }
 }
 
 // will create the storage with the values saved in local storage
 function loadFromLocalStorage() {
+    // if is loading a new version from the server, clear the local storage (to avoid compatibility issues between different frontend versions)
+    try{
+        const version = localStorage.getItem("version");
+        if (version !== process.env.REACT_APP_VERSION){
+            console.warn("New version detected. Clearing local storage");
+            localStorage.clear();
+        }
+    } catch (e) {
+        console.warn(e);
+        localStorage.clear();
+    }
+
+    // loads state from local storage if available
     try {
         const serialisedState = localStorage.getItem("persistantState");
         if (serialisedState === null) return undefined;
@@ -29,11 +42,10 @@ function loadFromLocalStorage() {
         console.warn(e);
         return undefined;
     }
-  }
+}
 
 const store = createStore(combineReducers({
         settings: settingsReducer,
-        manualControl: manualControlReducer,
         queue: queueReducer,
         tabs: tabsReducer,
         drawings: drawingsReducer,

frontend/src/structure/SWUpdates.js

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import { connect } from 'react-redux';
 
-import {socket} from "../sockets/SAC";
+import {socket} from "../sockets/sCallbacks";
 import { shouldCheckUpdate } from './tabs/settings/selector';
 import { updateCheckTime } from './tabs/settings/Settings.slice';
 

frontend/src/structure/Toasts.js

@@ -3,7 +3,7 @@ import { Spinner } from 'react-bootstrap';
 
 import Toast from 'react-bootstrap/Toast';
 
-import { connection_status_callback, show_toast } from "../sockets/SAC";
+import { connection_status_callback, show_toast } from "../sockets/sCallbacks";
 import { cloneDict } from '../utils/dictUtils';
 
 class CustomToast extends Component{

frontend/src/structure/TopBar.js

@@ -9,7 +9,7 @@ import QueuePreview from './tabs/queue/QueuePreview';
 import { showBack } from './tabs/selector';
 import { setTab, tabBack } from './tabs/Tabs.slice';
 import { systemIsLinux } from './tabs/settings/selector';
-import { settings_reboot_system, settings_shutdown_system } from '../sockets/SAE';
+import { settings_reboot_system, settings_shutdown_system } from '../sockets/sEmits';
 
 const mapStateToProps = (state) => {
     return { 

frontend/src/structure/tabs/drawings/SingleDrawing.js

@@ -3,7 +3,7 @@ import { Container, Form, Modal } from 'react-bootstrap';
 import { FileEarmarkX, Play, Plus, PlusSquare, X } from 'react-bootstrap-icons';
 import { connect } from 'react-redux';
 
-import { drawing_delete, drawing_queue } from '../../../sockets/SAE';
+import { drawing_delete, drawing_queue } from '../../../sockets/sEmits';
 
 import ConfirmButton from '../../../components/ConfirmButton';
 import IconButton from '../../../components/IconButton';

frontend/src/structure/tabs/drawings/UploadDrawing.js

@@ -71,6 +71,7 @@ class UploadDrawingsModal extends Component{
     }
 
     render(){
+        // TODO add thr files upload if necessary... Need somebody to try it out first
         return <Modal show={this.props.show} onHide={this.handleClose.bind(this)} size="lg" centered>
             <Modal.Header className="center">
                 <Modal.Title>Upload new drawing</Modal.Title>
@@ -79,11 +80,11 @@ class UploadDrawingsModal extends Component{
                 <div className={ "w-100" + (this.state.loading ? " d-none" : "")}>
                     <Dropzone
                         onDrop={this.handleFiles.bind(this)} 
-                        accept={".gcode"}
+                        accept={".gcode"}       
                         noKeyboard>
                         {({getRootProps, getInputProps, isDragActive}) => (<div {...getRootProps()} className={"animated-background m-2 p-5 mh-100 d-flex justify-content-center align-items-center" + (isDragActive ? " drag-active" : "")}>
                             <input {...getInputProps()}/>
-                            <div className="d-block text-center">Drag and drop the .gcode/.nc file here <br/>or click to open the file explorer
+                            <div className="d-block text-center">Drag and drop the .gcode file here <br/>or click to open the file explorer
                                 </div>
                             </div>)}
                     </Dropzone>

frontend/src/structure/tabs/leds/Leds.js

@@ -3,7 +3,7 @@ import { Container } from 'react-bootstrap';
 import { ChromePicker } from 'react-color';
 
 import { Section } from '../../../components/Section';
-import { leds_set_color } from '../../../sockets/SAE';
+import { leds_set_color } from '../../../sockets/sEmits';
 
 
 class LedsController extends Component{

frontend/src/structure/tabs/manual/CommandLine.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import {Form, Row, Col, Button } from 'react-bootstrap';
 
-import { send_command } from '../../../sockets/SAE';
-import { device_command_line_return, device_new_position} from '../../../sockets/SAC';
+import { send_command } from '../../../sockets/sEmits';
+import { device_command_line_return, device_new_position} from '../../../sockets/sCallbacks';
 import CommandViewer from './CommandViewer';
 
 class CommandLine extends Component{
@@ -93,10 +93,12 @@ class CommandLine extends Component{
                     </Row>
                     <Row>
                         <Col className="center">
-                        <Form.Check 
-                            label="Show device acks"
-                            onChange={(event)=>{this.setState({show_acks: event.target.checked})}}
-                            checked={this.state.show_acks}/>
+                            <Form.Check 
+                                label="Show device acks"
+                                id="ack_check"
+                                type="switch"
+                                onChange={(event)=>{this.setState({show_acks: event.target.checked})}}
+                                checked={this.state.show_acks}/>
                         </Col>
                     </Row>
                 </Form.Group>

frontend/src/structure/tabs/manual/ManualControl.js

@@ -1,21 +1,13 @@
 import React, { Component } from 'react';
 import { Container, Row, Col, Button } from 'react-bootstrap';
-import { connect } from 'react-redux';
 
 import "./ManualControl.scss";
 
 import { Section } from '../../../components/Section';
 import CommandLine from './CommandLine';
 import Preview from './Preview';
 
-import { send_command } from '../../../sockets/SAE';
-import { getDimensions } from './selector.js';
-
-const mapStateToProps = (state) => {
-    return {
-        dimensions: getDimensions(state)
-    }
-}
+import { control_emergency_stop, send_command } from '../../../sockets/sEmits';
 
 class ManualControl extends Component{
 
@@ -29,12 +21,12 @@ class ManualControl extends Component{
                                         <CommandLine/>
                                     </Col>
                                     <Col md>
-                                        <Preview width={this.props.dimensions.width} height={this.props.dimensions.height}/>
+                                        <Preview/>
                                     </Col>
                                 </Row>
                                 <Row>
                                     <Col className="center">
-                                        <Button className="w-25 mr-3" onClick={()=>{send_command('M112')}} title="Warning: this button will not stop the device during homing">EMERGENCY STOP</Button>
+                                        <Button className="w-25 mr-3" onClick={()=>{control_emergency_stop()}} title="Warning: this button will not stop the device during homing">EMERGENCY STOP</Button>
                                         <Button className="2-25" onClick={()=>{send_command('G28')}}>Home</Button>
                                     </Col>
                                 </Row>
@@ -45,4 +37,4 @@ class ManualControl extends Component{
     }
 }
 
-export default connect(mapStateToProps)(ManualControl);
+export default ManualControl;

frontend/src/structure/tabs/manual/ManualControl.scss

@@ -4,7 +4,7 @@
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
 .preview-style{
-    background-color: #eeeeee;
+    background-color: #000000;
     width: 100%;
 }