Webアプリの使い方

English Page

Glow Rabbit用Webアプリの使い方

対応デバイス

以下のデバイスとブラウザに対応します

Windows PCの Google Chromeブラウザ
Mac OSの Google Chromeブラウザ
Android の Google Chromeブラウザ
Chrome Book の Google Chromeブラウザ
Linux の Google Chrome ブラウザ（ChromeでBluetoothが使えるように設定が必要）

注）iPhoneとiPadでは使えません
iPadとiPhoneをお使いの方は別途専用アプリをお使いください

動作確認デバイス

Android Phone Google Pixel 6 pro
Android Phone moto G power 5G
Mac Book Pro
Windows
MX Linux
Android Tablet ALLDOCUBE iPlay 60 Mini
Android Tablet ALLDOCUBE iPlay 60 Mini Pro
Lenovo Chromebook Flex 3i

Webアプリへのアクセス

Google Chromeブラウザを立ち上げ以下のURLにアクセスします。
ブックマークしておくと便利です

タブレットまたはPCでの使用を推奨しますがスマホでも使用できます。
スマホで使用する場合は画面が小さいので横位置で使用することをおすすめします。

https://www.gadgetlabo.net/glowweb

システム構成

Glow Rはトラックなどに設置されるデバイスでGlow Cからのコマンドにより適切なタイミングで点灯します
Glow CはGlow RをコントロールするセンターデバイスでPCまたはタブレットとBluetoothで通信します
WebアプリはGlow Rの点灯タイミングなどの設定をGlow Cに送ります
本マニュアルではこのWebアプリの使い方を説明します

アンドロイドデバイスをお使いの方へ

アンドロイドのスマートフォンやタブレットをお使いの方はWebアプリをブラウザで開いた状態でブラウザ右上の３点マークをクリックして表示されるプルダウンメニューから「ホーム画面に追加」をクリックしてください。

ホーム画面に Glow Rabbitのアイコンが表示されますので次回からはこのアイコンをタップするだけで通常のアプリケーションのように使えます。

トップページの説明

英語・日本語の切り替え
マニュアルページ
スキャンボタン
切断ボタン
接続状態
各ブロックへのジャンプ
トップページに戻る
機能メニュー
通常は図のようにたたまれています。
この部分をクリックすると機能が表示されます。
もう一度クリックするとたたまれます。
ステータス表示

基本的な使い方

Glow Cデバイスへの接続

Glow C デバイスの電源を入れます
スキャンボタンをクリックします
Bluetooth機能へのアクセス確認が表示されますのでアクセスを許可してください。
（初回アクセス時のみ）
周辺にあるGlow Cデバイスが表示されます
接続したい Glow C デバイスを選択しペア設定ボタンをクリックします
接続が成功するとボタン下にConnectedと表示されます。
使い終わったら「切断」ボタンをクリックするかブラウザをリロードするかブラウザを閉じると通信は切断されます

Glow R デバイスの登録

Glow R を設置し、点灯したい順番で背面の液晶部分をクリックします
すべての Glow R を登録し終えたらデバイスデータの保存のボタンをクリックするとあとから再利用できて便利です

LEDのテスト

LEDテスト点灯を開き、1をクリックするとカラーピッカーが開きますので色を指定します。
2の点灯パターンを以下の４種類の中から選択します。
- 1秒間点灯
- 2秒間点灯
- 1秒間ゆっくり点灯
- 2秒間ゆっくり点灯
3のLED点灯ですべてのGlow RのLEDが指定された色とパターンで点灯します

ランナーの設定

各ランナーの色を設定します
各ランナーのLEDの点灯パターンを設定します
各ランナーの点灯間隔を設定します
各ランナーの１周のラップタイムを設定します
設置されたデバイスの数を設定します
このボタンで各ランナーの設定をGlow Cに送信します
「計算」をクリックすると5の設置されたデバイス数と4のラップタイムから自動的に計算されて点灯間隔が設定されます
全ランナーボタンをクリックするとすべてのランナーの設定が Glow Cに送信されます
ステータスが表示されます

スタート

各ランナーを８つのグループに設定できます
各グループごとに所属させたいランナーのチェックボックス(2)にチェックを入れます
ONの部分(1)にチェックが入っているグループのみが有効です。無効にしたい場合はここのチェックを外します
3でスタートする遅れ時間を設定します
6のスタートボタンが押されたあと、ここに設定された時間後にスタートします
4のインターバルは最後のデバイスを光らせたあとのインターバル時間を秒で設定します
5で点灯開始するデバイスの番号を入力します。通常は最初から光らせますので１のままにしてください
6のスタートボタンでスタート、7のストップボタンでストップします

その他の機能の詳細説明

デバイスデータの保存

データの保存
Glow C を接続後、Glow Rの背面ボタンを押して登録するのですがそのGlow Rのデバイス情報を保存します

データの読み込み

ファイルの選択
デバイスデータの保存で保存した Glow Rのデバイス情報を読み込みます。これによって同じデバイスを使う場合、登録しないですぐに使うことができます

デバイスの番号セット

ナンバリング
データの読み込みで読み込んだデバイス番号をGlow Rの背面液晶に表示しさらにテスト点灯します。
デバイスの編集後にこのデバイスの番号セットを行うことで正しく設定されたかの確認ができます

デバイスの編集

デバイスの編集
登録されたデバイスをデバイス番号で削除、追加、入れ替えができます
ただしく設定されたかどうかはデバイスの番号セットで確認できます

練習メニュー

設定データの保存

設定データの保存
練習メニューで設定した各ランナーの設定と対象ランナーのスタート＆ストップの設定データをすべて保存します

設定データの読み込み

設定データの読み込み
保存した設定データを読み込み設定に反映します

ランナーのペース調整

ペース変更スライドバー
ランナー毎のペースを変更します
このバーを左に動かすと最大１秒間点灯間隔を短くできます。右に動かすと最大１秒間点灯間隔を長くできます
このペース変更は走っている最中にできます
点灯間隔の変更値
1 のバーを動かすことで点灯間隔がどれだけ変わったかが表示されます
一時停止スイッチ
ランナー毎に一時停止と再開ができます。
このスイッチをOFFにすると一時停止します。
もう一度ONにすると再開できます

区間タイムの設定

区間を４区分に分けた場合と５区分に分けた場合のそれぞれのセクションの点灯間隔を変化させることができます

100m走の場合は20mづつ5区間に、400m走の場合は100mづつ4区画に分けるといった使い方ができます

(1) にはそれぞれの区画の通過タイムを入力します。デフォルトでは高校生男子の大会での記録を入れてあります。

(3)のランナーを選択し、(5)の設定ボタンをクリックすると(2)にそれぞれの区画のGlow Rの点灯間隔時間が計算され(8)にグラフ表示されます

(6) (7) のスタートストップボタンでスタートおよびストップします

(8) のグラフを見ると最初の区間で加速、そのままの速度を維持し最後の区間で少し失速している様子がわかります

オプションの通過タイム測定ユニットを使った場合、(4)の通過タイムの測定にチェックマークを入れるとスタートボタンを押すと同時に各区間の通過タイムが自動的に測定され(1)に記入されます

区間タイムの保存

すべてのランナーの設定した区間タイムは保存していつでも呼び出すことができます。

ただし、ランナー毎に設定ボタンを押して確定したデータのみが保存されます。

たとえば、ランナー１を選択し、各通過タイムを設定したあと、必ず設定ボタンを押して確定してください。

確定後、ランナーを切り替え同じように通過タイムを入力して設定ボタンを押していきます。

もし設定ボタンが押されていない場合、そのランナーのデータは保存対象になりません、

４区分の場合と５区分の場合のデータは一緒に保存されます。

外部トリガー

Glow Rabbitのプログラムのスタート・ストップを外部から自由にコントロールできる機能です。
センターデバイス（M5StickC Plus2）のI2C用コネクターに接続してGPIOを制御するだけで様々な入力に応じてプログラムをスタート・ストップすることができます

注意）センターデバイスのファームウェアは Ver.2.21以上が必要です

接続

センターデバイス（M5StickC Plus2）のI2C接続コネクターにM5StickC Plus2のようなI2C接続コネクターを持った外部のデバイスを接続します。

接続にはGrove用ケーブルを使用します
SeeedStudio Grove

M5Stick社のAtomS3 Liteを接続した状態です。
他にも無改造でGrove用ケーブルで接続できるデバイスは、M5StickS3、AtomS3R、Atom Lite、Atom Matrixなどがあります
M5Stack

制御方法

センターデバイスの制御方法はシンプルです。
センターデバイスのI2C接続コネクターに書かれているG32とG33を制御するだけです。
G32とG33は内部でプルアップされていますので、それぞれをGNDに接続することでプログラムをスタート・ストップすることができます。

G32 –> GND : Start
G33 –> GND : Stop

GNDに接続すると動詞にスタート・ストップしますがエッジを検出しているだけですのでGNDへの接続はすぐに解除してください。

サンプルコード

M5StickC Plue2を使った場合のサンプルコードを示します

ロジックはアクティブLowになっています。
（外部スイッチで制御するときにスイッチでGNDに接続するだけで使えるようにしています）

#include "M5StickCPlus2.h"

const int StartPin = 32; // 32番ピンを出力に設定
const int StopPin = 33; // 33番ピンを出力に設定

void setup() {
    auto cfg = M5.config();
    StickCP2.begin(cfg);
    StickCP2.Display.setRotation(0);
    StickCP2.Display.setTextSize(2);
    StickCP2.Display.setTextColor(GREEN);
    StickCP2.Display.println("Glow Cont");

    pinMode(StartPin, OUTPUT); // ピンを出力モードに設定
    pinMode(StopPin, OUTPUT); // ピンを出力モードに設定
    digitalWrite(StartPin, HIGH);
    digitalWrite(StopPin, HIGH);
}

void loop() {
    StickCP2.update();
    if (StickCP2.BtnA.wasPressed()) {
        digitalWrite(StartPin, LOW);
        StickCP2.Display.println("Start");
    }
    if (StickCP2.BtnA.wasReleased()) {
        digitalWrite(StartPin, HIGH);
    }
    if (StickCP2.BtnB.wasPressed()) {
        digitalWrite(StopPin, LOW);
        StickCP2.Display.println("Stop");
    }
    if (StickCP2.BtnB.wasReleased()) {
        digitalWrite(StopPin, HIGH);
    }
}

加速度センサーと組み合わせたり、様々なセンサーと同期するプログラムを自由に作成することができます