「ArduBlock のビルド」
http://qiita.com/nanbuwks/items/dde4270eade41f8b75ec
にて作ったオリジナルバージョンを更に手を加えていきます。

こちらもご覧ください

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

スキンを変えてみる

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

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

カスタマイズの参考資料

「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.... を記述する

見出しができた

中身を作る

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

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 の内容が表示される。

あらかじめ、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

ブロックができた

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

動かしてみる

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 に　バージョン番号を書く

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