Merge pull request #46 from texx00/alpha

Merging most recent alpha branch changes into master branch

.github/workflows/python-app.yml

@@ -5,9 +5,9 @@ name: Python application
 
 on:
   push:
-    branches: [ master, flask-tests ]
+    branches: [ master, flask-tests, alpha ]
   pull_request:
-    branches: [ master, flask-tests ]
+    branches: [ master, flask-tests, alpha ]
 
 jobs:
   build:

docs/usage.md

@@ -23,6 +23,27 @@ In a playlist it is possible to add additional type of elements:
 
 In the manual control tab it is possible to run single gcode command with a `terminal-like` feature. On the right a preview of the position of the drawing is shown: the preview is not in realtime as the device is buffering the commands thus there may be a small delay between the drawing and the real position of the device.
 
+## Settings
+
+### Scripts
+
+Scripts are executed once when the device is connected or before and after a "Drawing element" is played. You can put your own GCODE to make the table achieve specific tasks. It is also possible to use macros in those fields. Have a better look at the "Macros" in the "Advanced usage" section.
+
+## Advanced usage
+
+### Macros
+
+The software can evaluate some extra gcode formulas. Those formulas are not standardized macros but can be used as follow: macros are delimited by the `&` character. It is possible to use standard python notation in the formulas with the addition of the basic math functions. For more information about this check the [parser's instruction page](https://pypi.org/project/py-expression-eval/).
+It is possible to use `X`, `Y` and `F` as variables. They will be substituted with the last received value.
+
+Some examples:
+```
+G0 X10 Y7
+G0 X& x+5 &             --> G0 X15
+
+G92 X& x%6 & Y& y%6 &   --> G92 X3 Y1
+```
+
 ___
 
-<sup><sub>If you need help or something is not working feel free to open an issue. If you want to improve this page feel free to open a pull request ;)<sub><sup>
+**If you need help or something is not working feel free to open an issue. If you want to improve this page feel free to open a pull request ;)**

docs/versions.md

@@ -1,6 +1,15 @@
 # Software versions and added features
 
+## v0.4-alpha
+
+* Rework of the queue mechanics and the queue controls
+* Added top bar controls
+* Added eta estimation
+* Fixed mobile layout
+* Other fixes
+
 ## v0.3-alpha
+
 * Major improvements to the playlists
   * Stability and performance increased
   * Usability improved
@@ -11,17 +20,20 @@
 * Other minor fixes and improvements
 
 ## v0.2.1-alpha
+
 * Some changes in the playlists and added a new "element" mechanics for the playlist:
   * The playlist can contain elements: at the moment only the drawing and the custom_command elements are available... Soon will introduce more
 * First test with leds. For the moment working with WS2812B and dimmable leds only
 * Some important fixes found during the development of the other features
 
 ## v0.2-alpha
+
 * React introduction
   * The frontend has been reworked completely and now is based on React, Redux and Bootstrap
   * The interface is not tested much, easy to find bugs
 
 ## v0.1-alpha
+
 * Very first release
   * This version is just a demo to show the software idea and to spread the word around.
   A lot of work must be done. The software is more or less stable but there are only basic functions available.

frontend/src/App.scss

@@ -64,6 +64,22 @@ button{
     font-weight: 900;
 }
 
+.no-margin{
+    margin: 0px !important;
+}
+
+.infos-box{
+    @extend .bg-light;
+    @extend .rounded;
+    @extend .text-dark;
+}
+
+footer{
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+}
+
 /* HOVERS */
 
 .image-overlay-light{
@@ -171,7 +187,6 @@ hr{
         padding-right: 30px;
         padding-left: 30px;
     }
-
 }
 
 /* Carousel mutli overrides */

frontend/src/components/ConfirmButton.js

@@ -9,14 +9,17 @@ class ConfirmButton extends Component{
     }
 
     render(){
-        return <div>
-                <IconButton 
-                    className={this.state.mustConfirm ? "d-none" : ""}
-                    onClick={()=> this.setState({mustConfirm: true})}
-                    icon={this.props.icon}>
-                        {this.props.children}
-                </IconButton>
-                <div className={this.state.mustConfirm ? "" : "d-none"}>
+        // TODO make this better
+        return <div className={this.props.className + " pr-2"}>
+                <div className={"w-100" + (this.state.mustConfirm ? " d-none" : "")}>
+                    <IconButton 
+                        className={this.props.className}
+                        onClick={()=> this.setState({mustConfirm: true})}
+                        icon={this.props.icon}>
+                            {this.props.children}
+                    </IconButton>    
+                </div>
+                <div className={this.state.mustConfirm ? "" : " d-none"}>
                     <Row>
                         <Col>Are you sure?
                         </Col>

frontend/src/components/IconButton.js

@@ -1,21 +1,46 @@
 import { Component } from 'react';
-import { Button } from 'react-bootstrap';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+import "../App.scss";
 
 class IconButton extends Component{
 
-    render(){
+    renderButton(){
         let iconProps = this.props.iconLarge === "true" ? {width: "32", height: "32"} : {};
+        iconProps = this.props.iconMedium === "true" ? {width: "20", height: "20"} : iconProps;
+
         let iconExtraClass = this.props.iconLarge === "true" ? "m-2" : "";
-        let icon = this.props.icon !== undefined ? <this.props.icon className={"icon "+iconExtraClass} {...iconProps}/> : "";
+        if (this.props.children === undefined || this.props.children === "")
+            iconExtraClass = "no-margin";
+        let icon = this.props.icon !== undefined ? <this.props.icon className={iconExtraClass+" icon"} {...iconProps}/> : "";
         let text = this.props.children !== undefined ? <span className="align-self-center">{this.props.children}</span> : undefined;
-        return <Button className={this.props.className} onClick={(evt) => {if (this.props.onClick !== undefined) this.props.onClick(evt);}}>
+        if (this.props.children !== undefined && this.props.children !== "")
+            return <Button className={this.props.className} onClick={(evt) => {if (this.props.onClick !== undefined) this.props.onClick(evt);}}>
+                <div className="d-flex">
+                    {icon}
+                    {text}
+                </div>
+            </Button>
+        else return <Button className={this.props.className} onClick={(evt) => {if (this.props.onClick !== undefined) this.props.onClick(evt);}}>
             <div className="d-flex">
                 {icon}
-                {text}
             </div>
         </Button>
     }
 
+    render(){
+        if (this.props.tip !== undefined && this.props.tip !== "")
+            return <OverlayTrigger overlay={
+                <Tooltip>
+                    {this.props.tip}
+                </Tooltip>}
+                delay={{ show: 3000, hide: 250 }}
+                placement="bottom">
+                    {this.renderButton()}
+            </OverlayTrigger>
+        else return this.renderButton();
+    }
+
 }
 
 export default IconButton;

frontend/src/components/Section.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import IconButton from './IconButton';
+import { Row, Col } from "react-bootstrap";
 
 function renderTitle(component, tag){
     const TagName = tag;
@@ -13,15 +14,20 @@ class Section extends Component{
 
     render(){
         return <div className="text-primary mb-5">
-            <div className="section-header mb-2 pb-3 w-100">
-                {renderTitle(this, "h2")}
-                <IconButton 
-                    className={"float-right" + (this.props.sectionButton ? "" : " d-none")} 
-                    onClick={()=>this.props.sectionButtonHandler()}
-                    icon={this.props.buttonIcon}>
-                    {this.props.sectionButton}
-                </IconButton>
-            </div>
+            <Row className="section-header ml-1 mb-2 pb-3 w-100">
+                <Col sm="auto" md="auto" className="center">
+                    {renderTitle(this, "h2")}
+                </Col>
+                <Col sm="auto" md={true}></Col>
+                <Col sm="auto" md="auto" className="m-2 center">
+                    <IconButton 
+                        className={"float-right" + (this.props.sectionButton ? "" : " d-none")} 
+                        onClick={()=>this.props.sectionButtonHandler()}
+                        icon={this.props.buttonIcon}>
+                        {this.props.sectionButton}
+                    </IconButton>
+                </Col>
+            </Row>
             {this.props.children}
         </div>
     }