Web contents in arduino sketch 
Tags: esp8266, css, html, javascript
Published: 2020-07-23 12:17:53

**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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/01sgzuzx346x6nx8fxp1.JPG)

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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rk40uvwtqe8y1mnbipoi.JPG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/02krp6nno48xweh6ctil.JPG) 

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/erq5w1ool0tujhk3zull.JPG)

**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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b6nesvzsjb8l2ajzxsn4.JPG)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ky7xppng90key59mzhpc.JPG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cqdk6r8e0ns7fftod6xd.JPG)

**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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w4dab59io80jel9cen4w.JPG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/06zem6tdxil8kn5jm8hy.JPG)

**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 :smile: