Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2025-01-18 17:14:08 +01:00
Code Releases Wiki Activity

Added image options

Browse Source
This commit is contained in:
Nayam Amarshe 2022-12-24 13:10:45 +05:30
parent 096726fceb
commit 5e33ab2c2f
3 changed files with 86 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
renderer/components/ImageOptions.tsx
View File

@ -3,15 +3,13 @@ import React, { useEffect } from "react";
const ImageOptions = ({
zoomAmount,
setZoomAmount,
leftImageRef,
rightImageRef,
resetImagePaths,
hideZoomOptions,
}: {
zoomAmount: string;
setZoomAmount: (arg: any) => void;
leftImageRef: React.RefObject<HTMLImageElement>;
rightImageRef: React.RefObject<HTMLImageElement>;
resetImagePaths: () => void;
hideZoomOptions?: boolean;
}) => {
useEffect(() => {
if (!localStorage.getItem("zoomAmount")) {
@ -22,7 +20,7 @@ const ImageOptions = ({
}, []);
return (
<div className="animate rounded-btn collapse absolute top-0 z-50 m-2 opacity-25 hover:opacity-100">
<div className="animate rounded-btn collapse absolute top-1 z-50 m-2 opacity-25 hover:opacity-100">
<input type="checkbox" className="peer" />
<div className="collapse-title bg-base-100 text-center text-sm font-semibold uppercase text-primary-content peer-checked:bg-base-300 peer-checked:text-base-content">
Show/Hide Image Settings
@ -33,59 +31,61 @@ const ImageOptions = ({
<button className="btn-primary btn" onClick={resetImagePaths}>
Reset Image
</button>
<div className="flex flex-row items-center gap-2">
<p className="w-20">Zoom:</p>
<button
className={`btn-primary btn ${
zoomAmount === "100%" ? "btn-secondary" : "btn-primary"
}`}
onClick={() => {
setZoomAmount("100%");
localStorage.setItem("zoomAmount", "100%");
}}>
100%
</button>
<button
className={`btn-primary btn ${
zoomAmount === "125%" ? "btn-secondary" : "btn-primary"
}`}
onClick={() => {
setZoomAmount("125%");
localStorage.setItem("zoomAmount", "125%");
}}>
125%
</button>
<button
className={`btn-primary btn ${
zoomAmount === "150%" ? "btn-secondary" : "btn-primary"
}`}
onClick={() => {
setZoomAmount("150%");
localStorage.setItem("zoomAmount", "150%");
}}>
150%
</button>
<button
className={`btn-primary btn ${
zoomAmount === "175%" ? "btn-secondary" : "btn-primary"
}`}
onClick={() => {
setZoomAmount("175%");
localStorage.setItem("zoomAmount", "175%");
}}>
175%
</button>
<button
className={`btn-primary btn ${
zoomAmount === "200%" ? "btn-secondary" : "btn-primary"
}`}
onClick={() => {
setZoomAmount("200%");
localStorage.setItem("zoomAmount", "200%");
}}>
200%
</button>
</div>
{!hideZoomOptions && (
<div className="flex flex-row items-center gap-2">
<p className="w-20">Zoom:</p>
<button
className={`btn-primary btn ${
zoomAmount === "100%" ? "btn-secondary" : "btn-primary"
}`}
onClick={() => {
setZoomAmount("100%");
localStorage.setItem("zoomAmount", "100%");
}}>
100%
</button>
<button
className={`btn-primary btn ${
zoomAmount === "125%" ? "btn-secondary" : "btn-primary"
}`}
onClick={() => {
setZoomAmount("125%");
localStorage.setItem("zoomAmount", "125%");
}}>
125%
</button>
<button
className={`btn-primary btn ${
zoomAmount === "150%" ? "btn-secondary" : "btn-primary"
}`}
onClick={() => {
setZoomAmount("150%");
localStorage.setItem("zoomAmount", "150%");
}}>
150%
</button>
<button
className={`btn-primary btn ${
zoomAmount === "175%" ? "btn-secondary" : "btn-primary"
}`}
onClick={() => {
setZoomAmount("175%");
localStorage.setItem("zoomAmount", "175%");
}}>
175%
</button>
<button
className={`btn-primary btn ${
zoomAmount === "200%" ? "btn-secondary" : "btn-primary"
}`}
onClick={() => {
setZoomAmount("200%");
localStorage.setItem("zoomAmount", "200%");
}}>
200%
</button>
</div>
)}
</div>
</div>
</div>

4
renderer/components/LeftPaneImageSteps.tsx
View File

@ -24,7 +24,6 @@ interface IProps {
setSaveImageAs: (arg: string) => void;
gpuId: string;
setGpuId: (arg: string) => void;
leftImageRef: any;
dimensions: {
width: number | null;
height: number | null;
@ -230,7 +229,8 @@ function LeftPaneImageSteps({
</span>{" "}
to{" "}
<span className="font-bold">
{dimensions.width * 4}x{dimensions.height * 4}
{doubleUpscayl ? dimensions.width * 8 : dimensions.width * 4}x
{doubleUpscayl ? dimensions.height * 8 : dimensions.height * 4}
</span>
</p>
)}

43
renderer/pages/index.tsx
View File

@ -499,21 +499,29 @@ const Home = () => {
!isVideo &&
upscaledImagePath.length === 0 &&
imagePath.length > 0 && (
<img
className="h-full w-full object-contain"
src={
"file://" +
`${upscaledImagePath ? upscaledImagePath : imagePath}`
}
onLoad={(e: any) => {
setDimensions({
width: e.target.naturalWidth,
height: e.target.naturalHeight,
});
}}
draggable="false"
alt=""
/>
<>
<ImageOptions
zoomAmount={zoomAmount}
setZoomAmount={setZoomAmount}
resetImagePaths={resetImagePaths}
hideZoomOptions={true}
/>
<img
src={
"file://" +
`${upscaledImagePath ? upscaledImagePath : imagePath}`
}
onLoad={(e: any) => {
setDimensions({
width: e.target.naturalWidth,
height: e.target.naturalHeight,
});
}}
draggable="false"
alt=""
className={`h-full w-full bg-[#1d1c23] object-contain`}
/>
</>
)}
{/* BATCH UPSCALE SHOW SELECTED FOLDER */}
@ -562,9 +570,10 @@ const Home = () => {
<img
src={"file://" + imagePath}
alt="Original"
onMouseMove={handleMouseMove}
style={{
objectFit: "contain",
backgroundPosition: "0% 10%",
backgroundPosition: "0% 0%",
transformOrigin: backgroundPosition,
}}
className={`h-full w-full bg-[#1d1c23] transition-transform group-hover:scale-[${zoomAmount}]`}
@ -581,7 +590,7 @@ const Home = () => {
alt="Upscayl"
style={{
objectFit: "contain",
backgroundPosition: "0% 10%",
backgroundPosition: "0% 0%",
transformOrigin: backgroundPosition,
}}
onMouseMove={handleMouseMove}