GR-PEACH用TOPPERS/ASPカーネルを用いたヴィジュアルプログラミンぐツールLED-heartの使い方？

Maker faire の大垣で、TOPPERSブースの隅に、GR-PEACH向けに、カルネージハートのようにチップを画面においてプログラムするツールを作って置いていたので、ひとまず現状をgithubに置きました。ですので、使い方等を・・・。

![led_heart1.png](https://qiita-image-store.s3.amazonaws.com/0/152879/ecec4a07-1402-fee4-82b5-253b3ad23dff.png)

このツールの目的は、まず、建前としては
1. OSの利用価値の説明のためのツールとしての利用
2. プログラミングの学習（タスクの概念も含む）
です。

本音は、建て前に書いたなんか真面目っぽいことはどうでもよく、ただ、わくわくしそうな感じなサムシングを作るです。

基本Windows向けですが、batで行っている内容を自分でやるか、シェルスクリプトとかで作ってもらえば基本的には動くはずです。

# 導入方法
https://github.com/cel54521/LED-heart

にあるので

> $ git clone git://github.com/cel54521/LED-heart.git

として落としてきます。もしくはzipで落としてきて展開します。

ファイル構成は以下のようになってます
<pre>
LED-heart
 |- LED-heart_EXE
 |   |- index.html（本体）
 |   |- main.js（electronのメイン）
 |   |- package.json
 |   |- （チップの画像ファイル一式）
 |   |- orizin.clip（画像ファイルのCLIP STUDIO用ファイル）
 |- led_hearts
 |- exe.bat（make、書き込み用のバッチファイル）
</pre>

このディレクトリの中に、GR-PEACH用のTOPPERS/ASPカーネルを落としてきます。

https://github.com/ncesnagoya/asp-gr_peach_gcc-mbed

にあるので

> $ git clone git://github.com/ncesnagoya/asp-gr_peach_gcc-mbed

として落としてきます。もしくはzipで落としてきて展開します。

そして、LED-heart直下にあったled_heartsというディレクトリをasp-gr_peach_gcc-mbed/exsample/以下に配置します。
ファイル構成は以下のようになってます
<pre>
LED-heart
 |- LED-heart_EXE
 |   |- index.html（本体）
 |   |- main.js（electronのメイン）
 |   |- package.json
 |   |- （チップの画像ファイル一式）
 |   |- orizin.clip（画像ファイルのCLIP STUDIO用ファイル）
 |- asp-gr_peach_gcc-mbed
 |   |- exsample
 |   |   |-led_hearts
 |- exe.bat（make、書き込み用のバッチファイル）
</pre>

後は、http://gnuarmeclipse.github.io/toolchain/install/ を参考にARMのToolChainを入れてください。

led_heartsのディレクトリに移動して

> $make depend

を実行します。

今回のLED-heartは、Javascriptで実装され、electronで実行されます。electronはATOMとかに使用されている、Javascriptでデスクトップクライアントを作るためのフレームワークです。粋でいなせなやつです。

http://electron.atom.io/

からelectronの実行環境をダウンロードして展開してください。

electron.exeに、LED-heart_EXEのフォルダをドラッグアンドドロップすると起動します。

# プログラムする

画面にチップを配置してプログラミングをします。一番左上のチップからプログラムは開始します。配置したチップをクリックすると四隅のどこかに青いボックスが出てきます。チップを実行し終わると、その方向へチップを実行します。配置画面の外へ青いボックスを伸ばすと左上のチップへ戻り、ループ実行します。

### LED ON
![LED_ON.png](https://qiita-image-store.s3.amazonaws.com/0/152879/e49d722c-da69-bbfd-8ef7-ea87cdeb5ac7.png)
LEDを光らせます。RED、GREEN、BLUEの３色を選べます。

### LED OFF
![LED_OFF.png](https://qiita-image-store.s3.amazonaws.com/0/152879/7c5600e7-87a1-e69e-32a6-4112dfa3a0f9.png)
LEDを消灯します。RED、GREEN、BLUEの３色を選べます。

### DELAY
![DELAY.png](https://qiita-image-store.s3.amazonaws.com/0/152879/ba4f5019-7682-b65c-9ecd-504022a896b0.png)
指定したmsec間プログラムを停止します。

###VALUE
![VALUE1.png](https://qiita-image-store.s3.amazonaws.com/0/152879/e63e1f94-7806-0267-93b5-b4f8e7c30ce2.png) ![VALUE2.png](https://qiita-image-store.s3.amazonaws.com/0/152879/ece40cfb-a985-96f9-53ce-bb86a56aee5e.png) ![VALUE3.png](https://qiita-image-store.s3.amazonaws.com/0/152879/85716bf8-e33d-4369-8d34-a9ec422382c8.png)
変数を操作するチップです。変数への操作として、代入、加算、減算、乗算、除算を選べます。変数はVALUE1、VALUE2、VALUE3の選べる３つで、起動時に0クリアされます。

### NOP
![NOP.png](https://qiita-image-store.s3.amazonaws.com/0/152879/11719e63-2fb1-ea03-966a-5f5fad836fcd.png)
何もしません昼行燈。

### ![IF.png](https://qiita-image-store.s3.amazonaws.com/0/152879/b9a64e49-54e1-4276-490d-e780186b4573.png)
分岐です。入力した条件がTRUEなら青いブロック（下）のほうへ、FALSEなら赤いブロック（右）のほうへ実行します。条件は「VALUE1 == 0」や「VALUE2>=VALUE3」のように指定します。このブロックは実行方向の切り替えができないので、配置する際は悩んでください。

### PARALLEL
![PARALLEL.png](https://qiita-image-store.s3.amazonaws.com/0/152879/f24166e9-ba2d-38ee-b2bf-152919880f27.png)
並行実行のブロックです。このブロックは一番左上にしか配置することができず、青いブロック（下）の方向へ伸ばしたプログラムと、赤いブロック（右）の方向伸ばしたプログラムを別タスクで実行して並行実行します。

# 実行する
GENERATEボタンをクリックすると、下記の★マークのディレクトリの中にソースコードが生成されて、makeされて、Eドライブにソフトが転送されます。
ドライブ変えたいって人は、exe.batを書き換えてください。

> make -f Makefile -C asp-gr_peach_gcc-mbed\examples\led_hearts\
> copy asp-gr_peach_gcc-mbed\examples\led_hearts\asp.bin E:\

<pre>
LED-heart
 |- LED-heart_EXE
 |   |- index.html（本体）
 |   |- main.js（electronのメイン）
 |   |- package.json
 |   |- （チップの画像ファイル一式）
 |   |- orizin.clip（画像ファイルのCLIP STUDIO用ファイル）
 |- asp-gr_peach_gcc-mbed
 |   |- exsample
 |   |   |-led_hearts★
 |- exe.bat（make、書き込み用のバッチファイル）
</pre>

# サンプル
![led_heart1.png](https://qiita-image-store.s3.amazonaws.com/0/152879/ecec4a07-1402-fee4-82b5-253b3ad23dff.png)
赤いLEDを200msec周期に、緑のLEDを300msec周期に、並行実行するプログラムです。赤、緑、黄色、消灯みたいな感じに光ると思います。
これと同じような動作をするプログラムをPARALLELブロックなしに作ってみると、多少タスクのうれしさ？のようなものがわかるかも知れません。

# 動かないときは
神に祈りましょう。