From fdc5b58d76ba593b26755babec91398ec1f248b0 Mon Sep 17 00:00:00 2001 From: Ayush Gaggar Date: Wed, 2 Oct 2024 13:05:18 -0500 Subject: [PATCH 1/8] reverting to original js code --- index.html | 4 ++++ static/js/slider.js | 45 ++++++++------------------------------------- 2 files changed, 12 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index d54cebf..f413bee 100644 --- a/index.html +++ b/index.html @@ -230,6 +230,10 @@

Ours vs. FisherRF

+ diff --git a/static/js/slider.js b/static/js/slider.js index 3fd5035..92849e2 100644 --- a/static/js/slider.js +++ b/static/js/slider.js @@ -1,5 +1,7 @@ -// Function to handle slider movement -function handleSliderChange(sliderPos) { +// Function to handle slider changes +export function handleSliderChange(e) { + const sliderPos = e.target.value; + // Update the width of the foreground image document.querySelector('.foreground-img').style.width = `${sliderPos}%`; @@ -7,42 +9,11 @@ function handleSliderChange(sliderPos) { document.querySelector('.img-slider-button').style.left = `calc(${sliderPos}% - 18px)`; } -// Variables to track mouse movement -let isDragging = false; - -// Handle the mouse down event (when the user clicks on the slider button) -document.querySelector('.img-slider-button').addEventListener('mousedown', (e) => { - isDragging = true; // Start dragging - document.body.style.cursor = 'grabbing'; // Change cursor to indicate dragging -}); - -// Handle the mouse move event (when the user drags the slider button) -document.addEventListener('mousemove', (e) => { - if (isDragging) { - // Get the bounding box of the slider track (or container) - const slider = document.getElementById('img-slider'); - const rect = slider.getBoundingClientRect(); - - // Calculate the new slider position as a percentage based on mouse position - const offsetX = e.clientX - rect.left; - let sliderPos = (offsetX / rect.width) * 100; - - // Clamp the value between 0% and 100% to prevent overflow - sliderPos = Math.max(0, Math.min(100, sliderPos)); - - // Update the slider's value and visuals - slider.value = sliderPos; - handleSliderChange(sliderPos); - } -}); +// Get the slider element and add event listeners for 'input' and 'change' +const imgSlider = document.getElementById("img-slider"); +imgSlider.addEventListener("input", handleSliderChange); +imgSlider.addEventListener("change", handleSliderChange); -// Handle the mouse up event (when the user releases the mouse button) -document.addEventListener('mouseup', () => { - if (isDragging) { - isDragging = false; // Stop dragging - document.body.style.cursor = 'default'; // Reset the cursor - } -}); // export function initComparisons() { // var x, i; From 2f36398e2e66fc10be3734b54941e5e32aabfb59 Mon Sep 17 00:00:00 2001 From: Ayush Gaggar Date: Wed, 2 Oct 2024 13:08:31 -0500 Subject: [PATCH 2/8] changing variable into slider --- index.html | 2 +- static/js/slider.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index f413bee..aab5aac 100644 --- a/index.html +++ b/index.html @@ -232,7 +232,7 @@

Ours vs. FisherRF

diff --git a/static/js/slider.js b/static/js/slider.js index 92849e2..b23761a 100644 --- a/static/js/slider.js +++ b/static/js/slider.js @@ -1,6 +1,6 @@ // Function to handle slider changes -export function handleSliderChange(e) { - const sliderPos = e.target.value; +export function handleSliderChange() { + const sliderPos = imgSlider.target.value; // Update the width of the foreground image document.querySelector('.foreground-img').style.width = `${sliderPos}%`; From 03893ac68a8d0b4da2fca4eac6f2248b6c16b8a3 Mon Sep 17 00:00:00 2001 From: Ayush Gaggar Date: Wed, 2 Oct 2024 13:24:51 -0500 Subject: [PATCH 3/8] changing slider code yet again --- index.html | 31 ++++++++++++-- static/css/index.css | 100 ++++++++++++++++++++++++++++++++++++++++++- static/js/slider.js | 33 ++++++++------ 3 files changed, 146 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index aab5aac..18dd8e5 100644 --- a/index.html +++ b/index.html @@ -223,18 +223,41 @@

See how our augmentation compares with others!

Ours vs. FisherRF

-
+
+
+
+
+
+
+
+ +
+ +
+
+ + + +
- +
-
+ --> diff --git a/static/css/index.css b/static/css/index.css index 6287e2d..9eeef1e 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -183,7 +183,7 @@ body { border-radius: 50%; } */ -.img-container { +/* .img-container { position: relative; width: 400px; height: 400px; @@ -220,7 +220,7 @@ body { /* .img-container .slider:hover { background: rgba(242, 242, 242, 0.1); -} */ +} .img-container .img-slider::-webkit-slider-thumb { -webkit-appearance: none; @@ -267,4 +267,100 @@ body { .img-container .img-slider-button:before { transform: rotate(135deg); +} */ + +.img-compare-container { + position: relative; + height: 400px; + width: 400px; + overflow: hidden; + background: #fff; + border: 7px solid #fff; + /* box-shadow: 0px 0px 15px rgba(0,0,0,0.15); */ +} + +.img-compare-container .images{ + height: 100%; + width: 100%; + display: flex; +} +.img-compare-container .images .img-1{ + height: 100%; + width: 100%; + background: url("images/img.jpg") no-repeat; +} +.img-compare-container .images .img-2{ + position: absolute; + height: 100%; + width: 50%; + /* filter: blur(5px); */ + background: url("images/img.png") no-repeat; +} +.img-compare-container .slider{ + position: absolute; + top: 0; + width: 100%; + z-index: 99; +} +.img-compare-container .slider input{ + width: 100%; + outline: none; + background: none; + -webkit-appearance: none; +} +.slider input::-webkit-slider-thumb{ + height: 486px; + width: 3px; + background: none; + -webkit-appearance: none; + cursor: col-resize; +} +.slider .drag-line{ + width: 3px; + height: 486px; + position: absolute; + left: 49.85%; + pointer-events: none; +} +.slider .drag-line::before, +.slider .drag-line::after{ + position: absolute; + content: ""; + width: 100%; + height: 222px; + background: #fff; +} +.slider .drag-line::before{ + top: 0; +} +.slider .drag-line::after{ + bottom: 0; +} +.slider .drag-line span{ + height: 42px; + width: 42px; + border: 3px solid #fff; + position: absolute; + top: 50%; + left: 50%; + border-radius: 50%; + transform: translate(-50%, -50%); +} +.slider .drag-line span::before, +.slider .drag-line span::after{ + position: absolute; + content: ""; + top: 50%; + border: 10px solid transparent; + border-bottom-width: 0px; + border-right-width: 0px; + transform: translate(-50%, -50%) rotate(45deg); +} +.slider .drag-line span::before{ + left: 40%; + border-left-color: #fff; +} +.slider .drag-line span::after{ + left: 60%; + border-top-color: #fff; } \ No newline at end of file diff --git a/static/js/slider.js b/static/js/slider.js index b23761a..1a2d036 100644 --- a/static/js/slider.js +++ b/static/js/slider.js @@ -1,18 +1,27 @@ -// Function to handle slider changes -export function handleSliderChange() { - const sliderPos = imgSlider.target.value; +function initializeSlider() { + const slider = document.querySelector('.slider'); + const container = document.querySelector('.container'); + + slider.addEventListener('input', function (e) { + container.style.setProperty('--position', e.target.value + '%'); + }); +} + +// // Function to handle slider changes +// export function handleSliderChange() { +// const sliderPos = imgSlider.target.value; - // Update the width of the foreground image - document.querySelector('.foreground-img').style.width = `${sliderPos}%`; +// // Update the width of the foreground image +// document.querySelector('.foreground-img').style.width = `${sliderPos}%`; - // Update the position of the slider button - document.querySelector('.img-slider-button').style.left = `calc(${sliderPos}% - 18px)`; -} +// // Update the position of the slider button +// document.querySelector('.img-slider-button').style.left = `calc(${sliderPos}% - 18px)`; +// } -// Get the slider element and add event listeners for 'input' and 'change' -const imgSlider = document.getElementById("img-slider"); -imgSlider.addEventListener("input", handleSliderChange); -imgSlider.addEventListener("change", handleSliderChange); +// // Get the slider element and add event listeners for 'input' and 'change' +// const imgSlider = document.getElementById("img-slider"); +// imgSlider.addEventListener("input", handleSliderChange); +// imgSlider.addEventListener("change", handleSliderChange); // export function initComparisons() { From 7c5dcdf67f2a48d4a3072a7791063ebdab1fc6dd Mon Sep 17 00:00:00 2001 From: Ayush Gaggar Date: Wed, 2 Oct 2024 13:27:12 -0500 Subject: [PATCH 4/8] sample images --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 18dd8e5..b3a21e1 100644 --- a/index.html +++ b/index.html @@ -225,8 +225,8 @@

Ours vs. FisherRF

-
-
+
+
From 85f739e150de5a84a14af9d78646cdd5fe9886b5 Mon Sep 17 00:00:00 2001 From: Ayush Gaggar Date: Wed, 2 Oct 2024 13:35:21 -0500 Subject: [PATCH 5/8] basic slider code --- index.html | 25 ++---- static/css/index.css | 104 ++++--------------------- static/js/slider.js | 178 ++++++++++++++++++------------------------- 3 files changed, 99 insertions(+), 208 deletions(-) diff --git a/index.html b/index.html index b3a21e1..d383fca 100644 --- a/index.html +++ b/index.html @@ -223,28 +223,17 @@

See how our augmentation compares with others!

Ours vs. FisherRF

-
-
-
-
+
+
+
-
-
- -
- +
+
-
-
- + +
-
--> +
diff --git a/static/js/slider.js b/static/js/slider.js index 4d7432e..b23761a 100644 --- a/static/js/slider.js +++ b/static/js/slider.js @@ -1,76 +1,93 @@ -function initComparisons() { - var x, i; - /* Find all elements with an "overlay" class: */ - x = document.getElementsByClassName("img-comp-overlay"); - for (i = 0; i < x.length; i++) { - /* Once for each "overlay" element: - pass the "overlay" element as a parameter when executing the compareImages function: */ - compareImages(x[i]); - } - function compareImages(img) { - var slider, img, clicked = 0, w, h; - /* Get the width and height of the img element */ - w = img.offsetWidth; - h = img.offsetHeight; - /* Set the width of the img element to 50%: */ - img.style.width = (w / 2) + "px"; - /* Create slider: */ - slider = document.createElement("DIV"); - slider.setAttribute("class", "img-comp-slider"); - /* Insert slider */ - img.parentElement.insertBefore(slider, img); - /* Position the slider in the middle: */ - slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px"; - slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; - /* Execute a function when the mouse button is pressed: */ - slider.addEventListener("mousedown", slideReady); - /* And another function when the mouse button is released: */ - window.addEventListener("mouseup", slideFinish); - /* Or touched (for touch screens: */ - slider.addEventListener("touchstart", slideReady); - /* And released (for touch screens: */ - window.addEventListener("touchend", slideFinish); - function slideReady(e) { - /* Prevent any other actions that may occur when moving over the image: */ - e.preventDefault(); - /* The slider is now clicked and ready to move: */ - clicked = 1; - /* Execute a function when the slider is moved: */ - window.addEventListener("mousemove", slideMove); - window.addEventListener("touchmove", slideMove); - } - function slideFinish() { - /* The slider is no longer clicked: */ - clicked = 0; - } - function slideMove(e) { - var pos; - /* If the slider is no longer clicked, exit this function: */ - if (clicked == 0) return false; - /* Get the cursor's x position: */ - pos = getCursorPos(e) - /* Prevent the slider from being positioned outside the image: */ - if (pos < 0) pos = 0; - if (pos > w) pos = w; - /* Execute a function that will resize the overlay image according to the cursor: */ - slide(pos); - } - function getCursorPos(e) { - var a, x = 0; - e = (e.changedTouches) ? e.changedTouches[0] : e; - /* Get the x positions of the image: */ - a = img.getBoundingClientRect(); - /* Calculate the cursor's x coordinate, relative to the image: */ - x = e.pageX - a.left; - /* Consider any page scrolling: */ - x = x - window.pageXOffset; - return x; - } - function slide(x) { - /* Resize the image: */ - img.style.width = x + "px"; - /* Position the slider: */ - slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; - } - } -} \ No newline at end of file +// Function to handle slider changes +export function handleSliderChange() { + const sliderPos = imgSlider.target.value; + + // Update the width of the foreground image + document.querySelector('.foreground-img').style.width = `${sliderPos}%`; + + // Update the position of the slider button + document.querySelector('.img-slider-button').style.left = `calc(${sliderPos}% - 18px)`; +} + +// Get the slider element and add event listeners for 'input' and 'change' +const imgSlider = document.getElementById("img-slider"); +imgSlider.addEventListener("input", handleSliderChange); +imgSlider.addEventListener("change", handleSliderChange); + + +// export function initComparisons() { +// var x, i; +// /* Find all elements with an "overlay" class: */ +// x = document.getElementsByClassName("image-compare"); +// for (i = 0; i < x.length; i++) { +// /* Once for each "overlay" element: +// pass the "overlay" element as a parameter when executing the compareImages function: */ +// compareImages(x[i]); +// } +// function compareImages(img) { +// var slider, img, clicked = 0, w, h; +// /* Get the width and height of the img element */ +// w = img.offsetWidth; +// h = img.offsetHeight; +// /* Set the width of the img element to 50%: */ +// img.style.width = (w / 2) + "px"; +// /* Create slider: */ +// slider = document.createElement("DIV"); +// slider.setAttribute("class", "img-comp-slider"); +// /* Insert slider */ +// img.parentElement.insertBefore(slider, img); +// /* Position the slider in the middle: */ +// slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px"; +// slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; +// /* Execute a function when the mouse button is pressed: */ +// slider.addEventListener("mousedown", slideReady); +// /* And another function when the mouse button is released: */ +// window.addEventListener("mouseup", slideFinish); +// /* Or touched (for touch screens: */ +// slider.addEventListener("touchstart", slideReady); +// /* And released (for touch screens: */ +// window.addEventListener("touchend", slideFinish); +// function slideReady(e) { +// /* Prevent any other actions that may occur when moving over the image: */ +// e.preventDefault(); +// /* The slider is now clicked and ready to move: */ +// clicked = 1; +// /* Execute a function when the slider is moved: */ +// window.addEventListener("mousemove", slideMove); +// window.addEventListener("touchmove", slideMove); +// } +// function slideFinish() { +// /* The slider is no longer clicked: */ +// clicked = 0; +// } +// function slideMove(e) { +// var pos; +// /* If the slider is no longer clicked, exit this function: */ +// if (clicked == 0) return false; +// /* Get the cursor's x position: */ +// pos = getCursorPos(e) +// /* Prevent the slider from being positioned outside the image: */ +// if (pos < 0) pos = 0; +// if (pos > w) pos = w; +// /* Execute a function that will resize the overlay image according to the cursor: */ +// slide(pos); +// } +// function getCursorPos(e) { +// var a, x = 0; +// e = (e.changedTouches) ? e.changedTouches[0] : e; +// /* Get the x positions of the image: */ +// a = img.getBoundingClientRect(); +// /* Calculate the cursor's x coordinate, relative to the image: */ +// x = e.pageX - a.left; +// /* Consider any page scrolling: */ +// x = x - window.pageXOffset; +// return x; +// } +// function slide(x) { +// /* Resize the image: */ +// img.style.width = x + "px"; +// /* Position the slider: */ +// slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; +// } +// } +// } \ No newline at end of file From 916b92b906045b37ec552d6b3157d6cfaffdc0df Mon Sep 17 00:00:00 2001 From: Ayush Gaggar Date: Wed, 2 Oct 2024 13:41:04 -0500 Subject: [PATCH 7/8] didn't save --- static/css/index.css | 28 ++-------------------------- 1 file changed, 2 insertions(+), 26 deletions(-) diff --git a/static/css/index.css b/static/css/index.css index 9d79ffd..db03d8b 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -220,7 +220,7 @@ body { /* .img-container .slider:hover { background: rgba(242, 242, 242, 0.1); -} +} */ .img-container .img-slider::-webkit-slider-thumb { -webkit-appearance: none; @@ -267,28 +267,4 @@ body { .img-container .img-slider-button:before { transform: rotate(135deg); -} */ - -.img-comp-img { - position: absolute; - width: auto; - height: auto; - overflow: hidden; -} - -.img-comp-img img { - display: block; - vertical-align: middle; -} - -.img-comp-slider { - position: absolute; - z-index: 9; - cursor: ew-resize; - /*set the appearance of the slider:*/ - width: 40px; - height: 40px; - background-color: #2196F3; - opacity: 0.7; - border-radius: 50%; -} \ No newline at end of file +} */ \ No newline at end of file From c6f61e98ab53641069a14b4211e2d55d076d91c6 Mon Sep 17 00:00:00 2001 From: Ayush Gaggar Date: Wed, 2 Oct 2024 13:42:42 -0500 Subject: [PATCH 8/8] adding slider image containers --- static/css/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/css/index.css b/static/css/index.css index db03d8b..6287e2d 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -183,7 +183,7 @@ body { border-radius: 50%; } */ -/* .img-container { +.img-container { position: relative; width: 400px; height: 400px; @@ -267,4 +267,4 @@ body { .img-container .img-slider-button:before { transform: rotate(135deg); -} */ \ No newline at end of file +} \ No newline at end of file