此部分修改自Part 2.2可以控制兩個開關
Arduino CODE
#include <ESP8266WiFi.h> // 提供Wi-Fi功能的程式庫
#include <ESP8266WebServer.h> // 提供網站伺服器功能的程式庫
#include <ESP8266mDNS.h>
#include "index.h"
const byte LED_PIN2 = 2;
const byte LED_PIN0 = 0;
const char ssid[] = "SSID";
const char pass[] = "PASSWORD";
ESP8266WebServer server(80); // 宣告網站伺服器物件與埠號
// 定義處理首頁請求的自訂函式
void rootRouter() {
server.send (200, "text/html", PAGE_INDEX );
}
void setup() {
pinMode(LED_PIN2, OUTPUT);
pinMode(LED_PIN0, OUTPUT);
Serial.begin(115200);
WiFi.begin(ssid, pass);
/*
* 若要指定IP位址，請自行在此加入WiFi.config()敘述。
WiFi.config(IPAddress(192,168,1,50), // IP位址
IPAddress(192,168,1,1), // 閘道（gateway）位址
IPAddress(255,255,255,0)); // 網路遮罩（netmask）
*/
while (WiFi.status() != WL_CONNECTED) {
delay(500); // 等待WiFi連線
Serial.print(".");
}
Serial.println("");
Serial.print("WiFi connected, IP: ");
Serial.println(WiFi.localIP()); // 顯示ESP8266裝置的IP位址
if (!MDNS.begin("tomorrows")) {
Serial.println("Error setting up MDNS responder!");
while(1) {
delay(1000);
}
}
Serial.println("mDNS responder started");
server.on ( "/", rootRouter);
server.on ( "/index.html", rootRouter);
server.on ("/sw0", []() {
String state = server.arg("led0");
if (state == "ON") {
digitalWrite(LED_PIN0, HIGH);
} else if (state == "OFF") {
digitalWrite(LED_PIN0, LOW);
}
});
server.on ("/sw2", []() {
String state = server.arg("led2");
if (state == "ON") {
digitalWrite(LED_PIN2, HIGH);
} else if (state == "OFF") {
digitalWrite(LED_PIN2, LOW);
}
});
server.onNotFound([](){ // 處理「找不到指定路徑」的事件
server.send(404, "text/plain", "File NOT found!");
});
server.begin();
Serial.println("HTTP server started.");
MDNS.setInstanceName("tomorrows' ESP8266");
MDNS.addService("http", "tcp", 80);
}
void loop() {
server.handleClient(); // 處理用戶連線
}
index.h
const char PAGE_INDEX[] PROGMEM = R"=====(
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP8266物聯網</title>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
font-family: "微軟正黑體", "黑體-繁", sans-serif;
}
</style>
</head>
<body>
<h1>燈光控制器</h1>
LED開關0：
<div id="LED_SW0">
<input type="radio" id="LED0_ON" class="SW0" value="ON" name="SW0"><label for="LED0_ON"> 開 </label>
<input type="radio" id="LED0_OFF" class="SW0" checked="checked" value="OFF" name="SW0"><label for="LED0_OFF"> 關 </label>
</div>
LED開關2：
<div id="LED_SW2">
<input type="radio" id="LED2_ON" class="SW2" value="ON" name="SW2"><label for="LED2_ON"> 開 </label>
<input type="radio" id="LED2_OFF" class="SW2" checked="checked" value="OFF" name="SW2"><label for="LED2_OFF"> 關 </label>
</div>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#LED_SW0" ).buttonset();
$(".SW0").change(function(evt) {
var state = $(this).val();
$.post("/sw0", {led0:state});
});
$( "#LED_SW2" ).buttonset();
$(".SW2").change(function(evt) {
var state = $(this).val();
$.post("/sw2", {led2:state});
});
});
</script>
</body>
</html>
)=====";