This Week's assignment was to make a GUI the graphical user interface, which is a type of user interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation, instead of text-based user interfaces, typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs),which require commands to be typed on a computer keyboard. and then control a device with it,so I had an idea of controlling a servo motor via wifi connection.So with the help of my classmate ZiadiI made a small Html interface that I embedded into arduino so that when I click on ON it will rotate to an angle of 180 degrees and when we click on OFF it will rotate back to 0 degrees.So when within the arduino code you must include a desired or static IP address of the WiFi you are using then copy the Ip Address in your browser for it to find your HTML codes then control the Output device you've put on.More details are commented in the Arduino IDE codes.
The components I used are a Node CMU and a Servo Motor
GUI design from Arduino code
from the main code at the bottom of the page. but on this bellow section there the part of code which are written in node mcu so once my computer is connected to the same wifi with node mcu. what i have to open is my browser and in URL field i have to type in my node MCU fixed Ip which i already setted before "192, 168, 177, 107" by typing node mcu ip it will load HTML page from the code on mcu which in section bellow shows how node mcu will create html page by client.println function as my computer is like client requesting data on server(node mcu "192, 168, 177, 107").
from HTML page created by node mcu we will have Two button which will be sending back different strings based on which one is clicked
client.println("");
client.println(" ");
>
Node MCU receiving data from Web page
while the node mcu is connect to the page it will be reading data from the page based on the button pressed and from those button it will decide while to turn servo either for 180 degrees or 0 degrees and this process will be based on this section of code
while(!client.available()){
delay(1);
}
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Match the request
int value = HIGH;
if (request.indexOf("/servoon") > 0) {
//digitalWrite(13, HIGH);
myservo.write(180);
value = HIGH;
}
if (request.indexOf("/servooff") > 0) {
// digitalWrite(13, LOW);
{ myservo.write(0);
value = HIGH;}
}
>
The Main Codes Used
#include
#include
const char* ssid = "FabLab 2.4Ghz";
const char* password = "innovate";
IPAddress ip(192, 168, 177, 107); //set static ip
IPAddress gateway(192, 168, 177, 1); //set gateeway
IPAddress subnet(255, 255, 255, 0);//set subnet
WiFiServer server(80);
Servo myservo;
void setup() {
Serial.begin(115200);
delay(10);
myservo.attach(4);
myservo.write(0);
//pinMode(13, OUTPUT);
//digitalWrite(13, LOW);
// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
//WiFi.config(ip, gateway, subnet);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// Start the server
server.begin();
Serial.println("Server started");
// Print the IP address
Serial.print("Use this URL to connect: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println("new client");
while(!client.available()){
delay(1);
}
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Match the request
int value = HIGH;
if (request.indexOf("/servoon") > 0) {
//digitalWrite(13, HIGH);
myservo.write(180);
value = HIGH;
}
if (request.indexOf("/servooff") > 0) {
// digitalWrite(13, LOW);
{ myservo.write(0);
value = HIGH;}
}
// Set ledPin according to the request
//digitalWrite(ledPin, value);
// Return the response
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // do not forget this one
client.println("");
client.println("");
client.println("");
client.println("");
client.println("");
client.println("");
client.println("");
client.println("");
client.println("Interface and application programming ");
client.println("");
client.println("
