lucstechblog: Freeboard revisited 3: freeboard console

For an index to all my stories click this text.

What we are going to do.

For testing purposes I wanted to have some kind of console that can send data to Freeboard.

The above picture shows how the console looks. It is an HTML page (webpage) that resides on your harddisk and opens in your browser just by clicking on it.
The console sends at regular times (in this version every 10 seconds) a random value, the state of 2 simulated switches and the value of a slider to Dweet. That data then can be fetched by Freeboard.

Background.

The general idea is to build a complete IOT dashboard with Freeboard.
Freeboard is an IOT dashboard that is commercially and open-source available. A few years ago I wrote about Freeboard in this story: http://lucstechblog.blogspot.com/2019/10/freeboard.html
Unfortunately a few months after I published that story Freeboard was no longer available for free. If you used their servers you needed to pay a fee starting at 12$ a month. For most hobbyists that's a lot of money.

Fortunately Freeboard is also available on Github as open source. To use it you need to download the software and install it on your own webserver. I tried to put it on a github page. But that was not going to work. Read why Freeboard does not work on a Github page here: http://lucstechblog.blogspot.com/2023/08/freeboard-revisisted-part-1.html

So then I put it on a webpage, build on the free webhost service 000webhost (https://www.000webhost.com/) and that worked just fine as this story showed: http://lucstechblog.blogspot.com/2023/08/freeboard-revisited-2.html
In the end we are going to use Freeboard to display sensor data from ESP8266's and ESP32's and put virtual switches on Freeboard to switch lamps, fan's etc to build a complete home automation system.

How it is done

In the most simple setup Freeboard sends and gets it's data from Dweet. If you are not familiar with Dweet please read this story first: https://lucstechblog.blogspot.com/2019/05/dweet-volatile-iot-cloud-service.html

As our console is written in Javascript the first step is to analyse how you can send data from Javascript to Dweet. Well luckily that is easy with the fetch() command. Suppose your Thing name is dweettest and the data you are going to send is a fake temperature value. The fetch command looks like this:

fetch("https://dweet.io/dweet/for/dweettest?temp=22")

To send multiple values using the same thing we just have to expand this fetch command a bit.

fetch("https://dweet.io/dweet/for/dweettest?temp=22"+
       "&val1=12"+
       "&val2=28")

This example sends a fake temperature value of 22 and two other values named val1 and val2 (being 12 and 28) to dweet. So to send this to Dweet we have to make a small web-page which code looks like this:

<!DOCTYPE html>
<html>
<script>
   fetch("https://dweet.io/dweet/for/dweettest?temp=22"+
       "&val1=12"+
       "&val2=28")
</script>
</html>

Put this code in https://jsfiddle.net/ and run it.

Now open an empty webpage tab and paste this line into the url:
https://dweet.io/get/latest/dweet/for/dweettest and you will be presented the following result.

So here we have it. This is how Javascript sends data to Dweet.

The console program.

At the start of this story I showed you how the console would look. And here is the complete program that achieves this:

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h2 style="color:red">Send multiple values to Dweet</h2>

<h2>Random</h2>
<div id="randdiv">Random Value = </div>

<h2>Switch</h2>
<button onclick="switchon()">ON</button>
<button onclick="switchoff()">OFF</button>

<h2>Switch2</h2>
<button onclick="switchon2()">ON</button>
<button onclick="switchoff2()">OFF</button>

<h2>Default range slider:</h2>
<input type="range" min="1" max="100" value="50" id="slider" class="slider">
<p id="slidval">Value : </p>

<script>

// send a randon value each 10 seconds
var repeat = setInterval(dooften, 10000);

var buttonsw = 0;
var sliderval = document.getElementById("slider").value;
var whole=0;

document.getElementById("slidval").innerHTML="Slider Value = "+sliderval;
document.getElementById("randdiv").innerHTML="Random Value = "+whole;

// switch 1 on or off
function switchon()
{
  buttonsw=1;
  senddata;
}

function switchoff()
{
  buttonsw=0;
  senddata();
}

// switch 2 on or off
function switchon2()
{
  buttonsw2=1;
  senddata;
}

function switchoff2()
{
  buttonsw2=0;
  senddata();
}

function dooften()
{
senddata();
}

slider.onchange = function() {
  slidval.innerHTML = "Slider Value = "+this.value;
  sliderval=this.value;
  senddata()
} 

function senddata() {
   random = Math.random() * (25);
   whole = Math.floor(random) + 1;
   fetch(`https://dweet.io/dweet/for/lucranval?
             randval=`+whole 
             +`&switch=`+buttonsw
             +`&switch2=`+buttonsw2
             +`&slider=`+sliderval);
   document.getElementById("randdiv").innerHTML="Random Value = "+whole;
};

</script>
 
</body>
</html>

I know it is frowned upon by all so called Javascript professionals. But for small projects like this I just use plain old Notepad as my editor.
Copy this program into Notepad on your PC and save it as console.html

For those interested in Javascript I can recommend my book that contains over 500 tips for working with Javascript. You can find the book on Amazon:

Javascript tips by Luc Volders

To start the console you only have to open the folder where you saved console.html and double click on it. Your default web browser will open with the console up and ready.

Open your Freeboard in another webbrowser page and start with putting 2 switches, a sparkline and 2 gauges on the Dashboard.

Assign the dweeted variables to the Freeboard elements and you can start testing. If you do not know how to do that please re-read my first story on Freeboard which you can find here: http://lucstechblog.blogspot.com/2019/10/freeboard.html

In the above program the Thing is called lucranval and the variables are randval (for the random value), switch, switch2 and slider. Please rename the Thing and variable names so your tests will not interfere with others that are reading this story and use the same names.

Go ahead. Experiment with Freeboard and this console. Look into Javascript and adapt the program to your own liking.

Till next time
have fun

Luc Volders

Friday, August 25, 2023

Freeboard revisited 3: freeboard console