言語切り替え

スマホで入力した文字をobnizからUARTで送信

スマートフォンで開いたWebページで入力した文字を、obnizからUARTで送信します。


この例では、Macとobnizを接続し、ターミナル上に受け取った文字を表示しています。

用意するもの

  • obniz Board
  • モバイルバッテリーなど
  • ブラウザを開くためのスマートフォン
  • UARTで受け取った文字を表示するPC
  • UARTで受け取った文字を表示するためのツール (ターミナルなど)
  • PCとobnizを繋げるインタフェース(USB typeAとシリアルの変換ケーブルなど)

接続方法

obniz シリアル変換インタフェース側
0 RX
1 TX
11 GND

プログラム

28行目 let obniz = new Obniz('OBNIZ_ID_HERE');OBNIZ_ID_HERE の部分を、お手持ちのobniz IDに書き換えてください。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/obniz@3.0.0/obniz.js" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Send Text Messages on UART</title>
</head>
<body>
  <div class="container">
    <h2 class="text-center" style="margin:40px">Send Text Messages on UART</h2>
    <form id="messageform" 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">
          <textarea id="textarea" name="text" rows="1" cols="20"></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>
  
<script>
  $( () => {
    let obniz = new Obniz('OBNIZ_ID_HERE');
    
    obniz.onconnect = async() => {
      await obniz.uart0.start({tx:0, rx:1, gnd:11});
      
      $('#messageform').submit(async (e) => {
        await e.preventDefault();
        
        let message = $('#textarea').val();
        await obniz.uart0.send(message + '\r\n');
        $('#textarea').val("");
      });
      
      $(window).on("beforeunload", async (e) => {
        await obniz.uart0.end();
        await obniz.close();
        return
      });
      
    }
  });
</script>
</body>
</html>

UART送受信の詳しいリファレンスは UART – obniz をご覧ください。

うごかす

スマートフォンで文字を入力して「send」を押すと、PCのターミナル等で文字を受け取って表示できます。

関連記事