This project is part of all the automation projects that you can find directly on my blog or by clicking on the links below.
- ESP32: program a microcontroller!
- Firebase: manage a protected database!
- GUI: coding a Graphical User Interface!
- Analyse Data from sensors
Introduction
The GUI (Graphical User Interface) is a form of user interface that allows users to interact with electronic devices through graphical icons. As part of my internship I was asked to create such an interface in order to interact with the systems already in place and those to come on the Vigyan Ashram campus. My colleague and friend Basile Pasquale has already started a similar job and you can go see his blog for more information by clicking on his name.
Programming Languages used
- HTML
- CSS
- JavaScript
Software used
- Visual Studio Code
- Extension: Live Server
- Extension: Node.js
General operation
For all automation projects, the general structure is the same:
- There is the ESP32 microcontroller (or an arduino uno or other card) which is responsible for communicating with the direct environment by measuring variables and controlling motors or LEDs.
- There is Firebase which serves as the basis of protected data and hosting for the website.
- There is the Graphical User Interface to allow the user to interact with all the features created for the corresponding project.
Here we will therefore focus on the third part correcting to the Graphical User Interface.
As can be seen in the image above, the structure of the GUI operation can be divided into 4 parts:
- The programming part (the longest to set up!) which can be done on any environment. I chose Visual Studio Code because it’s quite pleasant to use. The three programming languages used are HTML, CSS and JavaScript and we will have the opportunity to talk about them in another part.
- The hosting part on Firebase which is essential because it allows two things: to increase the security linked to data protection and moreover it allows to have in real time the same information for any device in the whole world. This part is detailed in the following blog. Firebase: manage a protected database!
- The browser you use then allows you to read files that have the .html .css and .js extensions that were coded in the first place. It is therefore the browser that takes care of the display of your web app and there may be differences depending on the one you are using.
- Finally, the graphical interface allows us to remotely control and measure all the systems we have implemented on the Vigyan Ashram campus. As you can connect from any computer or phone in the world, data protection is vital.
Programming part
As previously announced I used VS Code (Visual Studio Code) because it is easy to use and easy to learn. In addition, it can be used to code Arduino or ESP32 boards directly and therefore use a single platform for all our applications. A large part of the tutorials that I followed come from the site https://randomnerdtutorials.com/ and https://www.w3schools.com/ where everything is very well detailed.
The Live Server extension allows you to see in real time the progress of the website without having to refresh the page of your browser and delete the associated cache. I can only strongly advise you to install this extension if you are going to code any site from scratch!
Node.js is an open-source server environment. This library is used for running web applications outside the client’s browser.
The folder for a project linked to a web app is loaded with a multitude of files. Here we have the example of the BSF web app. It is important to have an overall idea of the usefulness of each one, here are the different ones that we have:
- The programming files .html (in orange), .css (in blue) and .js (in yellow), they are the heart of our project!
- Files related to Firebase that allow the browser to communicate with our database and the site to be host.
- Images that are used for a more enjoyable user experience. Here there is only the favicon (browser tab image) and the title image which is the Vigyan Ashram logo.
The differences between HTML, CSS and JavaScript are very well explained on the internet but I find that the image above summarizes the situation well. See https://html-css-js.com/
- HTML provides the basic structure of sites
- CSS is used to control presentation, formatting, and layout
- JavaScript is used to control the behavior of different elements
To connect our web app to the Firebase database, it is important to carefully check this part of the code. More details are available in the following blog. Firebase: manage a protected database!
GUI Overwiew BSF Example
The following screenshots correspond to the website linked with the BSF project. BSF stands for Black Soldier Flies and these are the measures taken in the cage where the flies are located at the back of the workshop. You can find more information about this project in corresponding blogs.
You can connect with the following identifiers to see by yourself:
- Email: VA_ESP32_BSF@gmail.com
- Password: Ask a Fab Lab representative.
- URL: https://va-bsf-temperature-humithy.web.app/
Protected connection interface to increase data security and associate an account for each user.
The “cards“, “gauges” and “charts” buttons display the corresponding blocks. The “view all data” button displays the data stored in the database.
The wet bulb should always be lower than the dry bulb, if not check that there is still water in the wet bulb. Humidity should never exceed 100%, if so that means the measured wet bulb temperature is higher than the measured dry bulb temperature.
Above the graph representing the wet bulb temperature measured as a function of time, the number of points displayed is to be indicated directly via the interface. For the dry bulb and humidity graphs it is the same thing.
The “view all data” button allows us to display the data measured so far.
The “More results” button allows you to display all the measurements recorded on this account to date, be careful this may take a little time to display! The “Download CSV” button allows you to save the data directly on your computer and to be readable with Microsoft Excel for example.