ArduBlock のカスタマイズ はじめて編

「ArduBlock のビルド」
http://qiita.com/nanbuwks/items/dde4270eade41f8b75ec
にて作ったオリジナルバージョンを更に手を加えていきます。
![image](https://qiita-image-store.s3.amazonaws.com/0/139524/07a7df6a-13e7-43f5-1cf7-cca333cba147.png)

:::note

こちらもご覧ください

「ArduBlock のカスタマイズ 中級編」
https://qiita.com/nanbuwks/items/f2067f06a0012791ee3d
:::

# スキンを変えてみる

```
$ cd src/main/resources/com/ardublock/block/Skins/
$ cp -a slim/* ..
```

![image](https://qiita-image-store.s3.amazonaws.com/0/139524/5b9b8295-7e4e-fd14-ecc4-65f385773812.png)

ブロックライブラリもすっきりになるので注意!

# カスタマイズの参考資料

「ArduBlock 日本語でArduinoをブロックプログラミング」
http://www.bkpoo.net/greatfreesoft/39-ardublock.html#ardublocknaositaitokoro


# 新しいブロックを作る

以下、掃除機Hack 用に 掃除機のビープを鳴らすブロックを作ったときに必要とした作業です。

## 新しい見出しを作る

` src/main/resources/com/ardublock/block/ardublock.properties 
`　の中に追加作成する。

```

#cleaner
bd.cleaner=cleaner
```



` src/main/resources/com/ardublock/block/ardublock.xml 
`　の中に追加作成する。


```
                                <BlockGenusMember>LCD_PLL_Sainsmart_16by2</BlockGenusMember>
                                <BlockGenusMember>number-single-I2C-address</BlockGenusMember>
                                <BlockGenusMember>number-single-fixed-parallel</BlockGenusMember>
                        </BlockDrawer>
                        <BlockDrawer button-color="121 85 72" name="bd.communication" type="factory">
                                <BlockGenusMember>serial_read</BlockGenusMember>
                                <BlockGenusMember>serial_read_poly</BlockGenusMember>
                                <BlockGenusMember>serial_available</BlockGenusMember>
                                <BlockGenusMember>serial_print</BlockGenusMember>
                                <BlockGenusMember>serial_println</BlockGenusMember>


```
↓

```
                                <BlockGenusMember>LCD_PLL_Sainsmart_16by2</BlockGenusMember>
                                <BlockGenusMember>number-single-I2C-address</BlockGenusMember>
                                /<BlockGenusMember>number-single-fixed-parallel</BlockGenusMember>
                        </BlockDrawer>
                        <BlockDrawer button-color="200 90 150" name="bd.cleaner" type="factory">
                        </BlockDrawer>
                        <BlockDrawer button-color="121 85 72" name="bd.communication" type="factory">
                                <BlockGenusMember>serial_read</BlockGenusMember>
                                <BlockGenusMember>serial_read_poly</BlockGenusMember>
                                <BlockGenusMember>serial_available</BlockGenusMember>
                                <BlockGenusMember>serial_print</BlockGenusMember>
                                <BlockGenusMember>serial_println</BlockGenusMember>


```

- type="factory" の意味は不明
- name に bd.... を記述する


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/c3b76971-3c60-cc5a-318e-68be7a0f0718.png)



見出しができた



## 中身を作る


### 書き換える必要のあるファイル


- src/main/resources/com/ardublock/block/ardublock.xml
  - 引き出しにブロックを収納する
  - ブロックの形などを記述する
- src/main/resources/com/ardublock/block/ardublock*.properties
  - ブロックの説明を記述する
  - 日本語ローカライズの説明を追加する
- src/main/java/com/ardublock/translator/block/*.java
  - ブロックが実行されたときに動作する内容を記述
- src/main/resources/com/ardublock/block/block-mapping.properties
  - ブロックとプログラムコードをひもづける
 
#### src/main/resources/com/ardublock/block/ardublock.xml

##### 引き出しにブロックを収納する

先程作った引き出しに、収納するブロックを記述する


` <BlockDrawer...>~ </BlockDrawer>`
中に
`<BlockGenusMember>pinListCleaner_beep</BlockGenusMember>`
と記述する
```
    <BlockDrawer button-color="200 90 150" name="bd.esp32" type="factory">
               <BlockGenusMember>pinListCleaner_beep</BlockGenusMember>
     </BlockDrawer>
```

ここで指定した名前`pinListCleaner_beep`はブロック名。

##### ブロックの形などを記述する

 - ブロックの名前を name 変数で指定。これは引き出しで指定した名前と同じものを記述する。
 - ブロックの色、説明、ラベル、画像を指定。ブロックが持つコネクターの数、種類、説明を指定。および見出しに入るブロックを指定。
 - ブロックのコネクタ部分に説明をつける場合は label をつける
 - ここで指定される initlabel や、 label などは後に説明する ardublock*.properties で表記を指定する。
 - initlabel は bg.~~~ となり、ブロックに使用するもの。~~~はブロック名と同じにする必要がある。

例：
```
     <BlockGenus name="pinListCleaner_beep" kind="data" color="213 0 0" initlabel="bg.pinListCleaner_beep" editable-label="no">
       <BlockConnectors>
         <BlockConnector connector-type="number" connector-kind="plug"/>
       </BlockConnectors>
    </BlockGenus>
```


#### src/main/resources/com/ardublock/block/ardublock*.properties

##### ブロックの説明を記述する

 - ブロックやコネクタなどの表記、説明を記述するファイル。ardublock.propertiesがデフォルト。
 - ardublock_??.properties は各国語の表記を記述。ardublock_ja.properties が日本語用。
 - ardublock.xmlのinitlavelやlabelに対応したものを **必ず** 記述しなければならない。
 - descriptionはマウスフロートした時に出現する説明。この行は省略しても良い。
以下のような感じ。
```
#cleaner
bd.cleaner=cleaner
bg.pinListCleaner_beep=cleaner beep
bg.pinListCleaner_beep.description=beeper on
```

説明が無い場合はardublock.xmlの BlockGenus 内に
`  <description>               <text>WebServer</text> </description> ` 
の記述があれば、そちらが使われる。

##### 日本語ローカライズの説明を追加する

日本語用に、`ardublock_ja.properties` 内に以下のように書いておく。必ずしも必要ではなくて、もし記述がない場合は `ardublock.properties` の内容が表示される。

:::note
あらかじめ、UTF-8文字列へのデコードを行って、編集しやすくしています。
cf.,「ArduBlock のソースを日本語デコード済みにする(UTF-8 エスケープシーケンスのデコード)」
https://qiita.com/nanbuwks/items/18301de97b68a6eb320e
:::
```
#cleaner
bd.cleaner=そうじき
bg.pinListCleaner_beep=おと
```

#### src/main/java/com/ardublock/translator/block/Cleaner_beep.java

ファイルを新たに作成する。ファイル名は何でもいいが、わかりやすく。

##### ブロックが実行されたときに動作する内容を記述
```
package com.ardublock.translator.block;

import com.ardublock.translator.Translator;
import com.ardublock.translator.block.exception.SocketNullException;
import com.ardublock.translator.block.exception.SubroutineNotDeclaredException;

public class Cleaner_beep extends TranslatorBlock
        {

                public Cleaner_beep(Long blockId, Translator translator, String codePrefix, String codeSuffix, String label)
                {
                        super(blockId, translator, codePrefix, codeSuffix, label);
                }

                @Override
                public String toCode() throws SocketNullException {
                        return codePrefix + "PD12" + codeSuffix;
                }

        }


```
これは単に「PD12」という文字列を返しているだけのプログラムです。PD12 は圧電ブザーにつながっている GPIO の PD12 ポートを表しています。

#### src/main/resources/com/ardublock/block/block-mapping.properties

##### ブロックとプログラムコードをひもづける


```
#cleaner
pinListCleaner_beep=com.ardublock.translator.block.Cleaner_beep
```
# ブロックができた


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ba7d2633-7bdd-e077-b0d9-d0168e084eb5.png)

これで、最低限の記述をしたブロックができあがりました。このブロックの中身は圧電ブザーにつながっている GPIO の PD12 ポートを表す文字列です。

# 動かしてみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/c74f26a3-fc13-a50b-4888-7f1358ccea80.png)

1秒おきにブザーが鳴るようになります。
```
void __ardublockDigitalWrite(int pinNumber, boolean status)
{
  pinMode(pinNumber, OUTPUT);
  digitalWrite(pinNumber, status);
}


void setup()
{
}

void loop()
{
  delay( 1000 );
  __ardublockDigitalWrite(PD12, HIGH);
  delay( 1000 );
  __ardublockDigitalWrite(PD12, LOW);
}

```

## ブロックに画像を表示する

`src/main/resources/com/ardublock/block/ardublock.xml`
に以下のように記述することで、ブロックに画像を表示できる。

```

                <BlockGenus name="ESP32_MailSend" kind="command" color="20 20 20" initlabel="bg.ESP32_MailSend">
                        <description>
                                <text>MailSend</text>
                        </description>
                        <BlockConnectors>
                                <BlockConnector connector-type="string" connector-kind="socket" label="bc.title">
                                        <DefaultArg genus-name="message" label="Your ESSID"/>
                                </BlockConnector>
                                <BlockConnector connector-type="string" connector-kind="socket" label="bc.to">
                                        <DefaultArg genus-name="message" label="Your passphase"/>
                                </BlockConnector>
                                <BlockConnector connector-type="string" connector-kind="socket" label="bc.body">
                                        <DefaultArg genus-name="message" label="Your passphase"/>
                                </BlockConnector>
                        </BlockConnectors>
                        <Images>
                                <Image>
                                        <FileLocation>com/ardublock/block/mailsend.png</FileLocation>
                                </Image>
                        </Images>
                </BlockGenus>
```
こんな感じ。
ファイルは src/main/resources/com/ardublock/block/
に格納する。

グラフィックは実物大で出るので大きさを調整しておかなければならない。

# バージョン番号を変更する
src/main/resources/com/ardublock/block/ardublock.properties
の
ardublock.ui.version に　バージョン番号を書く