Akerunをクリスマス仕様にする（前編）デザイナーとの懸け橋ツールで捗った話

こちらは Akerun Advent Calendar 2017の記事です。

聖なる夜にこんばんは。 yuyakmです。

クリスマスということで、日々接するAkerun Proをクリスマス仕様にしてみたいと思います。

今回は、クリスマスといえばイルミネーションといういことで、LEDパターンを変えてみたいと思います！

製品の点灯パターンについてはこちらの動画をご覧ください。

youtu.be

Akerun ProのLED仕様

①フルカラーのLEDを4灯搭載

左上                   右上
LED1(R, G, B)         LED4(R, G, B)

左下                   右下
LED2(R, G, B)         LED3(R, G, B)

②各 RGBは8bit(0-255)の幅で明るさを設定することができる

ディスプレイのように任意の色を表現することができます。

スペック上は、256 * 256 * 256 = 16,777,216通りの色が表現できます。

③4灯のLEDの色を個別に更新できる

例えば、20msecおきに色を更新することでリフレッシュレートが50Hzのディスプレイのようにふわっと点灯させたり色をじわーっと変える表現ができます。

点灯パターンを考える

今回は、3つの点灯パターンをこんな感じに変更してみたいと思います。

1. 接続時

→赤・緑のクリスマスカラーでふわっと点灯

2. 施錠時

→赤・黄のイルミネーション風点滅をした後に、サンタ帽イメージカラー（赤・白）で点灯して消える

3. 解錠時

→緑・黄のイルミネーション風点滅をした後に、もみの木イメージカラー（緑・白）で点灯して消える

点灯パターンをつくってみる

@ishturk さんが便利なツールをつくってくれているのでそれを使ってつくります。 タイトな開発スケジュールの中、こういう社内連携用の機能もサクッとつくって提案してくれてホント最高。 f:id:photosynth-inc:20171224220613j:plain

点灯パターン検討の流れ

1. スプレッドシートでデータ作成

自動的にPro用データに変換してくれる！

2. 作成されたPro用データを専用Proに流し込む

確認＆調整がエンジニアなしでできる！

3. 完成したら@ishturkさんにOTAイメージをつくってもらって実機で運用

いつも近くにいて一瞬でやってもらえるのもありがたい…

作成データ例

こんな感じでセルに値を入れるだけでできます。

リフレッシュのインターバル時間も入力できるので表現の幅が広がる～ f:id:photosynth-inc:20171224220619j:plain

点灯させてみた

こんな感じになりました

youtu.be

けっこうクリスマスっぽい！雪が積もったもみの木（解錠）とサンタ帽（施錠）に見えないこともない。

色の変化のスピードや微妙なグラデーション変化を何度かトライして改善しました。

また、今回の試行錯誤で24Hz(fps)以下にすると映像と一緒で明確にカクカク感を感じることを実感。

社内向けに適当に作った割には良いのではないでしょうか。

ただし施錠パターンについては、最初はサンタ帽に見えたけど今はモンスターボールにしか見えない…

製品でLED点灯パターンを考える上でのTIPS

今回はネタ記事ですが、TIPS的なことをざっくり紹介します。

そもそもLEDに頼りすぎない

LEDのインジケーターで表示できる情報量には限りがあるので、できるだけシンプルな方が良いです。 アクセシビリティの観点で、色がわからない・光が見えない人でも使えることを考慮しましょう。

微妙な色の違いはユーザーは気づかない前提で考える

例えば、赤と朱色で意味が違うことに気づいてもらうのは難しいです。色にメッセージ性を持たせたい場合は、明確に色が違うと感じるレベルで色を変えると良いです。

色のパターン例

LEDで色に意味を持たせる場合の色の選び方を紹介します。例えば、電話で使い方を説明する場合に言葉で説明しても認識がずれにくいと思います。

＜基本＞
  • ◯赤（R:100%, G:0%, B:0%）
  • ◯緑（R:0%, G:100%, B:0%）
  • ◯青（R:0%, G:0%, B:100%）
  • ◯黃（R:100%, G:100%, B:0%）
  • △紫（R:100%, G:0%, B:100%）（赤紫や青紫に偏ることがあるので避けた方が無難かも）

これをベースにしてデザイナーの意図する色に微調整すると良いのではないでしょうか。

＜NG＞
  • ✕白（R:100%, G:100%, B:100%）

→RGBのそれぞれを100%で点灯しても人間の視覚上白に見えるバランスで点灯するとは限らないため 環境光の色温度等によっても影響を受ける（青白く見えたりオレンジ色に見える）ため

  • ✕シアン（R:0%, G:100%, B:100%）

→青と混同されるおそれがあるため

※勿論、グラデーションの表現をしたり微妙な色味を調整するのはOKです

モニタのRGBとLEDの色は違うと認識する

RGBの値が同じなら同じ色になるわけではありません。AkerunProでは実機の発色を見ながら調整しました。

個体差による色のバラつきがあることを認識する

モノなので多かれ少なかれ色のバラつきは生まれます。細かいことを言うと、同じ基板上の4灯のLEDも全く色や明るさで光ることはできません。仕様の時点で色のバラつきの許容度は大きい方が良く、色を管理したい場合は別途検査やキャリブレーションの方法を考えましょう。

少しでも電池持ちを良くするために

*  点灯時間をできるだけ短くする
*  必要最低限の明るさにする
*  消費電力が大きい色は長時間点灯させない

白（255, 255, 255）＞黄（255, 255, 0）＞青（0, 0, 255）＞赤（255, 0, 0）の順番で消費電力が大きい。

まとめ

  • デザイナーとエンジニアの架け橋となるツールをつくることで生産性アップ
  • エンジニアなしで気軽にトライできる環境があることで生まれるものがある

次回は筐体の装飾的にクリスマス感を上げた記事を紹介したいと思います。

求人

フォトシンスでは、他レイヤーと協力しながら一緒にものづくりができるエンジニアを募集しています！ www.wantedly.com