LoginSignup
3
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-04-11

はじめに

obniz IoT コンテストが行われるので、obniz 1Yを申し込んでみました。
無事に届いたので、obniz 1Yを使用して外出先(リモート)から自宅のラズパイとJetson Nanoの電源操作やシリアルコンソールで操作してみました。

Ex4BKn3UcAENfYw.jpg

背景

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

スクリーンショット 2021-04-11 20.58.23.png

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

スクリーンショット 2021-04-11 20.58.33.png

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

スクリーンショット 2021-04-11 20.58.45.png

材料

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

スクリーンショット 2021-04-11 21.07.00.png

構成(配線・接続)

スクリーンショット 2021-04-11 21.47.21.png

Jetson Nano

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

スクリーンショット 2021-04-11 21.20.52.png

ラズパイ

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

スクリーンショット 2021-04-11 21.21.00.png

obniz Cloud開発画面

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

スクリーンショット 2021-04-11 22.24.42.png

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

スクリーンショット 2021-04-11 22.53.35.png

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

スクリーンショット 2021-04-12 9.58.25.png

ソースコード


ソースコード
<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>


まとめ

ハードウェア(デバイス)とソフトウェア(クラウドサービス)がセットになって提供されるobnizを使用すると、IoTを手軽で簡単に始められます。
では、良き obniz ライフを!

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1