obniz Docs Guides AI Robot Kit Let's convert to JavaScript

Let's convert to JavaScript

If you want to do something more advanced than the block program does, you can program it in JavaScript.

The obniz block program can be written in the form of JavaScript and HTML to run it.
With this function, you can easily convert a program created in blocks to JavaScript from the middle and make it more sophisticated.

This time, I will introduce how to convert the code.

This lesson is the same as Step Up to JavaScript in the block program.

Code writing

For example, if you create this block program and look at its code,

Click the file name in the upper left of the block program editor and click
You can see the HTML and javascript by pressing "View Code".

If you do so
HTML like this comes out.

The program is slightly different depending on the version of the block editor.

 <!-- HTML Example -->
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://obniz.com/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@3.3.0/obniz.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/iothome/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/ai/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/airobot/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/ui/index.js"></script>
    <script src="https://unpkg.com/obniz-parts-kits@0.15.2/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>