LED Tape UX/UI

画面構成

２ページで構成される。

各ページは画面全体を占めるように意匠する。

１ページ目はESP装置のIPアドレス入力画面。

IPv4アドレスを入力する、４数値入力欄と、決定ボタンで構成される。

アドレス入力はキーボードまたはキーパッドによって行う。

決定ボタンにより２ページ目に遷移する。決定ボタン押し下げによりESP装置との対話が行われ接続の合否を調べる。接続に成功すれば２ページ目に遷移する。失敗した場合はその旨を知らせて同画面に留まる。

２ページ目はLEDテープ動作変更ページ。

ページ上、上から３箇所に別れる。上から、色と輝度選択、点灯個数、移動速度。

いずれの箇所も操作は横方向のスワイプまたはドラッグで値を決定する。なお、色と輝度選択は上下ドラッグまたはスワイプで輝度の設定となる。

１ページ目から遷移してくると、つまり２ページ目が始まると、LEDはデフォルト値を用いて動作を開始する。

LEDテープ動作中に３箇所の操作が可能で、LEDテープの動作を停止したり開始したりと行った操作はなく、上３箇所の操作が直ちにLEDテープに伝わり、動作が変更される。

LEDテープの動作とは、点灯個数個の色と輝度のLEDをLEDテープ上で進行と逆行を繰り返すものである。

色と輝度選択
- 色：左から右に…彩度で変化？どうしよう…RGBの帯を作るか…三箇所別にスワイプは面倒だ…
- 輝度：上下に0~255を変更。下端が255で明るく、上端が0で真っ暗…逆がいいか？255だと明るすぎだが…たしか、15くらいで十分な輝度だったはず
点灯個数
- 最低個数：1
- 最大個数：32
移動速度
- 左が一番遅くて、右が一番早い