From 88209ac2f0f970b9c9f3d443a8d8c58b6ccc604b Mon Sep 17 00:00:00 2001 From: Xander Frangos <33106561+xanderfrangos@users.noreply.github.com> Date: Sat, 27 Aug 2022 17:25:32 -0400 Subject: [PATCH 1/4] New save options, updated step order, CSS updates --- main/commands.js | 4 +- main/index.js | 52 +++++++++++++++++----- renderer/pages/index.jsx | 86 ++++++++++++++++++++++++------------- renderer/styles/globals.css | 10 +++++ 4 files changed, 110 insertions(+), 42 deletions(-) diff --git a/main/commands.js b/main/commands.js index 49b87e5..f127a80 100644 --- a/main/commands.js +++ b/main/commands.js @@ -1,6 +1,8 @@ const commands = { SELECT_FILE: "Select a File", - SELECT_FOLDER: "Select a Folder", + SELECT_OUTPUT: "Save as", + SET_FILE: "Set file", + REPLACE_ORIGINAL: "Replace original", UPSCAYL: "Upscale the Image", UPSCAYL_DONE: "Upscaling Done", UPSCAYL_PROGRESS: "Send Progress from Main to Renderer", diff --git a/main/index.js b/main/index.js index 1162c71..fa26a43 100644 --- a/main/index.js +++ b/main/index.js @@ -4,6 +4,7 @@ const { format } = require("url"); const { spawn } = require("child_process"); const fs = require("fs"); const sizeOf = require("image-size"); +const path = require('path'); const { autoUpdater } = require("electron-updater"); const { getPlatform } = require("./getPlatform"); @@ -21,6 +22,7 @@ const { const isDev = require("electron-is-dev"); const prepareNext = require("electron-next"); const commands = require("./commands"); +const tmpPath = path.join(app.getPath("userData"), "\\tmp\\"); // Prepare the renderer once the app is ready let mainWindow; @@ -79,21 +81,49 @@ ipcMain.handle(commands.SELECT_FILE, async () => { return "cancelled"; } else { console.log(filePaths[0]); - // CREATE input AND upscaled FOLDER + // CREATE original copy + if(!fs.existsSync(tmpPath)) { + fs.mkdirSync(tmpPath); + } + fs.copyFileSync(filePaths[0], path.join(tmpPath, "original" + parse(filePaths[0]).ext)); return filePaths[0]; } }); -ipcMain.handle(commands.SELECT_FOLDER, async (event, message) => { - const { canceled, filePaths } = await dialog.showOpenDialog({ - properties: ["openDirectory"], +ipcMain.handle(commands.SET_FILE, async (event, payload) => { + const original = payload.original; + const fileExt = parse(original).ext; + // CREATE original copy + if(!fs.existsSync(tmpPath)) { + fs.mkdirSync(tmpPath); + } + fs.copyFileSync(original, path.join(tmpPath, "original" + fileExt)); + +}) + +ipcMain.handle(commands.SELECT_OUTPUT, async (event, payload) => { + const original = payload.original; + const fileExt = parse(original).ext; + const { canceled, filePath } = await dialog.showSaveDialog({ + filters: [{name: fileExt, extensions: [fileExt.substring(1)]}] }); if (canceled) { console.log("operation cancelled"); return "cancelled"; } else { - console.log(filePaths[0]); - return filePaths[0]; + console.log(filePath); + if(fs.existsSync(tmpPath + "/scaled" + fileExt)) { + fs.copyFileSync(tmpPath + "/scaled" + fileExt, filePath); + } + return filePath; + } +}); + +ipcMain.handle(commands.REPLACE_ORIGINAL, async (event, payload) => { + const original = payload.original; + const fileExt = parse(original).ext; + if(fs.existsSync(tmpPath + "/scaled" + fileExt)) { + fs.copyFileSync(tmpPath + "/scaled" + fileExt, original); } }); @@ -102,10 +132,10 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => { const scale = payload.scaleFactor; let inputDir = payload.imagePath.match(/(.*)[\/\\]/)[1] || ""; - let outputDir = payload.outputPath; + let outputDir = tmpPath console.log("🚀 => ipcMain.on => outputDir", outputDir); - // COPY IMAGE TO upscaled FOLDER + // COPY IMAGE TO TMP FOLDER const platform = getPlatform(); const fullfileName = platform === "win" @@ -121,9 +151,9 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => { execPath, [ "-i", - inputDir + "/" + fullfileName, + tmpPath + "/original" + fileExt, "-o", - outputDir + "/" + fileName + "_upscayled_" + scale + "x" + fileExt, + tmpPath + "/scaled" + fileExt, "-s", scale === 2 ? 4 : scale, "-m", @@ -151,7 +181,7 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => { console.log("Done upscaling"); mainWindow.webContents.send( commands.UPSCAYL_DONE, - outputDir + "/" + fileName + "_upscayled_" + scale + "x" + fileExt + outputDir + "/scaled" + fileExt ); } }); diff --git a/renderer/pages/index.jsx b/renderer/pages/index.jsx index 9dc9781..9bb9b1e 100644 --- a/renderer/pages/index.jsx +++ b/renderer/pages/index.jsx @@ -14,6 +14,7 @@ const Home = () => { const [outputPath, SetOutputPath] = useState(""); const [scaleFactor, setScaleFactor] = useState(4); const [progress, setProgress] = useState(""); + const [curStep, setStep] = useState(1); const [model, setModel] = useState("realesrgan-x4plus"); const [loaded, setLoaded] = useState(false); const [version, setVersion] = useState(""); @@ -22,8 +23,13 @@ const Home = () => { setProgress(""); SetImagePath(""); setUpscaledImagePath(""); + setStep(1); }; + const stepStyle = (thisStep) => { + return { display: (thisStep > curStep ? "none" : "block") }; + } + useEffect(() => { setVersion(navigator.userAgent.match(/Upscayl\/([\d\.]+\d+)/)[1]); }, []); @@ -48,6 +54,7 @@ const Home = () => { window.electron.on(commands.UPSCAYL_DONE, (_, data) => { setProgress(""); setUpscaledImagePath(data); + setStep(4); }); }, []); @@ -59,6 +66,7 @@ const Home = () => { SetImagePath(path); var dirname = path.match(/(.*)[\/\\]/)[1] || ""; SetOutputPath(dirname); + setStep(3); } }; @@ -101,6 +109,8 @@ const Home = () => { SetImagePath(filePath); var dirname = filePath.match(/(.*)[\/\\]/)[1] || ""; SetOutputPath(dirname); + setStep(3); + window.electron.invoke(commands.SET_FILE, {original: filePath}); } }; @@ -121,11 +131,21 @@ const Home = () => { SetImagePath(filePath); var dirname = filePath.match(/(.*)[\/\\]/)[1] || ""; SetOutputPath(dirname); + setStep(3); } }; const outputHandler = async () => { - var path = await window.electron.invoke(commands.SELECT_FOLDER); + var path = await window.electron.invoke(commands.SELECT_OUTPUT, { original: imagePath }); + if (path !== "cancelled") { + SetOutputPath(path); + } else { + console.log("Getting output path from input file"); + } + }; + + const replaceHandler = async () => { + var path = await window.electron.invoke(commands.REPLACE_ORIGINAL, { original: imagePath }); if (path !== "cancelled") { SetOutputPath(path); } else { @@ -169,17 +189,17 @@ const Home = () => { {/* LEFT PANE */}
{/* STEP 1 */} -
+

Step 1

{/* STEP 2 */} -
+

Step 2

Select Upscaling Type @@ -187,14 +207,26 @@ const Home = () => {

+ {/* STEP 3 */} +
+

Step 3

+ +
+ {/* STEP 3

Step 3

@@ -227,29 +259,23 @@ const Home = () => {
*/} - {/* STEP 3 */} -
-

Step 3

+ {/* STEP 4 */} +
+

Step 4

- Defaults to Image's path + Save file

+ -
- - {/* STEP 4 */} -
-

Step 4

-
@@ -295,8 +321,8 @@ const Home = () => { onDragLeave={(e) => handleDragLeave(e)} onPaste={(e) => handlePaste(e)} > - {progress.length > 0 && upscaledImagePath.length === 0 && ( -
+ {progress.length > 0 && ( +

{progress}

@@ -309,7 +335,7 @@ const Home = () => {

Select an Image to Upscale

-

Upscale v{version}

+

Upscayl v{version}

) : upscaledImagePath.length === 0 ? ( { { } itemTwo={ Date: Sat, 27 Aug 2022 19:49:19 -0400 Subject: [PATCH 2/4] Reduce white flicker on launch --- main/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/main/index.js b/main/index.js index fa26a43..e9aedb2 100644 --- a/main/index.js +++ b/main/index.js @@ -36,6 +36,7 @@ app.on("ready", async () => { height: 700, minHeight: 500, minWidth: 500, + backgroundColor: "#171717", webPreferences: { devTools: isDev, autoHideMenuBar: true, From b8641592ba61838fa8efc3d95f030c7115dbdbab Mon Sep 17 00:00:00 2001 From: Xander Frangos <33106561+xanderfrangos@users.noreply.github.com> Date: Sat, 27 Aug 2022 19:50:20 -0400 Subject: [PATCH 3/4] Fix file: protocol bug when mixed with ? (for cache busting) --- main/index.js | 24 +++++++++++++++++------- renderer/pages/index.jsx | 6 +++--- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/main/index.js b/main/index.js index e9aedb2..bd6f5e4 100644 --- a/main/index.js +++ b/main/index.js @@ -70,6 +70,16 @@ app.on("ready", async () => { // Quit the app once all windows are closed app.on("window-all-closed", app.quit); +// Fix file:// + ? by registering a new protocol +app.whenReady().then(() => { + const { protocol } = require("electron"); + protocol.registerFileProtocol('local', (request, callback) => { + const pathname = decodeURIComponent(request.url.replace('local://', '')); + const parts = pathname.split('?'); + callback(parts[0]); + }); +}); + // ! DONT FORGET TO RESTART THE APP WHEN YOU CHANGE CODE HERE ipcMain.handle(commands.SELECT_FILE, async () => { @@ -113,8 +123,8 @@ ipcMain.handle(commands.SELECT_OUTPUT, async (event, payload) => { return "cancelled"; } else { console.log(filePath); - if(fs.existsSync(tmpPath + "/scaled" + fileExt)) { - fs.copyFileSync(tmpPath + "/scaled" + fileExt, filePath); + if(fs.existsSync(tmpPath + "scaled" + fileExt)) { + fs.copyFileSync(tmpPath + "scaled" + fileExt, filePath); } return filePath; } @@ -123,8 +133,8 @@ ipcMain.handle(commands.SELECT_OUTPUT, async (event, payload) => { ipcMain.handle(commands.REPLACE_ORIGINAL, async (event, payload) => { const original = payload.original; const fileExt = parse(original).ext; - if(fs.existsSync(tmpPath + "/scaled" + fileExt)) { - fs.copyFileSync(tmpPath + "/scaled" + fileExt, original); + if(fs.existsSync(tmpPath + "scaled" + fileExt)) { + fs.copyFileSync(tmpPath + "scaled" + fileExt, original); } }); @@ -152,9 +162,9 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => { execPath, [ "-i", - tmpPath + "/original" + fileExt, + tmpPath + "original" + fileExt, "-o", - tmpPath + "/scaled" + fileExt, + tmpPath + "scaled" + fileExt, "-s", scale === 2 ? 4 : scale, "-m", @@ -182,7 +192,7 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => { console.log("Done upscaling"); mainWindow.webContents.send( commands.UPSCAYL_DONE, - outputDir + "/scaled" + fileExt + outputDir + "scaled" + fileExt ); } }); diff --git a/renderer/pages/index.jsx b/renderer/pages/index.jsx index 9bb9b1e..af3183d 100644 --- a/renderer/pages/index.jsx +++ b/renderer/pages/index.jsx @@ -341,7 +341,7 @@ const Home = () => { { { } itemTwo={ Date: Sat, 27 Aug 2022 20:12:17 -0400 Subject: [PATCH 4/4] Delay showing mainWindow until Electron is ready --- main/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/main/index.js b/main/index.js index bd6f5e4..db11b8d 100644 --- a/main/index.js +++ b/main/index.js @@ -36,6 +36,7 @@ app.on("ready", async () => { height: 700, minHeight: 500, minWidth: 500, + show: false, backgroundColor: "#171717", webPreferences: { devTools: isDev, @@ -62,6 +63,8 @@ app.on("ready", async () => { return { action: "deny" }; }); + mainWindow.once("ready-to-show", () => { mainWindow.show(); }) + if (!isDev) { autoUpdater.checkForUpdates(); }