From b921a52071cf2a5e551c31a6073af6eaebbf7847 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 28 Jan 2023 03:19:10 -0600 Subject: [PATCH 1/4] basic image next and prev control with joystick --- javascript/imageviewer.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 67916536e..0488bfb43 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -210,6 +210,19 @@ document.addEventListener("DOMContentLoaded", function() { modal.id = "lightboxModal"; modal.tabIndex = 0 modal.addEventListener('keydown', modalKeyHandler, true) + window.addEventListener('gamepadconnected', (e) => { + console.log("Gamepad connected!") + const gamepad = e.gamepad; + setInterval(() => { + const xValue = gamepad.axes[0].toFixed(2); + if (xValue < -0.3) { + modalPrevImage(); + } else if (xValue > 0.3) { + modalNextImage(); + } + + }, 350); + }); const modalControls = document.createElement('div') modalControls.className = 'modalControls gradio-container'; From bfa14db2cb0e266121317e3624b93708b29f2e88 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 7 Feb 2023 16:54:12 -0600 Subject: [PATCH 2/4] enable gallery scrolling functionality for horizontal scroll and gamepads --- javascript/imageviewer.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 3f7b12894..e5355d0be 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -219,18 +219,37 @@ document.addEventListener("DOMContentLoaded", function() { modal.id = "lightboxModal"; modal.tabIndex = 0 modal.addEventListener('keydown', modalKeyHandler, true) + + let delay = 350//ms window.addEventListener('gamepadconnected', (e) => { console.log("Gamepad connected!") const gamepad = e.gamepad; setInterval(() => { const xValue = gamepad.axes[0].toFixed(2); if (xValue < -0.3) { - modalPrevImage(); + modalPrevImage(e); } else if (xValue > 0.3) { - modalNextImage(); + modalNextImage(e); } - }, 350); + }, delay); + }); + + + let isScrolling = false; + window.addEventListener('wheel', (e) => { + if (isScrolling) return; + isScrolling = true; + + if (e.deltaX <= -0.6) { + modalPrevImage(e); + } else if (e.deltaX >= 0.6) { + modalNextImage(e); + } + + setTimeout(() => { + isScrolling = false; + }, delay); }); const modalControls = document.createElement('div') From 40dc0132df0aae62078b29384600570688e3eb79 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 13 Mar 2023 03:39:02 -0500 Subject: [PATCH 3/4] modularize --- javascript/imageviewer.js | 35 ++++--------------------------- javascript/imageviewerGamepad.js | 36 ++++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 31 deletions(-) create mode 100644 javascript/imageviewerGamepad.js diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index e5355d0be..fa7a67d54 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -220,37 +220,10 @@ document.addEventListener("DOMContentLoaded", function() { modal.tabIndex = 0 modal.addEventListener('keydown', modalKeyHandler, true) - let delay = 350//ms - window.addEventListener('gamepadconnected', (e) => { - console.log("Gamepad connected!") - const gamepad = e.gamepad; - setInterval(() => { - const xValue = gamepad.axes[0].toFixed(2); - if (xValue < -0.3) { - modalPrevImage(e); - } else if (xValue > 0.3) { - modalNextImage(e); - } - - }, delay); - }); - - - let isScrolling = false; - window.addEventListener('wheel', (e) => { - if (isScrolling) return; - isScrolling = true; - - if (e.deltaX <= -0.6) { - modalPrevImage(e); - } else if (e.deltaX >= 0.6) { - modalNextImage(e); - } - - setTimeout(() => { - isScrolling = false; - }, delay); - }); + // detect gamepads and enable related functionality + let gamepadScript = document.createElement('script'); + gamepadScript.src = 'imageviewerGamepad.js'; + document.body.appendChild(gamepadScript); const modalControls = document.createElement('div') modalControls.className = 'modalControls gradio-container'; diff --git a/javascript/imageviewerGamepad.js b/javascript/imageviewerGamepad.js new file mode 100644 index 000000000..29bd71403 --- /dev/null +++ b/javascript/imageviewerGamepad.js @@ -0,0 +1,36 @@ + let delay = 350//ms + window.addEventListener('gamepadconnected', (e) => { + console.log("Gamepad connected!") + const gamepad = e.gamepad; + setInterval(() => { + const xValue = gamepad.axes[0].toFixed(2); + if (xValue < -0.3) { + modalPrevImage(e); + } else if (xValue > 0.3) { + modalNextImage(e); + } + + }, delay); + }); + + + /* + Primarily for vr controller type pointer devices. + I use the wheel event because there's currently no way to do it properly with web xr. + */ + + let isScrolling = false; + window.addEventListener('wheel', (e) => { + if (isScrolling) return; + isScrolling = true; + + if (e.deltaX <= -0.6) { + modalPrevImage(e); + } else if (e.deltaX >= 0.6) { + modalNextImage(e); + } + + setTimeout(() => { + isScrolling = false; + }, delay); + }); \ No newline at end of file From 54291f9d63f0c7dc445b90f3afb37fc330739557 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 15 Mar 2023 04:33:38 -0500 Subject: [PATCH 4/4] remove redundant load --- javascript/imageviewer.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index fa7a67d54..aac2ee823 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -220,11 +220,6 @@ document.addEventListener("DOMContentLoaded", function() { modal.tabIndex = 0 modal.addEventListener('keydown', modalKeyHandler, true) - // detect gamepads and enable related functionality - let gamepadScript = document.createElement('script'); - gamepadScript.src = 'imageviewerGamepad.js'; - document.body.appendChild(gamepadScript); - const modalControls = document.createElement('div') modalControls.className = 'modalControls gradio-container'; modal.append(modalControls);