스마트폰 키보드에 의한 아두이노 NodeMCU 7세그먼트 LED 제어:III

아두이노프로세싱 프로그래밍

스마트폰 키보드에 의한 아두이노 NodeMCU 7세그먼트 LED 제어:III

coding art 2017. 3. 4. 19:50

728x90

7 segment LED 스마트폰 그래픽을 위해 HTML 버튼 태그를 사용하여 키보드를 작성하는 프로그램과 7 세그먼트를 직접 구동하는 프로그램을 연결해 보기로 하자.

이 프로그램에서는 스마트폰과 와이파이로 연동 된 후에 스마트폰 키보드 화면에서 처음에는 키보드 상단에 LED 그래픽 출력이 없는 상태이다.

키보드에서 4 또는 6 또는 8을 누르면 스마트폰 화면에 해당하는 7세그먼트 LED가 그래픽 출력이 되고 아울러 NodeMCU 보드에서 LED가 켜지는 것을 볼 수 있다.

단지 4,6,8만 되는 점은 앞에서 얘기 했듯이 각자가 나머지 글자별로 HTML SVG 프로그램을 보충해야 한다는 점을 지적해 두고자 한다.

프로그램 구조를 간략하게 설명하기로 하자. 아두이노 NodeMCU에서 사용되었던 디지털 출력 핀 설정과 7세그먼트 문자별 16진법 정의는 아래와 같이 동일하다.

byte FND[8] = {2,3,4,5,0,12,14,15};

byte FND_DATA[] = {0XC0,0XF9,0XA4,0XB0,0X99,0X92,0X82,0XD8,0X80,0X90,0X88,0X83,0XC6,0XA1,0X86,0X8E,0XF7,0X7F};

setup() 문의 초반에 와이파이 설정 후 하단에서 세븐세그먼트 상태를 출력 즉 OUTPUT으로 설정한다.

// 7semnent OUTPUT mode

byte z;

for(z=0; z<8; z++) {

pinMode(FND[z],OUTPUT);

}//7 segment setting

setup()에 이어 loop()에서 불러서 사용하기 위한 FND_display() 루틴을 놓아둔다. FND_display()을 불러 쓰기 위해서 넘겨주어야 할 데이터는 7세그먼트 문자를 정의하는 16진 데이터이다. 이는 스마트폰 키보드에서 특정 문자를 터치 입력하게 되면 웹서버 request 절차에 따라서 아두이노 NodeMCU 보드에 전달이 되어 if 문에서 어떤 문자를 입력했는지 확인하게 된다.

예를 들면 “4”를 키로 입력했다고 하자. 그러면 FND_Data[4] 즉 0X99를 FND_display 루틴에 한 바이트 데이터 즉 2진법 표현으로 1001 1001을 넘겨주게 된다.

// FND Display Routine

void FND_display( byte data) {

byte z;

for(z=0; z<8; z++) {

digitalWrite(FND[z],bitRead(data,z));

}

for 루프문에서 0에서 7까지 실행하면 FND[z] 중 첫째, 네째, 다섯째, 여덟째 해당하는 NodeMCU의 GPIO 2,5,0,15 핀에 digitalWrite() 명령에 의해 HIGH가 출력된다. 그러면 양극 형 7세그먼트에서 아랫쪽 핀을 HIGH 상태로 만들면 전압차이가 0V가 되어 해당 세그먼트는 OFF가 된다. 즉 즉 세그먼트 B,C,F,G 핀들만이 LOW 상태가 되고 ON이 되며, 위 그림에서 숫자 “4”가 디스플레이 됨을 알 수 있다.

loop() 문 중에서 만약 키 보드 입력이 4라면 if 문에서 일단 4를 인식 후 정수 d 로 변환하여 FND_display() 루틴을 단지 한번만 호출하면 된다.

if (request.indexOf("/KEY=4") != -1) {

int d = 4;

FND_display(FND_DATA[d]);

c ="4";

Serial.println(c);}

아울러 4를 문자 c 로 바꾸어 두고 아래 부분에 위치한 HTML 프로그램 중에서 문자 “4”일 경우 HTML SVG 루틴에 의해 스마트폰에 세그먼트 문자를 출력할 수 있게 된다.

⚫⚫⚫

client.println("<svg height='300' width='300'>");

if (c == "4") {

client.println("<polygon points='50,55 60,65 60,135 50,145 40,135 40,65'

⚫⚫⚫

4,6,8 이외의 문자들을 스마트폰이나 7세그먼트에서 출력하려면 위의 설명을 참조하여 if 문과 HTML 의 if문을 수정해야 할 것이다.

Webserver_nodemcu_IOT_keybd_7segment_01

#include <ESP8266WiFi.h>

const char* ssid = "AndroidHotspot1994";

const char* password = "00000000";

byte FND[8] = {2,3,4,5,0,12,14,15};

byte FND_DATA[] = {0XC0,0XF9,0XA4,0XB0,0X99,0X92,0X82,0XD8,0X80,0X90,0X88,0X83,0XC6,0XA1,0X86,0X8E,0XF7,0X7F};

WiFiServer server(80);

String c;

void setup() {

Serial.begin(115200);

delay(10);

// 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.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("/");

// 7semnent OUTPUT mode

byte z;

for(z=0; z<8; z++) {

pinMode(FND[z],OUTPUT);

}//7 segment setting

}

// FND Display Routine

void FND_display( byte data) {

byte z;

for(z=0; z<8; z++) {

digitalWrite(FND[z],bitRead(data,z));

}

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);

// favicon.ico request는 중복이므로 건너 뛰도록 프로그램 한다.

if(request.substring(5,16) != "favicon.ico") {

client.flush();

// Match the request

// Key board input processing

if (request.indexOf("/KEY=1") != -1) {

c ="1";

Serial.println(c);}

if (request.indexOf("/KEY=2") != -1) {

c ="2";

Serial.println(c);}

if (request.indexOf("/KEY=3") != -1) {

c ="3";

Serial.println(c);}

if (request.indexOf("/KEY=4") != -1) {

int d = 4;

FND_display(FND_DATA[d]);

c ="4";

Serial.println(c);}

if (request.indexOf("/KEY=5") != -1) {

c ="5";

Serial.println(c);}

if (request.indexOf("/KEY=6") != -1) {

int d = 6;

FND_display(FND_DATA[d]);

c ="6";

Serial.println(c);}

if (request.indexOf("/KEY=7") != -1) {

c ="7";

Serial.println(c);}

if (request.indexOf("/KEY=8") != -1) {

int d = 8;

FND_display(FND_DATA[d]);

c ="8";

Serial.println(c);}

if (request.indexOf("/KEY=9") != -1) {

c ="9";

Serial.println(c);}

if (request.indexOf("/KEY=0") != -1) {

c ="0";

Serial.println(c);}

if (request.indexOf("/KEY=A") != -1) {

c ="A";

Serial.println(c);}

if (request.indexOf("/KEY=B") != -1) {

c ="B";

Serial.println(c);}

if (request.indexOf("/KEY=C") != -1) {

c ="C";

Serial.println(c);}

if (request.indexOf("/KEY=D") != -1) {

c ="D";

Serial.println(c);}

if (request.indexOf("/KEY=E") != -1) {

Serial.println("E");}

if (request.indexOf("/KEY=F") != -1) {

c ="F";

Serial.println(c);}

// 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("<head>");

//배경 색 문자 색 사이즈 HTML CSS 설정

client.println("<style>");

client.println("body {");

client.println("background-color: lightblue;");

client.println("}");

client.println("p {");

client.println("color:red;");

client.println("font-size:250%;");

client.println("}");

//버튼 HTML CSS 설정

client.println(".button {");

client.println("background-color: white;");

client.println("border: solid;");

client.println("color: black;");

client.println("padding: 15px 32px;");

client.println("text-align: center;");

client.println("text-decoration: none;");

client.println("display: inline-block;");

client.println("font-size: 50px;");

client.println("margin: 2px 2px;");

client.println("cursor: pointer;");

client.println("}");

client.println("</style>");

client.println("<title>Page Title</title>");

client.println("<h1> Arduino 7 Segment </h1>");

client.println("</head>");

client.println("<body>");

client.println("<p>");

client.println("<svg height='300' width='300'>");

if (c == "4") {

client.println("<polygon points='50,55 60,65 60,135 50,145 40,135 40,65' style='fill:red;stroke:black;stroke-width:3' />");

client.println("<polygon points='200,55 210,65 210,135 200,145 190,135 190,65' style='fill:red;stroke:black;stroke-width:3' />");

client.println("<polygon points='50,150 60,140 190,140 200,150 190,160 60,160' style='fill:red;stroke:black;stroke-width:3' />");

client.println("<polygon points='200,155 210,165 210,235 200,245 190,235 190,165' style='fill:red;stroke:black;stroke-width:3' />");

client.println("<polygon points='205,250 215,240 225,240 235,250 225,260 215,260' style='fill:red;stroke:black;stroke-width:3' />"); }

if (c == "6") {

client.println("<polygon points='50,50 60,40 190,40 200,50 190,60 60,60' style='fill:red;stroke:black;stroke-width:3' />");

client.println("<polygon points='50,55 60,65 60,135 50,145 40,135 40,65' style='fill:red;stroke:black;stroke-width:3' />");

client.println("<polygon points='50,150 60,140 190,140 200,150 190,160 60,160' style='fill:red;stroke:black;stroke-width:3' />");

client.println("<polygon points='50,155 60,165 60,235 50,245 40,235 40,165' style='fill:red;stroke:black;stroke-width:3' />");

client.println("<polygon points='200,155 210,165 210,235 200,245 190,235 190,165' style='fill:red;stroke:black;stroke-width:3' />");

client.println("<polygon points='50,250 60,240 190,240 200,250 190,260 60,260' style='fill:red;stroke:black;stroke-width:3' />");

client.println("<polygon points='205,250 215,240 225,240 235,250 225,260 215,260' style='fill:red;stroke:black;stroke-width:3' />"); }

// client.println("<polygon points='50,50 60,40 190,40 200,50 190,60 60,60' style='fill:red;stroke:black;stroke-width:3' />");

// client.println("<polygon points='50,55 60,65 60,135 50,145 40,135 40,65' style='fill:red;stroke:black;stroke-width:3' />");

// client.println("<polygon points='200,55 210,65 210,135 200,145 190,135 190,65' style='fill:red;stroke:black;stroke-width:3' />");

// client.println("<polygon points='50,150 60,140 190,140 200,150 190,160 60,160' style='fill:red;stroke:black;stroke-width:3' />");

// client.println("<polygon points='50,155 60,165 60,235 50,245 40,235 40,165' style='fill:red;stroke:black;stroke-width:3' />");

// client.println("<polygon points='200,155 210,165 210,235 200,245 190,235 190,165' style='fill:red;stroke:black;stroke-width:3' />");

// client.println("<polygon points='50,250 60,240 190,240 200,250 190,260 60,260' style='fill:red;stroke:black;stroke-width:3' />");

// client.println("<polygon points='205,250 215,240 225,240 235,250 225,260 215,260' style='fill:red;stroke:black;stroke-width:3' />");

if (c == "8") {