ORPHE-CORE.js Document

ORPHE-CORE.js

This page contains information on how to hack the ORPHE CORE module with js, along with basic information on BLE and sample code. ORPHE-CORE.js uses BLE, so please be sure to check its compatibility with a CHROME browser. The environment that has been tested in this document is , Chrome browser on macOS, Windows, Linux and Android.

[known issue] For AndroidOS Users: In the case of an example that uses multiple graphs displayed by chartjs, the BLE data update speed may become slow due to performance degradation.

[known issue] For AndroidOS Users: ANALYSIS and RAW Starter Template won't work.

Happy hacking with ORPHE CORE Module and javascript.

Quick Start with p5.js

If you want to try ORPHE CORE JS very quickly, open the link below in your chrome browser and use p5.js. Please be sure to remember that you will need to allow pop-up windows when you run the program for the first time.

P5.js Quick Start with ORPHE-CORE.js

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.

from top page https://p5js.org/

Quick Start with VSCode

Get started by including ORPHE-CORE.js Javascript via CDN without the need for any build steps.

Create a new index.html file in your project root.

            
            <!doctype html>
            <html lang="en">
              <head>
                <meta charset="utf-8">
                <title>ORPHE CORE JS DEMO</title>
              </head>
              <body>
                <h1>Hello, ORPHE!</h1>
                <button onclick="ble.setLED(1,0);">connect</button>
                <script src="https://cdn.jsdelivr.net/gh/Orphe-OSS/ORPHE-CORE.js/js/ORPHE-CORE.js"
                crossorigin="anonymous"></script>
                <script>
                var ble = new Orphe(0);
                window.onload = function () {
                  // ORPHE CORE Init
                  ble.setup();
                }
                </script>
              </body>
            </html>

Check the index.html on your browser via local live server, such as Live Server, php -S localhost:8000, etc. Then click connect button and connect ORPHE CORE Module (CR-2). You will see light emitting on your ORPHE CORE Module like a below video.
You can check running the test program on quick_start_with_vscode.html page, or VSCode like a below video

BLINKING LED

If you make LEDs glow, you'll be tempted to make them blink.Don't you ever do that? Let's make LED BLINKING happen with this code. Hello ORPHE-CORE World!!

The sample code below also describes how to set the notificaiton type and sensor sensitivity from the beginning when calling ble.begin. Normally, the begin() function can be used by calling it without any arguments, but if you have detailed specifications, please refer to it.

API Reference:

setLED
begin

        
          <!doctype html>
          <html lang="en">
          <head>
              <meta charset="utf-8">
              <title>ORPHE CORE JS DEMO</title>
          </head>
          <body>
              <h1>Hello, ORPHE!</h1>
              <button onclick="mystart()">connect</button>
              <script src="https://cdn.jsdelivr.net/gh/Orphe-OSS/ORPHE-CORE.js/js/ORPHE-CORE.js" crossorigin="anonymous"></script>
              <script>
                  var ble = new Orphe(0);
                  window.onload = function () {
                      ble.setup();
                  }
                  async function mystart() {
                      await ble.begin();
                      // alternative begin function call
                      // ANALYSIS, RAW, ANALYSIS_AND_RAW
                      // await ble.begin('ANALYSIS', { range: { acc: 16, gyro: 2000 } }); 

                      ble.setLED(1, 0);
                      let flg = true;
                      setInterval(function () {
                          if (flg == true) ble.setLED(0, 0);
                          else ble.setLED(1, 0);
                          flg = !flg;
                      }, 1000);
                  }
              </script>
          </body>
          </html>

CDN Link

As reference, here is ORPHE-CORE.js CDN file.

CoreToolkit.js CDN file.

Quick Start with CoreToolkit.js

ORPHE-CORE.js can be run with a few lines of code, but it can be somewhat cumbersome to configure detailed settings such as sensor sensitivity and data reception format. coretoolkit.js can add an integrated UI, including module settings, with a single line of code. This may be useful when developing large scale applications.

      
      <!doctype html>
      <html lang="en">
      <head>
          <meta charset="utf-8">
          <title>CoreToolkit.js</title>
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
              integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
      </head>
      <body>
          <h1>Hello, CoreToolkit.js</h1>
          <div id="toolkit_placeholder"></div>
          <script src="https://cdn.jsdelivr.net/gh/Orphe-OSS/ORPHE-CORE.js/js/ORPHE-CORE.js"
              crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/gh/Orphe-OSS/ORPHE-CORE.js/js/CoreToolkit.js" crossorigin="anonymous"
              type="text/javascript"></script>
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"
              integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk"
              crossorigin="anonymous"></script>
          <script>
              window.onload = function () {
                  // ORPHE CORE Init; bles[0] and bles[1] are used by CoreToolkit.js
                  bles[0].setup();
                  buildCoreToolkit(document.querySelector('#toolkit_placeholder'), '01', 0, 'RAW');
                  // alternatibe begin function call
                  // buildCoreToolkit(document.querySelector('#toolkit_placeholder'),
                  //     '01', // name to be shown on the UI
                  //     0, // index of bles array
                  //     'ANALYSIS', // ANALYSIS, RAW, ANALYSIS_AND_RAW
                  //     { range: { acc: 8, gyro: 1000 } } // sensor range
                  // );
                  
                  bles[0].gotAcc = function (acc) {
                  }
              }
          </script>
      </body>
      </html>

ORPHE-CORE Workshop

Programming workshops using ORPHE CORE are available on youtube. have a fun, enjoy!!

Application Examples

We have prepared several examples using ORPHE-CORE.js. All examples are located under the /ORPHE-CORE.js/examples directory.

INFORMATION: shows device information [ DEMO ][ source ]
LIGHT: Controls LEDs on ORPHE CORE. [ DEMO ] [ source ]
VIEW: viewer for step analysis/sensor values [ DEMO ][ source ]
VISUALIZE: Plot viewer for step analysis/sensor values [ DEMO ][ source ]
FOOT ANGLE: Explanation page for acquiring landing angles [ DEMO ][ source ]
PRONATION: Explanatory page on acquiring pronation Angel [ DEMO ][ source ]
AIR WALKER: a workout dashboard for an air walker [ DEMO ][ source ]
POSE: a MediaPipe Pose with ORPHE CORE [ DEMO ][ source ]
OH1: OH1 Heart Rate with ORPHE CORE [ DEMO ][ source ]
FOOT ANGLE: Visualization and sonification of foot angle data [ p5.js ]
CORETOOLKIT STARTER: template of starting with CoreToolkit.js which makes coding faster!! [ DEMO ] [ p5.js ]

Play LIGHT example with VSCode

Create a directory, test or something like that.
Open "test" directory with VSCode
Open Terminal on VSCode
type "git clone https://orphe-oss.github.io/ORPHE-CORE.js.git" on the terminal.
Open ORPHE-CORE.js/examples/LIGHT/index.html via VSCode explorer.
Install "live server" extension
Click "Go Live" button at the bottom of VSCode window

Starter Templates

Although we have provided an ORPHE-like example in the Examples section, it would be better to have a simpler example if users want to create their own applications using ORPHE-CORE. In this section, as Starter Templates, we provide a very simple working example without css. All starter templates are located under the /ORPHE-CORE.js/starter-templates/ directory.

TWO COREs: template of connecting two core modules [ p5.js ]
QUATERNION: {w, x,y,z} [ DEMO ] [ Source ] [ p5.js ]
EULER: {pitch,roll,yaw} [ DEMO ] [ Source ] [ p5.js ]
ACCELEROMETER: {x,y,z} [ DEMO ] [ Source ] [ p5.js ]
GYRO: {x,y,z}[ DEMO ] [ Source ] [ p5.js ]
STEPS: {value} number of steps [ DEMO ] [ Source ] [ p5.js ]
GAIT/DURATION: {value} gait type, deirection, distance, standing and swing phase duraion [ p5.js ]
STRIDE: {x,y,z} [ DEMO ] [ Source ] [ p5.js ]
PRONATION: {x,y,z} [ DEMO ] [ Source ] [ p5.js ]
LIGHT [ DEMO ] [ Source ] [ p5.js ]
ANALYSIS and RAW: template of starting 'ANALYSIS' and 'RAW' notify. [ DEMO ] [ p5.js ]
ALL GAIT INFORMATION: {value} gait, stride, pronation etc.. [ p5.js ]
ALL GAIT AND SPEED: {value} Calculate duration, cadence, pace, and speed from gait and stride [ p5.js ]
GAIT AND RECORD: {value} record gait data and make json file [ p5.js ]
ALL RAW AND GAIT DATA: {value} realtime RAW and gait analysis [ p5.js ]

Playful Examples

Are you a creative coder? If so or not, why don't you try the playful examples. Graphics, Sounds makes your ORPHE-CORE colorful and playful!!

3DBOX: Control a 3D box with ORPHE CORE Module [ p5.js ]
ORPHEMIN: a theremin like musical instrument with ORPHE CORE Module [ p5.js ]
ZANGEKI: slashing sword sound effects with ORPHE CORE Module [ p5.js ]
ORPHE SHOOTING: Let's make a simple shooting game and operate it with ORPHE! [ p5.js ]

Technical Examples

Are you interested in gesture recognition, frequency analysis, or something more engineering and difficult? Then give it a try.

FFT: X-axis motion FFT [ p5.js ]
PLOT: visualize your ORPHE CORE sensor values with Chart.js [ p5.js ]
RMS: recognizes swipe gesture using the RMS (Root Mean Square) method with ORPHE CORE module. [ p5.js ]
DTW: recognizes swipe gesture using DTW (Dynamic time warping) method with ORPHE CORE module. [ p5.js ]

API

Here is a ORPHE class API reference which is generated by jsdoc.

API Reference for ORPHE-CORE.js

Electron

Using the previous contents, you already have easy and speedy access to the ORPHE CORE module. Still not enough? In this section, we will use Electron to make the ORPHE CORE module even more fun.

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required.

What is Electron? https://www.electronjs.org/docs/latest/

Examples

OSC HUB

source