#PowerApps で画像を使わずに、7セグLEDを表現してみた

# まずはこちらをご覧ください。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">実験的な内容。<a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a> で画像を全く使わずに7セグLED的な感じを表現。<br>これをコレクション化すれば何桁でも使える・・・<br>のかなぁ？ <a href="https://t.co/1ZpUBsQ4ZV">pic.twitter.com/1ZpUBsQ4ZV</a></p>&mdash; りなたむ（RINATAMU） (@R_t_A_n_M) <a href="https://twitter.com/R_t_A_n_M/status/1100060731137875968?ref_src=twsrc%5Etfw">February 25, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

もともとの経緯は、@h-nagao さんのちょっとしたこちらのツイートだったのですが・・・
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">さてどうやって表示制御するか。<br>通常ならそれぞれをCollectionで制御かなとおもうけど。 <a href="https://t.co/RiT0A56wpO">pic.twitter.com/RiT0A56wpO</a></p>&mdash; Hiro #🅿𝕠𝕨𝕖𝕣🅰𝕕𝕕𝕚𝕔𝕥 (@mofumofu_dance) <a href="https://twitter.com/mofumofu_dance/status/1100043006411866114?ref_src=twsrc%5Etfw">2019年2月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

お風呂に入ってたら思いついちゃったので早速作ってみました。

# とりあえず1桁実装します

## OnStart の設定
OnStartは、アプリが読み込まれたときに自動的に実行される関数を指定するプロパティになります。
ここで、後ほど配置するオブジェクトの色を変更する際の判定フラグに使用する変数をセットします。
7Segということは、オブジェクトは7個作ることになりますので、変数も7個必要です。

```php:OnStart
Set(object1,false);
Set(object2,false);
Set(object3,false);
Set(object4,false);
Set(object5,false);
Set(object6,false);
Set(object7,false)
```

## LED表示オブジェクトの配置
今回は四角形オブジェクトを使用しました。
アイコンから四角形を選びます。
![](https://i.imgur.com/eEhQ31M.png)

これを全部で7個作成します。
なお、今回は以下の通りにサイズを指定しました。

|LED|Width|Height|
|:--|:--|:--|
|縦|27|123|
|横|123|27|

そして以下のように配置します。

![](https://i.imgur.com/lwRQDYF.png)

それぞれを識別する為、番号を振っておきましょう。
※説明用に指定するものです。実際に配置する必要はありません。
![](https://i.imgur.com/AZhYejw.png)

### 色制御の指定
配置したLEDにそれぞれOnStartで指定しているフラグを割り当てて色の制御をできるようにしましょう。

```php:Fill
If(object1,LightGreen,Black)
```
LED1番はObject1の変数を使用し
LED2番はObject2、
LED3番はObject3 ...
という感じで設定します。

## 数字増減確認用のスライダーを設定
とりあえずテスト表示をするために
数値の増減が簡単にできるスライダーを設置します。

スライダー名：Slider1
* Minプロパティ：0
* Maxプロパティ：9
* Defaultプロパティ：0

## 表示コントロール用タイマーの設定
タイマーコントロールを使用すれば、タイマーのスタート（OnTimerStart）及び終了(OnTimerEnd)イベントをトリガーとして関数を実行することができます。
アプリ開始時に自動実行させたいのと、繰り返しで関数を実行させたいので、自動実行と繰り返しをオンにしておきます。
また、すぐ反映したいので期間も250ミリ秒とかなり小さく設定します。

![](https://i.imgur.com/LKdJGgB.png)

そして、OnTimerStartプロパティで以下のように設定します。

```php:OnTimerStart
Switch(Slider1.Value,
    0,Set(object1,true)&Set(object2,true)&Set(object3,true)&Set(object4,true)&Set(object5,true)&Set(object6,true)&Set(object7,false),
    1,Set(object1,false)&Set(object2,false)&Set(object3,false)&Set(object4,true)&Set(object5,false)&Set(object6,true)&Set(object7,false),
    2,Set(object1,true)&Set(object2,true)&Set(object3,false)&Set(object4,true)&Set(object5,true)&Set(object6,false)&Set(object7,true),
    3,Set(object1,true)&Set(object2,true)&Set(object3,false)&Set(object4,true)&Set(object5,false)&Set(object6,true)&Set(object7,true),
    4,Set(object1,false)&Set(object2,false)&Set(object3,true)&Set(object4,true)&Set(object5,false)&Set(object6,true)&Set(object7,true),
    5,Set(object1,true)&Set(object2,true)&Set(object3,true)&Set(object4,false)&Set(object5,false)&Set(object6,true)&Set(object7,true),
    6,Set(object1,true)&Set(object2,true)&Set(object3,true)&Set(object4,false)&Set(object5,true)&Set(object6,true)&Set(object7,true),
    7,Set(object1,true)&Set(object2,false)&Set(object3,true)&Set(object4,true)&Set(object5,false)&Set(object6,true)&Set(object7,false),
    8,Set(object1,true)&Set(object2,true)&Set(object3,true)&Set(object4,true)&Set(object5,true)&Set(object6,true)&Set(object7,true),
    9,Set(object1,true)&Set(object2,true)&Set(object3,true)&Set(object4,true)&Set(object5,false)&Set(object6,true)&Set(object7,true)
)
```

これで作業は無事終了です。
実際に実行してみて、スライダーを動かしてみてください！
０～９とLEDっぽく表示できれば成功です！

これを複数桁にする方法はまた次回！