The BB-400 provides a html WebSocket Tester in order to read and modify the status of the IO lines, this FAQ will describe how to use it in further detail. 

 

Sample html program

Copy the following code into your sample program:

<html>
<head>
  <meta charset="utf-8" />
  <title>BB-400 WebSocket Tester</title>
  <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script language="javascript" type="text/javascript">
    $(function(){

      var currentIOState, websocket;

      var $outputText = $("#outputtext"),
        $inputText = $("#inputtext"),
        $sendButton = $("#sendButton"),
        $clearButton = $("#clearButton")
        $connectButton = $("#connectButton"),
        $disconnectButton = $("#disconnectButton"),
        $outputs = $("#outputs");
      
        $connectButton.on("click", doConnect);
        $disconnectButton.on("click", doDisconnect);
        $sendButton.on("click", function(){ doSend( $inputText.val() ); })
        $clearButton.on("click", clearText);
        $outputs.on("click",toggleOutput)
      
      function doConnect() {
        websocket = new WebSocket($("#url").val());
        websocket.onopen = onOpen;
        websocket.onclose = onClose;
        websocket.onmessage = onMessage;
        websocket.onerror = onError;
      }

      function onOpen(evt) {
        writeToScreen("connected\n");
        $connectButton.prop('disabled', true);
        $disconnectButton.prop('disabled', false);
      }

      function onClose(evt) {
        writeToScreen("disconnected\n");
        $connectButton.prop('disabled', false);
        $disconnectButton.prop('disabled', true);
      }

      function onMessage(evt) {
        writeToScreen("response: " + evt.data + '\n');
        try{
          var json = $.parseJSON(evt.data);
          if(json.inputs != null && json.outputs !=null)
          {
            setState(json);
          }
        }
        catch(e){/*do nothing - its not json*/}
      }

      function setState(newState){
        newState.outputs.forEach(function(val, index){
          $("#output"+index)
            .toggleClass("alert-success", !!val)
            .toggleClass("alert-danger", !!!val)
        });
        newState.inputs.forEach(function(val, index){
          $("#input"+index)
            .toggleClass("alert-success", !!val)
            .toggleClass("alert-danger", !!!val)
        });
        currentIOState = newState;
      }

      function toggleOutput(e){
        $this = $(e.target);
        //want to invert current state
        var outputNum = parseInt($this.attr('id').replace("output", ""));
        var newValue = currentIOState.outputs[outputNum] == 1 ? 0 : 1;
        currentIOState.outputs[outputNum] = newValue
        websocket.send(JSON.stringify(currentIOState.outputs));
      }

      function onError(evt) {
        writeToScreen('error: ' + evt.data + '\n');

        websocket.close();
        $connectButton.prop("disabled", false);
        $disconnectButton.prop("disabled", true);
      }

      function doSend(message) {
        writeToScreen("sent: " + message + '\n'); 
        websocket.send(message);
      }

      function writeToScreen(message) {
        $outputText.val($outputText.val()+ message) 
        $outputText.scrollTop($outputText[0].scrollHeight - $outputText.height());
      }

      function clearText() {
        $outputText.val("");
      }

      function doDisconnect() {
        websocket.close();
      }
    })
  </script>
  </head>

  <body>
    <div class="container">
    <h1>BB-400 Websocket Tester</h1>
    <h2>Inputs</h2>
    <div class="row">
      <div id="input0" class="col">DIN0</div> 
      <div id="input1" class="col">DIN1</div> 
      <div id="input2" class="col">DIN2</div>
      <div id="input3" class="col">DIN3</div>
      <div id="input4" class="col">DIN4</div>
      <div id="input5" class="col">DIN5</div>
      <div id="input6" class="col">DIN6</div>
      <div id="input7" class="col">DIN7</div>
    </div>
    <h2>Outputs</h2>
    <div id="outputs" class="row">
      <div id="output0" class="col">DOUT 0</div>
      <div id="output1" class="col">DOUT 1</div>
      <div id="output2" class="col">DOUT 2</div>
      <div id="output3" class="col">DOUT 3</div>
      <div id="output4" class="col">DOUT 4</div>
      <div id="output5" class="col">DOUT 5</div>
      <div id="output6" class="col">DOUT 6</div>
      <div id="output7" class="col">DOUT 7</div>
    </div>
    <form name="myform">

          <textarea id="outputtext" class="form-control" rows=10></textarea>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">Command</span>
            </div>
            <input id="inputtext" type="text" class="form-control"  value="$01M" />
          </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">URL</span>
          </div>
          <input id="url" type="text" class="form-control" placeholder="ws://192.168.0.85:8989" aria-label="ws://192.168.0.85:8989" aria-describedby="basic-addon1" value="ws://192.168.0.85:8989/" />
        </div>
      <div class="form-group">
        <input type="button" class="btn btn-primary" id=connectButton value="Connect">
        <input type="button" class="btn btn-light" id=disconnectButton value="Disconnect" disabled="disabled">
        <input type="button" class="btn btn-primary" id=sendButton value="Send">
        <input type="button" class="btn btn-light" id=clearButton value="Clear">
      </div>
    </form>
  </div>
  </body>
</html>   

 

 

When running the BB-400 WebSocket Tester, please ensure that you update the IP address to that of your BB-400.

Opening the program in a web browser will open up the following page:

http://www.brainboxes.com/files/pages/support/faqs/bb-400-faqs/BB400-websockets-tester-main-screen.pngModifying the URL to the BB-400 IP address and clicking on Connect will give the following screen:

http://www.brainboxes.com/files/pages/support/faqs/bb-400-faqs/BB400-websockets-tester-connect.pngOnce connected you can see that the inputs and outputs are highlighted in green if they are high and red if they are low. Clicking on a output changes its configuration from on or off. Once an output is changed the new status of the IO lines appears in the response box. The status of the IO lines can be adjusted as many times as needed, and you can observe that the response occurs immediately, from both the response messages, as well as the response of the LEDs on the front of the BB-400. 

BB-400 WebSocket Tester and ASCII TCP

The BB-400 WebSocket Tester also allows ASCII commands to be sent in order to read and adjust the status of the IO lines.  For example, the command

$01M 

retrieves the name of the device:

 

http://www.brainboxes.com/files/pages/support/faqs/bb-400-faqs/BB400-websockets-tester-connect-ascii-command-device-name.png

The command

#01N

can be used to read the status of a specific IO line, where N is the IO line number from 0-7. 

http://www.brainboxes.com/files/pages/support/faqs/bb-400-faqs/BB400-websockets-tester-connect-ascii-command-read-status-specific-io-line.pngThe response shows how many times a specific IO line has been adjusted. 

For more information regarding ASCII commands, please refer to the following: FAQ ASCII protocol and commands

 

 

This FAQ Applies to the following Brainboxes Product Ranges: