From 4d5245509a6151a183358f609a3eecf52cc76b58 Mon Sep 17 00:00:00 2001 From: Cameron MacLeod Date: Sat, 9 May 2020 22:05:56 +0100 Subject: [PATCH 1/2] Add option to move accelerometer with mouse --- lib/skulpt/microbit/__init__.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/lib/skulpt/microbit/__init__.js b/lib/skulpt/microbit/__init__.js index 179081d..5c08745 100644 --- a/lib/skulpt/microbit/__init__.js +++ b/lib/skulpt/microbit/__init__.js @@ -124,11 +124,11 @@ var accelerometer = function(name) { }); mod.get_y = new Sk.builtin.func(function() { - return new Sk.builtin.number(mod.data.y); + return new Sk.builtin.nmber(mod.data.y); }); mod.get_z = new Sk.builtin.func(function() { - return new Sk.builtin.number(mod.data.z); + return new Sk.builtin.nmber(mod.data.z); }); mod.get_values = new Sk.builtin.func(function() { @@ -1427,6 +1427,7 @@ var $builtinmodule = function (name) { html += 'x: 0
'; html += 'y: 0
'; html += 'z: 9
'; + html += ''; html += '

Gestures

'; html += 'up'; html += 'down'; @@ -1721,6 +1722,23 @@ var $builtinmodule = function (name) { step: 1, change: sliderChange }).on("slide", sliderChange); + + $('#accel_check :checkbox').change(function() { + if (this.checked) { + const offset = $('#microbit').offset(); + const height = $('#microbit').height(); + const width = $('#microbit').width(); + $('#microbit').mousemove(function (event) { + // Micro:bit accel values are +/- 2000, let's do half for sensitivity + const x = ((event.pageX - offset.left) / width) * 2000 - 1000; + const y = ((event.pageY - offset.top) / height) * 2000 - 1000; + mod.accelerometer.$d.data.x = x; + mod.accelerometer.$d.data.y = y; + }); + } else { + $('#microbit').off('mousemove'); + } + }); $('#mb_therm_slider').slider({ value: 23, min: 0, From f7d2a09349f65bf29d96680920d16f0c7c749920 Mon Sep 17 00:00:00 2001 From: Cameron MacLeod Date: Sun, 10 May 2020 11:17:52 +0100 Subject: [PATCH 2/2] Add user feedback for accelerometer control Sliders now move along with the value Value update is debounced to reduce CPU usage (30fps) Value spans have minimum width to prevent them expanding and contracting endlessly, which is visually distracting Ran mb.css through a CSS validator --- lib/skulpt/microbit/__init__.js | 23 ++++++++++++++++++++--- lib/skulpt/microbit/mb.css | 12 ++++++++---- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/lib/skulpt/microbit/__init__.js b/lib/skulpt/microbit/__init__.js index 5c08745..43f1ddc 100644 --- a/lib/skulpt/microbit/__init__.js +++ b/lib/skulpt/microbit/__init__.js @@ -1424,9 +1424,9 @@ var $builtinmodule = function (name) { html += ' '; html += ''; html += '
'; - html += 'x: 0
'; - html += 'y: 0
'; - html += 'z: 9
'; + html += 'x: 0
'; + html += 'y: 0
'; + html += 'z: 9
'; html += ''; html += '

Gestures

'; html += 'up'; @@ -1723,20 +1723,37 @@ var $builtinmodule = function (name) { change: sliderChange }).on("slide", sliderChange); + var accel_mouse_timer = null; $('#accel_check :checkbox').change(function() { if (this.checked) { + var mousemove_enabled = false; const offset = $('#microbit').offset(); const height = $('#microbit').height(); const width = $('#microbit').width(); $('#microbit').mousemove(function (event) { + // debounce + if (!mousemove_enabled) { + return; + } // Micro:bit accel values are +/- 2000, let's do half for sensitivity const x = ((event.pageX - offset.left) / width) * 2000 - 1000; const y = ((event.pageY - offset.top) / height) * 2000 - 1000; mod.accelerometer.$d.data.x = x; mod.accelerometer.$d.data.y = y; + + $('#mb_acc_slider_x').slider('value', x); + $('#mb_acc_slider_y').slider('value', y); + $('#mb_acc_value_x').text(Math.floor(x)); + $('#mb_acc_value_y').text(Math.floor(y)); + mousemove_enabled = false; }); + + accel_mouse_timer = window.setInterval(function () { + mousemove_enabled = true; + }, 30); } else { $('#microbit').off('mousemove'); + window.clearInterval(accel_mouse_timer); } }); $('#mb_therm_slider').slider({ diff --git a/lib/skulpt/microbit/mb.css b/lib/skulpt/microbit/mb.css index 1f8b26d..adc3707 100644 --- a/lib/skulpt/microbit/mb.css +++ b/lib/skulpt/microbit/mb.css @@ -98,7 +98,7 @@ height: 100px; line-height: 100px; text-align: center; - vertical-align: center; + vertical-align: middle; background-image: url('compassbk.jpg'); position: relative; } @@ -119,6 +119,10 @@ display: inline-block; margin: 0px 10px 0px 10px; } +.mb_slider_acc { + display: inline-block; + min-width: 2.5em; +} #mb_gesture_list { border-style: solid; border-width: 1px; @@ -127,16 +131,16 @@ } .mb_current_gesture { color: #F00; - margin; 1em; + margin: 1em; } .mb_active_gesture_down { transform: rotate(180deg); } .mb_active_gesture_left, .mb_active_gesture_right { - -webkit-transform: rotateY(80deg);transform: rotateY(80deg); + transform: rotateY(80deg); } .mb_active_gesture_facedown { - -webkit-transform: rotateY(180deg);transform: rotateY(180deg); + transform: rotateY(180deg); } .mb_active_gesture_freefall { transform: scale(0.2,0.2);