Improved Design, new render Side

src/components/blender-controller.ts

@@ -2,10 +2,11 @@ import { blenderPath, blenderScriptPath, dataPath, templatePath } from "./paths"
 import {spawn} from "child_process";
 import logger from "./logger";
 import { setBlenderLoading, setBlenderStatus } from "./ui/menu";
-import { setLogNumber, setStatus } from "./ui/mainSide";
+import { setLogNumber, setStatus } from "./ui/renderingSide";
 import {imageLoading, imageLoaded} from "./ui/settingsSide";
 import { settingList } from "./settings";
 import isValid from "is-valid-path";
+import { sideSetRendering } from "../renderer";
 
 const blenderStartString = [
     templatePath,
@@ -63,6 +64,7 @@ function startBlender() {
             setStatus("Rendering Frame " + lastFrame + "/" + frames);
         }
         if(dataStr.includes("Finished") && renderingVideo) {
+            sideSetRendering(false);
             if(lastFrame == frames) {
                 setStatus("Finished Render Successfully!");
             } else {
@@ -77,6 +79,8 @@ function startBlender() {
         }
         
         if(dataStr.includes("Waiting for command")) {
+            sideSetRendering(false);
+            
             if(renderingPicture) {
                 imageLoaded();
             }
@@ -104,6 +108,7 @@ function startBlender() {
 }
 
 function restartBlender() {
+    sideSetRendering(false);
     blenderConsole.kill();
     blenderConsole = spawn(blenderPath, blenderStartString);
     startBlender();
@@ -134,14 +139,15 @@ function blender(command:blenderCmd) {
             } else {
                 readyToAcceptCommand = false;
                 renderingVideo = true;
+                sideSetRendering(true);
                 blenderConsole.stdin.write("startRendering\n");
             }
         }
     } else if(command === blenderCmd.stopRendering) {
-        restartBlender();
         readyToAcceptCommand = false;
         renderingPicture = false;
         renderingVideo = false;
+        restartBlender();
     }
 }
 

src/components/ui/mainSide.tsx

@@ -5,14 +5,7 @@ import logger from "../logger";
 import {exec} from "child_process";
 import {blender, blenderCmd} from "../blender-controller";
 
-let setStatus:React.Dispatch<React.SetStateAction<string>>;
-let setLogNumber:React.Dispatch<React.SetStateAction<string>>;
-
 function MainSide() {
-    const [status, setStatusInner] = useState("Idle");
-    setStatus = setStatusInner;
-    const [logNumber, setLogNumberInner] = useState("0");
-    setLogNumber = setLogNumberInner;
     const [logs, setLogs] = useState(settingList.log);
     const [output, setOutput] = useState(settingList.output);
     const [logTable, setLogTable] = useState(logs.substring(1).slice(0, -1).split('""').map((log, index) => {
@@ -35,7 +28,7 @@ function MainSide() {
             setLogTable(logListName.map((log, index) => {
                 return <tr key={index}>
                     <td title={logList[index]}>{index+1}. {log}</td>
-                    <td><button onClick={() => {
+                    <td><button className="listButton" onClick={() => {
                         const newLogs = settingList.log.replace('"'+logList[index]+'"', "");
                         updateSettings({log:newLogs});
                         setLogs(newLogs);
@@ -53,12 +46,7 @@ function MainSide() {
                     <path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"/>
                 </svg>
             </button>
-            <p>{"Log " + logNumber + "/" + String(settingList.log.split("\"\"").length)}</p>
-            <div className="dataDiv">
-                <p>{status}</p>
-                <button onClick={() => openOutputFolder()}>Open Output Folder</button>
-            </div>
-            <hr/>
+            <button id="openOutputMain" onClick={() => openOutputFolder()}>Open Output Folder</button>
             <h4 className="noMarginBottom">Logs:</h4>
             <table>
                 <tbody>
@@ -99,7 +87,7 @@ function addLog(updateHook:React.Dispatch<React.SetStateAction<string>>) {
         result.filePaths.forEach(value => {
             const logToAdd = "\"" + value + "\"";
             if(settingList.log.includes(logToAdd)) {
-                logger.warningMSG("Log already added!");
+                logger.warningMSG("Log already added: " + logToAdd);
             } else {
                 logStr += "\"" + String(value) + "\"";
             }
@@ -135,6 +123,5 @@ function openOutputFolder() {
 
 export default MainSide;
 export {
-    setStatus,
-    setLogNumber
+    openOutputFolder
 }

src/components/ui/menu.tsx

@@ -1,5 +1,6 @@
 import React, {useState} from "react";
 import { openSide, Side } from "../../renderer";
+import {blender, blenderCmd} from "../blender-controller";
 
 const UpdateButton = () => (
     <div id="update-available">
@@ -21,8 +22,11 @@ const MainSideButtons = () => (
     </div>
 )
 
-const OtherSideButtons = () => (
-    <button id="settings-back" onClick={() => openSide(Side.Main)}>Back</button>
+const SettingsSideButtons = () => (
+    <button className="back-button" onClick={() => openSide(Side.Main)}>Back</button>
+)
+const RenderingSideButton = () => (
+    <button className="back-button" id="stopRender" onClick={() => blender(blenderCmd.stopRendering)}>Stop</button>
 )
 
 const BlenderLoadingSVG = () => (
@@ -58,7 +62,9 @@ function Menu({updateAvailable, side}:{updateAvailable:boolean, side:Side}) {
                 <p>{blenderStatus}</p>
             </div>
             {updateAvailable? <UpdateButton/> : null}
-            {(side == Side.Main)? <MainSideButtons/> : <OtherSideButtons/>}
+            {(side == Side.Main)? <MainSideButtons/> : null}
+            {(side == Side.Settings)? <SettingsSideButtons/> : null}
+            {(side == Side.Rendering)? <RenderingSideButton/> : null}
         </header>
     )
 }

src/components/ui/renderingSide.tsx

@@ -0,0 +1,27 @@
+import React, {useState} from "react";
+import { settingList } from "../settings";
+import {openOutputFolder} from "./mainSide";
+
+let setLogNumber:React.Dispatch<React.SetStateAction<string>>;
+let setStatus:React.Dispatch<React.SetStateAction<string>>;
+
+function RenderingSide() {
+    const [logNumber, setLogNumberInner] = useState("0");
+    setLogNumber = setLogNumberInner;
+    const [status, setStatusInner] = useState("Idle");
+    setStatus = setStatusInner;
+    
+    return (
+        <div id="content">
+            <p>{"Log " + logNumber + "/" + String(settingList.log.split("\"\"").length)}</p>
+            <p>{status}</p>
+            <button onClick={() => openOutputFolder()}>Open Output Folder</button>
+        </div>
+    )
+}
+
+export default RenderingSide;
+export {
+    setLogNumber,
+    setStatus
+};