Bootstrap (Web Server ESP8266): use the Bootswatch themes

Bootswatch offers free Bootstrap themes. We continue the series of articles on the programming of the Web Server part of the ESP8266. In this tutorial we will see how to customize the default theme (replace the default CSS style sheet) of the Bootstrap framework. If you take the train running, in the previous tutorial, we saw how to add the Bootstrap framework in HTML to get a modern view. The Bootstrap style sheet (CSS file) can easily be modified to meet your needs but the easiest way is still to use the many themes (for the most part free) available online.

How do I change the Bootstrap default theme?

It is possible to modify the CSS style sheet of the Bootstrap framework or to add new styles by writing them oneself but it is a shame to have to do everything by hand while there are very many styles Available on the internet (very often free of charge). Can not test them all. I suggest you try the themes of BootstrapCND.

To change the style of our page, simply point to another style sheet, ie we will replace this link in the code of the page.

Like Bootstrap, it is not necessary to download files locally, we will simply point to the CND (file server) of BootstrapCND. This will give for example for the Cosmo theme the following link.

BootstrapCND also puts a key to verify that the recovered file has not been corrupted (it contains no malicious code). I did not include this check in this example.

BootstrapCDN provides 16 themes found in the Bootswatch section. If you need it, BootstrapCDN also provides a link to retrieve Font Awesome symbols.

How to send dropdown selection by HTTP request?

I take advantage of this tutorial to introduce a new component proposed by Bootstrap, the button drop down (which is also known as the combo) which allows to create a selection list. As usual there are several methods to send the selection made in the list. Since we do not necessarily want to embed javascript code, I suggest you go through a little trick that consists of creating an invisible field in which we will copy not possible before calling the submit () function.

We will create a form in which the drop down button and the invisible field (an input field) will be placed. For this to work, it is important to correctly name the HTML elements and assign them an identifier (id). Let’s see how it works:

  • form method = ‘POST’ name = ‘selecttheme’ id = ‘selecttheme’: a form is created that has the name and the selecttheme id. This is not a problem. The form data will be sent by an HTTP request using the POST method.
  • input class = ‘span’ id = ‘choicetheme’ name = ‘theme’ type = ‘hidden‘: the invisible input field (if you want to see what happens, change the type by text). The name parameter will be the key that will contain the value of the selected theme in the list
  • onclick=’$(\”#choicetheme\”).val (\”bootstrap\”); $(“#selecttheme\”).submit() ‘: for each choice of the list, one executes a jquery command when a click is detected. In the hidden field (#choixtheme) we copy the value that corresponds to the section (this will be the value that will be sent to the Arduino code). Then we run a submit() which will send the form data (#selecttheme).

To see what happens, open the development tools on your browser is select a theme to view the query sent to Arduino code.

demo webserver esp8266 drop down request http post theme selected

Change theme in dynamics

Now it only remains to add a treatment to refresh the page each time the user selects a theme. To do this, we need to add a test on the theme argument in the handleRoot() function.

A theme variable is used to store the value selected by the user. Then, when creating the HTML page, it is enough to make a test on the value of the theme to know if the user wishes the default theme or one of BootstrapCDN.

Project Code

I adapted the code from the previous tutorial that recovers the temperature and humidity of a DHT22 probe and the atmospheric pressure of a BMP180. The following material was used.

esp8266 Wemos D1 mini Any ESP8266 ESP-12 module, for example Wemos D1 Mini
 BMP180 Atmospheric pressure

BMP180

Broches DHT22 Temperature and humidity sensor

DHT11 or DHT22

jumper dupont Jumper Dupont
breadboard Breadboard
led 3mm Led (optional, follow the WiFi activity)
resistance 220ohms Resistor 220Ω (optional)

Wiring

Here is a table of pin marking and correspondence between Arduino and ESP8266.

Sensor Pin ESP8266 Pin (Wemos D1 mini)
DHT22 VCC 5V
GND G
Data D4
BMP180 VCC 5V
GND G
SDA D2
SCL D1

It remains to change the ssid as well as the password of the WiFi network before uploading the code in the ESP8266.


Take advantage of new Bootswatch themes

The program starts with Bootstrap theme. The selection list is at the bottom of the page. With each change of theme, it is downloaded (unless it is already cached on the ESP8266) and the page is rebuilt with the new style sheet. Here are some examples. I let you discover the other themes by yourself.

demo webserver esp8266 theme bootstrap

Default Bootstrap 3.3.7 theme

 

demo webserver esp8266 theme bootstrapCDN darkly

Bootswatch Darkly theme

 

demo webserver esp8266 theme bootstrapCDN readable

Readable Bootswatch theme

 

demo webserver esp8266 theme bootstrapCDN superhero

Superhero Baatswatch theme

What give a very pro and very well finished aspect to all your projects DIY ESP8266! Feel free to share screen impressions of your achievements in the comments.

Note. All the tutorial was developed on the IDE Arduino 1.8.1 installed on an Orange Pi Plus 2e (presented here) running under Armbian (Ubuntu 16.04 LTS). Follow this tutorial to learn how to install the Arduino IDE on Linux (ARM or x86).

Subscribe to the weekly newsletter

No spam and no other use will be made of your email. You can unsubscribe anytime.

DIY Projects