미세먼지 (2) 썸네일형 리스트형 AirQualityTool 디자인 재작업 2018년 8월에 아두이노를 이용해서 웹에서 집의 온도, 습도, 공기품질을 확인할 수 있는 프로젝트를 진행하였습니다.당시에는 웹디자인을 부트스트랩으로 제작하였으며 각 그래프들을 한 페이지에 표시해 보기 편하지는 않았습니다. 그래프의 가독성을 조금이나마 높이고자 디자인을 변경해보았습니다. 기존에 쓰던 부트스트랩을 안쓰고 Bulma.io를 이용하였습니다.Nuxt.js를 이용하여 프론트엔드를 제작하였으며 Express로 만들어진 백엔드를 JavaScript에서 TypeScript로 변경하였습니다. 본문과 사이드바를 나누어주었습니다.사이드바는 컴포넌트로 분리하고 어느 페이지에 가도 항상 표시되기 때문에 layouts/default.vue에 넣어두었습니다. 마지막으로 본문에 그래프를 넣어 완성하였습니다. 온습도 .. 온습도 및 미세먼지 측정, 시각화 - AirQualityTool 안녕하세요 :D 오랜만에 아두이노(NodeMCU) 프로젝트입니다! 집 안의 온습도 및 미세먼지는 기록하여 DB에 저장 후 그래프를 통해 보여주는 프로젝트입니다. 사용부품 : NodeMCU (CH340), DHT11, Grove DustSensor서버측 사용언어 : Node.js사용 데이터베이스 : MariaDB 제가 쓴 NodeMCU의 경우 일반적으로 많이 쓰이는 브레드보드에 들어가는 사이즈가 아니라서저런 방식으로... NodeMCU는 3V 출력만 지원하기 때문에 먼지 센서의 경우 외부전원을 이용해주었습니다. 사진처럼 그래프를 통해 현재 상태를 보여줍니다. GitHub : https://github.com/SkyLightQP/AirQualityTool 이전 1 다음
