Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accelerometer and Gyroscope support on mobile devices #50

Merged
merged 15 commits into from
Oct 24, 2024
Merged

Accelerometer and Gyroscope support on mobile devices #50

merged 15 commits into from
Oct 24, 2024

Conversation

mulshine
Copy link
Collaborator

@mulshine mulshine commented Oct 18, 2024 •
edited
Loading

Accel and Gyro classes implemented for WebChucK to be used on mobile devices. Both modeled after HID,Accel
and Gyro interface with browser/JS "devicemotion" and "deviceorientation" events, respectively, and allow you to listen for and receive AccelMsg's or GyroMsg's inline with WebChucK code, providing x, y, z data in each case.

Gyro gy;
GyroMsg msg;

0 => int device;

// open gyro 
if( !gy.openGyro( device ) ) me.exit();
<<< "gyro '" + gy.name() + "' ready", "" >>>;

<<< "only on mobile" >>>;

// infinite event loop
while( true )
{
    // wait on gyro event
    gy => now;

    // get one or more messages
    while( gy.recv( msg ) )
    {
        // print gyro values
        <<< msg.getGyroX() + " " + msg.getGyroY() + " " + msg.getGyroZ() >>>;
    }
}

Big thanks to @terryzfeng for assistance in the architecture here!

terryzfeng
terryzfeng approved these changes Oct 23, 2024
View reviewed changes
Copy link
Member

@terryzfeng terryzfeng left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! If you could fix the enableGyro/Accel stuff that'd be great! Others are just some small documentation/nitpicks ;)

Thanks for making these two classes happen Mike!

src/gyro/Gyro.ts Outdated


/**
* Introducing Gyro (gyroerometer, on mobile) support for WebChucK. Gyro wraps
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Do you mean gyrometer?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah yes, gyroscope*

src/gyro/Gyro.ts Outdated
* iOS devices require that the web developer ask permission from the user to access sensors after a button push. This looks like:
*
* ```ts
* import { Chuck, Gyro} from '../webchuck/src/wc-bundle.js';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When mentioning importing for documentation, you can just say import { Chuck, Gyro } from "webchuck". The location is different on every platform so it's easier to keep it general.

Nit: Can you make sure there's a opening and closing space between { Chuck, Gyro }

src/gyro/Gyro.ts Outdated
/**
* Initialize Gyro functionality in your WebChucK instance.
* This adds a `Gyro` and `GyroMsg` class to the ChucK Virtual Machine (VM).
* Gyroerometer event (DeviceMotionEvent) listeners are added if `enableGyro` is true (default).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Gyrometer

src/gyro/Gyro.ts Outdated
* ```
*/
enableGyro() {
// consider using "deviceorientationabsolute"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did we want to still consider this functionality down the line?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think so. It isn't supported on some browsers, and seems deviceorientation is the more supported variety.

src/gyro/gyroCk.ts
return deviceName;
}

function int openGyro(int num) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just thinking out loud for the future here, no changes requested, but perhaps in the future, we should actually check if the gyro is working via js lol :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that would be smart. Still some things to sort or keep an eye on there.

test/chuckTest.js
@@ -1,7 +1,7 @@
//=======================================================================
// WebChucK Test Suite
//=======================================================================
import { Chuck, HID } from '../src/wc-bundle.js';
import { Chuck, HID, Gyro, Accel} from '../src/wc-bundle.js';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: import bracket spacing

src/accel/accelCk.ts
if (num < 0) {
false => active;
} else {
"js DeviceMotionEvent" => deviceName;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Is the device name js DeviceMotionEvent or more like js DeviceMotionSensor?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think there is a specific device name... it's just representing access to device orientation and acceleration. I made up this shorthand reference... we could just call it "accelerometer" or "gyroscope" as that is essentially what we are accessing. What do you think?

src/accel/Accel.ts Outdated
await accel.theChuck.runCode(Accel_ck);

// Enable mouse and keyboard
accel.enableAccel();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line of code should only be run when enableAccel is true.

src/gyro/Gyro.ts Outdated
await gyro.theChuck.runCode(Gyro_ck);

// Enable mouse and keyboard
gyro.enableGyro();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line of code should only be run when enableGyro is true.

src/accel/Accel.ts Outdated
* iOS devices require that the web developer ask permission from the user to access sensors after a button push. For example:
*
* ```ts
* import { Chuck, Accel} from '../webchuck/src/wc-bundle.js';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: import bracket spacing and can just make it import { Chuck, Accel } from "webchuck" like above

@terryzfeng
Copy link
Member

LGTM!

@terryzfeng terryzfeng merged commit 0919c85 into dev Oct 24, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@terryzfeng terryzfeng terryzfeng approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@mulshine @terryzfeng