diff --git a/src/components/blender-controller.ts b/src/components/blender-controller.ts index 653dccb..1aa033d 100644 --- a/src/components/blender-controller.ts +++ b/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(); } } diff --git a/src/components/ui/mainSide.tsx b/src/components/ui/mainSide.tsx index 4d2914b..8b6560a 100644 --- a/src/components/ui/mainSide.tsx +++ b/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>; -let setLogNumber:React.Dispatch>; - 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 {index+1}. {log} - -

{"Log " + logNumber + "/" + String(settingList.log.split("\"\"").length)}

-
-

{status}

- -
-
+

Logs:

@@ -99,7 +87,7 @@ function addLog(updateHook:React.Dispatch>) { 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 } \ No newline at end of file diff --git a/src/components/ui/menu.tsx b/src/components/ui/menu.tsx index 8bc9a5f..cf41987 100644 --- a/src/components/ui/menu.tsx +++ b/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 = () => (
@@ -21,8 +22,11 @@ const MainSideButtons = () => (
) -const OtherSideButtons = () => ( - +const SettingsSideButtons = () => ( + +) +const RenderingSideButton = () => ( + ) const BlenderLoadingSVG = () => ( @@ -58,7 +62,9 @@ function Menu({updateAvailable, side}:{updateAvailable:boolean, side:Side}) {

{blenderStatus}

{updateAvailable? : null} - {(side == Side.Main)? : } + {(side == Side.Main)? : null} + {(side == Side.Settings)? : null} + {(side == Side.Rendering)? : null} ) } diff --git a/src/components/ui/renderingSide.tsx b/src/components/ui/renderingSide.tsx new file mode 100644 index 0000000..0adda12 --- /dev/null +++ b/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>; +let setStatus:React.Dispatch>; + +function RenderingSide() { + const [logNumber, setLogNumberInner] = useState("0"); + setLogNumber = setLogNumberInner; + const [status, setStatusInner] = useState("Idle"); + setStatus = setStatusInner; + + return ( +
+

{"Log " + logNumber + "/" + String(settingList.log.split("\"\"").length)}

+

{status}

+ +
+ ) +} + +export default RenderingSide; +export { + setLogNumber, + setStatus +}; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 95bcdef..50e20dd 100644 --- a/src/index.css +++ b/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); } \ No newline at end of file diff --git a/src/renderer.tsx b/src/renderer.tsx index af50e34..0a61bda 100644 --- a/src/renderer.tsx +++ b/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( - {(side == Side.Main)? : } + {(side === Side.Main)? : null} + {(side === Side.Settings)? : null} + {(side === Side.Rendering)? : null} ); } -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 } \ No newline at end of file