공기청정기와 모니터링 시스템

728x90

😀 프로젝트 포스팅은

개인 제작한 프로젝트를 리뷰하고 한 번 정리하는 포스팅입니다.

이번에 진행한 프로젝트는

아두이노와 3D 프린터를 이용하여 공기청정기를 제작하고,

라즈베리파이로 서버를 만들어서 모니터링이 가능한 시스템을 구현하였습니다.

사용 물품

라즈베리파이 4 B 모델
라즈베리파이 4 B 모델	라즈베리파이 LCD 패널
ESP-01 Wifi module
ESP-01 Wifi module adapter
아두이노 우노
아두이노 팬
아두이노 LDC 패널
아두이노 나노보드
아두이노 릴레이 모듈
소형 필터

위 사진은 전체적인 외관 사진입니다.

상단부와 하단부로 나누어 설계하였습니다.

상단부에는 팬과 필터로 구성하였으며,

하단부에는 센서들을 아두이노 나노보드를 통해서 사용하고 있습니다.

미세먼지 측정값을 보여주는 아두이노 LCD 패널과

미세먼지 값을 측정하는 미세먼지 센서,

센서값을 서버로 전송할 Wifi 통신 모듈로 구성하였습니다.

또한 아두이노 나노 보드에 릴레이 모듈을 설치하여

특정 조건이 충족될 경우에는 릴레이 모듈이 작동되어

상단부에 팬이 회전하도록 설계하였습니다.

위 그림과 같이 미세먼지 측정 센서에서

특정 수준 이상의 값이 측정될 경우

팬이 동작하여 공기청정기에 역할을 수행하게 됩니다.

동작 예시

또한

센서값을 서버로 실시간으로 전송하며,

현재 측정되고 있는 최신값과 그 변화량을 최대 7일까지

볼 수 있도록 서버를 구축 하였습니다.

서버 측 코딩

<?php

//  그래프를 그리는 JS 함수와 그래프를 표시하는 <div> 태그를 생성하는 사용자 정의 함수을 만듭니다.

function makeChartParts($data, $options, $type)

{

  static $index = 1;
  $package = 'corechart';
  $special_type = array('GeoChart', 'AnnotatedTimeLine','TreeMap', 'OrgChart',
                        'Gauge', 'Table', 'TimeLine', 'GeoMap', 'MotionChart');

  if (in_array($type, $special_type)) {
    $package = strtolower($type);
  }

  $load = 'google.charts.load("current", {"packages":"' . $package . '"});';

  $jsData = json_encode($data);

  $jsonOptions = json_encode($options);



  // 그래프를 그리는 JS 함수를 생성합니다.


  $chart = <<<CHART_FUNC

    {$load}

    google.charts.setOnLoadCallback(drawChart{$index});

    function drawChart{$index}() {

      var data = {$jsData};

      var chartData = new google.visualization.arrayToDataTable(data);

      var options = {$jsonOptions};

      var chartDiv = document.getElementById('chart{$index}');

      var chart = new google.visualization.{$type}(chartDiv);

      chart.draw(chartData, options);

    }\n

 

CHART_FUNC;

  // 그래프를 표시하는 <div> 태그를 생성합니다.

  $div = '<div id="chart' . $index . '"></div>';

  $index++;  

  return array($chart, $div);

}

?>

----------------------

<?php

// 다른 파일의 사용자 정의 함수 "makeChartParts ()"를 읽어들입니다.

require_once './example/make_chart_parts.php';

$con=mysqli_connect("localhost","sensor_admin","kApRympaUfsSlA*B","all_sensor_data");

if(mysqli_connect_error()){echo "Failed to MySQL:".mysqli_connect_error();}


$data = array( array('', '평균 이산화탄소'),);

for($count = 15; $count > 0; $count--){

  $temp = mysqli_query($con, "SELECT AVG(CO2_D) FROM `quality_meter` WHERE DATE_FORMAT(Time, '%Y-%m-%d') = CURDATE() - INTERVAL {$count} DAY");

  $temp_row = mysqli_fetch_array($temp);

  $arr = array(date('d', strtotime($day."-$count day")).'일',(int)$temp_row['AVG(CO2_D)']);

  array_push($data,$arr);

}

 

// 그래프 옵션

$options = array(

  'title'  => '평균 이산화탄소 그래프 ('.(date('m').'월)'),  // 그래프 제목

  'titleTextStyle' => array('fontSize' => 16), // 제목 스타일

  'vAxes'  => array(0 => array('title'    => '평균 이산화탄소（PPM）',  // 세로축 왼쪽

                               'minValue' =>  0, 'minValue' => 2100)),

  'width'  => 1200, 'height' => 500,  // 폭, 높이

  'chartArea' => array('width' => 900, 'height' => 240),  // 차트 영역

  'legend' => array('position' => 'bottom', 'alignment' => 'start'));  // 범례

 
// 그래프 유형 (선 그래프)

$type = 'LineChart';

// 그래프 그림의 JavaScript 함수, 표시할 <div> 태그의 생성

list($chart, $chart_div) = makeChartParts($data, $options, $type);


?>

<!DOCTYPE html>

<html lang="ko">

    <head>

        <meta charset="UTF-8">

        <title>꺾은 선 그래프</title>

        <script src="https://www.gstatic.com/charts/loader.js"></script>

        <script>

            // 그래프 그리기 함수를 표시합니다.

            <?php

        echo $chart;

        echo 'console.log('.json_encode($data).')';

      ?>
        </script>

    </head>

    <body>

        <!-- 차트를 표시 할 <div> 태그를 적당한 위치에 배치 -->

        <div>

            <?php echo $chart_div; ?>

        </div>

    </body>

</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Dashboard - SB Admin</title>
        <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
        <link href="css/styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
    </head>
    <body class="sb-nav-fixed">
        <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
            <!-- Navbar Brand-->
            <a class="navbar-brand ps-3"> ACO </a>
        </nav>
        <div>
            <div>
                <main>
                    <div class="container-fluid px-12">
                        <br>
                        <br>
                        <br>
                        <h5>미세먼지 변화량 측정</h5>
                        <div class="row">
                            <div class="col-12">
                                <?php
                                $jb_conn = mysqli_connect( 'localhost', 'aco_admin', '20184138', 'Sensor');
                                $jb_sql = "SELECT * FROM Sensor LIMIT 3;";
                                $jb_result = mysqli_query( $jb_conn, $jb_sql );
                                while( $jb_row = mysqli_fetch_array( $jb_result ) ) {
                                  echo '<p>' . $jb_row[ 'id' ] . $jb_row[ 'dust_D' ] . $jb_row[ 'time' ] .'</p>';
                                }
                              ?>
                                </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-chart-area me-1"></i>
                                        미세먼지 변화량 그래프
                                    </div>
                                    <div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="js/scripts.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
        <script src="assets/demo/chart-area-demo.js"></script>
        <script src="assets/demo/chart-bar-demo.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
        <script src="js/datatables-simple-demo.js"></script>
    </body>
</html>

728x90

'Project' 카테고리의 다른 글

Django를 이용하여 웹 플랫폼 만들기 (0)	2023.05.31
공기질 모니터링 시스템 (2)	2023.05.19
Python 기반의 홈 IoT 구현 (2)	2023.05.10

사용 물품

동작 예시

서버 측 코딩

'Project' 카테고리의 다른 글

티스토리툴바