Fix issues on windows

icheered · Oct 20, 2022 · a6cf156 · a6cf156
1 parent 481547d
commit a6cf156
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 58 deletions.
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
@@ -1 +1 @@
-3369211da39dcc63e89750b11fced2dd
+af281d83f29a49c45820e690cc0ab6e8
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
@@ -8,15 +8,18 @@
   import Loader from "./lib/Loader.svelte";
 
   // CONSTANTS
-  const title = "WaterMarker";
-  const version = "1.2";
+  const version = "V1.3";
   const author = "ICheered";
   const authorLink = "https://icheered.nl";
 
   // PARAMETERS
-  // let sourceFolderPath = "/home/tjbakker/Documents/dev/vscode/go/WaterMarker/testfiles/source";
+  //let sourceFolderPath = "/home/tjbakker/Documents/dev/vscode/go/WaterMarker/testfiles/source";
   // let targetFolderPath = "/home/tjbakker/Documents/dev/vscode/go/WaterMarker/testfiles/watermarked";
   // let watermarkPath = "/home/tjbakker/Documents/dev/vscode/go/WaterMarker/testfiles/watermark.png";
+  
+  // let sourceFolderPath = "C:\\Users\\TJBakker\\Documents\\WaterMarker\\testfiles\\vertical";
+  // let targetFolderPath =  "C:\\Users\\TJBakker\\Documents\\WaterMarker\\testfiles\\watermarked";
+  // let watermarkPath =  "C:\\Users\\TJBakker\\Documents\\WaterMarker\\testfiles\\fotociewm.png";
 
   let sourceFolderPath = "";
   let targetFolderPath = "";
@@ -37,30 +40,28 @@
 
   let showLoader = false;
 
+  let showImagePreview = false;
+
   // FUNCTIONS
   let mainbuttontext = "";
+  let mainButtonDisabled = true;
   $: {
     if (sourceFolderPath == "" || targetFolderPath == "" || watermarkPath == "") {
       mainbuttontext = "Select source, target and watermark";
+      mainButtonDisabled = true;
     } else if (numberOfSourceFiles == 0) {
       mainbuttontext = "No images found in source folder!";
+      mainButtonDisabled = true;
     } else if (changedSettings) {
       mainbuttontext = "Generate preview";
+      mainButtonDisabled = false;
     } else {
       mainbuttontext = "Start processing!";
+      mainButtonDisabled = false;
     }
   }
 
   function generatePreview() {
-    // fetch("/home/tjbakker/Documents/dev/vscode/go/wails/testfiles/watermarked/DSC_0134.jpg")
-    //   .then((response) => response.blob())
-    //   .then((blob) => {
-    //     const reader = new FileReader();
-    //     reader.addEventListener("load", function () {
-    //       watermarkedpreviewImage.setAttribute("src", reader.result);
-    //     });
-    //     reader.readAsDataURL(blob);
-    //   });
     showLoader = true;
     console.log("Generating preview");
     FetchPreview(
@@ -78,6 +79,7 @@
         fetch(fetchpath)
           .then((response) => response.blob())
           .then((blob) => {
+            showImagePreview = true;
             const reader = new FileReader();
             reader.addEventListener("load", function () {
               watermarkedpreviewImage.setAttribute("src", reader.result);
@@ -133,7 +135,7 @@
       <div class="loadingtext">Processing image</div>
     </div>
   {/if}
-  <Header {title} {version} {author} {authorLink} />
+  <Header {version} {author} {authorLink} />
   <div class="maincontainer">
     <div class="settingscol">
       <div class="pathconfig">
@@ -145,6 +147,8 @@
             bind:numberOfSourceFiles
             bind:numberOfTargetFiles
             bind:watermarkpreviewImage
+            bind:changedSettings
+            bind:showImagePreview
           />
         </Card>
       </div>
@@ -156,8 +160,12 @@
     </div>
 
     <div class="mainview">
-      <img bind:this={watermarkedpreviewImage} src="" alt="Preview of the result" />
-      <Button bind:text={mainbuttontext} callback={mainButtonFunction} />
+      {#if showImagePreview == true} 
+        <img class="previewwindow" bind:this={watermarkedpreviewImage} src="" alt="Preview of the result" />
+      {:else}
+      <div class="previewwindow"/>
+      {/if}
+      <Button bind:text={mainbuttontext} bind:disabled={mainButtonDisabled} callback={mainButtonFunction} />
     </div>
   </div>
 </main>
@@ -190,13 +198,12 @@
     width: 75%;
     height: 100%;
   }
-  .mainview img {
-    max-width: 95%;
+  .previewwindow {
+    height: 489.25px;
     border-radius: 20px;
     margin: 10px;
     box-shadow: 0px 0px 20px #4d5056;
-    /* width: 733.875px; */
-    height: 489.25px;
+    text-align: center;
   }
 
   .settingscol {

diff --git a/frontend/src/lib/Button.svelte b/frontend/src/lib/Button.svelte
@@ -1,9 +1,10 @@
 <script>
   export let text, callback;
+  export let disabled = false;
 </script>
 
 <div>
-  <button on:click={callback}>{text}</button>
+  <button on:click={callback} class={disabled ? 'disabled' : ""}>{text}</button>
 </div>
 
 <style>
@@ -23,4 +24,14 @@
     background: #1583b3;
     color: white;
   }
+  .disabled {
+    background: #4d5056;
+    color: white;
+    cursor:not-allowed;
+  }
+  .disabled:hover{
+    color: white;
+    background: #4d5056;
+    
+  }
 </style>
diff --git a/frontend/src/lib/Header.svelte b/frontend/src/lib/Header.svelte
@@ -1,33 +1,29 @@
 <script>
-  export let title, version, authorLink, author;
+  export let version, authorLink, author;
 </script>
 
 <div class="topbar">
-  <div class="title">
-    {title}
+  <div class="author">
+    Made by <a  target="_blank" rel="noreferrer" href={authorLink}>{author}</a>
   </div>
   <div class="version">
     {version}
   </div>
-  <div class="author">
-    <a href={authorLink}>{author}</a>
-  </div>
+
 </div>
-<div class="line" />
 
 <style>
   .topbar {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    text-align: left;
     height: 30px;
     color: black;
-  }
-  .line {
-    border-bottom: 1px solid white;
-    width: 100%;
+    padding: 5px;
   }
   a {
-    color: black;
+    color: #1caeee;
+    text-decoration: none;
   }
 </style>
diff --git a/frontend/src/lib/Pathconfig.svelte b/frontend/src/lib/Pathconfig.svelte
@@ -1,18 +1,28 @@
 <script>
-  import { SelectFolder, SelectFile, GetNumberOfFiles } from "../../wailsjs/go/main/App.js";
+  import {
+    SelectFolder,
+    SelectFile,
+    GetNumberOfFiles,
+  } from "../../wailsjs/go/main/App.js";
   import Button from "../lib/Button.svelte";
 
   export let sourceFolderPath,
     targetFolderPath,
     watermarkPath,
     numberOfSourceFiles,
     numberOfTargetFiles,
-    watermarkpreviewImage;
+    watermarkpreviewImage,
+    changedSettings,
+    showImagePreview;
+
+  let showWatermarkPreview = false;
 
   function selectSourceFolderPath() {
     SelectFolder().then((result) => {
       if (result.length) {
         sourceFolderPath = result;
+        changedSettings = true;
+        showImagePreview = false;
         GetNumberOfFiles(sourceFolderPath).then((result) => {
           numberOfSourceFiles = result;
         });
@@ -25,6 +35,21 @@
         targetFolderPath = result;
         GetNumberOfFiles(targetFolderPath).then((result) => {
           numberOfTargetFiles = result;
+          if (numberOfTargetFiles) {
+            if (
+              confirm(
+                "The output folder is not empty, files may be overwritten. Continue?"
+              )
+            ) {
+              // Save it!
+              console.log("Target folder is not empty but continuing anyways");
+            } else {
+              // Do nothing!
+              console.log("Not continuing");
+              targetFolderPath = ""
+              numberOfTargetFiles = 0
+            }
+          }
         });
       }
     });
@@ -35,12 +60,17 @@
       if (result.length) {
         watermarkPath = result;
 
-        const fetchpath = navigator.platform.includes("Linux") ? watermarkPath : window.location + watermarkPath;
+        const fetchpath = navigator.platform.includes("Linux")
+          ? watermarkPath
+          : window.location + watermarkPath;
         fetch(fetchpath)
           .then((response) => response.blob())
           .then((blob) => {
+            showWatermarkPreview = true;
+            showImagePreview = false;
             const reader = new FileReader();
             reader.addEventListener("load", function () {
+              changedSettings = true;
               watermarkpreviewImage.setAttribute("src", reader.result);
             });
             reader.readAsDataURL(blob);
@@ -54,7 +84,7 @@
   <div>
     <Button text="Select Source Folder" callback={selectSourceFolderPath} />
     <div>
-      {sourceFolderPath.match(/[^\/]+\/[^\/]+$/) ?? ""}
+      {sourceFolderPath.match(/[^\/|\\]+[\/|\\][^(\/|\\)]+$/) ?? ""}
     </div>
     <div>
       {numberOfSourceFiles ? numberOfSourceFiles + " files found" : ""}
@@ -63,7 +93,7 @@
   <div>
     <Button text="Select Target Folder" callback={selectTargetFolderPath} />
     <div>
-      {targetFolderPath.match(/[^\/]+\/[^\/]+$/) ?? ""}
+      {targetFolderPath.match(/[^\/|\\]+[\/|\\][^(\/|\\)]+$/) ?? ""}
     </div>
     <div>
       {numberOfTargetFiles ? numberOfTargetFiles + " files found" : ""}
@@ -73,10 +103,17 @@
   <div>
     <Button text="Select Watermark" callback={selectFilePath} />
     <div>
-      {watermarkPath.match(/[^\/]+\/[^\/]+$/) ?? ""}
+      {watermarkPath.match(/[^\/|\\]+[\/|\\][^(\/|\\)]+$/) ?? ""}
     </div>
 
-    <img class="watermarkpreview" bind:this={watermarkpreviewImage} src="" alt="Watermark preview" />
+    {#if showWatermarkPreview == true}
+      <img
+        class="watermarkpreview"
+        bind:this={watermarkpreviewImage}
+        src=""
+        alt="Watermark preview"
+      />
+    {/if}
   </div>
 </div>
 

diff --git a/frontend/src/lib/Settings.svelte b/frontend/src/lib/Settings.svelte
@@ -12,15 +12,15 @@
     <input class="textfield" type="text" bind:value={watermarkOpacity} on:change={valuechanged} min="0" max="100" />
   </div>
   <div>
-    <input type="range" bind:value={watermarkOpacity} min="0" max="100" />
+    <input class="slider" type="range" bind:value={watermarkOpacity} min="0" max="100" />
   </div>
 
   <div class="row">
     <div class="text">Scale</div>
     <input class="textfield" type="text" bind:value={watermarkScale} on:change={valuechanged} min="0" max="100" />
   </div>
-  <div>
-    <input type="range" bind:value={watermarkScale} min="0" max="100" />
+  <div>    
+    <input class="slider" type="range" bind:value={watermarkScale} min="0" max="100" />
   </div>
   <div>Watermark location</div>
   <select bind:value={watermarkPosition} on:change={valuechanged}>
@@ -45,4 +45,31 @@
   .text {
     padding-top: 3px;
   }
+
+
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    input[type='range'] {
+      overflow: hidden;
+      -webkit-appearance: none;
+      background-color: white;
+      border-radius: 5px;
+    }
+    
+    input[type='range']::-webkit-slider-runnable-track {
+      height: 10px;
+      -webkit-appearance: none;
+      color: #13bba4;
+      margin-top: -1px;
+      
+    }
+    
+    input[type='range']::-webkit-slider-thumb {
+      width: 6px;
+      -webkit-appearance: none;
+      height: 10px;
+      cursor: ew-resize;
+      background: black;
+      box-shadow: -80px 0 0 80px #1caeee;
+    }
+}
 </style>
diff --git a/go.mod b/go.mod
@@ -4,7 +4,7 @@ go 1.18
 
 require (
 	github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646
-	github.com/wailsapp/wails/v2 v2.0.0
+	github.com/wailsapp/wails/v2 v2.1.0
 )
 
 require (
@@ -13,7 +13,7 @@ require (
 	github.com/google/uuid v1.1.2 // indirect
 	github.com/imdario/mergo v0.3.12 // indirect
 	github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
-	github.com/labstack/echo/v4 v4.7.2 // indirect
+	github.com/labstack/echo/v4 v4.9.0 // indirect
 	github.com/labstack/gommon v0.3.1 // indirect
 	github.com/leaanthony/go-ansi-parser v1.0.1 // indirect
 	github.com/leaanthony/gosod v1.0.3 // indirect
@@ -27,8 +27,8 @@ require (
 	github.com/valyala/fasttemplate v1.2.1 // indirect
 	github.com/wailsapp/mimetype v1.4.1 // indirect
 	golang.org/x/crypto v0.0.0-20210921155107-089bfa567519 // indirect
-	golang.org/x/net v0.0.0-20211015210444-4f30a5c0130f // indirect
-	golang.org/x/sys v0.0.0-20220114195835-da31bd327af9 // indirect
+	golang.org/x/net v0.0.0-20220722155237-a158d28d115b // indirect
+	golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f // indirect
 	golang.org/x/text v0.3.7 // indirect
 )
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		3369211da39dcc63e89750b11fced2dd
		af281d83f29a49c45820e690cc0ab6e8