From 0e8d1aace9bb6e424d09253c012c4852a103dc87 Mon Sep 17 00:00:00 2001 From: Steve Lee Date: Mon, 12 Aug 2019 18:28:36 +0100 Subject: [PATCH 1/7] Fix touch events --- html/css/dashboard.css | 1 + html/index.html | 1 + html/js/desktop.js | 48 +++++++++--------------------------------- html/js/pedalboard.js | 32 ++++++++++++++++++++-------- 4 files changed, 35 insertions(+), 47 deletions(-) diff --git a/html/css/dashboard.css b/html/css/dashboard.css index 5357b6b14..833078661 100644 --- a/html/css/dashboard.css +++ b/html/css/dashboard.css @@ -16,6 +16,7 @@ left: 0; bottom: 45px; right: 0; + touch-action: pan-x pan-y; } #pedalboard-dashboard.dev_api:after { diff --git a/html/index.html b/html/index.html index d4a2c44db..cfc5c3d67 100644 --- a/html/index.html +++ b/html/index.html @@ -45,6 +45,7 @@ + diff --git a/html/js/desktop.js b/html/js/desktop.js index 9abb51eb3..e700196cb 100644 --- a/html/js/desktop.js +++ b/html/js/desktop.js @@ -529,34 +529,6 @@ function Desktop(elements) { setNewBeatsPerMinuteValue: function (bpm) { self.hardwareManager.setBeatsPerMinuteValue(bpm) }, - removeBPMHardwareMapping: function(syncMode) { - var instanceAndSymbol = "/pedalboard/:bpm" - if (self.hardwareManager.removeHardwareMappping(instanceAndSymbol)) { - var source = syncMode === "link" ? "Ableton Link" : "MIDI" - new Notification('info', 'BPM addressing removed, incompatible with ' + source + ' sync mode', 8000) - } - self.pedalboardModified = true - }, - setSyncMode: function(syncMode, callback) { - $.ajax({ - url: '/pedalboard/transport/set_sync_mode/' + syncMode, - type: 'POST', - success: function (resp) { - if (resp) { - callback(true) - } else { - new Bug("Couldn't set new sync mode") - callback(false) - } - }, - error: function () { - new Bug("Couldn't set new sync mode, server error") - callback(false) - }, - cache: false, - dataType: 'json' - }) - }, unaddressPort: function (portSymbol, syncMode, callback) { var addressing = { uri : kNullAddressURI, @@ -672,7 +644,7 @@ function Desktop(elements) { }), success: function (resp) { if (! resp.result) { - callback(false) + callback(false) return } callback(true) @@ -1269,15 +1241,15 @@ function Desktop(elements) { } }) - elements.settingsIcon.click(function() { - document.location.href = '/settings'; - }) + elements.settingsIcon.click(function() { + document.location.href = '/settings'; + }) - elements.settingsIcon.statusTooltip() - elements.pedalboardTrigger.statusTooltip() - elements.pedalboardBoxTrigger.statusTooltip() - elements.bankBoxTrigger.statusTooltip() - elements.cloudPluginBoxTrigger.statusTooltip() + elements.settingsIcon.statusTooltip() + elements.pedalboardTrigger.statusTooltip() + elements.pedalboardBoxTrigger.statusTooltip() + elements.bankBoxTrigger.statusTooltip() + elements.cloudPluginBoxTrigger.statusTooltip() this.upgradeWindow = elements.upgradeWindow.upgradeWindow({ icon: elements.upgradeIcon, @@ -1304,9 +1276,9 @@ function Desktop(elements) { var prevent = function (ev) { ev.preventDefault() } + $('body')[0].addEventListener('gesturestart', prevent) $('body')[0].addEventListener('gesturechange', prevent) - $('body')[0].addEventListener('touchmove', prevent) $('body')[0].addEventListener('dblclick', prevent) } diff --git a/html/js/pedalboard.js b/html/js/pedalboard.js index e209964f1..0d3e32fab 100644 --- a/html/js/pedalboard.js +++ b/html/js/pedalboard.js @@ -239,7 +239,7 @@ JqueryClass('pedalboard', { }}); // Dragging the pedalboard move the view area - self.mousedown(function (e) { + self.bind('mousedown touchstart', function (e) { self.pedalboard('drag', e) }) @@ -726,6 +726,18 @@ JqueryClass('pedalboard', { var scale = self.data('scale') + // pure side effects - update the event if touch + function patchTouchEvent(e) { + if (e.type.indexOf('touch') == 0) { + var touch = e.originalEvent.touches[0] + e.pageX = touch.pageX + e.pageY = touch.pageY + } + return e + } + + start = patchTouchEvent(start) + var canvasX = (start.pageX - self.offset().left) / scale var canvasY = (start.pageY - self.offset().top) / scale var screenX = start.pageX - self.parent().offset().left @@ -735,6 +747,8 @@ JqueryClass('pedalboard', { if (self.data('preventDrag')) return + e = patchTouchEvent(e) + self.pedalboard('zoom', scale, canvasX, canvasY, screenX + e.pageX - start.pageX, screenY + e.pageY - start.pageY, @@ -742,12 +756,12 @@ JqueryClass('pedalboard', { } var upHandler = function (e) { - $(document).unbind('mouseup', upHandler) - $(document).unbind('mousemove', moveHandler) + $(document).unbind('mouseup touchend', upHandler) + $(document).unbind('mousemove touchmove', moveHandler) } - $(document).bind('mousemove', moveHandler) - $(document).bind('mouseup', upHandler) + $(document).bind('mousemove touchmove', moveHandler) + $(document).bind('mouseup touchend', upHandler) }, // Changes the viewing scale of the pedalboard and position it in a way that @@ -1352,13 +1366,13 @@ JqueryClass('pedalboard', { } } - icon.mousedown(function () { + icon.bind('mousedown touchstart', function () { self.pedalboard('preventDrag', true) var upHandler = function () { self.pedalboard('preventDrag', false) - $('body').unbind('mouseup', upHandler) + $('body').unbind('mouseup touchend', upHandler) } - $('body').bind('mouseup', upHandler) + $('body').bind('mouseup touchend', upHandler) }) var actions = $('
').addClass('mod-actions').appendTo(icon) @@ -1462,7 +1476,7 @@ JqueryClass('pedalboard', { gui.disable(symbol) } else { gui.addressPort(symbol) - } + } } self.pedalboard('addUniqueCallbackToArrive', cb, targetname1, callbackId) From f3e39ddecbfb40009993efb22df3fbb944d715ea Mon Sep 17 00:00:00 2001 From: Steve Lee Date: Mon, 12 Aug 2019 19:24:22 +0100 Subject: [PATCH 2/7] Fix missed upstream fetch --- html/js/desktop.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/html/js/desktop.js b/html/js/desktop.js index e700196cb..7e880a3d2 100644 --- a/html/js/desktop.js +++ b/html/js/desktop.js @@ -529,6 +529,34 @@ function Desktop(elements) { setNewBeatsPerMinuteValue: function (bpm) { self.hardwareManager.setBeatsPerMinuteValue(bpm) }, + removeBPMHardwareMapping: function(syncMode) { + var instanceAndSymbol = "/pedalboard/:bpm" + if (self.hardwareManager.removeHardwareMappping(instanceAndSymbol)) { + var source = syncMode === "link" ? "Ableton Link" : "MIDI" + new Notification('info', 'BPM addressing removed, incompatible with ' + source + ' sync mode', 8000) + } + self.pedalboardModified = true + }, + setSyncMode: function(syncMode, callback) { + $.ajax({ + url: '/pedalboard/transport/set_sync_mode/' + syncMode, + type: 'POST', + success: function (resp) { + if (resp) { + callback(true) + } else { + new Bug("Couldn't set new sync mode") + callback(false) + } + }, + error: function () { + new Bug("Couldn't set new sync mode, server error") + callback(false) + }, + cache: false, + dataType: 'json' + }) + }, unaddressPort: function (portSymbol, syncMode, callback) { var addressing = { uri : kNullAddressURI, From 182644ee80252e215165c5731395bb39fc3fd20f Mon Sep 17 00:00:00 2001 From: Niko Ugarov Date: Sat, 11 Feb 2023 14:00:29 +0100 Subject: [PATCH 3/7] pinch zoom support --- html/js/pedalboard.js | 59 ++++++++++++++++++++----------------------- 1 file changed, 28 insertions(+), 31 deletions(-) diff --git a/html/js/pedalboard.js b/html/js/pedalboard.js index 0d3e32fab..ece15b69c 100644 --- a/html/js/pedalboard.js +++ b/html/js/pedalboard.js @@ -23,7 +23,7 @@ JqueryClass('pedalboard', { // The scale is the transform scale() css property that the pedalboard has baseScale: 0.5, // maxScale is the maximum zoom. - maxScale: 1, + maxScale: 1.2, // wherever to skip zoom animations skipAnimations: false, @@ -720,42 +720,39 @@ JqueryClass('pedalboard', { // Moves the viewable area of the pedalboard drag: function (start) { - var self = $(this) - + const self = $(this) self.trigger('dragStart') - - var scale = self.data('scale') - - // pure side effects - update the event if touch - function patchTouchEvent(e) { - if (e.type.indexOf('touch') == 0) { - var touch = e.originalEvent.touches[0] - e.pageX = touch.pageX - e.pageY = touch.pageY + const scale = self.data('scale') + + function shape(e) { + if (!e.type.startsWith('touch')) return { pageX: e.pageX, pageY: e.pageY, pageD: 0.0001 } + var touches = e.originalEvent.touches + if (touches.length == 1) return { pageX: touches[0].pageX, pageY: touches[0].pageY, pageD: 0.0001 } + const [ x0, x1, y0, y1 ] = [ touches[0].pageX, touches[1].pageX, touches[0].pageY, touches[1].pageY ] + return { + pageX: Math.round(x0+(x1-x0)*0.50), + pageY: Math.round(y0+(y1-y0)*0.50), + pageD: Math.hypot(x0 - x1, y0 - y1) } - return e } - start = patchTouchEvent(start) - - var canvasX = (start.pageX - self.offset().left) / scale - var canvasY = (start.pageY - self.offset().top) / scale - var screenX = start.pageX - self.parent().offset().left - var screenY = start.pageY - self.parent().offset().top - - var moveHandler = function (e) { - if (self.data('preventDrag')) - return - - e = patchTouchEvent(e) - - self.pedalboard('zoom', scale, canvasX, canvasY, - screenX + e.pageX - start.pageX, - screenY + e.pageY - start.pageY, - 0) + start = shape(start) + const canvasX = (start.pageX - self.offset().left) / scale + const canvasY = (start.pageY - self.offset().top) / scale + + const moveHandler = function (e) { + if (self.data('preventDrag')) return + e = shape(e) + var newScale = scale * e.pageD / start.pageD + newScale = Math.min(self.data('maxScale'), newScale) + newScale = Math.max(self.data('minScale'), newScale) + console.log( 'drag', scale, canvasX, canvasY, + e.pageX - self.parent().offset().left, e.pageY - self.parent().offset().top, 0 ) + self.pedalboard( 'zoom', newScale, canvasX, canvasY, + e.pageX - self.parent().offset().left, e.pageY - self.parent().offset().top, 0 ) } - var upHandler = function (e) { + const upHandler = function (e) { $(document).unbind('mouseup touchend', upHandler) $(document).unbind('mousemove touchmove', moveHandler) } From 15093ced04247f9508464195cc15a43a31c10ca6 Mon Sep 17 00:00:00 2001 From: Niko Ugarov Date: Sat, 11 Feb 2023 14:52:04 +0100 Subject: [PATCH 4/7] rm debug logging --- html/js/pedalboard.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/html/js/pedalboard.js b/html/js/pedalboard.js index eabe3290e..0da3611bd 100644 --- a/html/js/pedalboard.js +++ b/html/js/pedalboard.js @@ -837,8 +837,6 @@ JqueryClass('pedalboard', { var newScale = scale * e.pageD / start.pageD newScale = Math.min(self.data('maxScale'), newScale) newScale = Math.max(self.data('minScale'), newScale) - console.log( 'drag', scale, canvasX, canvasY, - e.pageX - self.parent().offset().left, e.pageY - self.parent().offset().top, 0 ) self.pedalboard( 'zoom', newScale, canvasX, canvasY, e.pageX - self.parent().offset().left, e.pageY - self.parent().offset().top, 0 ) } From e79e42a4af06f1bfe99c8e3efeb097eec65acebd Mon Sep 17 00:00:00 2001 From: Niko Ugarov Date: Sat, 11 Feb 2023 15:57:03 +0100 Subject: [PATCH 5/7] undo whitespace changes --- html/js/desktop.js | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/html/js/desktop.js b/html/js/desktop.js index bec73284b..273f9ab8b 100644 --- a/html/js/desktop.js +++ b/html/js/desktop.js @@ -548,31 +548,31 @@ function Desktop(elements) { removeBPMHardwareMapping: function(syncMode) { var instanceAndSymbol = "/pedalboard/:bpm" if (self.hardwareManager.removeHardwareMappping(instanceAndSymbol)) { - var source = syncMode === "link" ? "Ableton Link" : "MIDI" - new Notification('info', 'BPM addressing removed, incompatible with ' + source + ' sync mode', 8000) - } - self.pedalboardModified = true + var source = syncMode === "link" ? "Ableton Link" : "MIDI" + new Notification('info', 'BPM addressing removed, incompatible with ' + source + ' sync mode', 8000) + } + self.pedalboardModified = true }, setSyncMode: function(syncMode, callback) { $.ajax({ - url: '/pedalboard/transport/set_sync_mode/' + syncMode, - type: 'POST', - success: function (resp) { - if (resp) { - callback(true) - } else { - new Bug("Couldn't set new sync mode") - callback(false) - } - }, - error: function () { - new Bug("Couldn't set new sync mode, server error") - callback(false) - }, - cache: false, - dataType: 'json' + url: '/pedalboard/transport/set_sync_mode/' + syncMode, + type: 'POST', + success: function (resp) { + if (resp) { + callback(true) + } else { + new Bug("Couldn't set new sync mode") + callback(false) + } + }, + error: function () { + new Bug("Couldn't set new sync mode, server error") + callback(false) + }, + cache: false, + dataType: 'json' }) - }, + }, unaddressPort: function (portSymbol, syncMode, callback) { var addressing = { uri : kNullAddressURI, From 605e8dc4622a03d4bba46e6a98e1a934c9d4b415 Mon Sep 17 00:00:00 2001 From: Niko Ugarov Date: Thu, 16 Feb 2023 14:34:32 +0100 Subject: [PATCH 6/7] unchange the max. zoom --- html/js/pedalboard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html/js/pedalboard.js b/html/js/pedalboard.js index 0da3611bd..11e6b9156 100644 --- a/html/js/pedalboard.js +++ b/html/js/pedalboard.js @@ -73,7 +73,7 @@ JqueryClass('pedalboard', { // The scale is the transform scale() css property that the pedalboard has baseScale: 0.5, // maxScale is the maximum zoom. - maxScale: 1.2, + maxScale: 1, // wherever to skip zoom animations skipAnimations: false, From e16d4df46702447d161c4a089543f4bf12597ff7 Mon Sep 17 00:00:00 2001 From: Niko Ugarov Date: Thu, 16 Feb 2023 14:36:14 +0100 Subject: [PATCH 7/7] back to var --- html/js/pedalboard.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/html/js/pedalboard.js b/html/js/pedalboard.js index 11e6b9156..460928471 100644 --- a/html/js/pedalboard.js +++ b/html/js/pedalboard.js @@ -811,15 +811,15 @@ JqueryClass('pedalboard', { // Moves the viewable area of the pedalboard drag: function (start) { - const self = $(this) + var self = $(this) self.trigger('dragStart') - const scale = self.data('scale') + var scale = self.data('scale') function shape(e) { if (!e.type.startsWith('touch')) return { pageX: e.pageX, pageY: e.pageY, pageD: 0.0001 } var touches = e.originalEvent.touches if (touches.length == 1) return { pageX: touches[0].pageX, pageY: touches[0].pageY, pageD: 0.0001 } - const [ x0, x1, y0, y1 ] = [ touches[0].pageX, touches[1].pageX, touches[0].pageY, touches[1].pageY ] + var [ x0, x1, y0, y1 ] = [ touches[0].pageX, touches[1].pageX, touches[0].pageY, touches[1].pageY ] return { pageX: Math.round(x0+(x1-x0)*0.50), pageY: Math.round(y0+(y1-y0)*0.50), @@ -828,10 +828,10 @@ JqueryClass('pedalboard', { } start = shape(start) - const canvasX = (start.pageX - self.offset().left) / scale - const canvasY = (start.pageY - self.offset().top) / scale + var canvasX = (start.pageX - self.offset().left) / scale + var canvasY = (start.pageY - self.offset().top) / scale - const moveHandler = function (e) { + var moveHandler = function (e) { if (self.data('preventDrag')) return e = shape(e) var newScale = scale * e.pageD / start.pageD @@ -841,7 +841,7 @@ JqueryClass('pedalboard', { e.pageX - self.parent().offset().left, e.pageY - self.parent().offset().top, 0 ) } - const upHandler = function (e) { + var upHandler = function (e) { $(document).unbind('mouseup touchend', upHandler) $(document).unbind('mousemove touchmove', moveHandler) }