碼上歡樂
相關內容    簡體    繁體

ESP8266 HTTP 項目（1）在刻度盤上進行ESP8266 NodeMCU模擬讀取的步驟

本文轉載自   查看原文   2018-09-13 22:56   1079    esp8266 http

https://circuits4you.com/2018/02/03/esp8266-nodemcu-adc-analog-value-on-dial-gauge/

ESP8266（NodeMCU）ADC表盤上的模擬值

2018年2月3日ESP8266 esp，html，Javascript，NodeMCU，web服務器

這是它使用JavaScripts，ESP8266，CSS和HTML知識的高級教程。在此示例中，我們正在讀取ADC的模擬值並將其顯示在HTML網頁上，該網頁由ESP8266或NodeMCU Web服務器提供。要獲得有關ESP8266中基本HTML頁面創建的更多詳細信息，請閱讀此內容。

 

ESP8266只有一個adc頻道。讓我們開始閱讀模擬並做一些很酷的事情

ESP8266-模擬讀數表盤

在刻度盤上進行ESP8266 NodeMCU模擬讀取的步驟

步驟1：編寫ESP NodeMCU代碼，如下所示

此代碼在ESP上創建Web服務器並連接到給定的wifi網絡配置。根據您的wifi網絡更改WiFi配置

代碼分為多個部分讓我們來了解什么是什么？

1.連接到WiFi網絡

2.在onRoot，onNotFound上創建Web服務器，最后讀取ADC

Server Initializer有關此內容的更多信息，請參見此處

Web服務器主頁位於root上。notFound Handler執行諸如向客戶端發送javascripts，jQuery和Css文件之類的任務。  ESP重定向在這里解釋

上面的代碼實際上首先解碼未找到的URL，然后將這些參數傳遞給spiffs loader。ESP8266 SPIFFS在這里解釋

一旦你知道了所有編程技術，我們就可以轉向實際的編程。

最終完整代碼

將此代碼復制並粘貼到arduino中。然后上傳它

 

ESP8266（NodeMCU）ADC表盤上的模擬值
2018年2月3日ESP8266 esp，html，Javascript，NodeMCU，web服務器
這是它使用JavaScripts，ESP8266，CSS和HTML知識的高級教程。在此示例中，我們正在讀取ADC的模擬值並將其顯示在HTML網頁上，該網頁由ESP8266或NodeMCU Web服務器提供。要獲得有關ESP8266中基本HTML頁面創建的更多詳細信息，請閱讀此內容。


ESP8266只有一個adc頻道。讓我們開始閱讀模擬並做一些很酷的事情

ESP8266-模擬讀數表盤

在刻度盤上進行ESP8266 NodeMCU模擬讀取的步驟
步驟1：編寫ESP NodeMCU代碼，如下所示
此代碼在ESP上創建Web服務器並連接到給定的wifi網絡配置。根據您的wifi網絡更改WiFi配置

代碼分為多個部分讓我們來了解什么是什么？

1.連接到WiFi網絡


  //Connect to wifi Network
  WiFi.begin(ssid, password);     //Connect to your WiFi router
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  //If connection successful show IP address in serial monitor
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());  //IP address assigned to your ESP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  //Connect to wifi Network
  WiFi.begin(ssid, password);     //Connect to your WiFi router
  Serial.println("");
 
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
 
  //If connection successful show IP address in serial monitor
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());  //IP address assigned to your ESP
2.在onRoot，onNotFound上創建Web服務器，最后讀取ADC

Server Initializer有關此內容的更多信息，請參見此處


  //Initialize Webserver
  server.on("/",handleRoot);
  server.on("/getADC",handleADC); //Reads ADC function is called from out index.html
  server.onNotFound(handleWebRequests); //Set setver all paths are not found so we can handle as per URI
  server.begin();
1
2
3
4
5
  //Initialize Webserver
  server.on("/",handleRoot);
  server.on("/getADC",handleADC); //Reads ADC function is called from out index.html
  server.onNotFound(handleWebRequests); //Set setver all paths are not found so we can handle as per URI
  server.begin();
Web服務器主頁位於root上。notFound Handler執行諸如向客戶端發送javascripts，jQuery和Css文件之類的任務。  ESP重定向在這里解釋


void handleWebRequests(){
  if(loadFromSpiffs(server.uri())) return;
  String message = "File Not Detected\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  Serial.println(message);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
void handleWebRequests(){
  if(loadFromSpiffs(server.uri())) return;
  String message = "File Not Detected\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  Serial.println(message);
}
上面的代碼實際上首先解碼未找到的URL，然后將這些參數傳遞給spiffs loader。ESP8266 SPIFFS在這里解釋


bool loadFromSpiffs(String path){
  String dataType = "text/plain";
  if(path.endsWith("/")) path += "index.htm";

  if(path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."));
  else if(path.endsWith(".html")) dataType = "text/html";
  else if(path.endsWith(".htm")) dataType = "text/html";
  else if(path.endsWith(".css")) dataType = "text/css";
  else if(path.endsWith(".js")) dataType = "application/javascript";
  else if(path.endsWith(".png")) dataType = "image/png";
  else if(path.endsWith(".gif")) dataType = "image/gif";
  else if(path.endsWith(".jpg")) dataType = "image/jpeg";
  else if(path.endsWith(".ico")) dataType = "image/x-icon";
  else if(path.endsWith(".xml")) dataType = "text/xml";
  else if(path.endsWith(".pdf")) dataType = "application/pdf";
  else if(path.endsWith(".zip")) dataType = "application/zip";
  File dataFile = SPIFFS.open(path.c_str(), "r");
  if (server.hasArg("download")) dataType = "application/octet-stream";
  if (server.streamFile(dataFile, dataType) != dataFile.size()) {
  }

  dataFile.close();
  return true;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
bool loadFromSpiffs(String path){
  String dataType = "text/plain";
  if(path.endsWith("/")) path += "index.htm";
 
  if(path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."));
  else if(path.endsWith(".html")) dataType = "text/html";
  else if(path.endsWith(".htm")) dataType = "text/html";
  else if(path.endsWith(".css")) dataType = "text/css";
  else if(path.endsWith(".js")) dataType = "application/javascript";
  else if(path.endsWith(".png")) dataType = "image/png";
  else if(path.endsWith(".gif")) dataType = "image/gif";
  else if(path.endsWith(".jpg")) dataType = "image/jpeg";
  else if(path.endsWith(".ico")) dataType = "image/x-icon";
  else if(path.endsWith(".xml")) dataType = "text/xml";
  else if(path.endsWith(".pdf")) dataType = "application/pdf";
  else if(path.endsWith(".zip")) dataType = "application/zip";
  File dataFile = SPIFFS.open(path.c_str(), "r");
  if (server.hasArg("download")) dataType = "application/octet-stream";
  if (server.streamFile(dataFile, dataType) != dataFile.size()) {
  }
 
  dataFile.close();
  return true;
}
一旦你知道了所有編程技術，我們就可以轉向實際的編程。

最終完整代碼
將此代碼復制並粘貼到arduino中。然后上傳它

　　

上傳程序后等待你需要做更多的事情

第2步：將網頁和jQuery，Javascripts和CSS上傳到ESP8266 NodeMCU閃存

為此，請在草圖文件夾中創建名為“ data”的文件夾，即保存上述.ino文件的位置。然后下載並解壓縮這些文件 ESP8266-analog-gauge-data。

文件夾結構是帶有數據文件夾的.ino文件。在數據文件夾中，您有這些文件index.html，style.css，jQuery.min.js，d3-gauge.js。

不將這些文件上傳到ESP8266 NodeMCU Flash文件系統。這個怎么做 ？閱讀此處加載文件需要一些時間。

第3步：測試

假設您已上傳程序和SPIFFS文件。打開串行監視器並重置ESP。您將獲得IP地址，在Web瀏覽器中打開它。確保您的ESP和筆記本電腦在同一網絡中

你會得到漂亮的界面。正如我們在開始時所展示的那樣。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 NodeMcu Esp8266 控制舵機 ESP8266刷AT固件與nodemcu固件 NodeMCU（ESP8266）如何使用Arduino進行編程 使用樂鑫IDE對NodeMCU（ESP8266）進行編程 NodeMCU套件上的ESP8266 ADC ESP8266 nodemcu lua 走過的坑 ESP8266 HSPI IOT(esp8266) ESP8266當中繼 esp8266(0) AT指令
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM