NodeMCU에서 client.print() 명령을 통해 HTML 명령어 중 공인 인증 ip를 주소를 가지는 인터넷 사이트에 저장된 그림 파일을 스마트폰 웹브라우저에 불러올 수 있는 img 태그 사용법을 알아보자.
<img> 태그를 사용을 위해서는 웹상의 그림 파일이 있는 곳에서 마우스 오른쪽 버튼을 사용하여 속성에서 정확한 파일경로를 확인해야 한다.
아래의 프로그램에서 빨간색 부분이 파일경로와 파일명을 지정한다.
Webserver_nodemcu_html_image_tag_01
#include <ESP8266WiFi.h>
const char* ssid = "AndroidHotspot1234";// 본인 스마트폰 핫스팟 ID
const char* password = "00000000";//본인 스마트폰 핫스팟 비밀번호
int ledPin = 2;
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, HIGH);
// Set WiFi to station mode and disconnect from an AP if it was previously connected
WiFi.mode(WIFI_STA);
WiFi.disconnect();
delay(100);
Serial.println("Setup done");
// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// Start the server
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("/");
}
void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println("new client");
while(!client.available()){
delay(1);
}
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Return the response
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // do not forget this one
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<body>");
client.println(" <h2>Img Tag Illustration</h2>");
client.println("<img src='https://acrobotic.com/media/wysiwyg/products/esp8266_devkit_horizontal-01.png' style='width:304px;height:228px;'>");
client.println("<br>");
client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}//프로그램 끝
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 아두이노 NodeMCU 웹서버에 의한 삼색 LED 스마트폰 제어 및 웹화면 출력 (0) | 2017.02.22 |
|---|---|
| 웹의 불필요한 favicon request에 따른 아두이노 NodeMCU 웹서버의 반응과 대책 (0) | 2017.02.22 |
| 삼색 LED에 의한 아두이노 NodeMCU에서 인터럽트 가능한 핀 확인 실험 (0) | 2017.02.18 |
| NodeMCU 1.0 WiFi Webserver에 의한 스마트폰 다음지도 마커표시 보완 (0) | 2017.02.16 |
| HTML SVG 그래픽 언어로 프로그램한 Arduino NodeMCU Scope에 의해 아날로그 파형 및디지털 듀티 신호 real time 측정 (0) | 2017.02.15 |