Serial GUI with BIPES

Arduino, ESP32, ESP8266, Raspberry Pi, etc: we always need a quick and simple interface (GUI) to view data and send data to microcontroller boards. With a little help from Jorge Marques (https://github.com/gastmaier) now we can push strings to be sent to the Serial port. These strings can be prepared/customized on any HTML freeboard widget on BIPES IoT tab. Note that we can use this to send pre-defined serial messages to any serial device! Of course, as already done many times, you can also receive data and route it to the freeboard using BIPES data source, allowing serial data to be seen on any freeboard widget.

Direct link to the project:

https://bipes.net.br/beta2/ui/#e45bwx

To use it, create a new pane and add a HTML widget to the IOT tab with freeboard:

Then, click on JS Editor and paste the code for each widget:

You can type/build any user interface using HTML. It will be automatically saved and you can share with anyone when you share the BIPES project by URL. The important part is:

parent.bufferPush(cmd);

The parent.bufferPush(cmd); command will send a message from your Javascript/HTML GUI to the serial device connected to BIPES console on the web browser. There are some examples below, but you can build your own user interfaces!

Code for the slider:

<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
</style>
</head>
<body>

<h1>Slider test</h1>
<p>BIPES and Freeboard</p>
<p>Send value to serial console</p>
<p>from freeboard!</p>

<div class="slidecontainer">
  <input type="range" min="1" max="65000" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo2"></span></p>
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo2");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  var cmd='pwm25.duty_u16(' + this.value + ')' + String.fromCharCode(10) + String.fromCharCode(13);
  console.log('cmd='+cmd);
  parent.bufferPush(cmd);  
}
</script>

Code for the buttons:

<h1>Button Test</h1>
<p>Send value to serial console
from freeboard!</p>

<center>
<br>
<button onclick="ligar()">LED On</button>
<br>
<br>
<button onclick="desligar()">LED Off</button>
<br>
<br>
<button onclick="pwm()">PWM Mode</button>

<p id="demo"></p>

<script>
function ligar() {    
      var cmd='gpio_set(25, True)' + String.fromCharCode(10) + String.fromCharCode(13);
      console.log('cmd='+cmd);
      parent.bufferPush(cmd);
}

function desligar() {    
      var cmd='gpio_set(25, False)' + String.fromCharCode(10) + String.fromCharCode(13);
      console.log('cmd='+cmd);
      parent.bufferPush(cmd);
}

function pwm() {    
      var cmd='pwm25 = PWM(Pin(25))' + String.fromCharCode(10) + String.fromCharCode(13);
      parent.bufferPush(cmd);
      var cmd='pwm25.freq(1000)' + String.fromCharCode(10) + String.fromCharCode(13);
      parent.bufferPush(cmd);    
}
</script>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s