UIボタンと連携させよう

今回はプログラムの画面の中にボタンを表示して、ボタンとobnizを連携させてみましょう!
「ボタンが押したらobnizの画面に文字が出る」なんて楽しそうですね。

UIボタン

UIボタンとは、ブロックプログラムを動かしているブラウザ上に出せるボタンのことです。
この下の写真にある「ボタン」と書かれたものがそうです。

ブロックプログラムでこのようにボタンを出したり、ボタンが押された時に何をするかというプログラムができます。

今回はボタンが押されたらobnizの画面に文字を出してみます。

ボタンを作る

まずは、ボタンを表示する必要があります。

ボタンは左側の「UI」という中にあります。

「button を "text"で作る」 というものです。
これをobnizがつながってすぐのところに入れてみます。

text の部分は自分で文字を入れることができます。
今回は「ボタン」にします。

<!-- Block Program Example -->
<xml xmlns="http://www.w3.org/1999/xhtml">
  <variables>
    <variable type="obniz" id="X2:3=S(hsdv0mk{aavHW">obniz</variable>
    <variable type="UIButton" id="80uQ37Yg!_RM@zbm[`cF">button</variable>
    <variable type="UIButton" id="#7$4fAkr(P%;.%JaKIy`">backbutton</variable>
    <variable type="UIButton" id="akidXEU*0XQ}VT^!o6Sp">rightbutton</variable>
    <variable type="UIButton" id="KBvD*sLV+fD7(ieEkq5x">leftbutton</variable>
    <variable type="" id="hpvY$6K[tgY$$/L_8%xc">count</variable>
    <variable type="dcmotor" id="V?6USN(jVhQ,P{82]/*M">dcmotor</variable>
    <variable type="airobotkit" id="Jk=/mw~HxfZs@VDVmFYY">airobotkit</variable>
    <variable type="led" id="!MAt1@Dsy)#f.p,K@;=%">led</variable>
  </variables>
  <block type="obniz_connect" id="Z8!^LPO*[5?q{e*57()u" x="154" y="225">
    <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
    <value name="obniz_id">
      <shadow type="text" id="XmI_$os3vVOeQ~scg106">
        <field name="TEXT">OBNIZ_ID_HERE</field>
      </shadow>
    </value>
    <next>
      <block type="obniz_ui_button" id="6f,*tW`x1z8QTswYk@R0">
        <field name="button" id="80uQ37Yg!_RM@zbm[`cF" variabletype="UIButton">button</field>
        <value name="text">
          <shadow type="text" id="e~!4XWXTgFHN.yxr9k{H">
            <field name="TEXT">ボタン</field>
          </shadow>
        </value>
        <next>
          <block type="obniz_util_repeat" id="p0}Pg~s6Ds*c4`8cB]0`">
            <statement name="DO">
              <block type="obniz_debug_text" id="e+()Yb@2p51R(`z-n?)x">
                <value name="text">
                  <shadow type="text" id="1dT(c-7Cr9sl;{nI,z9J">
                    <field name="TEXT">つながった</field>
                  </shadow>
                </value>
              </block>
            </statement>
          </block>
        </next>
      </block>
    </next>
  </block>
</xml>

これを実行するだけでobnizと繋があとに画面上にボタンが出てきます。

もしもブロック

次に、ボタンが押されたのを知って、押されたらobnizのディスプレイに文字を出してみます。
どうやるかというと、早速前のレッスンでやった「ループ」と、あたらしい「もしも」を使います。

「もしも」は「論理」の中にあるブロックです。

「もしも」もループと同じようにブロックの中にブロックを入れられます。
ただし、中に入れたブロックが実行されるのは もしも の条件がOKだったときだけです。

もしも の右側に true と書いてある部分があります。ここに条件を入れることができます。
ちなみに、条件は必ずひし形をしています。

これをobnizがつながったあとに入れてボタンを追加する部分を中に入れてみましょう。

この状態で実行してもちゃんとボタンが出ると思います。
「もしも」にある true というのは「正しい」という意味ですが、これが実行される条件となります。
つまり、trueだったからその中に入れたボタンを作るブロックが実行されてボタンが表示されたのです。

ちょっと変えてみましょう。trueのところを選んでfalseに切り替えてみます。

falseにして実行するとボタンは表示されなくなります。
falseは「正しくない」ということです。これでは、「もしも」の中のブロックが実行されないので、ボタンが表示されません。
表示されないまま次の「ずっと実行」に入ってしまい、二度と実行されないのでボタンがでなかったということです。

繰り返しを使う

ボタンが押されたらobnizの画面に文字を書くにはどうしたらいいでしょう。

繰り返し、ボタンが押されているかを「もしも」でチェックしなければいけません。そして、押されていたらobnizの画面に文字を描画するように、してみましょう。

まず、先ほどの「もしも」をはずして、ボタンは必ず作るようにします、
そしてずっと実行の中のコンソールに表示はもういらないので消してしまいます。

ずっと実行の中に「もしも」を入れます。そして、「obniz」の中にある「ディスプレイを消す」と、「Hello Worldを表示する」ブロックを「もしも」ブロックの中に新しく入れます。

あとは「もしも」をボタンが押された時にすれば完璧です。
ボタンが入っていた「UI」の中に「buttonがクリックされた」というひし形のブロックがあります。
これを「もしも」のtrueやfalseのあるひし形の部分にはめます。

ひし形やだ円のブロックをうまく入れるには、ブロックを持っている指やマウスが入れたい場所に入っているとうまくいきます。

うまくはまれば、このようなブロックになります。これで完成です!

<!-- Block Program Example -->
<xml xmlns="http://www.w3.org/1999/xhtml">
  <variables>
    <variable type="obniz" id="X2:3=S(hsdv0mk{aavHW">obniz</variable>
    <variable type="UIButton" id="80uQ37Yg!_RM@zbm[`cF">button</variable>
    <variable type="UIButton" id="#7$4fAkr(P%;.%JaKIy`">backbutton</variable>
    <variable type="UIButton" id="akidXEU*0XQ}VT^!o6Sp">rightbutton</variable>
    <variable type="UIButton" id="KBvD*sLV+fD7(ieEkq5x">leftbutton</variable>
    <variable type="" id="hpvY$6K[tgY$$/L_8%xc">count</variable>
    <variable type="dcmotor" id="V?6USN(jVhQ,P{82]/*M">dcmotor</variable>
    <variable type="airobotkit" id="Jk=/mw~HxfZs@VDVmFYY">airobotkit</variable>
    <variable type="led" id="!MAt1@Dsy)#f.p,K@;=%">led</variable>
  </variables>
  <block type="obniz_connect" id="Z8!^LPO*[5?q{e*57()u" x="154" y="225">
    <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
    <value name="obniz_id">
      <shadow type="text" id="XmI_$os3vVOeQ~scg106">
        <field name="TEXT">OBNIZ_ID_HERE</field>
      </shadow>
    </value>
    <next>
      <block type="obniz_ui_button" id="6f,*tW`x1z8QTswYk@R0">
        <field name="button" id="80uQ37Yg!_RM@zbm[`cF" variabletype="UIButton">button</field>
        <value name="text">
          <shadow type="text" id="e~!4XWXTgFHN.yxr9k{H">
            <field name="TEXT">ボタン</field>
          </shadow>
        </value>
        <next>
          <block type="obniz_util_repeat" id="p0}Pg~s6Ds*c4`8cB]0`">
            <statement name="DO">
              <block type="controls_if" id="V;yd?A05CxkfZ!NXfb=U">
                <value name="IF0">
                  <shadow type="logic_boolean" id="dTmdKibF6A^)pV:?Fy%#">
                    <field name="BOOL">TRUE</field>
                  </shadow>
                  <block type="obniz_ui_button_click" id="VG$Xvw2AMdaR]7//M1_r">
                    <field name="button" id="80uQ37Yg!_RM@zbm[`cF" variabletype="UIButton">button</field>
                  </block>
                </value>
                <statement name="DO0">
                  <block type="obniz_display_clear" id="VK,b!b/7%OPN]B]^F(Nn">
                    <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
                    <next>
                      <block type="obniz_display_print" id="P[Aee+@,o#:sy(SS9,b6">
                        <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
                        <value name="print_text">
                          <shadow type="text" id="{M2N08#k{.axEHsDQqoT">
                            <field name="TEXT">Hello, World!</field>
                          </shadow>
                        </value>
                      </block>
                    </next>
                  </block>
                </statement>
              </block>
            </statement>
          </block>
        </next>
      </block>
    </next>
  </block>
</xml>

実行してobnizにつながると画面にボタンが出ると思います。
そして、obnizのディスプレイには何やら数字などが表示されていると思います。

画面上のボタンを押してみましょう。ボタンを押すことでobnizのディスプレイに「Hello World」と表示されるはずです。

IoTっぽいプログラムが完成しました。あなたのobnizはインターネット経由であなたのスマホ/PCから遠隔操作されています!



Next : Memorize happenings

You will Get in Few Days

Circuit for Starter “obniz Board” is available on Amazon and other online stores.
You can get it at below

Our products and resellers

Forum

Visit our developer’s forum to discuss and discover technologies.

Forum

Contact

Feel free to contact out support and technical team.

Contact us