NodeMCU는 역시 wifi이므로 이번에는 서보 모터 제어를 웹 상에서 해보기로 했다.
많이들 하는대로 NodeMCU로 웹서버를 만들고 웹페이지에 접속해 슬라이더를 사용해서 서보 모터의 각도를 제어하는 내용이다. 웹을 이용하는 방법에도 여러가지가 있는 것 같은데, 여기서는 역시 흔히 많이 사용하는 ajax 방식을 가져왔다.
먼저 html을 작성해 보았다. 기본적인 슬라이더를 사용하면 길이가 짦은 경향이 있는데, 각도 제어를 좀 더 세부적으로 할 수 있도록 길이를 충분히 키웠다.
slider.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>Servo Control Page</h2>
Servo : <span id="servoText">90</span>
<input type="range" style="width:90%;" min="0" max="180" id="servoSlider" onchange="servoWrite(this.value)">
<script>
var slider = document.getElementById("servoSlider");
var servoPos = document.getElementById("servoText");
slider.oninput = function() {
slider.value = this.value;
servoPos.innerHTML = this.value;
}
$.ajaxSetup({timeout:1000});
function servoWrite(pos) {
$.get("/pos=" + pos + "d");
{Connection: close};
}
</script>
</body>
</html>
웹 브라우저에서 열어보면 다음과 같은 형태가 된다.
이 html은 아두이노 소스 속으로 코드화 된다.
servo_web.ino
#include <ESP8266WiFi.h>
#include <Servo.h>
#define ND_D0 16
#define ND_D1 5
#define ND_D2 4
#define ND_D3 0
#define ND_D4 2
#define ND_D5 14
#define ND_D6 12
#define ND_D7 13
#define ND_D8 15
#define ND_RX 3
#define ND_TX 1
#define ND_S3 10
#define ND_S2 9
#define servoPin ND_D0
const char* ssid = "****";
const char* password = "****";
WiFiServer server(80);
Servo servo;
void setup() {
Serial.begin(115200);
servo.attach(servoPin);
servo.write(90);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
server.begin();
Serial.println("Server started");
// Print the IP address
Serial.print("Use this URL to connect: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("Server started");
}
void loop() {
WiFiClient client = server.available();
if(!client) return;
// Wait until the client sends some data
Serial.println("new client");
while(!client.available()){
delay(1);
}
String request = client.readStringUntil('\r');
Serial.println("request: ");
Serial.println(request);
client.flush();
while(client.available()) {
client.read();
}
if(request.indexOf("/pos=") >= 0) {
int pos1 = request.indexOf('=');
int pos2 = request.indexOf('d');
String servoPos = request.substring(pos1+1, pos2);
servo.write(servoPos.toInt());
Serial.println(servoPos);
}
client.print("<!DOCTYPE HTML>");
client.print("<html>");
client.print("<head>");
client.print("<meta charset=\"UTF-8\">");
client.print("<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>");
client.print("</head>");
client.print("<body>");
client.print("<h2>Servo Control Page</h2>");
client.print("Servo : <span id=\"servoText\">90</span>");
client.print("
");
client.print("<input type=\"range\" style=\"width:90%;\" min=\"0\" max=\"180\" id=\"servoSlider\" onchange=\"servoWrite(this.value)\"/>");
client.print("<script>");
client.print("var slider = document.getElementById(\"servoSlider\");");
client.print("var servoPos = document.getElementById(\"servoText\");");
client.print("slider.oninput = function() {");
client.print("slider.value = this.value;");
client.print("servoPos.innerHTML = this.value;}");
client.print("\n");
client.print("$.ajaxSetup({timeout:1000});");
client.print("function servoWrite(pos) {");
client.print("$.get(\"/pos=\" + pos + \"d\");");
client.print("{Connection: close};}");
client.print("</script>");
client.print("</body>");
client.print("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}
시리얼 모니터에 표시되는 ip 주소에 접속한 후, 슬라이더를 움직여 서보 각도를 제어한다.
반응형
'MCU > NodeMCU' 카테고리의 다른 글
| 미니 워터펌프 모터 전류 측정 (0) | 2020.03.16 |
|---|---|
| NodeMCU - 10 개의 서보모터 wifi 제어 (0) | 2020.03.08 |
| NodeMCU - 두 개의 서보모터 wifi 제어 (1) | 2020.03.08 |
| NodeMCU - 서보 모터 제어를 위한 셋업 (0) | 2020.03.08 |
| NodeMCU 설정 (0) | 2020.03.08 |
