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.

A cyclic redundancy check is a simple and elegant way to verify that the data arriving at a receiving station is correct. For example, if bits have been swapped in a received data packet or a 1 has been received instead of a 0, this can be detected by the cyclic redundancy check (CRC for short). The CRC identifies that a data packet has an error and the receiving station will drop the packet.

This might also be interesting for you: Setting a precise clock frequency for an Arduino

Also closely related to this article: Setting a precise clock frequency for the Raspberry Pi

Cyclic redundancy check – How it works:

The CRC is a mathematical trick. In principle, the calculation is a polynomial division. For example, the data packet 10010101 corresponds to the following polynomial:

A so-called generator polynomial is required for the calculation of the CRC. The generator polynomial can be chosen freely, but some polynomials have proven to be particularly suitable. It is important that the generator polynomial for sending the data and for receiving the data is identical. I have chosen the polynomial 1011 for the sake of simplicity:

The procedure is the same for each data packet. An additional CRC value is appended to each data packet that is to be sent. This CRC value is one digit smaller than the generator polynomial. In the current case, the generator polynomial 1011 has a total of 4 digits, which means that the CRC value has 3 digits.  At the beginning of the calculation the CRC value is still unknown, therefore simply 3 times (since the CRC value has here 3 digits) the 0 is appended to the data package. Thus the data packet 10010101 now becomes 10010101000.

Then the polynomial division starts. 10010101000 is divided by 1011. I have summarized the step-by-step process of the division in a graphic. At the end of the polynomial division the remainder 110 remains on the transmitter. This remainder is the desired CRC value. The CRC value is appended to the actual data packet 10010101 and transmitted to the receiver. If the data transmission is correct, the receiver receives the packet 10010101110.

At this point the mathematical trick happens. The calculated CRC was appended to the data packet and transmitted to the receiver. The receiver can now also perform a polynomial division with the generator polynomial 1011, but since this time the CRC value 110 was appended to the data packet 10010101 instead of 3 times 0, no remainder is left when the polynomial division is repeated.

No remainder on the receiver side means that the data packet was transmitted correctly. However, if a remainder is left, then an error has crept in during the transmission. The faulty data packet can be discarded and the receiver can ask for a retransmission of the data packet.

Download files:

• Cyclic Redundancy Check in C

The post Cyclic Redundancy Check in C code 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.