Skip to content

Commit

Permalink
Added mouse support (touch emulation)
Browse files Browse the repository at this point in the history
  • Loading branch information
@connornishijima
connornishijima committed May 8, 2024
1 parent 6ee296d commit 218d8af
Show file tree
Hide file tree
Showing 7 changed files with 507 additions and 86 deletions.
32 changes: 9 additions & 23 deletions data/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,29 +36,15 @@
function update_wifi_credentials(){
let ssid = document.getElementById("ssid").value;
let pass = document.getElementById("pass").value;

let wifi_endpoint = "/save-wifi";
let data = {
ssid: ssid,
pass: pass
};

fetch(wifi_endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
body: JSON.stringify(data)
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
window.location.href = "https://app.emotiscope.rocks/";
})
.catch(error => {
console.error('There was been a problem with update_wifi_credentials:', error);
});

// URL encode the ssid and pass
ssid = encodeURIComponent(ssid);
pass = encodeURIComponent(pass);

let wifi_endpoint = "/save-wifi?ssid="+ssid+"&pass="+pass;
fetch(wifi_endpoint);

window.location.href = "https://app.emotiscope.rocks/";
}
</script>
</body>
Expand Down
105 changes: 76 additions & 29 deletions data/js/sliders.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,27 +43,34 @@ function track_sliders() {
function start_tracking(event) {
temporary_configuration = JSON.parse(JSON.stringify(configuration));

Array.from(event.touches).forEach(touch => {
let id = touch.target.closest('.slider_track').getAttribute('id');
// Check if event is a mouse event
const isMouseEvent = event.touches === undefined;
const eventPoints = isMouseEvent ? [event] : (event.touches ? Array.from(event.touches) : []);

eventPoints.forEach(point => {
let id = point.target.closest('.slider_track').getAttribute('id');
transmit(`slider_touch_start|${id}`);

// Store initial touch positions
touch_start_data.set(touch.identifier, {
start_x: touch.clientX,
start_y: touch.clientY,
target_div: touch.target.closest('.slider_track'),
tracking_allowed: undefined // We haven't determined the direction yet
});
});
}
// Store initial touch positions
touch_start_data.set(isMouseEvent ? 'mouse' : point.identifier, {
start_x: point.clientX,
start_y: point.clientY,
target_div: point.target.closest('.slider_track'),
tracking_allowed: undefined // We haven't determined the direction yet
});
});
}

function track_movement(event) {
Array.from(event.touches).forEach(touch => {
const data = touch_start_data.get(touch.identifier);
const isMouseEvent = event.touches === undefined;
const eventPoints = isMouseEvent ? [event] : (event.touches ? Array.from(event.touches) : []);

eventPoints.forEach(point => {
const data = touch_start_data.get(isMouseEvent ? 'mouse' : point.identifier);

if (data && data.target_div) {
const delta_x = Math.abs(touch.clientX - data.start_x);
const delta_y = Math.abs(touch.clientY - data.start_y);
const delta_x = Math.abs(point.clientX - data.start_x);
const delta_y = Math.abs(point.clientY - data.start_y);

// Determine the direction if not done yet and the touch has moved more than 10 pixels
if (data.tracking_allowed === undefined && (delta_x > 10 || delta_y > 10)) {
Expand All @@ -72,13 +79,16 @@ function track_sliders() {
}

if (data.tracking_allowed) {
event.preventDefault(); // Prevent default behavior for vertical drags
// Prevent default behavior for dragging (scroll) only for touch events
if (!isMouseEvent) {
event.preventDefault();
}

var id = data.target_div.getAttribute('id');

// Tracking logic here
if (delta_y > 0) { // Ensure there's some vertical movement to track
let distance_moved = data.start_y - touch.clientY;
let distance_moved = data.start_y - point.clientY;
let ratio = Math.min(1.0, Math.max(-1.0, (distance_moved / data.target_div.offsetHeight)));
let div_name = data.target_div.getAttribute('name') || data.target_div.id;

Expand Down Expand Up @@ -111,24 +121,61 @@ function track_sliders() {
}

function stop_tracking(event) {
Array.from(event.changedTouches).forEach(touch => {
//console.log(touch);

if(touch.target.classList.contains("slider_track")){
let id = touch.target.getAttribute('id');
transmit(`slider_touch_end|${id}`);
}

touch_start_data.delete(touch.identifier);
});
}
const isMouseEvent = event.changedTouches === undefined;
const eventPoints = isMouseEvent ? [event] : (event.changedTouches ? Array.from(event.changedTouches) : []);

eventPoints.forEach(point => {
const data = touch_start_data.get(isMouseEvent ? 'mouse' : point.identifier);

if (data && data.target_div.classList.contains("slider_track")) {
let id = data.target_div.getAttribute('id');
transmit(`slider_touch_end|${id}`);
}

touch_start_data.delete(isMouseEvent ? 'mouse' : point.identifier);
});
}

// Apply event listeners to all slider track divs
document.querySelectorAll('.slider_track').forEach(slider_track => {
slider_track.addEventListener('touchstart', start_tracking, {passive: false});
slider_track.addEventListener('mousedown', start_tracking, {passive: false});
});

// Add move and end listeners to document to ensure capture even outside divs
document.addEventListener('touchmove', track_movement, {passive: false});
document.addEventListener('touchend', stop_tracking);
document.addEventListener('mousemove', track_movement, {passive: false});

document.addEventListener('touchend', stop_tracking, {passive: false});
document.addEventListener('mouseup', stop_tracking, {passive: false});

const draggable_container = document.getElementById('setting_gallery');
let is_down = false;
let start_x;
let scroll_left;

draggable_container.addEventListener('mousedown', (e) => {
is_down = true;
draggable_container.style.cursor = 'grabbing';
start_x = e.pageX - draggable_container.offsetLeft;
scroll_left = draggable_container.scrollLeft;
});

draggable_container.addEventListener('mouseleave', () => {
is_down = false;
draggable_container.style.cursor = 'grab';
});

draggable_container.addEventListener('mouseup', () => {
is_down = false;
draggable_container.style.cursor = 'grab';
});

draggable_container.addEventListener('mousemove', (e) => {
if (!is_down) return;
e.preventDefault();
const x = e.pageX - draggable_container.offsetLeft;
const walk = (x - start_x); // Adjust the speed and responsiveness of scrolling
draggable_container.scrollLeft = scroll_left - walk;
});
}
Loading

0 comments on commit 218d8af

Please sign in to comment.