For an index to all my stories click this text
This is another entry in my series about Freeboard. Before we go on I will give a quick overvieuw on the previous stories.
The first story on Freeboard was published in October 2019 on this weblog. This story is a tutorial on all the basics you need to know and use for working with Freeboard. So please read this first. You can find that story here: http://lucstechblog.blogspot.com/2019/10/freeboard.html
A few months later Freeboard was no longer a free service. You needed to pay a monthly fee to use their servers. That pissed me off as some of my readers were using this service as a result of my story. But there was nothing I could do about it.
Then I found a story written by a new service that brings block-based programming to the ESP8266, ESP32 and Raspberry Pi Pico. They used Freeboard as a means to display the IOT data and stated that it was easy to setup Freeboard on your own site. The Freeboard sourcecode was published on Github and free to use. So I forked Freeboard to my own Github repositry and tried to install Freeboard on Github pages which unfortunately failed. Why ?? Well read this story: http://lucstechblog.blogspot.com/2023/08/freeboard-revisisted-part-1.html
Next step was to try to install Freeboard on a free webhost and that succeeded. So if you want to use Freeboard and do not have your own server read this story and you are ready to go: http://lucstechblog.blogspot.com/2023/08/freeboard-revisited-2.html
For testing purposes I then build a small Javascript program that runs in your browser and sends random values, switch (on-off) values and a slider value to Freeboard. Here is the story that shows how to make such a console yourself: http://lucstechblog.blogspot.com/2023/08/freeboard-revisited-3-freeboard-console.html
Using a free webhost to run your webserver is a great means to get things done. However it makes you dependend on a cloud-based service. To avoid that I installed Freeboard on a spare Raspberry Pi and that works as a charm. So now I have my own Freeboard server. This story tells how to install Freeboard on your own Raspberry Pi webserver: http://lucstechblog.blogspot.com/2023/09/freeboard-revisited-4-install-freeboard.html
What we are going to do.
Just have a look at the above picture. It is a nice dashboard for your IOT projects. But something is missing. Freeboard offers gauges, a graph, and indicators for switches. But there are no sliders for controlling motor speeds or switchess for putting lamps on or off. The standard version of Freeboard can only display data. It can not send data to your esp's to set lamps on or off etc.
Luckily for us there are a lot of people working with Freeboard and there are some plug-ins available that makes the things we are missing available. Just search with Google for Freeboard add-ons or plugins and you will stumble upon some great expansions for Freeboard.
I am going to show you how to install the Onlinux plug ins. You can find these at the original Github page https://github.com/onlinux/freeboard-plugins Next to that you can find a copy (fork) at my own Github repositry: https://github.com/Lucvolders/freeboard-plugins I urge you to get a Github account and fork it yourself from the original Github page or from mine.
Installing the Freeboard plugins on 000webhost.
The first step is to browse to my Github repositry (or yours if you forked mine) and click the green Code button to download the repositry to your harddisk.
You can find my repositry at https://github.com/Lucvolders/freeboard-plugins
The downloaded file is a zip-file called freeboard-plugins-master. It will be in your download folder on your harddisk. Click on the zip file to open it.
Open a new window and choose a work-directory. Make a new map and call it freeboard-plugins
Copy the files from the zip file into the new map. 
I had Freeboard already downloaded on my own computer and there is a map called plugins. Two maps were already present freeboard and thirdparty. So I added the freeboard-plugins map 
Use your web browser to visit the 000webhost, login and choose "manage website".
Now drag the freeboard-plugins folder from your harddisk to the 000webhost filemanager and the files will be copied to the Freeboard public.html/plugins folder.
This is how the 000webhost file manager should show your just updated map.
The plugins folder contains 5 plugins which we are going to install in Freeboard: actuator.js, horizontal_linear_gauge.widgets.js, plugin_highcharts.js, slider-plugin.js and switch.js 
To install these we have to modify the index.html file. So click on public_html to get back to the main part of our website. Now double-click on index.html to open this file in an editor.
In the editor look for the next lines
<script type="text/javascript">
head.js("js/freeboard_plugins.min.js",
// *** Load more plugins here ***
function(){
Change these lines to add the new plug-ins like shown below.
<script type="text/javascript">
head.js("js/freeboard_plugins.min.js",
"plugins/freeboard-plugins/switch.js",
"plugins/freeboard-plugins/actuator.js",
"plugins/freeboard-plugins/horizontal_linear_gauge.widgets.js",
"plugins/freeboard-plugins/plugin_highcharts.js",
"plugins/freeboard-plugins/slider-plugin.js",
// *** Load more plugins here ***
function(){
When done click save and close the File Manager. You're Done !!
Installing Freeboard plugins on the Raspberry Pi.
The story where we installed Freeboard in the Apache webserver made it clear that all files should be installed in var/www/html. You can re-read that story here: http://lucstechblog.blogspot.com/2023/09/freeboard-revisited-4-install-freeboard.html
The photo shows that there is a subdirectory called plugins. We need to put the new plugins into that subdirectory.
There are already two directories in there called freeboard and thirdparty. We are going to add the new directory with plugins here.
We can copy the new plugin directory directly from github into the plugins directory. Open a terminal window and give the following commands.
pi@raspberrypi:~ $ cd ..
pi@raspberrypi:/home $ cd ..
pi@raspberrypi:/ $ ls
bin dev home lost+found mnt proc run srv tmp var
boot etc lib media opt root sbin sys usr
Now we are sure we are in the system directory
pi@raspberrypi:/ $ cd var
pi@raspberrypi:/var $ cd www
pi@raspberrypi:/var/www $ cd html
pi@raspberrypi:/var/www/html $ cd plugins
These commands bring us to the /var/www/html/plugins directory
pi@raspberrypi:/var/www/html/plugins $ sudo git clone https://github.com/Lucvolders/freeboard-plugins
This command copies the freeboard-plugins repositry from Github right into our /var/www/html/plugins directory.
The command is: sudo git clone https://github.com/Lucvolders/freeboard-plugins
Cloning into 'freeboard-plugins'...
remote: Enumerating objects: 96, done.
remote: Counting objects: 100% (12/12), done.
remote: Compressing objects: 100% (12/12), done.
remote: Total 96 (delta 4), reused 2 (delta 0), pack-reused 84
Unpacking objects: 100% (96/96), done.
pi@raspberrypi:/var/www/html/plugins $ 
And it's done.
The only thing left to do is to alter Freeboards index.html file to include the new plugins.
First step is to get back to the the var/www/html directory
Clich with the right mouse button on the index.html file and edit it with the Text Editor (Simple Text Editor).
In the editor look for the next lines
<script type="text/javascript">
head.js("js/freeboard_plugins.min.js",
// *** Load more plugins here ***
function(){
Change these lines to add the new plug-ins like shown below.
<script type="text/javascript">
head.js("js/freeboard_plugins.min.js",
"plugins/freeboard-plugins/switch.js",
"plugins/freeboard-plugins/actuator.js",
"plugins/freeboard-plugins/horizontal_linear_gauge.widgets.js",
"plugins/freeboard-plugins/plugin_highcharts.js",
"plugins/freeboard-plugins/slider-plugin.js",
// *** Load more plugins here ***
function(){
And we are done.
As you can see this is a lot easier as installing plugins on the 000webhost webpage. Although the basic commands are the same.
The result.
Open your browser to Freeboard wether it is on your 000webhost server or on your local Raspberry.
As you can see my Freeboard runs on my Raspberry Pi with my local IP number 192.168.1.87. Choose Add pane and then press the + to add a new widget. And there is the list with widgets including the new widgets.
What do the new plugins do.
There are 5 new plugins and I briefly tell you what they do.
Switch.
Well thet is obvious. You can put the switch on or off and then it sends a command to a certain URL. That URL is for example the IP adress of an ESP8266 or ESP32 with the command to put a led or relays on or off. However the commands are not limited to on or off, it also may be "red" or "slow" or whatever you might need.
The Actuator.
The Actuator has two functions. It tests the status of a switch (on or off) and represents that with a led. But if you click it it works the same as a switch and sends a command to an URL.
The Horizontal Linear Gauge
Well that is obvious. It displays a horizontal beam that represents a received value.
Time Series (Highcharts)
A chart with a different look as the standard Sparkline chart.
Slider
The slider checks a value just like the actuator and shows that. If you change the slider manually it sends a command to an URL just like the switch or actuator.
The actuator, switch and slider can send data with an URL to an ESP8266 or ESP32. The ESP at that time must be running a webserver that gets the command and acts on it.
An example on how this works can be found at: http://lucstechblog.blogspot.com/2020/02/domoticz-sending-to-esp.html In that story information is send from Domoticz to an ESP webserver that sets a led on or off. Sending command from Freeboard to the ESP's webserver is not much different.
Please send a mail if you need assistance with this. I am not going to answer individual mails but if enough people send a request I will write a story on this weblog on how to do this.
So start experimenting and
have fun
Luc Volders
