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. このページには、ORPHE COREモジュールをjsでハックする方法、BLEに関する基本情報、サンプルコードが含まれています。ORPHE-CORE.jsではWEB Bluetooth APIを利用してBLE通信を利用するため、ブラウザとの互換性に注意してください。ORPHE-CORE.jsはmacOS、Windows、Linux、Android上のChromeブラウザのみで動作します。SafariやFirefoxでは動作しません。対応ブラウザの詳細は https://developer.mozilla.org/ja/docs/Web/API/Web_Bluetooth_API を参照してください。

Happy hacking with ORPHE CORE Module and javascript.

javascriptでORPHEコアモジュールをハックしよう！

Quick Start with p5.js 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.

ORPHE CORE JSをすぐに試してみたい場合は、下記リンクをクリックしてChromeブラウザでp5.jsを使ってください。プログラムを初めて実行する際には、ポップアップウィンドウを許可する必要があることを覚えておいてください。

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.

p5.jsは、アーティスト、デザイナー、教育者、初心者、その他のすべての人々にとって、コーディングをアクセス可能で包括的にすることに焦点を当てたクリエイティブコーディング用のJavaScriptライブラリです！ p5.jsは無料でオープンソースです。ソフトウェアとそれを学ぶためのツールは、誰にでもアクセス可能であるべきだと考えているからです。

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.

ビルドステップなしでCDN経由でORPHE-CORE.js Javascriptを含めることで、すぐに始めることができます。本格的な開発には、VSCodeを使って開発することをお勧めします。

Create a new index.html file in your project root. 適当なディレクトリを作成して、その中に新しいindex.htmlファイルを作成します。index.htmlの中身は以下の通りです。

            
            <!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. ローカルライブサーバー（Live Serverやphp -S localhost:8000など）を使って、ブラウザでindex.htmlを開いてください。その後、connectボタンをクリックしてORPHE COREモジュール（CR-2/CR-3）を接続します。以下のビデオのように、ORPHE COREモジュールが点灯するのを確認できます。
You can check running the test program on quick_start_with_vscode.html page, or VSCode like a below video quick_start_with_vscode.html ページでテストプログラムを実行するか、VSCodeで以下のビデオのように実行できます。

BLINKING LED 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!!

LEDを点灯させると、点滅させたくなりますよね。そういうことありませんか？このコードでLED点滅を実現しましょう。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.

下記のサンプルコードでは、ble.beginを呼び出す際に、通知タイプやセンサー感度を最初から設定する方法も記載しています。通常、begin()関数は引数なしで呼び出すことで使用できますが、詳細な仕様がある場合は参考にしてください。

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 core = new Orphe(0);
                  window.onload = function () {
                      core.setup();
                  }
                  async function mystart() {
                      await core.begin();
                      core.setLED(1, 0);
                      let flg = true;
                      setInterval(function () {
                          if (flg == true) core.setLED(0, 0);
                          else core.setLED(1, 0);
                          flg = !flg;
                      }, 1000);
                  }
              </script>
          </body>
          </html>

CDN Link

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

参考までに、ORPHE-CORE.jsのCDNファイルを以下に示します。

CoreToolkit.js CDN file.

CoreToolkit.jsのCDNファイルを以下に示します。CoreToolkit.jsについては下のQuick Start with CoreToolkit.jsを参照してください。

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.

ORPHE-CORE.jsは数行のコードで動作させることができますが、センサー感度やデータ受信形式などの詳細な設定を行うのはやや手間がかかるかもしれません。coretoolkit.jsを使うと、1行のコードでモジュールの設定を含む統合UIを追加することができます。ユーザ体験を考慮したアプリケーションを開発する際に便利かもしれません。

      
      <!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 () {
                  cores[0].setup();
                  buildCoreToolkit(document.querySelector('#toolkit_placeholder'), '01', 0, 'SENSOR_VALUES');
                  
                  cores[0].gotAcc = function (acc) {
                  }
              }
          </script>
      </body>
      </html>

ORPHE-CORE Workshop

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

ORPHE COREを使ったプログラミングワークショップがyoutubeで公開されています。楽しんでください！

ORPHE-CORE.js Tutorial

Click here for a Tutorial page where you can learn ORPHE CORE js step by step. have a fun, enjoy!!

ORPHE-CORE.js を手順を追って学習できるTutorialページをこちらで公開しています。楽しんでください！

Application Examples

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

ORPHE-CORE.jsを使ったいくつかの例を用意しました。すべての例は/ORPHE-CORE.js/examplesディレクトリにあります。

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. 例えば、testというディレクトリを作成します。
Open "test" directory with VSCode VSCodeで"test"ディレクトリを開きます。
Open Terminal on VSCode VSCodeでターミナルを開きます。
type "git clone https://orphe-oss.github.io/ORPHE-CORE.js.git" on the terminal. ターミナルに"git clone https://orphe-oss.github.io/ORPHE-CORE.js.git"と入力します。
Open ORPHE-CORE.js/examples/LIGHT/index.html via VSCode explorer. VSCodeのエクスプローラーからORPHE-CORE.js/examples/LIGHT/index.htmlを開きます。
Install "live server" extension "live server"拡張機能をインストールします。
Click "Go Live" button at the bottom of VSCode window VSCodeウィンドウの下部にある"Go Live"ボタンをクリックします。

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.

ExamplesセクションにORPHE風の例を提供していますが、ORPHE-COREを使って独自のアプリケーションを作成したい場合は、よりシンプルな例があると良いでしょう。このセクションでは、Starter Templatesとして、非常にシンプルな動作する例を提供します。すべてのスターターテンプレートは/ORPHE-CORE.js/starter-templates/ディレクトリにあります。

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 ]

Creative Examples

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

クリエイティブコーダーですか？そうでない場合でも、遊び心のある例を試してみませんか。グラフィック、サウンドがあなたのORPHE-COREをカラフルで遊び心のあるものにします！

UDON: うどんふみふみゲーム！Step on the ORPHE CORE and stretch the udon out thinly! [ DEMO ] [ Source ]
MOVEYOURFEET: 足バタバタゲーム⭐︎ Move your feet and exercise! [ DEMO ] [ Source ]
PINGPONGGAME: ピンポンゲーム This is a 3-point ping pong game using ORPHE CORE! [ DEMO ] [ Source ]
ORPHE DRUM: ドラムゲーム This is a DRUM SAMPLER using ORPHE CORE! [ DEMO ] [ Source ]
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.

以下はjsdocによって生成されたORPHEクラスのAPIリファレンスです。

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.

これまでの内容を使って、ORPHE COREモジュールに簡単かつ迅速にアクセスできるようになりました。それでも足りませんか？このセクションでは、Electronを使ってORPHE COREモジュールをさらに楽しくします。

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.

Electronは、JavaScript、HTML、およびCSSを使用してデスクトップアプリケーションを構築するためのフレームワークです。ChromiumとNode.jsをバイナリに埋め込むことで、Electronは1つのJavaScriptコードベースを維持し、Windows、macOS、Linuxで動作するクロスプラットフォームアプリケーションを作成できます。ネイティブ開発の経験は必要ありません。

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

Examples

OSC HUB

source