websocket demo¶

This is a simple static index.html page that make use of a websocket channel to send json commands to a USB connected cc3200 launchpad board using NAIS junction.
This super simple example switches the red and yellow leds of a cc3200 launchpad
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../bootstrap/favicon.ico">

    <title>Led</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    <!-- Custom styles for this template -->
    <link href="cstyle.css" rel="stylesheet">

  </head>

  <body>
    <script>

      var ws;

      function connect() {
        ws = new WebSocket("ws://127.0.0.1:3000/");

        ws.onerror = function(event) {
          $('#ws_console').show()
          $('#red_btn').text('Red ?')
          $('#yellow_btn').text('Yellow ?')
        }

        ws.onclose = function(event) {
          console.log("conn closed, retrying in 2 seconds ...")
          setTimeout(function() {
            console.log("!! connection in progress ..." + ws)
            connect()
          }, 2000)
        }

        ws.onopen = function(event) {
          $('#ws_console').hide()

          // get led states
          ws.send(JSON.stringify({'leds': 'get'}))
        }

        ws.onmessage = function (event) {
          //$('#response').show()
          console.log("recv:" + event.data)

          led = JSON.parse(event.data) 
          switch (led.red) {
            case 'on':
              $('#red_btn').text('Red OFF')
              break
            case 'off':
              $('#red_btn').text('Red ON')
              break
          }
          switch (led.yellow) {
            case 'on':
              $('#yellow_btn').text('Yellow OFF')
              break
            case 'off':
              $('#yellow_btn').text('Yellow ON')
              break
          }


          var message = document.getElementById('response');
          content = document.createTextNode(event.data);
          message.innerHTML = event.data
          setTimeout(function() {
            $('#response').fadeOut(1000)
          }, 2000)
        };


      }

      connect()

      messages = document.createElement('ul');
      messages.className='list-group'

      $( document ).ready(function() {
        console.log( "ready!" );
        $('#ws_console').hide()
        $('#response').hide()

        $("#red_btn").click(function(event){

                  cmd = $('#red_btn').text()
                  switch (cmd) {
                    case 'Red ON':
                      ws.send(JSON.stringify({'leds':'set', 'red': 'on'}))
                      break
                    case 'Red OFF':
                      ws.send(JSON.stringify({'leds':'set', 'red': 'off'}))
                      break
                  }
                  event.preventDefault();
                });

        $("#yellow_btn").click(function(event){

                  cmd = $('#yellow_btn').text()
                  switch (cmd) {
                    case 'Yellow ON':
                      ws.send(JSON.stringify({'leds':'set', 'yellow': 'on'}))
                      break
                    case 'Yellow OFF':
                      ws.send(JSON.stringify({'leds':'set', 'yellow': 'off'}))
                      break
                  }
                  event.preventDefault();
                });



      });

      document.body.appendChild(messages);
    </script>


    <div class="container">

    <div class="card" style="width: 20rem;">
      <img class="card-img-top center"  src="../../../docs/images/nais-logo.png" alt="Card image cap">
      <div class="card-block">
          <h4 class="card-title">Leds reloaded</h4>
        <p class="card-text">simple UI for driving the leds on the
           <a href="http://www.ti.com/product/CC3200"> cc3200 launchpad</a> 
            with JSON encoded packets using websocket protocol
          </p>

      <div class="btn-toolbar" role="toolbar">
        <button id="yellow_btn" class="btn btn-warning m-2" type="submit">Yellow ?</button>
        <button id="red_btn" class="btn btn-danger m-2" type="submit">Red ?</button>
      </div>


      </div>
    </div>


    </div> <!-- /container -->

    <div class="container">
      <div id="response" class="alert alert-success" role="alert"></div>
    </div>
    <div class="container" style="margin-top:20px">
      <div id="ws_console" class="hidden alert alert-danger" role="alert">
        <strong>Whoops!</strong> connection to nais router failed, retrying ...
      </div>
    </div>


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <!-- <script src="../../bootstrap/assets/js/ie10-viewport-bug-workaround.js"></script> -->
  </body>
  </html>
websocket demo¶

Related Topics

This Page
