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
+};

src/index.css

@@ -40,7 +40,7 @@ header h1 {
     width: auto;
 }
 
-#settings-back {
+.back-button {
     cursor: pointer;
     padding: 10px;
     background-color: #2196F3;
@@ -51,11 +51,15 @@ header h1 {
     font-size: large;
 }
 
-#settings-back:hover {
+.back-button:hover {
     transform: scale(1.05);
     text-decoration: none;
 }
 
+#stopRender {
+    background-color: #e1334e;
+}
+
 #content {
     padding-left: 25px;
     padding-right: 25px;
@@ -207,6 +211,31 @@ header h1 {
     margin-top: 5px;
 }
 #deleteLogsButton {
+    background-color: #e1334e;
     margin-top: 5px;
     margin-left: 5px;
+}
+
+#openOutputMain {
+    margin-top: 15px;
+    display: block;
+}
+
+.listButton {
+    background-color: #e1334e;
+    padding: 5px;
+    border-radius: 12px;
+}
+
+button {
+    cursor: pointer;
+    padding: 10px;
+    background-color: #2196F3;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    font-weight: bolder;
+}
+button:hover {
+    transform: scale(1.05);
 }

src/renderer.tsx

@@ -3,30 +3,56 @@ import ReactDOM from "react-dom/client";
 import Menu from "./components/ui/menu";
 import MainSide from "./components/ui/mainSide";
 import SettingsSite from "./components/ui/settingsSide";
+import RenderingSide from "./components/ui/renderingSide";
 import "./index.css";
 import "./toggle-switchy.css";
 import { startBlender } from "./components/blender-controller";
 
 enum Side {
     Main,
+    Rendering,
     Settings
 }
 
+let rendering = false;
+let currentSide = Side.Main;
+
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 function openSide(side:Side) {
+    if(side == Side.Main && rendering) {
+        side = Side.Rendering;
+    }
+    currentSide = side;
+    
     root.render(
         <React.StrictMode>
             <Menu updateAvailable={false} side={side}/>
-            {(side == Side.Main)? <MainSide/> : <SettingsSite/>}
+            {(side === Side.Main)? <MainSide/> : null}
+            {(side === Side.Settings)? <SettingsSite/> : null}
+            {(side === Side.Rendering)? <RenderingSide/> : null}
         </React.StrictMode>
     );
 }
 
-openSide(Side.Main);
+openSide(currentSide);
 
 startBlender();
+
+function sideSetRendering(value:boolean) {
+    rendering = value;
+    if(value) {
+        if(currentSide === Side.Main) {
+            openSide(Side.Rendering);
+        }
+    } else {
+        if(currentSide === Side.Rendering) {
+            openSide(Side.Main);
+        }
+    }
+}
         
 export {
     openSide,
-    Side
+    Side,
+    sideSetRendering
 }