아두이노 카페소음측정기(완성)

아두이노 카페소음측정기(완성)

2019. 8. 28. 15:58ㆍ해봤던것들

이전 과정들을 통해 센서 값을 불러오고

MySQL을 활용해 데이터베이스에 저장했습니다.

이제 실제로 활용이 가능하도록 저장된 데이터를 웹 페이지와 연동합니다.

반응형 웹을 사용해서 스마트폰에서도 사용이 가능하도록 했으며

부트스트랩, 구글 차트, 카카오 맵 API를 사용했습니다.

반응형 웹, 실시간 소음 측정

반응형 웹인 부트스트랩을 사용해서 PC에서는 왼쪽과 같은 화면, 모바일에서는 오른쪽과 같은 화면이 출력됩니다.

데이터베이스에 저장된 가장 최근에 측정된 소음 값을 불러와서 실시간으로 현재 소음을 확인할 수 있습니다.

또 소음에 따라 색상이 변하도록 했습니다.

0~50 초록색

51~80 주황색

80~ 빨간색

 if(0<=i && i<=50){
        document.getElementById ( "fontColor" ).style.color = 'green';
    }
    else if(51<=i && i<=80){
    	document.getElementById ( "fontColor" ).style.color = 'orange';
    }
    else{
        document.getElementById ( "fontColor" ).style.color = 'red';
    }