Web UART Console

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

What's this

Use UART 2ch from Browser.

Simple send/receive console.

Pin assign is

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@2.0.2/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>

Run Now

The html will be opened to run a program.

You will Get in Few Days

Circuit for Starter “obniz Board” is available on Amazon and other online stores.
You can get it at below

Our products and resellers

Forum

Visit our developer’s forum to discuss and discover technologies.

Forum

Contact

Feel free to contact out support and technical team.

Contact us