obniz 1Yを使用して外出先から自宅のラズパイとJetson Nanoを操作してみた

RaspberryPi
jetson
obniz
obniz IoT コンテスト 2021

ここに動画が表示されます

リモートから自宅のラズパイやJetson Nanoを操作する場合、自宅のネットワークにポートを開ける必要があります。

自宅のネットワークにポートを開けるのはセキュリティのリスクがあるため、ポートを開けない代替手段手段として、ngrok、または、ARGO TUNNEL (cloudflared) などのサービスを使用して、自宅のネットワークからインターネットのサーバへアクセスすることで、リモートからの操作が可能になります。
しかし、ラズパイやJetson Nanoからアクセスする必要があり、また、サービスによって利用時間に制限があったり、リモートからのアクセス先（URL）が変わるので、不便な場合があります。

そこで、obnizを使用することで、obniz Cloud経由でリモートからのアクセスが可能になり、また、GPIOを使用してラズパイやJetson Nanoの電源を操作することもできるので、電気代を節約することができます。

obniz、ラズパイ、Jetson Nano以外に必要になる材料はジャンパワイヤのみで、obniz 1台でラズパイ、Jetson Nanoを2台まで操作可能です。
Grove - ジャンパワイヤ変換基盤と変換ケーブルを使用すると、操作する機器を変更する際にケーブルを間違えて挿すリスクを減らしたり、ケーブルの抜き差しを楽にすることができます。

Jetson Nanoは電源を入れても自動的に電源が入らないようにAUTO ON機能を無効にします。
AUTO ON機能を無効にするためには、AUTO ONとDISABLEのピンをジャンパーピンでショートします。
そして、UART RXD、UART TXD、PWR BTN、GNDをジャンパワイヤでobnizと接続します。

ラズパイはGPIO3、GND、GPIO14、GPIO15をジャンパワイヤでobnizと接続します。
ラズパイはAUTO ON機能を無効にできませんので、一度起動した後にシャットダウンをして待機状態にします。
また、raspi-configコマンド(CLI)、または、Raspberry Piの設定(GUI)でシリアルコンソール機能を有効にする必要があります。

obnizの開発者コンソールへログインして、HTMLプログラムからソースコードを入力します。
入力したソースコードはリポジトリに保存することができ、2回目以降はこちらから実行することが可能です。

ソースコードを入力したあと、実行ボタンを押すと操作画面が表示されます。

操作画面のコマンド入力フォームと電源操作ボタンは2台に分けて表示しています。
コンソール出力の表示は1つですが、2台の区別は出力行の先頭の番号で分かるようにしています。

obniz ID(ソースコードのobniz = new Obniz('XXXX-XXXX');のXXXX-XXXX部分)はご自身のobniz 1YボードのIDを使用してください。


HTML
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="/css/starter-sample.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script
      src="https://unpkg.com/obniz@3.14.0/obniz.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>

<div id="obniz-debug"></div>
<div id="print"></div>

<br />
<form id="messageform1" class="text-center row">
  <div class="col-xs-4 col-md-3"></div>
  <div id="formarea" class="text-center col-xs-4 col-md-6">
    コンソール 1 <textarea id="textarea1" name="text" rows="1" cols="40"></textarea>
    <div class="text-center">
      <button id="send" class="btn btn-success" style="margin:20px">Send</button>
    </div>
  </div>
  <div class="col-xs-4 col-md-3"></div>
</form>

<div class="text-center">
  <button id="reset1" type="button" class="btn btn-primary">POWER ON</button>
</div>

<br />
<form id="messageform2" class="text-center row">
  <div class="col-xs-4 col-md-3"></div>
  <div id="formarea" class="text-center col-xs-4 col-md-6">
    コンソール 2 <textarea id="textarea2" name="text" rows="1" cols="40"></textarea>
    <div class="text-center">
      <button id="send" class="btn btn-success" style="margin:20px">Send</button>
    </div>
  </div>
  <div class="col-xs-4 col-md-3"></div>
</form>

<div class="text-center">
  <button id="reset2" type="button" class="btn btn-primary">POWER ON</button>
</div>

<script>
(async function(){
  var obniz;
  obniz = new Obniz('XXXX-XXXX');
  await obniz.connectWait();

  obniz.uart0.start({rx:2, tx:3, gnd:0});
  obniz.uart0.onreceive=function(data,text){
    console.log("1 > "+text);
  }

  obniz.uart1.start({rx:6, tx:7, gnd:4});
  obniz.uart1.onreceive=function(data,text){
    console.log("2 > "+text);  
  }

  $("#messageform1").submit(async e => {
    await e.preventDefault();
    let message = $("#textarea1").val();
    await obniz.uart0.send(message + "\n");
    console.log("1 < "+message);
    $("#textarea1").val("");
  });

  $("#messageform2").submit(async e => {
    await e.preventDefault();
    let message = $("#textarea2").val();
    await obniz.uart1.send(message + "\n");
    console.log("2 < "+message);
    $("#textarea2").val("");
  });

  $("#reset1").click(e => {
    obniz.io1.output(true);  // 出力
    obniz.io1.pull("5v");  // => pull-up;
    obniz.wait(500);  // デバイスにだけ待機の指示を送り、プログラム側は動作を続ける
    obniz.io1.output(false);  // output(false)では「0vを出力する」という出力が行われる
    obniz.io1.end();  // 出力の停止
    console.log("1 < RESET");
  });

  $("#reset2").click(e => {
    obniz.io5.output(true);  // 出力
    obniz.io5.pull("5v");  // => pull-up;
    obniz.wait(500);  // デバイスにだけ待機の指示を送り、プログラム側は動作を続ける
    obniz.io5.output(false);  // output(false)では「0vを出力する」という出力が行われる
    obniz.io5.end();  // 出力の停止
    console.log("2 < RESET");
  });

  $(window).on("beforeunload", async e => {
    await obniz.uart0.end();
    await obniz.uart1.end();
    await obniz.io1.end();
    await obniz.io5.end();
    await obniz.close();
    return;
  });
})();

</script>
  </body>
</html>