JavaScriptに変換しよう。

ブロックプログラムでは用意されていないようなより高度なことがしたい場合、JavaScriptで高度にプログラムすることができます。

obnizのブロックプログラムはJavaScriptとそれを動かすためのHTMLという形に書き出すことができます。
この機能を使えば、ブロックである程度まで作ったプログラムを途中からJavaScriptに変換してより高度にしていくことが簡単にできます。

今回はコード変換のやり方について紹介します。

このレッスンはブロックプログラムにある JavaScriptにステップアップと同じものです。

コード書き出し

例えばこのブロックプログラムを作って、そのコードを見てみる場合、

<!-- 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="HDp1mlcGAj5s`;!=llnb" x="135" y="63">
    <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
    <value name="obniz_id">
      <shadow type="text" id="5TP31WDvYyD%Gwf+wL1.">
        <field name="TEXT">OBNIZ_ID_HERE</field>
      </shadow>
    </value>
    <next>
      <block type="obniz_ui_button" id="+XPe3N3Ik`Q03;fDxOr?">
        <field name="button" id="80uQ37Yg!_RM@zbm[`cF" variabletype="UIButton">button</field>
        <value name="text">
          <shadow type="text" id="t8u?hB@Du;uk})idpxbu">
            <field name="TEXT">text</field>
          </shadow>
        </value>
        <next>
          <block type="obniz_parts_dcmotor_wired" id="KMvijnuH]p7_fixOk`:W">
            <field name="obniz" id="X2:3=S(hsdv0mk{aavHW" variabletype="obniz">obniz</field>
            <field name="DCMotor" id="V?6USN(jVhQ,P{82]/*M" variabletype="dcmotor">dcmotor</field>
            <value name="forward">
              <shadow type="math_number" id="$VA8(eKRvU1%EKP0wjej">
                <field name="NUM">0</field>
              </shadow>
            </value>
            <value name="back">
              <shadow type="math_number" id="*m3[z@1NfAaul$w^bzS]">
                <field name="NUM">1</field>
              </shadow>
            </value>
            <next>
              <block type="obniz_util_repeat" id="(~5j/lhm/]dIH[20H`D9">
                <statement name="DO">
                  <block type="controls_if" id="/X}ba1{+Oi_`wVmUu~|X">
                    <mutation else="1"></mutation>
                    <value name="IF0">
                      <shadow type="logic_boolean" id="5m0M4WR4:2BPfC|_hGkd">
                        <field name="BOOL">TRUE</field>
                      </shadow>
                      <block type="obniz_ui_button_touch" id="Lbc.F/!m0q?A/1w/EK]4">
                        <field name="button" id="80uQ37Yg!_RM@zbm[`cF" variabletype="UIButton">button</field>
                      </block>
                    </value>
                    <statement name="DO0">
                      <block type="obniz_parts_dcmotor_move" id="`,EN+UJOcRGK!!x2U!/u">
                        <field name="DCMotor" id="V?6USN(jVhQ,P{82]/*M" variabletype="dcmotor">dcmotor</field>
                        <field name="direction">true</field>
                      </block>
                    </statement>
                    <statement name="ELSE">
                      <block type="obniz_parts_dcmotor_stop" id="_GU%brb,*Zi-0T+=MvEc">
                        <field name="DCMotor" id="V?6USN(jVhQ,P{82]/*M" variabletype="dcmotor">dcmotor</field>
                      </block>
                    </statement>
                  </block>
                </statement>
              </block>
            </next>
          </block>
        </next>
      </block>
    </next>
  </block>
</xml>

ブロックプログラムエディタの左上のファイル名をクリックし、
「コードを見る」を押すことでHTMLとjavascriptを確認できます。

そうしますと
このようなHTMLがでてきます。

ブロックエディタのバージョンにより同じブロックでも書き出されるプログラムが多少違います。

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="https://unpkg.com/obniz@2.4.0/obniz.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.10.0/iothome/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.10.0/ai/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.10.0/airobot/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.10.0/ui/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.10.0/airobot/opencv3.4/opencv.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.13.5"> </script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@0.2.2"> </script>
</head>
<body>
Block Program running...
<div id="OBNIZ_OUTPUT"></div><br/>

<script>
(async function(){
  var obniz, button, dcmotor;


  obniz = new Obniz('8506-3053');
  await obniz.connectWait();
  button = new ObnizUI.Button('text');
  dcmotor = obniz.wired("DCMotor",{"forward":0, "back":1});
  while (true) {
  await ObnizUI.Util.wait(0);
    if (button.isTouching()) {
      dcmotor.move(true);
    } else {
      dcmotor.stop();
    }
  }

})();
</script>
</body>
</html>


Next : Detext text with camera

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