Arduino Bootstrap не работает - MKR WiFi 1010 - PullRequest
0 голосов
/ 28 февраля 2020

Я пробую режим AP устройства, где оно может выступать в качестве собственного сервера. Большинство учебных пособий загружают html с SD-карты. Я могу сделать то же самое, но bootstrap веб-сайта не работает. Он просто загружает основную c версию сайта. Как я могу это исправить?

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);
    }
    // if (!SD.exists(RESHTM))
    // {
    //     Serial.println("missing xres.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
        }
      }
    }
    // 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>

1 Ответ

1 голос
/ 02 марта 2020

Я использую bootstrap следующим образом. Загрузите нужную вам версию 3 или 4. Скопируйте свернутые версии в dir на sd (css и js), в зависимости от вашего стиля вам также могут понадобиться шрифты, такие как гликоны или другой набор иконок.

css переходит в заголовок

 <!-- request default CSS from the Arduino / ESP8266 / ESP32 web server -->
 <link rel="stylesheet" href="css/bootstrap.css" charset="utf-8"> 
<!-- used with bootstrap 4 or bootstrap native -->

....

bootstrap js и др. js конец тела.

 <!-- request js from the Arduino / ESP8266 / ESP32 web server standard libs are in lib own in js -->

  <script src="lib/bootstrap4.js" type="text/javascript" charset="utf-8"></script>
...
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>

работает как веб-сервер и asyn c также как шарм.
Профессиональный совет: чтобы избавиться от jquery, я использую bootstrap нативный и чистый js

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...