ウェブUARTコンソール

このエントリーをはてなブックマークに追加

What's this

ブラウザからobnizのUART2chを使います。

シンプルに送信/受信するだけのコンソールです。

ピン配置は以下のようにしています。

Program

<!-- HTML Example -->
<!DOCTYPE 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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  
  <style>
    textarea {
      width: 100%;
    }

    .row {
      margin-bottom: 20px;
    }

    .row.uart {
      border-radius: 5px;
      border: 1px #CCC solid;
    }

    .row.uart .content {
      margin-top: 10px;
      margin-bottom: 10px;
    }
  </style>

  <script src="https://unpkg.com/obniz@1.9.1/obniz.js"></script>
</head>

<body>
<div id="obniz-debug"></div>
<br>
<div class="text-center">
  <h1> UART Console </h1>
</div>
<div class="container">
  <div class="row">
    <div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-12 text-center">
      <img src="/images/webapp/uart/wired.png" class="img-fluid  mx-auto d-block"/>
    </div>
  </div>
  <div class="row uart">

    <div class="col-md-4 content">

      <h3>uart0</h3>
      <label for="uart0-baud">baudrate :</label>
      <select name="uart0-baud" id="uart0-baud">
        <option value="300">300 bps</option>
        <option value="1200">1200 bps</option>
        <option value="2400">2400 bps</option>
        <option value="4800">4800 bps</option>
        <option value="9600" selected>9600 bps</option>
        <option value="19200">19200 bps</option>
        <option value="38400">38400 bps</option>
        <option value="57600">57600 bps</option>
        <option value="115200">115200 bps</option>
      </select>
      <br/>

      <label for="uart0-stop">stopbit width :</label>
      <select name="uart0-stop" id="uart0-stop">
        <option value="1" selected>1</option>
        <option value="1.5">1.5</option>
        <option value="2">2</option>
      </select>
      <br/>

      <label for="uart0-bits">bits num :</label>
      <select name="uart0-bits" id="uart0-bits">
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8" selected>8</option>
      </select>
      <br/>


      <label for="uart0-parity">parity :</label>
      <select name="uart0-parity" id="uart0-parity">
        <option value="off" selected>off</option>
        <option value="odd">odd</option>
        <option value="even">even</option>
      </select>
    </div>
    <div class="col-md-4 content">
      <textarea class="form-control" id="uart0send" rows="7"></textarea>
      <button id="send0button" type="button" class="btn btn-primary btn-block">Send</button>
    </div>
    <div class="col-md-4 content">
      <textarea class="form-control" id="uart0receive" rows="7"></textarea>
      <button id="clear0button" type="button" class="btn btn-primary btn-block">Clear</button>
    </div>
  </div>

  <div class="row uart">

    <div class="col-md-4 content">
      <h3>uart1</h3>
      <label for="uart1-baud">baudrate :</label>
      <select name="uart1-baud" id="uart1-baud">
        <option value="300">300 bps</option>
        <option value="1200">1200 bps</option>
        <option value="2400">2400 bps</option>
        <option value="4800">4800 bps</option>
        <option value="9600" selected>9600 bps</option>
        <option value="19200">19200 bps</option>
        <option value="38400">38400 bps</option>
        <option value="57600">57600 bps</option>
        <option value="115200">115200 bps</option>
      </select>
      <br/>

      <label for="uart1-stop">stopbit width :</label>
      <select name="uart1-stop" id="uart1-stop">
        <option value="1" selected>1</option>
        <option value="1.5">1.5</option>
        <option value="2">2</option>
      </select>
      <br/>

      <label for="uart1-bits">bits num :</label>
      <select name="uart1-bits" id="uart1-bits">
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8" selected>8</option>
      </select>
      <br/>


      <label for="uart1-parity">parity :</label>
      <select name="uart1-parity" id="uart1-parity">
        <option value="off" selected>off</option>
        <option value="odd">odd</option>
        <option value="even">even</option>
      </select>
    </div>
    <div class="col-md-4 content">
      <textarea class="form-control" id="uart1send" rows="7"></textarea>
      <button id="send1button" type="button" class="btn btn-primary btn-block">Send</button>
    </div>
    <div class="col-md-4 content">
      <textarea class="form-control" id="uart1receive" rows="7"></textarea>
      <button id="clear1button" type="button" class="btn btn-primary btn-block">Clear</button>
    </div>
  </div>
</div>

<script>

  /* This will be over written on obniz.io webapp page */
  let obniz = new Obniz("OBNIZ_ID_HERE");

  function resetUart(no){
    let uart = obniz["uart" + no];
    uart.end();

    let baud = +$("select[name='uart"+no+"-baud']").val();
    let stop = +$("select[name='uart"+no+"-stop']").val();
    let bits = +$("select[name='uart"+no+"-bits']").val();
    let parity = $("select[name='uart"+no+"-parity']").val();

    uart.start({
      tx: no===0?2:6,
      rx:  no===0?3:7,
      baud:baud,
      stop:stop,
      bits:bits,
      parity:parity });

    uart.onreceive = ((i) => {return (data, text) => {
      let receiveTextfield = $("#uart"+i+"receive");
      receiveTextfield.val(receiveTextfield.val() + text);
    }})(no);

  }

  obniz.onconnect = async function () {
    obniz.debugprint = true;
    obniz.reset();
    obniz.io0.output(false);
    obniz.io1.output(true);
    resetUart(0);

    obniz.io4.output(false);
    obniz.io5.output(true);
    resetUart(1);

    $('#send0button').click(function () {
      obniz.uart0.send($("#uart0send").val());
      $("#uart0send").val("");
    })
    $('#clear0button').click(function () {
      $("#uart0receive").val("");
    })
    $('#send1button').click(function () {
      obniz.uart1.send($("#uart1send").val());
      $("#uart1send").val("");
    })
    $('#clear1button').click(function () {
      $("#uart1receive").val("");
    })
    $('select[name^="uart0-"]').on("click",()=>{resetUart(0)});
    $('select[name^="uart1-"]').on("click",()=>{resetUart(1)});
  }


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

今すぐ実行

HTMLがブラウザで開かれて実行されます。