I often see blog articles where the HTML code is embedded in the Arduino file. You can do this for a mini demonstration, but it’s complete rubbish for everyday use. It is far too confusing and as soon as the project grows it is no longer usable.

The proper alternative is to set up a folder called “data” and store the web pages in this folder as html files. In addition, the styling is saved as a CSS file and functions can even be executed via a JavaScript file. So everything is 1:1 like on a normal web server!

This might also be interesting for you: WeMos D1 R2 first steps and Wifi integration

List of components

• Arduino IDE (development environment)
• WeMos D1 R2

The setup of the file system (officially SPIFFS) needs to be done once and is very easy:

(First you should have completed the basic setup from the first part!)

1. Download a copy of the file “ESP8266FS-0.2.0.zip” from GitHub and unzip it
2. Place the file esp8266fs.jar in the Arduino tool directory. The path looks like this: [home_dir]\Arduino\tools\ESP8266FS\tool\esp8266fs.jar (See picture) I had to create the path part tools\ESP8266FS\tool\ in the Arduino folder myself.
3. Restart the Arduino IDE.

That’s it already! You can now see the new item “ESP8266 Sketch Data Upload” in the Arduino IDE under Tools.

How can I use the new file system now?

1. Create an additional folder with the name “data” in your current WeMos project folder. As shown in the following image

2. Place the files you want to upload in the ‘data’ directory
3. In the Arduino IDE, select the WeMos in the ‘Tools’ menu and select a size for ‘Flash Size’
4. Close the dialogue box for the serial monitor!
5. Select the ‘ESP8266 Sketch Data Upload’ option from the ‘Tools’ menu.

As soon as the upload is complete, the message window of the Arduino IDE shows 100% upload.

WeMos example programme for switching the OnBoard LED on and off

Similar to the first part, the web server will control the OnBoard LED. The code from the first part also serves as the basis. The revised code looks like this:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200); //Baudrate
  Serial.println("ESP starts");

  WiFi.begin("NerdCornerWiFi","NerdCornerPassword");


  Serial.print("Connecting...");

  while(WiFi.status()!=WL_CONNECTED){ //Loop which makes a point every 500ms until the connection process has finished

    delay(500);
    Serial.print(".");
  }
  Serial.println();

  Serial.print("Connected! IP-Address: ");
  Serial.println(WiFi.localIP()); //Displaying the IP Address

  if (MDNS.begin("nerd-corner")) {
    Serial.println("DNS started, available with: ");
    Serial.println("http://nerd-corner.local/");
  }

  server.serveStatic("/", SPIFFS, "/", "max-age=86400");
  SPIFFS.begin();

  server.onNotFound([](){ 
    server.send(404, "text/plain", "Landing page not found! Don't forget to name your landing page 'index.html'!");  
  });
 
  server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
    }
    server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

  server.begin();
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  server.handleClient();
  MDNS.update();

}

void switchLedOff(){ 
  digitalWrite(LED_BUILTIN, HIGH);   // turn the D1 LED off 
}

void switchLedOn(){ 
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED on 
}

I would like to point out a few special features. For example, we have added the following:

server.serveStatic("/", SPIFFS, "/", "max-age=86400"); 
SPIFFS.begin();

Without these two lines, access to the files in the “data” folder would not be possible. Please note that the name “index.html” is set as the default for the landing page. However, you can change this if you really want to.

server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
      }
      server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

The “/led” endpoint receives the commands from the web server. If the command is “on”, the LED is switched on and if “off”, the LED is switched off.

Wemos website for switching the WeMos OnBoard LED on and off

The example website has a very simple structure. It primarily consists of 2 buttons for switching the LED on and off.

The folder structure of the website is very clearly organised. There is a main page with the name “index.html”. This name is common worldwide for the main pages and is also automatically recognised by WeMos. There is also a “CSS” folder for styling and a “JS” folder for functions.

We link the styles in the header area of the website. There is a standard bootstrap, which automatically makes everything a bit nicer, and a custom styles file with my own customisations. The functions of the website are also linked in the header area. I use the jQuery standard to send requests from the website to the WeMos. My own custom functions are in the “index.js”.

Please note that the jQuery file must be included BEFORE your own file, otherwise no jQuery commands can be used in your own code! The custom functions are then used by the buttons. The HTML code of the page looks as follows:

<!DOCTYPE html>
<html lang="en"></html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/custom-style.css" />
    <title>D1 Webserver</title>
  </head>
  <body>
    <h1>D1 Webserver with filesystem</h1>
    <p>
      This is an example for a WeMos Webserver with a filesystem. You can easily
      create webpages with html, css and js!
    </p>

    <h3>Example to turn on and off the built in LED</h3>
    <button class="button-style" onclick="changeLEDState('on')">Turn on</button>
    <button class="button-style" onclick="changeLEDState('off')">
      Turn off
    </button>

    <h3>Example to demo a JS function</h3>
    <button class="button-style" onclick="showAlert()">Show alert</button>
  </body>
</html>

Special attention is paid to the JavaScript function “changeLEDState(value)”

function changeLEDState(value) {
  $.post("/led", { ledstate: value });
}

Because jQuery is used for communication with the WeMos, a simple dollar sign with the corresponding request command is sufficient. A value is also sent with this POST request, which is either “on” or “off” to switch the LED on and off.

The web page can be downloaded as a zip file below.

Files to download

• Wemos example webserver to control OnBoard LED

The post WeMos D1 R2 – Host entire website with html, css & js appeared first on Nerd Corner.

This might also be interesting for you: How to control a fan with an Arduino!

List of components

• Arduino IDE (development environment)
• WeMos D1 R2

Differences between the WeMos D1 R2 and the Arduino UNO R3

An Arduino UNO R3 looks very similar to the WeMos D1. The main difference is that the D1 has an ESP2866 WIFI module integrated on its board. This gives you the possibility to connect the D1 to the internet. Roughly speaking, the D1 is a wifi-enabled Arduino!

However, you should note that the clock frequencies of the two processors are different. The Arduino has an 8 bit Atmel processor and the D1 a Wi-Fi capable ESP8266 processor with 32 bit clock frequency. The pins of the D1 are arranged similarly to an Arduino UNO, but differ in the operating voltage. On an Arduino UNO the voltage of the pins is 5V and on the D1 it is 3.3V. However, there is also a 5V output on the D1. Because of the voltage differences on the pins you should not blindly plug an Arduino Shield on a D1. It is recommended to check the compatibility first!

In addition, it should be noted that the D1, unlike the Arduino, has only one analog pin and additionally the number of digital pins is different. The Arduino has 20 digital pins and the D1 only 16 digital pins. However, the digital pins of the D1 have more useful additional functions.

Please note: The designation of the D1 digital pins is also different from those of the Arduino and therefore must be adjusted in software.

Last but not least, the USB connector is also different. In contrast to the Arduino, the D1 has the much more common Micro USB standard.

Setup of the D1

Open the Arduino IDE and connect the D1 to the computer. Select the appropriate COM port of the D1 under Tools > Port. If the D1 is not recognized here, this is probably due to a missing driver.

If you now select the appropriate COM port and upload an example sketch to the D1 you will probably get the following error message: “An error occurred while uploading the sketch avrdude: stk500_getsync() attempt 1 of 10: not in sync: resp=0x2e”. The reason for this error is that the wrong board was selected. The name of the selected board appears in the lower right corner of the IDE:

To be able to select the D1 the board manager for the ESP8266 must be added. Insert the following link in Preferences > Board Manager: http://arduino.esp8266.com/stable/package_esp8266com_index.json

Then search for ESP8266 in Tools > Board > Board Manager and install the latest version:

Now select in Tools > Board > ESP8266 Boards > LOLIN (WEMOS D1 R2 &mini):

Now you can select an example project under File > Examples > 01.Basics > Blink and with a click on Upload the whole thing works. The example project now lets the blue LED on the ESP8266 module blink.

Attention: This setup was unique for the first time usage and does not need to be repeated again!

Connecting WeMos D1 to the Internet

The program structure corresponds to that of a regular microcontroller as known from the Arduino. There is a setup() function, which is called only once directly at the start of the program and a loop() function, which runs in a continuous loop after the setup().

First the ESP WiFi library is needed. This is included with #include <ESP8266WiFi.h>. As soon as the ESP is powered, a Wi-Fi connection should be established. Therefore the code is written into the setup() function.

We need the serial monitor to display the current state of the connection. The baudrate can be set by the user. For the D1 I use 115200. The serial monitor can be found under Tools > Serial Monitor. In the window of the serial monitor you can set the baudrate. Please select 115200 as well. If you don’t choose the same baudrate as defined in setup(), you will only see unreadable special characters.

To connect to the Wi-Fi the simple command WiFi.beginn(“WlanName”, “WlanPasswort”) is sufficient. It can be very helpful to display the IP address of the D1. For this purpose use the command WiFi.localIP()

#include <ESP8266WiFi.h>

void setup() {
  Serial.begin(115200); //Baudrate
  Serial.println("ESP starts");

  WiFi.begin("NerdCornerWiFi","NerdCornerPassword");

  Serial.print("Connecting...");

  while(WiFi.status()!=WL_CONNECTED){ //Loop which makes a point every 500ms until the connection process has finished

    delay(500);
    Serial.print(".");
  }
  Serial.println();

  Serial.print("Connected! IP-Address: ");
  Serial.println(WiFi.localIP()); //Displaying the IP Address

}

void loop() {
  // put your main code here, to run repeatedly:

}

The D1 as web server and DNS server

After the previous steps the D1 is connected to the WiFi, but not yet accessible via a browser. So that the D1 can be controlled comfortably over the Browser one needs the #include <ESP8266WebServer.h> library. Then create a web server object with the command ESP8266WebServer server(80) and set the port 80. The server can now be started with the command server.begin(). So that the D1 can check at any time whether requests are to be processed, the server.handleClient() is written into the loop() function.

If you now enter the IP address of the D1 in a browser, from a device that is in the same WiFi, the D1 is already accessible. It is just not specified yet what should happen when the D1 is called.

You can also display predefined functions here. Initially, for example, a sentence if the link has not been defined, or a text for a custom link. It is also possible to execute own functions for certain links.

server.onNotFound([](){ 
  server.send(404, "text/plain", "Link was not found!");  
});
 
server.on("/", []() {
  server.send(200, "text/plain", "Landing page!");
});
 
server.on("/custom", []() {
  server.send(200, "text/plain", "Just a custom route!");
  ownFunction();
});

The web server setup is now complete. Since it is usually very annoying to type the IP address of the D1 into the browser or it can change, it makes sense to assign a name to the DNS of the D1. For this again a library is used, which is included by #include <ESP8266mDNS.h>. The DNS is defined once and therefore written into the setup() function. To define the DNS name, use the method MDNS.begin(DNS Name), for example MDNS.begin(nerd-corner). Additionally MDNS.update() must be written into the loop function.

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200); //Baudrate
  Serial.println("ESP starts");

  WiFi.begin("NerdCornerWiFi","NerdCornerPassword");

  Serial.print("Connecting...");

  while(WiFi.status()!=WL_CONNECTED){ //Loop which makes a point every 500ms until the connection process has finished

    delay(500);
    Serial.print(".");
  }
  Serial.println();

  Serial.print("Connected! IP-Address: ");
  Serial.println(WiFi.localIP()); //Displaying the IP Address

  if (MDNS.begin("nerd-corner")) {
    Serial.println("DNS started, available with: ");
    Serial.println("http://nerd-corner.local/");
  }

  server.onNotFound([](){ 
    server.send(404, "text/plain", "Link was not found!");  
  });
 
  server.on("/", []() {
    server.send(200, "text/plain", "Landing page!");
  });
 
  server.on("/custom", []() {
    server.send(200, "text/plain", "Just a custom route!");
    ownFunction();
  });

  server.begin();

}

void loop() {
  server.handleClient();
  MDNS.update();

}

void ownFunction(){ //go to "IP-Adress/custom" to call this function
  Serial.println("Own function was called");

}

Afterwards you can enter http://nerd-corner.local in the browser and you will reach the D1. Please note that the ending must always be “.local”! Some Android devices do not support mDNS, then the actual IP address must still be specified. Now you can use it for your own projects!

Example program to switch the OnBoard LED on and off

At the end of this blogpost we have a simple example program where we apply what we have learned so far. We write two additional functions. One to switch on the built-in LED and one to switch it off. A small hint, in contrast to the Arduino the LED is switched on with digitalWrite(LED_BUILTIN, LOW) instead of switched off, so exactly inverted!

The functions can be called via http://nerd-corner.local/on and http://nerd-corner.local/off. Here is the complete program code:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200); //Baudrate
  Serial.println("ESP starts");

  WiFi.begin("NerdCornerWiFi","NerdCornerPassword");

  Serial.print("Connecting...");

  while(WiFi.status()!=WL_CONNECTED){ //Loop which makes a point every 500ms until the connection process has finished

    delay(500);
    Serial.print(".");
  }
  Serial.println();

  Serial.print("Connected! IP-Address: ");
  Serial.println(WiFi.localIP()); //Displaying the IP Address

  if (MDNS.begin("nerd-corner")) {
    Serial.println("DNS started, available with: ");
    Serial.println("http://nerd-corner.local/");
  }

  server.onNotFound([](){ 
    server.send(404, "text/plain", "Link was not found!");  
  });
 
  server.on("/", []() {
    server.send(200, "text/plain", "Landing page!");
  });
 
  server.on("/on", []() {
    server.send(200, "text/plain", "Switching LED on!");
    switchLedOn();
  });

  server.on("/off", []() {
    server.send(200, "text/plain", "Switching LED off!");
    switchLedOff();
  });

  server.begin();


  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  server.handleClient();
  MDNS.update();

}

void switchLedOff(){ 
  digitalWrite(LED_BUILTIN, HIGH);   // turn the D1 LED off 
}

void switchLedOn(){ 
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED on 
}

The post WeMos D1 R2 setup and wifi integration appeared first on Nerd Corner.

In the following is an explanation why the library “sys/time.h” was used, as well as a code example with subsequent explanation. This code example is very well suited for bit-wise data transmission in communication technology.

This might also be interesting for you: How to program a highly precise Arduino Timer

List of components

• Linux operating system (for example Raspberry Pi)
• Editor for C – Programming

The library „sys/time.h“

Functions like “usleep()” or “nanosleep()” would stop the complete program. For simple applications this might be sufficient, but for my purposes this was too imprecise. I wanted a timer that really works exactly in a 1 ms or 0.1 ms cycle. So instead of “usleep()” or “nanosleep()” another solution was chosen. The library “sys/time.h”. This library is able to read and compare the current “System Clock Time”.

Code example for a precise timer in C

#include <sys/time.h>

int main()
{
    struct timeval tval_before, tval_after, tval_result;
    int counter=0;
    bool stop=false;
   
    gettimeofday(&tval_before, NULL);
    while(stop!=true)
    {
        gettimeofday(&tval_after, NULL);
        timersub(&tval_after, &tval_before, &tval_result);
        double time_elapsed = (double)tval_result.tv_sec + ((double)tval_result.tv_usec/1000000.0f);
        
        while(time_elapsed < 0.001)  //1ms; you can change your desired time interval here
        {
            gettimeofday(&tval_after, NULL);
            timersub(&tval_after, &tval_before, &tval_result);
            time_elapsed = (double)tval_result.tv_sec + ((double)tval_result.tv_usec/1000000.0f);
        }
        gettimeofday(&tval_before, NULL);
        
        if (counter==10000)
        {
            stop=true;
        }
            
        else 
        {
            counter++;
        }
    }
    return 0;
}

Explanation of the code example:

A function “gettimeofday” writes the current system time into the variable “tval_before”. A While loop will then be executed until the actual task is completed.

Within the While loop the system time is stored again into a variable “tval_after”. Then the time difference between “tval_after” and “tval_before” is measured and stored in “tval_result”.

The next step of the timer in C is not immediately obvious: “tv_result” consists by definition of 2 parts. On the one hand a seconds part “.tv_sec” and on the other hand a microseconds part “.tv_usec”. This microsecond part has to be divided by one million to get the value in seconds. Afterwards, the microsecond part can be added to the second part.

The added value is called “time_elapsed”. If this value is less than one millisecond, another inner While loop is opened, which recalculates the value for “time_elapsed” until exactly 1 ms has passed. Afterwards, the value for “tval_before” is redefined using the “gettimeofday” function.

Since exactly 1 ms has passed at this point, the timer can now perform its actual operation. In this simple code example the variable “counter” is incremented by 1. That means for each interval step (in the code example 1 ms) the counter increases by 1. As soon as a fixed value for counter was reached the program stops. In this case the defined value is 10000. Then the While loop will be terminated. But this part of the code can be easily changed for your own purposes.

My measurements with an oscilloscope detected an exact frequency of 1 ms, even 0.1 ms was measured exactly. This code example is therefore also very suitable for an exact data transmission in the communication technology.

Download files

• Downloadfile Timer in C

The post How to program a highly precise timer in C for Linux appeared first on Nerd Corner.