Customizing Your Web Server

Start 

Want to add more buttons or change the color of your web server? Using HTML and CSS you can do just that!

Upload 

Copy and paste the following code (also found in the main tutorial of this kit) into a new Arduino sketch so you can experiment with your web server. Make sure the pins in the example match the pins that your robot are connected to.

Download file Copy to clipboard
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
#include "SoftwareSerial.h"
#include "Grove_I2C_Motor_Driver.h"

// default I2C address is 0x0f
#define I2C_ADDRESS 0x0f

//Create Serial communication Object
SoftwareSerial Serial1(8, 9); // RX, TX
//Wifi server object
WiFiEspServer server(80);

// use a ring buffer to increase speed and reduce memory allocation
RingBuffer buf(8);

//Wifi settings
char ssid[] = "My WiFi Robot";    // the name of your access point
char pass[] = "password";        // the password for your access point
int status = WL_IDLE_STATUS;     // the Wifi radio's status

// CHANGE THIS TO YOUR OFFSET VALUE
int offset = 3;

// variable for power -> from -100 to 100 (negative numbers are backwards)
int power = 70;

//Increase for larger turns. Decrease for smaller turns
int turnAmount = 180;

// Variable for running the moving code
bool moving = false;

// Variables to time and stop moving
int interval;
unsigned long startTime;

// change these values to match your motor orientation
unsigned char left = MOTOR2;
unsigned char right = MOTOR1;

void setup()
{
  // Start Serial Communication with computer and WiFi module
  Serial.begin(9600);
  // initialize serial for ESP module
  Serial1.begin(9600);
  // initialize ESP module
  WiFi.init(&Serial1);

  // start motor driver
  Motor.begin(I2C_ADDRESS);
  // correct pwm cycles
  Motor.frequence(F_490Hz);

  // Print out debugging messages
  Serial.print("Attempting to start AP ");
  Serial.println(ssid);

  // start access point
  status = WiFi.beginAP(ssid);

  // start the web server on port 80
  server.begin();
  IPAddress ip = WiFi.localIP();
  Serial.println("Server started");
  Serial.print("To see this page in action, connect to ");
  Serial.print(ssid);
  Serial.print(" and open a browser to http://");
  Serial.println(ip);
  Serial.println();
}

void loop()
{

  // Wait for a device to connect to the WiFi
  WiFiEspClient client = server.available();  // listen for incoming clients

  // if you get a client,
  if (client) {
    // print a message out the serial port
    Serial.println("New client");
    // initialize the circular buffer
    buf.init();

    // loop while the client's connected
    while (client.connected()) {
      // if there's bytes to read from the client,
      if (client.available()) {
        // read a byte, then
        char c = client.read();
        // push it to the ring buffer
        buf.push(c);

        String request = client.readStringUntil('\r');
        client.flush();

        // Match the request
        // if the string "/fwd" is found,
        //then call the moveDistance() function
        if (request.indexOf("/fwd") != -1) {
          //moveDistance(35, power);
          moveTime(2, power);
        }
        // if the string "/bwd" is found,
        //then call the moveDistance function
        if (request.indexOf("/bwd") != -1) {
          //moveDistance(35, -power);
          moveTime(2, -power);
        }
        // if the string "/left" is found,
        //then call the turn() function
        if (request.indexOf("/left") != -1) {
          turn('l');
        }
        // if the string "/right" is found,
        // then call the turn() function
        if (request.indexOf("/right") != -1) {
          turn('r');
        }

        // Return the response
        client.print(
          "HTTP/1.1 200 OK\r\n"
          "Content-Type: text/html\r\n");
        client.println();

        // CSS to style the on/off buttons
        client.print(F(
                       "<!DOCTYPE HTML>\r\n"
                       "<html>\r\n"
                       "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n"
                       "<link rel=\"icon\" href=\"data:,\">\r\n"

                       // change the font and size of each button here
                       "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\r\n"
                       ".button { background-color: #ff6666; border: black; color: black; padding: 16px 40px;\r\n"
                       "text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}\r\n"
                       ".button:hover {background: #eee;}\r\n"

                       // change the background color of each button here
                       ".forward {background-color: #ff6666;}\r\n"
                       ".backward {background-color: #aaff80;}\r\n"
                       ".left {background-color: #ff9900;}\r\n"
                       ".right {background-color: #ffff66;}</style></head>\r\n"

                       // change the heading of the web server here
                       "<h2>My WiFi Robot Controls</h2>\r\n"));

        // change the function and label of the buttons here
        client.print(F(
                       "<button class=\"button forward\" onClick=location.href='/fwd'>forward</button>\r\n"
                       "<p><button class=\"button left\" onClick=location.href='/left'>left</button>\r\n"
                       "<button class=\"button right\" onClick=location.href='/right'>right</button></p>\r\n"
                       "<button class=\"button backward\" onClick=location.href='/bwd'>backward</button>\r\n"));


        client.println("</body></html>");
        break;
      }

      //Run if moving
      if (moving) {
        //Checks the interval timing
        if (millis() - startTime > interval) {
          //Stop the motors
          Motor.stop(left);
          Motor.stop(right);
          //Change moving variable
          moving = false;
        }
      }
    }

    // close the connection
    client.stop();
    Serial.println("Client disconnected");
  }

  //Run if moving
  if (moving) {
    //Checks the interval timing
    if (millis() - startTime > interval) {
      //Stop the motors
      Motor.stop(left);
      Motor.stop(right);
      //Change moving variable
      moving = false;
    }
  }
}


// function to move robot forward or backward
void moveTime(int seconds, int motorPower) {
  //Set the starting time
  startTime = millis();
  //Set this true to run the move code
  moving = true;
  //Set the time to run
  interval = seconds * 1000;

  //Set correct motor polarity
  int leftPower = motorPower;
  int rightPower = - motorPower;

  //Set motor speed
  Motor.speed(left, leftPower - offset);
  Motor.speed(right, rightPower - offset);
}


// function to turn robot left or right
void turn(char Dir) {
  //Set this true to run the move code
  moving = true;
  //Set the time to run
  interval = turnAmount;

//Switch case for the two directions
  switch (Dir) {
    // if the direction (Dir) is left, turn on the right motor
    case 'l':
      Motor.speed(right, - power - offset);
      break;

    // if the direction is right, turn on the left motor
    case 'r':
      Motor.speed(left, power - offset);
      break;
  }
}

Modify

Try changing the heading of the web server from "My WiFi Robot Controls" to "[YOUR NAME]'s Super Duper One-of-a-Kind Robot Control Panel".

You can also change the color, font, and labeling of the buttons.

To change the font

If you'd like to change the font of your buttons, locate the line that sets the "font-family" as Helvetica. Replace Helvetica with the font you wish to use. You cannot use any font you'd like. This is because your web server can be used by any smart device with a web browser so you need to use a default font that the device already has downloaded. If you use a font that not all devices have then the user will see a default font such as Times New Roman - even if this is not the font you intended to use.

Here are some fonts you can safely use:

  1. Comic SansComic Sans
  2. Courier newCourier new
  3. ImpactImpact
  4. PalatinoPalatino
  5. VerdanaVerdana

For more fonts go here

To change the color

If you'd like to change the font of your buttons, locate the lines that set the "background-color" for each button. The colors are in the form of a code that specifies a RGB color. Since there are three colors in RGB (red, green, blue) that are combined to make each color, and 255 different shades for each color there are 16,581,375 colors to pick from!

Go here to pick a color and change the hue. After you pick your color the RGB code will be in bold, located under the box that displays your color.

Color pickerColor picker

You can also change the hue, saturation, and lightness further down the page.

HueHue

To change the labels and functions of the buttons

If you'd like to change the label and function of your buttons, locate the following lines:

Download file Copy to clipboard
1
2
3
4
5
6
// change the background color of each button here

    ".forward {background-color: #ff6666;}\r\n"
    ".backward {background-color: #aaff80;}\r\n"
    ".left {background-color: #ff9900;}\r\n"
    ".right {background-color: #ffff66;}</style></head>\r\n"

As well as...

Download file Copy to clipboard
1
2
3
4
5
6
7
// change the function and label of the buttons here

client.print(F(
  "<button class=\"button forward\" onClick=location.href='/fwd'>forward</button>\r\n"
  "<p><button class=\"button left\" onClick=location.href='/left'>left</button>\r\n"
  "<button class=\"button right\" onClick=location.href='/right'>right</button></p>\r\n"
  "<button class=\"button backward\" onClick=location.href='/bwd'>backward</button>\r\n"));

The first part gives a name to the button so that when it's referenced the server knows which button to display and what the formatting of that specific button looks like.

The second piece of the code displays the buttons, and tells the server that when a certain button is pressed it should append the corresponding command to the url of the server. Together

and

indicate a new paragraph. When a button is enclosed by them it's displayed on a new line. If you want your buttons all in a row, then delete these. On the other hand, if you want your buttons in a column then add

to the beginning of each button to indicate a new paragraph and

to indicate the end of that paragraph. You'll notice that when you click the forward button the url of your server changes from https://[YOUR I.P ADDRESS] to https://[YOUR I.P ADDRESS]/fwd. If you want to change the functionality of these buttons and the label follow this format to edit the buttons accordingly:

Download file Copy to clipboard
1
<button class=\"button [THE NAME OF THE BUTTON YOU'RE USING]\" onClick=location.href='/[YOUR COMMAND SHORTCUT]'>[THE LABEL OF YOUR BUTTON]</button>\r\n"

In the next tutorial you'll see how to add a button that turns an LED on your robot ON and OFF from the web server!