Web contents in arduino sketch

Prerequisites

• Basics of arduino.
• Installed IDE with esp8266 libraries.

Introduction
Taking a simple web server example here. I am editing "HelloServer" program you can find in "File>Examples>Esp8266WebServer>HelloServer".

Whenever server root is requested, this web server sends message, i.e "Hello from ESP8266"

Adding HTML and CSS

Now, try to put some html to arduino sketch. To achieve that we need to convert html to C string format.(Use any online tool or software). I am using https://tomeko.net .

Declare a const char array to store the string.

Using "PROGMEM" keyword to put this array in program memory, because micro controllers usually have small amount of data memory and putting all static web pages in data memory is just wastage of resources.

We can send index page from esp with the type "text/html".
Replace "server.send" by "server.send_P" which will sends webpage from program memory instead of data memory.

Do the same for adding css.
For handling "style.css" request, we need to create a function let's say handleCss.

ESP has to call this function(handleCss) whenever "style.css" is requested by client.

Handling Graphic Files

Let's take a simple example. I took this one from w3 schools where the bulb changes its state when clicked.
So, for inserting images in the arduino code we need to convert those image to HEX values.

Now, write functions to handle these graphic files.

There may be many null characters in the image data and server.send() function may transfer only few bytes if we don't specify the file size.

Whenever bulbon or bulboff image request is received, these funcions should be called.

Handling JS

Do the same process of conversion for js files too.
I have two js file i.e, jquery.min.js and main.js.
main.js contains a function which requests server to change digital output status, depending on HIGH or LOW response from ESP server. Depending on that response, it will change the bulb state.
Connect relay or any other device with pin D4.

Instructing ESP to call handler functions whenever respective request is received from client.

Handling Multiple Files

Try running the server with multiple files following the steps mentioned above and stay connected for compression techniques for optimization .

Get the code here
https://github.com/DhiraNegi/web-contents-in-arduino-sketch

HAPPY LEARNING 😄