I'm trying out the AP mode of the device, where it can serve as its own server. Most of the tutorials have been loading the html from the SD card. I can do the same, but the bootstrap of the website is not working. It just loads the basic version of the website. How can I fix this?
APMode.ino
#include <SPI.h>
#include <SD.h>
#include <WiFiNINA.h>
#define WEBHTM "SERVER/index.htm"
///////please enter your sensitive data in the Secret tab/arduino_secrets.h
char ssid[] = "MKRTEST"; // your network SSID (name)
char pass[] = "PASS"; // your network password (use for WPA, or use as key for WEP)
int keyIndex = 0; // your network key Index number (needed only for WEP)
int status = WL_IDLE_STATUS;
WiFiServer server(80);
File webFile;
void setup()
{
//Initialize serial and wait for port to open:
Serial.begin(9600);
while (!Serial);
Serial.println("Access Point Web Server");
// check for the WiFi module:
if (WiFi.status() == WL_NO_MODULE) {
Serial.println("Communication with WiFi module failed!");
// don't continue
while (true);
}
if(!SD.begin(4))
{
Serial.println("SD card not found!");
while(1);
}
if (!SD.exists(WEBHTM))
{
Serial.println("missing index.htm!");
while(1);
}
String fv = WiFi.firmwareVersion();
if (fv < WIFI_FIRMWARE_LATEST_VERSION) {
Serial.println("Please upgrade the firmware");
}
// by default the local IP address of will be 192.168.4.1
// you can override it with the following:
// WiFi.config(IPAddress(10, 0, 0, 1));
// print the network name (SSID);
Serial.print("Creating access point named: ");
Serial.println(ssid);
// Create open network. Change this line if you want to create an WEP network:
status = WiFi.beginAP(ssid);
if (status != WL_AP_LISTENING) {
Serial.println("Creating access point failed");
// don't continue
while (true);
}
// wait 10 seconds for connection:
delay(10000);
// start the web server on port 80
server.begin();
// you're connected now, so print out the status
printWiFiStatus();
}
void loop() {
// compare the previous status to the current status
if (status != WiFi.status()) {
// it has changed update the variable
status = WiFi.status();
if (status == WL_AP_CONNECTED) {
// a device has connected to the AP
Serial.println("Device connected to AP");
} else {
// a device has disconnected from the AP, and we are back in listening mode
Serial.println("Device disconnected from AP");
}
}
WiFiClient client = server.available(); // listen for incoming clients
if (client) { // if you get a client,
Serial.println("new client"); // print a message out the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
webFile = SD.open(WEBHTM);
if (webFile)
{
while (webFile.available())
{
client.write(webFile.read());
}
webFile.close();
}
// The HTTP response ends with another blank line:
client.println();
// break out of the while loop:
break;
}
else { // if you got a newline, then clear currentLine:
currentLine = "";
}
}
else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
if (currentLine.endsWith("POST /enterCredentials")) {
// digitalWrite(led, HIGH); // GET /H turns the LED on
Serial.println("Hello there!");
}
}
}
// close the connection:
client.stop();
Serial.println("client disconnected");
}
}
void printWiFiStatus() {
// print the SSID of the network you're attached to:
Serial.print("SSID: ");
Serial.println(WiFi.SSID());
// print your WiFi shield's IP address:
IPAddress ip = WiFi.localIP();
Serial.print("IP Address: ");
Serial.println(ip);
// print where to go in a browser:
Serial.print("To see this page in action, open a browser to http://");
Serial.println(ip);
}
index.htm
<!DOCTYPE html>
<html lang="en">
<head>
<title>LPS Server</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>Low Power Sensor (LPS) Server</h1>
</div>
<div class="container" style="margin-top:30px" id="WifiDetails">
<h3>Please enter needed Credentials</h3>
<form action="/enterCredentials.htm" method="post"><label for="SSID">SSID:</label><input type="text" class="form-control" name="SSID"><label for="PASS">PASS:</label><input type="password" class="form-control" name="PASS"><label for="BROKER">Broker/Host:</label><input type="text" class="form-control" name="BROKER"><label for="DEVID">Device ID:</label>
<input type="text" class="form-control" name="DEVID"><input type="hidden" name="eof" value="#EOF"><br><button type="submit" class="btn btn-primary btn-block" value="Submit">SUBMIT</button></form>
</div>
<div class="jumbotron text-center" style="margin-bottom:0"><p>All Rights Reserved 2020</p></div></body>
</html>
