diff --git a/src/components/blenderController.ts b/src/components/blenderController.ts index a41c011..fcf9a14 100644 --- a/src/components/blenderController.ts +++ b/src/components/blenderController.ts @@ -2,7 +2,7 @@ import { blenderPath, blenderScriptPath, templatePath, finsishedIconPath, dataPa import {spawn} from "child_process"; import logger from "./logger"; import { setBlenderLoading, setBlenderStatus } from "./ui/menu"; -import { setLogNumber, setPastTime, setRemainingTime, setRenderDisplayProgress, setStatus, setPastTimeNow, setRemainingTimeNow } from "./ui/renderingPage"; +import { setLogNumber, setPastTime, setRemainingTime, setRenderDisplayProgress, setStatus, setPastTimeNow, setRemainingTimeNow, addTerminalLine } from "./ui/renderingPage"; import {imageLoading, imageLoaded} from "./ui/settingsPage"; import { getLogSize, getInOutSettings, getActiveProfile } from "./settings"; import { pageSetRendering, setProgress, openPage, Page } from "../renderer"; @@ -115,6 +115,10 @@ function startBlender() { logger.info("Blender: " + dataStr); + if(renderingVideo) { + addTerminalLine(dataStr); + } + if (dataStr.includes("Blender started successfully")) { renderingPicture = false; renderingVideo = false; diff --git a/src/components/ui/renderingPage.tsx b/src/components/ui/renderingPage.tsx index d514574..135606c 100644 --- a/src/components/ui/renderingPage.tsx +++ b/src/components/ui/renderingPage.tsx @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from "react"; +import React, {useEffect, useRef, useState} from "react"; import {getInOutSettings} from "../settings"; import openFolder from "../openFolder"; import { blenderCmd, blender } from "../blenderController"; @@ -8,11 +8,15 @@ let setStatus:React.Dispatch>; let setRenderDisplayProgress:React.Dispatch>; let setPastTime:React.Dispatch>; let setRemainingTime:React.Dispatch>; +let setTerminalLines:React.Dispatch>; let pastTimeNow = "0m 0s"; let remainingTimeNow = "calculating..."; function RenderingPage() { + const [terminalHidden, setTerminalHidden] = useState("none"); + const [terminalScroll, setTerminalScroll] = useState(true); + const [scrollButtonText, setScrollButtonText] = useState("pause scroll"); const [logNumber, setLogNumberInner] = useState("0"); setLogNumber = setLogNumberInner; const [status, setStatusInner] = useState("Idle"); @@ -23,6 +27,24 @@ function RenderingPage() { setPastTime = setPastTimeInner; const [remainingTime, setRemainingTimeInner] = useState("calculating..."); setRemainingTime = setRemainingTimeInner; + const [terminalLines, setTerminalLinesInner] = useState([ + + 0: + ==== Start ==== + + ]); + setTerminalLines = setTerminalLinesInner; + + const messagesEndRef = useRef() as React.MutableRefObject; + + useEffect(() => { + if(terminalScroll) { + messagesEndRef.current?.scrollIntoView(); + setScrollButtonText("pause scroll"); + } else { + setScrollButtonText("continue scroll"); + } + }, [terminalLines, messagesEndRef, terminalScroll]); useEffect(() => { const interval = setInterval(() => { @@ -70,6 +92,24 @@ function RenderingPage() { + +
+
+
+ + {terminalLines} +
+
+
+
+ +
) } @@ -82,6 +122,17 @@ function setRemainingTimeNow(time:string) { remainingTimeNow = time; } +function addTerminalLine(line:string) { + setTerminalLines((prev:JSX.Element[]) => { + return [...prev, + + {prev.length}: + {line} + + ]; + }); +} + export default RenderingPage; export { setLogNumber, @@ -90,5 +141,6 @@ export { setPastTime, setRemainingTime, setPastTimeNow, - setRemainingTimeNow + setRemainingTimeNow, + addTerminalLine }; \ No newline at end of file diff --git a/src/index.css b/src/index.css index adf0f30..b9f3759 100644 --- a/src/index.css +++ b/src/index.css @@ -450,4 +450,35 @@ button:hover { #videoFormatWarning:hover { transform: scale(1.05); +} + +#outerTerminal { + margin-top: 10px; + margin-bottom: 5px; + width: 100%; + height: 300px; + background-color: #0d131e; + color: white; + font-family: monospace; + font-size: 10px; + border-radius: 10px; + padding: 10px; +} +#outerTerminal p { + margin: 2px; +} + +#innerTerminal { + width: 100%; + height: 100%; + overflow: auto; +} + +#terminalTable tr { + display: flex; +} +.terminalTableNumber { + color: #9DA8B9; + background-color: #172336; + margin-right: 5px; } \ No newline at end of file