Final docs update and plot mode fixes (#19)

* Final docs update

* Prettier formatting

README.md

@@ -1,7 +1,23 @@
-![logo](_media/lineboi-logo.png)
+![logo](docs/_media/lineboi-logo.png)
 
-### **lineboi3000 is a way cool graphical interface for drawing, painting, adding EFX, and then sending your designs to a pen plotter or creating animations.** {docsify-ignore}
+### **lineboi3000 is a way cool graphical interface for drawing, painting, adding EFX, and then sending your designs to a pen plotter or creating animations.**
 
-BETA - click here for known issues and caveats
+![logo](docs/_media/lineboi-main-example.png)
 
-\*\*\* For full documentation, visit the [Docs Page](http://username.github.io/repository)
+## Getting Started
+
+### Install
+
+`yarn` or `npm i` to install all dependencies
+
+### Run The App
+
+`yarn dev` or `npm dev` to run the dev server (devtools open, and Webpack rebuilds on changes to files)
+
+## Full documentation lives [HERE](http://username.github.io/repository)
+
+![logo](docs/_media/lineboi-main-example-2.png)
+
+![logo](docs/_media/gif-mode-example-two.gif)
+
+![logo](docs/_media/gif-mode-example.gif)

docs/getting-started.md

@@ -4,12 +4,16 @@ I haven't set up Electron app packaging yet, so you can run locally via `npm` or
 
 ## Quick Start
 
+### Install
+
 `yarn` or `npm i` to install all dependencies
 
-`yarn start` or `npm start` to run the dev server
+### Run The App
 
 `yarn dev` or `npm dev` to run the dev server (devtools open, and Webpack rebuilds on changes to files)
 
+`yarn start` or `npm start` to run the dev server
+
 ## Useful Yarn/NPM Commands
 
 In a terminal window, navigate to the main folder and enter `yarn [command]` or `npm [command]`

docs/gif-mode.md

@@ -1,3 +1,9 @@
-# Plot Mode
+# Gif Mode
 
-![efx mode](_media/efx-mode.png ':class=docsImg')
+Docs for Gif Mode coming soon
+
+![gif mode](_media/gif-mode.png ':class=docsImg')
+
+## Example Output
+
+![gif mode](_media/gif-mode-example.gif ':class=docsImg')

docs/plot-mode.md

@@ -1,3 +1,46 @@
 # Plot Mode
 
-![efx mode](_media/efx-mode.png ':class=docsImg')
+Once you've added EFX, you can send the result to a pen plotter in `Plot Mode`
+
+**NOTE**: I've tested all of this locally and it works fine. However, this is all beta, so I can't promise there aren't bugs or issues. I would run small tests with your plotter to make sure it's all good before doing anything serious.
+
+![plot mode](_media/plot-mode.png ':class=docsImg')
+
+## Layer Controls
+
+The same controls in [Plot Mode](/draw-mode#layer-controls) apply to layers in EFX Mode.
+
+## Plotter Status
+
+![Plotter Status](_media/plot-mode-plot-status.png ':class=docsImg')
+
+This shows the current status of the pen plotter. Possible states are:
+
+-   **SEARCHING**: lineboi3000 is checking for the Plotter
+-   **DISCONNECTED**: No pen plotter was found
+-   **SIMULATED**: CNCServer is connected but no Plotter was found. Plot actions will be simulated
+-   **CONNECTED**: A bona fide Pen Plotter was found. Plot actions will be sent to the real plotter
+
+## Plot Actions
+
+![Plot Actions](_media/plot-mode-plot-actions.png ':class=docsImg')
+
+-   **PLOT**: Start Plotting all lines on visible layers.
+
+## Pen Actions
+
+-   **PEN UP/DOWN**: Move the pen up or down to the set height
+-   **SET HEIGHTS**: Lock in the heights in the below options.
+-   **PARK PEN**: Set pen state as X:0, Y:O and move
+-   **RETURN PEN TO START**: Delete Pen status and reset it to default position
+
+To set heights, move the options below, then click `SET HEIGHTS`, then press `PEN UP` or `PEN DOWN` to check the output. Once the heights are set, the app will use those values when plotting.
+
+## Plot Options
+
+![Plot Options](_media/plot-mode-pen-options.png ':class=docsImg')
+
+-   **OPTIMIZE LINE ORDER**: Order Plot lines to reduce the amount of pen travel, by finding the nearest next line to plot after finishing a given line. As a note I've seen slightly "off" results with this that might have to do with the physical difference between the sides of the pen tip,.
+-   **PEN UP HEIGHT**: Height when the pen is in Up state. 0 is highest.
+-   **PEN DOWN HEIGHT**: Height when the pen is in Down state. 1 is lowest.
+-   **SCALE**: Scale of the plotted lines in percent

src/components/AppContainer.js

@@ -9,6 +9,7 @@ import { setGifmakerLoading } from 'store/gifmaker/gifmakerActions';
 import DrawingContent from './Drawing/DrawingContent/DrawingContent';
 import DrawingSidebar from './Drawing/DrawingSidebar/DrawingSidebar';
 import PlotContent from './PlotContent/PlotContent';
+import PlotHeader from './PlotHeader/PlotHeader';
 import GifmakerContent from './GifmakerContent/GifmakerContent';
 import GifmakerSidebar from './GifmakerContent/GifmakerSidebar';
 import PlotSidebar from './PlotSidebar/PlotSidebar';
@@ -73,9 +74,10 @@ class AppContainer extends React.Component {
         const { mode } = this.props;
         const showGrid = ['efx', 'draw'].includes(mode);
         const showLayerHeader = ['draw', 'efx'].includes(mode);
+        const showPlotHeader = mode === 'plot';
         const showGifHeader = mode === 'gifmaker';
         const headerRightClass =
-            mode === 'plot' || mode === 'options'
+            mode === 'options'
                 ? styles.headerRightDisabled
                 : styles.headerRight;
 
@@ -85,6 +87,7 @@ class AppContainer extends React.Component {
                 <div className={styles.headerLeft}>lineboi3000</div>
                 <div className={headerRightClass}>
                     {showLayerHeader && <LayerControls />}
+                    {showPlotHeader && <PlotHeader />}
                     {showGifHeader && <GifmakerHeader />}
                 </div>
                 <div>

src/components/Drawing/DrawingContent/DrawingContent.js

@@ -283,6 +283,10 @@ export class DrawingContent extends React.Component {
             fillRadius,
             fillCircle
         } = this.props;
+        if (!tempLinesRef || !tempLinesRef.current) {
+            return;
+        }
+
         const context = tempLinesRef.current.getContext('bitmaprenderer');
         const offScreenCanvas = new OffscreenCanvas(width, height);
         const offScreenContext = offScreenCanvas.getContext('2d');

src/components/PlotContent/PlotContent.js

@@ -2,7 +2,10 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { getAllEfxLines } from 'store/line/lineSelectors';
 import { getCurrentOptions } from 'store/options/optionsSelectors';
-import { CanvasLayer } from 'components/common/SvgLayer/SvgLayer';
+import {
+    CanvasLayer,
+    PenPositionLayer
+} from 'components/common/SvgLayer/SvgLayer';
 import {
     formatLayersForPlotDisplay,
     generatePlotBoundaries
@@ -13,6 +16,8 @@ import styles from './PlotContent.styles.css';
 
 // to do make configurable
 const PIXELS_PER_INCH = 75;
+const AXIDRAW_WIDTH_IN_STEPS = 12000;
+const AXIDRAW_HEIGHT_IN_STEPS = 8720;
 
 class PlotContent extends React.Component {
     componentDidMount() {}
@@ -24,6 +29,7 @@ class PlotContent extends React.Component {
             height: paperHeightInPixels,
             scale
         });
+
         return (
             <CanvasLayer
                 key="plotBoundary"
@@ -43,23 +49,38 @@ class PlotContent extends React.Component {
             paperWidthInPixels,
             paperHeightInPixels,
             formattedLayers,
-            isPlotBoundaryVisible
+            isPlotBoundaryVisible,
+            plotting,
+            penX,
+            penY
         } = this.props;
 
+        const penWidthAsPercent = penX / AXIDRAW_WIDTH_IN_STEPS;
+        const penHeightAsPercent = penY / AXIDRAW_HEIGHT_IN_STEPS;
+        const penXInPixels = paperWidthInPixels * penWidthAsPercent;
+        const penYInPixels = paperHeightInPixels * penHeightAsPercent;
+
         return (
             <div id="plotContent" className={styles.plotContentContainer}>
                 <PaperCanvas
                     width={paperWidthInPixels}
                     height={paperHeightInPixels}
                 />
-
                 <div style={{ paperWidth }}>
+                    {plotting && (
+                        <PenPositionLayer
+                            height={paperHeightInPixels}
+                            width={paperWidthInPixels}
+                            penX={penXInPixels}
+                            penY={penYInPixels}
+                        />
+                    )}
                     {isPlotBoundaryVisible && this.renderPlotBoundary()}
                     {formattedLayers.map((layer) => {
                         return (
                             <CanvasLayer
-                                key={layer.layerID}
-                                id={layer.layerID}
+                                key={layer.id}
+                                id={layer.id}
                                 height={paperHeightInPixels}
                                 width={paperWidthInPixels}
                                 color={layer.color}
@@ -81,7 +102,9 @@ const mapStateToProps = (state) => {
         scale,
         isPlotBoundaryVisible,
         penLocation,
-        currentLineId
+        currentLineId,
+        currentPlotPercentage,
+        plotting
     } = state.plotReducer;
 
     const { height, width } = getCurrentOptions(state);
@@ -105,13 +128,15 @@ const mapStateToProps = (state) => {
         penX,
         penY,
         currentLineId,
+        currentPlotPercentage,
         paperWidthInPixels,
         paperHeightInPixels,
         scale,
         paperWidth,
         paperHeight,
         formattedLayers,
-        isPlotBoundaryVisible
+        isPlotBoundaryVisible,
+        plotting
     };
 };
 

src/components/PlotHeader/PlotHeader.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import styles from './PlotHeader.styles.css';
+
+export const PlotHeader = ({
+    currentPlotPercentage,
+    totalPlotLineCount,
+    currentPlotLineIndex,
+    plotting
+}) => {
+    const plotComplete = currentPlotPercentage === 100;
+    const textString = plotting ? 'PLOTTING' : 'NOT PLOTTING';
+    const plottingClass = plotting
+        ? styles.currentlyPlotting
+        : styles.notCurrentlyPlotting;
+
+    return (
+        <div className={styles.plotHeaderContainer}>
+            <div className={styles.plotMessage}>
+                <div className={[styles.plotInfo, plottingClass].join(' ')}>
+                    {plotComplete ? 'DONE' : textString}
+                </div>
+                <div className={styles.plotInfo}>
+                    <div className={styles.plotInfoTitle}>lines done</div>
+                    <div className={styles.plotInfoBody}>
+                        {currentPlotLineIndex}
+                    </div>
+                </div>
+                <div className={styles.plotInfo}>
+                    <div className={styles.plotInfoTitle}>total lines</div>
+                    <div className={styles.plotInfoBody}>
+                        {totalPlotLineCount}
+                    </div>
+                </div>
+                <div className={styles.plotInfo}>
+                    <div className={styles.plotInfoTitle}>percent done</div>
+                    <div className={styles.plotInfoBody}>
+                        {Math.round(currentPlotPercentage)}%
+                    </div>
+                </div>
+            </div>
+            <div
+                style={{ width: `${currentPlotPercentage}%` }}
+                className={styles.loadingContainer}
+            >
+                <div
+                    className={
+                        plotComplete
+                            ? styles.finishedPlot
+                            : styles.loadingBackground
+                    }
+                />
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        ...state.plotReducer
+    };
+};
+
+export default connect(mapStateToProps)(PlotHeader);