FAQs
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:
<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>
<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("connectedn");
$connectButton.prop('disabled', true);
$disconnectButton.prop('disabled', false); }
function onClose(evt) {
writeToScreen("disconnectedn");
$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>
<div>
</div>
<div>
<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">
<div class="input-group mb-3">
<div class="input-group-prepend"><span id="basic-addon1" class="input-group-text">Command</span></div>
<input id="inputtext" class="form-control" type="text" value="$01M" />
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"><span id="basic-addon1" class="input-group-text">URL</span></div>
<input id="url" class="form-control" type="text" value="ws://192.168.0.85:8989/" placeholder="ws://192.168.0.85:8989" aria-label="ws://192.168.0.85:8989" aria-describedby="basic-addon1" />
</div>
<div class="form-group"><input id="connectButton" class="btn btn-primary" type="button" value="Connect" />
<input id="disconnectButton" class="btn btn-light" disabled="disabled" type="button" value="Disconnect" /> <input id="sendButton" class="btn btn-primary" type="button" value="Send" />
<input id="clearButton" class="btn btn-light" type="button" value="Clear" /></div>
</form></div>
</div>
<div>
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:
Modifying the URL to the BB-400 IP address and clicking on Connect will give the following screen:
Once 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:
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.
The 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.
FAQs
