Contents
Let's see, step by step, how to adding a display to your project with NodeMCU or Wemos D1 Mini and ESP Easy.
In this case, I will take the example of the CO2 meterbut it can be done with any other type of project.
One of the advantages of ESP Easy (and my favouriteis that it enables us to connect to our project many different accessories without having to program or complicate our lives. with firmware modifications or adaptations. One of the most interesting elements are the displays, or "screens".displays".
And it's not just that it allows us to connect very easily "a screen"is that they are many different screens that we can connect almost effortlessly.
In this case I have decided to add a SSD1306 type display to the CO2 meter. OLED monochrome (blue characters on black background) of 0.96 inches (0.96″).
I have opted for this display because of these two advantages, but they are not the only ones:
- Use only two cables data (plus the two power supply pins). This makes it extremely easy to connect and, by using only two pins, leaves plenty of free pins for connecting other sensors and accessories.
- OLED technology has very low consumption. Important for those who want to use the display in a portable project with batteries.
- Looks pretty good outdoors. This is very important on certain occasions.
- Low price. These screens can be obtained for around €3 with shipping from China or around €7 from Spain.
0.96 inch white OLED IIC 128X64 I2C I2C white OLED display module SSD1306
On AliExpress you can buy the screen SSD1306 for about 3 Euros, shipping included, from this link. It is a shop with many positive reviews and the shipping is by AliExpress Standard Shipping, so you should have it at home in about two weeks.
- ✔️️ AZDelivery's 128 x 64 pixel OLED display has a strong contrast on the large 0.96 inch screen thanks to the innovative OLED technology.
- ✔️️ Due to the high resolution of 128 x 64 pixels, the screen provides ample space for the display of many elements.
- ✔️️ Easy connection of the display to Raspberry Pi and other microcontrollers via the I2C interface with only four pins! Thanks to the integrated display adapter, the module can be connected to the I2C bus immediately.
- ✔️️ By changing the I2C address and soldering a third contact, two displays can be operated simultaneously. The OLED module can be connected to 3.3 V.
- ✔️ This product includes an E-Book that provides useful information on how to start your project, helps with quick setup and saves time in the configuration process. We provide a number of application examples, comprehensive installation guides and libraries.
Connecting the SSD1306 display to the NodeMCU
The connection couldn't be easier. You have to make four connections. Two for power and two for data.
All you have to do is connect:
- VDD from SSD1306 to Vin of NodeMCU
- GND from SSD1306 to GND of NodeMCU
- SCL from SSD1306 to D1 of NodeMCU
- SDA from SSD1306 to D2 of NodeMCU
If your NodeMCU board has a VU pin, connect VDD to that pin. instead of Vin. Not all NodeMCU boards have this pin.
Be careful because the silkscreen on some of the NodeMCU V3 boards is wrong and says D2 instead of D1 (there are two D2), as you can see in this picture.
Obviously D1 is the one that is erroneously marked as D2 between D0 and "the other" D2.
IMPORTANTDon't rely on the order of the connections and double check them on your board. Sometimes different manufacturers make such changes that can make your day if you are not careful.
IMPORTANTThese instructions are for screens operating with 5V power supply. Make sure your display is powered at 5V. If your display is powered at 3.3V you will need to connect the VDD pin of the display to one of the pins marked 3.3V on your NodeMCU or Wemos D1 Mini (on some boards the silkscreen on this pin may be "3V" or "3V3").
The connection to another board, different from the NodeMCU based on ESP8266, or another one based on ESP32, will be very similar. We will only have to pay attention to the change in the pins. Here is the connection diagram with the Wemos D1 Mini, for example:
Configuration
The configuration is also very simple.
You have to follow the steps below (click on each image to see it bigger):
We will Tools -> I2C Scan.
This will scan the devices connected to the NodeMCU via I2C, and show them to you. You can then check that the display is properly connected.
You should get something similar to this.
Means that ESP Easy has detected the display a device of type PCF8574A OLED at address 0x3C.
Go to Devices (Devices)
Here you will see the list of devices you have created (if any, if you are doing it, as in the example, with the CO2 meter you should see the sensor).
Click on Add (add), on a free device, to add your new device.
Select from the drop-down menu the device you want to add, in this case "Display - OLED SSD1306" (or, better, the "Display - OLED SSD1306/SH1106 Framed", as shown below).recommended-)
Enter the configuration data:
- The name you want to give to the screen
- Enables the device
- Select "Normal" or "Rotated" depending on whether you have the display pinned up or down.
- The screen resolution in pixels. With the screen I'm using 128×64
- The size of the characters. Try it out to see which one you like.
- From "Line 1" to "Line 8" you will set the eight possible lines you want to appear on the screen, as explained below.
- You have the option of connecting a push button to one of the NodeMCU pins to turn the display on, so that it is normally off.
- The time it will take for the display to turn off if you turn it on using the button in point 7.
- The screen refresh time. How often the data will be updated.
When you are happy with the settings, press "Submit" and you should start to see information on the screen.
Displaying text on the display SSD1306
The SSD1306 allows you to display, in the configuration you have seen above, eight lines of text.
These eight lines of text may contain the following types of data:
- A fixed text
- The value of a sensor
- An ESP Easy variable such as the current time or your IP address.
Showing fixed text
As you have seen in the previous point, you have eight lines of text in which you can display either fixed text (in the example above, line 1 shows the fixed text "CO2 METER" with two spaces in front of it so that it appears centred on the screen).
To display fixed text, simply type the text you want to display on the corresponding line.
You can add uppercase, lowercase and some special characters by adding certain codes (note that it is not possible to write accented vowels):
Name | Character | Code |
---|---|---|
Grados | ˚ | {D} |
Degrees Celsius | ˚C | degreeC degree_C |
French inverted commas | " " | {<<} {>>} |
Greek letter Micro | µ | {u} |
Currency | € ¥ £ ¢ | {E} {Y} {P} {c} |
Mathematical symbols | x¹ x² x³ ¼ ½ ¾ ± × ÷ | {^1} {^2} {^3} {1_4} {1_2} {3_4} {+-} {x} {..} |
Showing the value of devices
To display the value of a device (a temperature, humidity, CO2 or any other sensor) you only have to include the device name and the value you want to be displayed in the format [DEVICE#VALOR].
In the example I have shown the PPM value of the CO2 device.
If you look at the configuration of that device (from the Devices tab and selecting the device you want to see):
You can see that the name of the device is "CO2"and the value we want to display on the screen is "PPM"Therefore, we will have to put in the line where we want to show it [CO2#PPM].
Note that you have a column for indicating the number of decimals that you want to be displayed. If the value must be an integer without decimals you can set it to 0.
Displaying system variables
There are a number of variables updated by ESP Easy itself that you can display.
These variables are as follows:
- %sysname% - Replaced by the name of the ESP Easy unit (defined on the Config tab).
- %ip% - Replaced by the ESP Easy IP
- %systime% - Replaced by current time
Combining the three
You can combine fixed text, sensor values and ESP Easy variables on the same line, allowing you for example to put in one line "CO2: [CO2#PPM] ppm" so that you can include a title before the sensor value and the units after it.
You could also type "TIME: %systime%" or "IP: %ip%".
NTP configuration in ESP Easy, or "setting the ESP8266 to time".
If you want to display the current time on the screen, using %systime%", or need it for some other reason, you have to take into account that the ESP8266 has no internal clock so you need to check the internet time.
It does this by means of the NTP protocol (Network Time Protocol), which is a very commonly used system in computers (your computer probably uses it, even if you don't know it, as is the case with Windows and Mac OS) and ESP Easy is prepared to use it very easily.
To set it up, you will have to follow a series of steps:
- Go to the "Tools" tab.
- Select the "Advanced Settings" option.
- Activate the use of the NTP protocol and assign europe.pool.ntp.org (or the one you prefer) as time server.
- Activate the DST option so that ESP Easy automatically switches between summer and winter time.
- Enter the corresponding time difference. In Spain 60 minutes, except for the Canary Islands, where it is 0.
Step-by-step video instructions
Although the process is simple, and should not give anyone too much trouble, I have recorded a video with step-by-step instructions on how to add the screen.
Even more options "Display - OLED SSD1306/SH1106 Framed"
If you want to, you can still more viewing optionsI recommend that when selecting the display in the ESP Easy drop-down menu you try the "Display - OLED SSD1306/SH1106 Framed"(instead of the "Display - OLED SSD1306"(see above).
Please note that "Display - OLED SSD1306/SH1106 Framed"consumes some more memory ESP8266 that the "Display - OLED SSD1306"so that in devices with many sensors connected o many rules extensive, it could lead to memory problems (normally it should not cause any problems).
I used it to write the article CO2 Sensors MH-Z19B FALSE and in the accompanying video, with two MH-Z19B sensors connected (one original and one fake), the SSD1306 display and three WS2812B LEDs without any problems, and there is still free memory for more.
The set-up is pretty much the same. This is how I have it set up:
And so the content (in this case I tell it to hide the header (where the SSID of the wifi network could be displayed, among other data), I tell it to scroll if there is a line that is too long, to turn on the display when new text arrives - in case it has been turned off by some rule -, and Line 1 and Line 2 I tell it to show me the data of the two sensors I have connected.
Write to the "Display - OLED SSD1306/SH1106 Framed"by means of rules:
In the above example the display is updated every 60 seconds, so any text or value displayed will only be updated every 60 seconds.
If you want you can write directly on the screen from the rules via the command oledframedcmd,,. (the command has to be a single parameter so if it includes spaces or commas you will have to write it in brackets, as in the following example), which gives you much more control.
In the following example rule, the value CO2#PPM is updated instantly on the display each time it changes. In addition, if CO2#PPM is less than 400, it displays the message "Initialising...", instead of its value.
On CO2#PPM do
If [CO2#PPM] > 399
oledframedcmd,1,"[CO2#PPM] ppm"
Else
oledframedcmd,1, "Initializing..."
Endif
Endon
Of course, you can combine it in the rules as you like. For example, in the following example I use an ESP Easy timer to update in the same rule the value shown on the display and the colour of a flashing "traffic light" LED depending on the CO2 level.
On Rules#Timer=1 do
if [CM1106#PPM]>1500
NeoPixelAll,32,0,0,0 // LED red
oledframedcmd,1,"[CM1106#PPM] ppm"
Elseif [CM1106#PPM] > 1000
NeoPixelAll,16,9,0 // LED orange
oledframedcmd,1,"[CM1106#PPM] ppm"
Elseif [CM1106#PPM] > 399
NeoPixelAll,0,32,0 // LED green
oledframedcmd,1,"[CM1106#PPM] ppm"
Else
NeoPixelAll,0,0,0,0 // LED off
oledframedcmd,1, "Initializing..."
Endif
looptimerset_ms,2,100
Endon
On Rules#Timer=2 do
NeoPixelAll,0,0,0,0 // LEDS OFF
looptimerset_ms,2,0
timerSet,1,2
endon
On System#Boot do
NeoPixelAll,0,0,0,0 // LEDS OFF
timerSet,1,2
EndOn
The size of the texts on the screen
The display will automatically adjust the size of the texts. to the number of lines you configure. Just select the number of lines you want to display, in the "Lines per Frame" option.
OLED with one line
"Lines per Frame: 1
Line 1: [CO2#PPM] ppm
OLED with two lines
"Lines per Frame: 2
Line 1: [CO2#PPM] ppm
Line 2: [Ambient#Temperature] ºC
OLED with three lines
"Lines per Frame: 3
Line 1: [CO2#PPM] ppm
Line 2: [Ambient#Temperature] ºC
Line 3: [Ambient#Humidity] %
If you put more lines than the screen is capable of displaying, it will display the different lines in different screens that will pass by one after the other (you can change the time between screen jumps).
You can also make the screens scroll by at the push of a button and even change the display of the screen shown from the rules.
As you can see, the display options are many and, as always, no programming required. Just make the changes you want from one convenient web page.
Connecting two OLED displays
In some projects it can be interesting to connect two OLED displays (or more than two) simultaneously.
There is no problem to do so and is very easy.
Here you can see a prototype CO2 meter with two 1.3″ OLED displaysThe two displays, one shows the CO2 concentration permanently and the other can display different data, such as temperature, humidity, etc.
As we have seen above, the OLED display has an I2C address that the ESP8266, ESP32 or other microcontroller uses to communicate with it. What we need to connect two displays to a single microcontroller is each display has its own I2C address and, quite simply, connect them in parallel and use them as if they were two completely independent screens.
Changing the I2C address of the OLED screen
IMPORTANT: It is very important to make sure that you use OLED displays that allow changing the I2C address. (many don't), otherwise you won't be able to do it this way (you would need an I2C multiplexer, which complicates things a bit). Below are the links to the screens I use that allow I2C address change.
For example, this 1.3″ OLED screen (a little larger than the normal ones, which are 0.96″) allows for change the I2C addressbetween 0x78 and 0x7A, relocating a resistor:
You can find this 1.3″ SSD1306 display on AliExpress by clicking here. If you prefer a screen 0.96″ SSD1306 that allows to change the I2C address, I bought this one. Both allow the I2C address to be changed.
Connection of two OLED I2C displays
If you are using a ModeMCU board to connect the two SSD1306 OLED displays in parallel would look like this:
If you are going to connect the SSD1306 OLED displays to a Wemos D1 Mini board the connections would be as follows:
All that remains is to configure ESP Easy to use the two OLED displays.
Configure ESP Easy to use two I2C OLED displays SSD1306
You simply have to add in the configuration (Devices tab) two devices "Display - OLED SSD1306/SH1106 Framed". (exactly as we have seen before with a single screen) and configure each one independently, with the data we want:
In some cases, the I2C addresses may not match what is displayed on the screen. (For example, on this screen I used, the silkscreen says that the addresses are 0x78 and 0x7A but the real addresses are 0x3C and 0x3D.
Remember that you can find out the addresses of the devices connected via I2C with the "I2C Scanner" in the "Tools" tab).
Thank you very much for taking the trouble to share these projects.
Last night I finished configuring the CO2 sensor and taking advantage of the fact that I had an OLED screen in a drawer that I never put on a flying wing with INAV, I am going to complete the CO2 project with the screen, which I find more comfortable to handle and very easy to install with your magnificent explanations.
And one question, how do I connect the
NodeMcu to another wifi network if we take it somewhere else ?
Thank you very much.
Greetings.
Hello Zulu.
Great, let us know how you have done with the screen and if, by following the tutorial, you find any faults or anything that needs to be improved.
On the subject of wifi, if you take it somewhere else:
I'm speaking from memory, but I seem to remember that if ESPEasy is not able to connect to the access point it has configured (as you say, when you take it to another place), it recreates the access point with SSID "ESPEasy" (as we saw in the installation tutorial) so that you can connect to it from the mobile and configure the access point you want at that moment.
In any case, what I would do, if I were to use it "portable" often, would be to configure the "Wifi Zone" on my mobile to share its connection via wifi, setting the SSID and password as the same as the ones I have at home.
This way, when you switch it on away from home, with your mobile phone sharing the connection, it will connect to it automatically.
This can be done on Android without any problem, on iOS (iPhone) I can't remember, because I haven't used it for a long time.
What a good idea to have a WiFi Zone with the same SSID and password as the one at home!
I have it all working now, including the OLED screen.
I have changed some lines to adapt them to my needs and the truth is that it is very easy: you change whatever you want, click Submit and immediately you see the changes on the screen and so on, until you get it to your liking.
The only incident I have had when following the tutorial is that in the drawing of the wiring from the SSD1306 to the NodeMCU the wires Red (VCC) and Black (GND) in my screen which is also a SSD1306 are changed, I guess it will be another manufacturer. It would not be out of place to warn that this can happen and that you should not rely only on the colours but double check the positive and negative, the result can be disastrous, I say this because of previous experiences. :-).
Otherwise everything was phenomenal. A ten.
I'll keep an eye out for further improvements to this project, and I'll take a look at the CNC to see if I'm able to make something, it's a gadget that shouldn't be missing in any model aircraft workshop.
Thank you very much.
Best regards.
Thank you very much for everything.
Regarding the warning about the connections, thank you very much, I have already included it in the article and, taking advantage of the fact that I was just putting together the video with the tutorial, it has come in handy to include it as well.
If you do the CNC project, keep us up to date with your progress. Indeed, for aeromodelling, it has a lot of possibilities.
Hi Mariete, first of all thank you so much for explaining to us "ignorant" in this matter all the steps to create the Co2 meter, I have already bought everything and I'm looking forward to get there to assemble it and experiment. I wanted to ask you a question, where does the power supply for the meter come from, if it is portable, and on the other hand, can you recommend a box with aeration so that it doesn't get hot and we can assemble it in a cool way?
Thank you very much for giving us your time
Greetings
Hello Luis.
Many thanks to you ?
I hope you get it right the first time, most of us have had no difficulty. If you have any doubts, you can see that there is already an important knowledge base here, so it is easy to find the help you need.
The power supply is via USB. Any mobile phone charger from 500mA will do. As long as it has more than 500mA, realyou will have no problems. It is advisable to use a charger of at least 1A (1000mA) to avoid possible problems. You can also use it with power bank batteries without any problem (I use them to leave them outside for a night so that they self-calibrate).
Please note that consumption is relatively high, so it is not possible to use it with batteries permanently.
About the box... I haven't seen anything too interesting. The best option is 3D printed boxes.
Thank you very much for everything Mariete, I take note of everything and as soon as I get it I start with it, I'm really looking forward to it...jjj
Greetings
One question... With the oled screen, would the sensor show us the data without wifi network?
Thank you
Yes, it is completely independent. It does not need wifi to work.
Great!
Thank you
Hi Mariete. I already have the display up and running. A very interesting project.
One question, could the display be configured differently so that it only shows one or two lines of information so that the texts are larger? My idea would be to take advantage of the resolution to see the co2 ppm value in full screen.
Hello Juan Luis.
I'm glad you've got the screen up and running.
Yes, you can.
The size of the texts is automatically adjusted depending on the number of lines shown on the display.
You only have to select one line in the "Lines per Frame" option to display a single line with a larger size. You have to set the display to "Display - OLED SSD1306/SH1106 Framed" as shown under "Even more options".
I will add this information to the article.
Best regards.
Thank you very much, I will try it that way. I'm thinking of leaving the meter with my son's teacher, who doesn't have one, and the easier the better.
This is a great idea. We need to help schools to have adequate air quality to reduce the transmission of the virus.
I know that there are quite a few teachers who, without having any idea of electronics or previous experience in tinkering, are building this project.
I have included in the article instructions on how to do it and some examples to give you an idea of how it will look.
Hi Mario. I don't get the option to hide the header on the screen: "Hide header". Could it be because of the version of esp easy? I have installed what I downloaded from your website.
Best regards.
Hello Juan Luis.
This is almost certainly the reason. The old version did not include that option. Download it again from the main tutorial page and update it.
Best regards.
Thank you very much. I downloaded the new firmware from your website and updated it from the esp administration website, then it restarted and I have the new option. I thought I was going to have to configure everything again but it has kept everything.
Great!
I love it when plans go well 😉.
good evening Mariete you are a makina, I have a question as we connect 2 screens can? ycmo would be the configuration thanks.
Hello José Manuel.
You can do it without any problem. You have it in the last part of the tutorial (I've expanded it a bit now taking advantage of your query).
Very complete article and very well explained. Thank you very much
Thank you very much, Andrés, for your words.
I'm glad you liked it.
Best regards.
What page do I use to add the screen? I've been watching videos for almost 2 weeks and doing everything they say and none of them work, the screen doesn't show any image.