NodeMCU 미세먼지 모니터링 HTML 그래픽 출력 앱 인벤터 웹뷰어 코딩

                                                   

아래의 코딩을 이해하기 위해서는 HTML 언어를 사용하는 아두이노 NodeMCU 미세먼지 측정 와이파이 코딩과 LOW PASS FILTERING에 대한 이해 및 준비가 필요합니다.

미세먼지 농도를 측정하기 위한  GP2Y1010AU 센서를 아두이노 호환 NodeMCU에 설치하고 측정 결과를 와이파이에 의해 무선 공유기가 설치된 PC에 전송하자. 위의 사진은 2017년 4월에 제작했던 미세먼지 측정기를 손봐서 다시 사용하게 되었다.  PC에서는 HTML  SVG 언어로 작성한 그래픽 출력 웹서버 코드에 의해 아래와 같은 결과가 출력된다.

미세먼지 센서는 측정 시에 대단히 민감해서 크게 흔들리는 유형의 그래프 출력이 얻어진다. 따라서 코딩과정에 디지털 LOW PASS FILTERING  기법을 사용하여 미세먼지 검출 용도에 적합하게  출력을 조절할 필요가 있다. 아래의 미세먼지 농도 측정용 아두이노 코드에서 alpha 값을 조절하게 되면 그래픽 출력 양상이 많이 변화됨을 알 수 있다.

미세먼지와는 다른 드론 비행제어를 위해 사용되는 MPU6050 센서의 경우 각속도
센싱 과정에서 0.2∼0.3 범위의 alpha  값이 사용되어 주로 저주파 성분만을 취하였다. 반면에 미세먼지 센서는 상당히 높은 주파수 성분을 가지므로 0.8∼0.9 범위의 alpha  값을 사용하면 상기의 그래프와 같은 민감한 출력 결과를 관찰할 수 가 있다.

아두이노 HTML 웹서버코딩에서는 무선 공유기나 핫스팟에 의해 PC 나 스마트폰과 연결된 상태에서 아래와 같은 방법으로 웹과 연결이 이루어지며 필요에 따라서 화면상의 버튼을 클릭하거나 터치하여 작업이 실행된다.

한편 이와 같이 웹상에서 실행되는 HTML 코드는 앱 인벤터 코딩의 경우에도 webviewer를 사용하여 실시간 연결이 가능하다. 앱 인벤터의 자체적인 문법 기능만을 사용하여 HTML 과 같은 프로그램을 작성하기는 어렵다. 이미 아두이노에서 HTML 웹서버 코딩이 되어 있다면 클라이언트로서 웹서버를 불러 연결이 가능하다.
앱인벤터에서 음성인식 기능을 사용하여 “미세먼지“라고 말하면 webviewer에서 HTML에서 웹서버를 불러내는 명령인 ”192.168.⚫⚫⚫“을 실행시키는 간단한 코드를 작성하도록 하자.

이 엡 인밴터 코딩을 위해서는 이미 아두이노 웹서버 코드를 각자가 준비해야 한다. 미세먼지 코드말고도 간단한 사물인터넷 코드로서 붙박이 LED를 on OFF 하는 웹서버 코드도 이용이 가능하다.

앱 인벤터 코딩을 위한 콤포넌트 구조는 간단히 버튼, 라벨, 웹뷰어 및 음성인식엔진으로 구성된다.

버튼 터치 클릭에 의해 음성 입력 작업이 이루어지고 결과는 텍스트 형태로 라벨에 저장된다. 아울러 웹 뷰어에는 HTML에서 웹서버를 불러내는 명령인 ”192.168.⚫⚫⚫“ 정보를 수록해 둔다. 한편 1개 이상의 HTML 웹서버 코드 실행을 전제로 할 경우 음성인식엔진에서 얻어내는 음성 정보 텍스트를 if 문에서 확인하는 과정을 거쳐 웹뷰어를 호출하도록 한다. 필요하다면 if elsief then  문법을 사용하여 여러개의 HTML 웹서버 코드를 실행시킬 수 있도록 코딩이 가능하다는 점을 지적해 둔다.

블록을 코딩해 보자. 음성 버튼을 클릭하면 음성인식 엔진이 실행되어 텍스트 정보가 얻어진다. 텍스트 형태로 얻은 음성인식 정보를 스마트폰 화면에서 볼 수 있도록 라벨에 출력한다. 만약 그 정보가 “미세먼지”라면 ”192.168.⚫⚫⚫“ 정보에 해당하는 주소로 웹뷰어를 불러 연결한다.