前回の記事で紹介した通り、Even Realities G2のSDKが公開されています。
SDKのドキュメントには、アプリの開発方法、APIの仕様などが書かれていますし、サンプルアプリのソースコードも紹介されています。
ただ、すでに色々な機能が入っているため、ただ「〜を実施したい」と思った時、改修イメージが付きづらいと思いました。
そこで、文字だけ表示、画像だけ表示のように、いわゆるHello World的なコードを作って使い方をまとめてみました。
1. 環境の作り方
こちらの公式ドキュメントを参考にします。
github.com
App structureという箇所に、このように書かれています。なので、まずは同じようにフォルダ、ソースコードを作ります。
my-app/
index.html <- entry point
package.json <- dependencies and scripts
vite.config.ts <- dev server config
src/
main.ts <- app bootstrap
styles.css <- stylesheet
index.htmlはスマートフォン側の画面を構成します。たとえば、スマートフォン側で画像を読み込む処理を作りたいときは、index.htmlにinputタグをつけます。
Even G2側の処理は、実質的にsrc/以下のtsファイルで書くことになります。
最低限の処理を書いた場合です。
index.html gist.github.com
vite_config.ts gist.github.com
package.json
2. GitHubリポジトリにあげたプロジェクトの説明
今回、以下のようなリポジトリを準備しました。
３つの機能を確認できるようにしています。実機の表示は撮影しづらいので、シミュレータのスクリーンショットで説明します。
シミュレータは２つの画面があります。１つはスマートフォン側でindex.htmlの内容です。
もう１つはEven G2側の画面です。main.tsの処理に相当します。
- テキストのみを表示 (
1_display_text)
- 画像のみを表示 (
2_display_image)
(2/23時点ではEven G2では画像が表示されない)
3/1 画像が表示されるようにしました。bmpに変換してから200px x 100pxの範囲で表示する必要がありました。
- タッチセンサー操作を検出 (
3_touch_sensor_operation)
リポジトリの構成はこのようになっています。1_display_text, 2_display_image, 3_touch_sensor_operationは独立しているので、不要なものを削除しても問題ありません。
EvenHub_beta_HelloWorld/
1_display_text_index.html
2_display_image_index.html
3_touch_sensor_operation_index.html
package.json
vite.config.ts
src/
1_display_text
main.ts
styles.css
2_display_image
main.ts
styles.css
3_touch_sensor_operation
main.ts
styles.css
環境構築、シミュレータ/ Even G2実機それぞれの動作確認方法などはReadme.mdに書いてあります。
また、本日時点では2_display_imageの実機だけが動作しませんでした。理由が分かり次第修正します。
3. おわりに
基本的な処理を作る方法が見えたので、好きなことができそうです。
一方、今回解決できなかった画像の表示 (2_display_image) については、解決できたらGitHubリポジトリを更新予定です。
->3/1 画像が表示できるようにGitHubリポジトリを更新しました。
