아두이노 코딩-76: NodeMCU WiFi 웹서버 가변저항 전압데이터 PC 웹에서 구글차트 그래프 작성 II:

codingart (66)in #kr • 6 years ago (edited)

이전 구글차트예제에서 구글 차트에서 제공하는 이미 정해진 7개의 점 데이터를 Java Script그래프 기능을 사용하여 스마트 폰이나 PC의 웹에서 그래프를 그려 보았다.

본 예제에서는 NodeMCU에 설치된 가변저항을 서서히 돌려 가변 저항 양단에 걸리는 전압 변동 데이터를 구글 그래프로 나타내고자 한다. 실제 해 보면 실시간은 아니다. 점데이타 세트 전체를 사용 하나의 그래프를 작성한 후 전송한다고 생각하면 된다. NodeMCU 배선은 위 사진을 참조한다. NodeMCU 위부분의 A0 핀, 3V 핀, GND 핀을 사용하였다.

코드 실행 중에 하나의 전압 데이터를 생성하고 다음 데이터를 생성하기까지 시간지연을 500ms 즉 0.5초로 두고 가변 저항 한번 풀 회전시키자면 3∼4 초 정도 시간이 소요된다.

일곱 개의 점 데이터를 생성하고자 하면 이때의 점 데이터는 2부터 8까지 증가하는 정수 i를 x좌표로 하고 analogRead(A0)에 의해 읽은 전압 데이터를 100으로 나누어 y좌표로 삼기로 한다. 그렇다면 전압데이터는 약 0∼10까지의 범위를 가지게 된다.

100으로 나누는 이유는 만약 전압데이터가 거의 변동이 없이 1023 근처에 머물 경우 그래프 작성 시에 그래프 작성 높이 범위가 900에서 1100 사이로 제한될 수 있다. 그러다가 1000에서 0까지 전압 값이 급변하게 되면 그래프 작성 범위 영역이 0에서 1000으로 변경되게 된다. 즉 Data Refresh 할 때에 그래프 틀이 바뀌게 된다. 각자가 필요하다면 코드를 수정하여 구글 차트의 그래프 작성 요령을 확인해 보기 바란다.

앞에서 다루었던 예제와 코드 구조가 거의 변동이 없기 때문에 바뀌는 부분만의 코딩 내용을 제시하기로 한다.

구글 차트 예제의 점 데이터 부분 코드

client.println("[2, 2.5],");
client.println("[3, 3],");
client.println("[4, 4],");
client.println("[5, 4],");
client.println("[6, 3],");
client.println("[7, 2.5],");
client.println("[8, 3]");
client.println("]);");

위의 코드를 다음과 같이 수정한다. for를 사용한 loop 문 다음에 한 번 더 되풀이되는 프로그램은 좌표 데이터 기술의 마지막에 콤마(,)가 없어야하기 때문이다.

for(int i=2;i<8;i++){
// 아나로그입력 생성(0-1023):1023=3.3V
int val = analogRead(A0)/100;
client.println("[");
client.print(i);
client.print(",");
client.print(val);
client.println("],");
delay(500);
};
int i = 8;
int val = analogRead(A0)/100;
client.println("[");
client.print(i);
client.print(",");
client.print(val);
client.println("]");
client.println("]);");

그 다음에 작성하려는 점 데이터 수 가 7개이므로 그 하단에 수평 축 즉 hAxis에서 최대치 maxValue를 8로 수정하기로 한다.

client.println("hAxis: { minValue: 0, maxValue: 8 },");

HTTP 통신에서 request를 한번씩 보내는데 소요되는 시간이 수초는 걸리므로 여러 개의 점 데이터를 하나씩 처리하는데는 무리가 있을 수 있으므로 한번 request를 보낸 상태에서 한세트 즉 8개의 점 데이터를 한 묶음으로 처리해야 속도 문제가 해결된다. 그것이 for loop를 사용하는 이유이다.

전압 데이터 하나를 출력 후 지연 시간이 500ms 이므로 여유있게 가변 저항을 돌려 보도록 한다.
이미 설명하였듯이 0에서 8까지 7개의 점 데이터가 매끈하게 그래프로 작성되었다. 점 한 개 당 프로그램 연산 시간 및 지연 시간 500ms를 합쳐 점 7개를 작도함에 약 5초를 넘지 않으나 네트워크를 타고 데이터가 넘어 오는 시간이 있으며 아울러 구글 차트가 이들 데이터 전체를 받은 후 한 번에 그래프를 작성한다. 그래서 한 점 한 점 실시간으로 작성하지는 않으니 주의하기 바란다. 아울러 구글 차트 프로그램 구문에 y좌표 값 최대치에 대한 제한 설정이 없는 것으로 보아 일단 작성할 데이터를 전부 받은 후 그래프의 가로 축 세로 축 범위를 설정하는 듯하다. 다음은 여러번 실험한 결과이다.