3.Arduino UNO控制
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>Arduino UNO 腳位控制</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>Arduino數位輸出</h1>----------------------<br>
D2：
<div id="D2">
<input type="radio" id="D2_ON" class="D2" value="ON" name="D2"><label for="D2_ON"> 開 </label>
<input type="radio" id="D2_OFF" class="D2" checked="checked" value="OFF" name="D2"><label for="D2_OFF"> 關 </label>
</div>----------------------<br>
D4：
<div id="D4">
<input type="radio" id="D4_ON" class="D4" value="ON" name="D4"><label for="D4_ON"> 開 </label>
<input type="radio" id="D4_OFF" class="D4" checked="checked" value="OFF" name="D4"><label for="D4_OFF"> 關 </label>
</div>----------------------<br>
D7：
<div id="D7">
<input type="radio" id="D7_ON" class="D7" value="ON" name="D7"><label for="D7_ON"> 開 </label>
<input type="radio" id="D7_OFF" class="D7" checked="checked" value="OFF" name="D7"><label for="D7_OFF"> 關 </label>
</div>----------------------<br>
D8：
<div id="D8">
<input type="radio" id="D8_ON" class="D8" value="ON" name="D8"><label for="D8_ON"> 開 </label>
<input type="radio" id="D8_OFF" class="D8" checked="checked" value="OFF" name="D8"><label for="D8_OFF"> 關 </label>
</div>----------------------<br>
D12：
<div id="D12">
<input type="radio" id="D12_ON" class="D12" value="ON" name="D12"><label for="D12_ON"> 開 </label>
<input type="radio" id="D12_OFF" class="D12" checked="checked" value="OFF" name="D12"><label for="D12_OFF"> 關 </label>
</div>----------------------<br>
D13：
<div id="D13">
<input type="radio" id="D13_ON" class="D13" value="ON" name="D13"><label for="D13_ON"> 開 </label>
<input type="radio" id="D13_OFF" class="D13" checked="checked" value="OFF" name="D13"><label for="D13_OFF"> 關 </label>
</div>----------------------<br>
<h1>Arduino PWM輸出</h1>----------------------<br>
D3 PWM：
<div id="D3"></div>
D5 PWM：
<div id="D5"></div>
D6 PWM：
<div id="D6"></div>
D9 PWM：
<div id="D9"></div>
D10 PWM：
<div id="D10"></div>
D11 PWM：
<div id="D11"></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() {
$( "#D2" ).buttonset();
$(".D2").change(function(evt) {
var state = $(this).val();
$.post("/D2", {D2:state});
});
$( "#D4" ).buttonset();
$(".D4").change(function(evt) {
var state = $(this).val();
$.post("/D4", {D4:state});
});
$( "#D7" ).buttonset();
$(".D7").change(function(evt) {
var state = $(this).val();
$.post("/D7", {D7:state});
});
$( "#D8" ).buttonset();
$(".D8").change(function(evt) {
var state = $(this).val();
$.post("/D8", {D8:state});
});
$( "#D12" ).buttonset();
$(".D12").change(function(evt) {
var state = $(this).val();
$.post("/D12", {D12:state});
});
$( "#D13" ).buttonset();
$(".D13").change(function(evt) {
var state = $(this).val();
$.post("/D13", {D13:state});
});
$( "#D3" ).slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
change: function(){
var val = $(this).slider("value");
$.post("/D3", {D3:val});
}
});
$( "#D5" ).slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
change: function(){
var val = $(this).slider("value");
$.post("/D5", {D5:val});
}
});
$( "#D6" ).slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
change: function(){
var val = $(this).slider("value");
$.post("/D6", {D6:val});
}
});
$( "#D9" ).slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
change: function(){
var val = $(this).slider("value");
$.post("/D9", {D9:val});
}
});
$( "#D10" ).slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
change: function(){
var val = $(this).slider("value");
$.post("/D10", {D10:val});
}
});
$( "#D11" ).slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
change: function(){
var val = $(this).slider("value");
$.post("/D11", {D11:val});
}
});
});
</script>
</body>
</html>
)=====";
ESP8266端
#include <ESP8266WiFi.h> // 提供Wi-Fi功能的程式庫
#include <ESP8266WebServer.h> // 提供網站伺服器功能的程式庫
#include <ESP8266mDNS.h>
#include "index.h"
///////////////////////////////////////////////////
#define SSID "tomorrows"
#define PASSWORD "----"
///////////////////////////////////////////////////
ESP8266WebServer server(80); // 宣告網站伺服器物件與埠號
unsigned long t1,t2;
// 定義處理首頁請求的自訂函式
void rootRouter() {
server.send (200, "text/html", PAGE_INDEX );
}
void data_to_arduino(int data1 , int data2){
Serial.print("A");
Serial.print(data1);
Serial.print("B");
Serial.print(data2);
Serial.print("C");
Serial.flush();
}
void send_ip(){
Serial.print("D");
Serial.print(WiFi.localIP());
Serial.print("E");
Serial.flush();
}
void setup() {
Serial.begin(9600);
WiFi.mode(WIFI_STA);
WiFi.begin(SSID, PASSWORD);
while (WiFi.status() != WL_CONNECTED) {delay(500); }
if (!MDNS.begin("CSJH")) {
while(1) { delay(1000); }}
server.on ( "/", rootRouter);
server.on ( "/index.html", rootRouter);
server.on ("/D2", []() {
String state = server.arg("D2");
if (state == "ON") {
data_to_arduino(2, 1);
} else if (state == "OFF") {
data_to_arduino(2, 0);
}
});
server.on ("/D4", []() {
String state = server.arg("D4");
if (state == "ON") {
data_to_arduino(4, 1);
} else if (state == "OFF") {
data_to_arduino(4, 0);
}
});
server.on ("/D7", []() {
String state = server.arg("D7");
if (state == "ON") {
data_to_arduino(7, 1);
} else if (state == "OFF") {
data_to_arduino(7, 0);
}
});
server.on ("/D8", []() {
String state = server.arg("D8");
if (state == "ON") {
data_to_arduino(8, 1);
} else if (state == "OFF") {
data_to_arduino(8, 0);
}
});
server.on ("/D12", []() {
String state = server.arg("D12");
if (state == "ON") {
data_to_arduino(12, 1);
} else if (state == "OFF") {
data_to_arduino(12, 0);
}
});
server.on ("/D13", []() {
String state = server.arg("D13");
if (state == "ON") {
data_to_arduino(13, 1);
} else if (state == "OFF") {
data_to_arduino(13, 0);
}
});
server.on ("/D3", []() {
String D3 = server.arg("D3");
data_to_arduino(3, D3.toInt());
});
server.on ("/D5", []() {
String D5 = server.arg("D5");
data_to_arduino(5, D5.toInt());
});
server.on ("/D6", []() {
String D6 = server.arg("D6");
data_to_arduino(6, D6.toInt());
});
server.on ("/D9", []() {
String D9 = server.arg("D9");
data_to_arduino(10, D9.toInt());
});
server.on ("/D10", []() {
String D10 = server.arg("D10");
data_to_arduino(10,D10.toInt());
});
server.on ("/D11", []() {
String D11 = server.arg("D11");
data_to_arduino(11,D11.toInt());
});
server.onNotFound([](){ // 處理「找不到指定路徑」的事件
server.send(404, "text/plain", "File NOT found!");
});
server.begin();
MDNS.setInstanceName("CSJH_Maker");
MDNS.addService("http", "tcp", 80);
t1=millis();
send_ip();
}
void loop() {
server.handleClient(); // 處理用戶連線
t2=millis();
if(t2>t1+60000){
send_ip();
t1=t2;
}
}
Arduino端
#include <Wire.h>
#include <LiquidCrystal_I2C.h>
LiquidCrystal_I2C lcd(0x3F,16,2); // 若LCD 無法啟用，請將0X3F 改為0X27
String cmd, pin , sw ,ip;
int A=0 , B=0 , C=0 , D=0 , E=0;
void lcd_disp(String data1,String data2){
lcd.setCursor(0,0);
lcd.print(" ");
lcd.setCursor(0,0);
lcd.print("pin=D");
lcd.print(data1);
lcd.print(" set=");
lcd.print(data2);
}
void lcd_ip(String data3){
lcd.setCursor(0,1);
lcd.print(" ");
lcd.setCursor(0,1);
lcd.print(data3);
}
void rec_cmd(){
cmd="" , pin="" , sw="" , ip="";
while(Serial.available()){
char c = Serial.read();
cmd+= c;
delay(10);}
if(cmd.charAt(0)=='A'){
for(int i=0 ; i<cmd.length() ;i++){if(cmd.charAt(i)=='A'){A=i;}}
for(int i=0 ; i<cmd.length() ;i++){if(cmd.charAt(i)=='B'){B=i;}}
for(int i=0 ; i<cmd.length() ;i++){if(cmd.charAt(i)=='C'){C=i;}}
for(int i=A+1 ; i<B ; i++){pin +=cmd.charAt(i);}
for(int i=B+1 ; i<C ; i++){sw +=cmd.charAt(i);}
lcd_disp(pin,sw);
int pin_s = pin.toInt();
int sw_s = sw.toInt();
if(pin_s==2||pin_s==4||pin_s==7||pin_s==8||pin_s==12||pin_s==13){
digitalWrite(pin_s,sw_s);
}
if(pin_s==3||pin_s==5||pin_s==6||pin_s==9||pin_s==10||pin_s==11){
analogWrite(pin_s,sw_s);
}
}
if(cmd.charAt(0)=='D'){
for(int i=0 ; i<cmd.length() ;i++){if(cmd.charAt(i)=='D'){D=i;}}
for(int i=0 ; i<cmd.length() ;i++){if(cmd.charAt(i)=='E'){E=i;}}
for(int i=D+1 ; i<E ; i++){ip +=cmd.charAt(i);}
lcd_ip(ip);
}
}
void setup() {
Serial.begin(9600);
lcd.init();
lcd.backlight();
lcd.clear();
pinMode(2,OUTPUT);
pinMode(4,OUTPUT);
pinMode(7,OUTPUT);
pinMode(8,OUTPUT);
pinMode(12,OUTPUT);
pinMode(13,OUTPUT);
}
void loop() {
if(Serial.available()){
rec_cmd();
}
}