GIS Developer

아두이노는 다양한 센서를 통해 계측값을 획득할 수 있는데, 온도와 습도값을 얻을 수 있는 센서에 대한 글을 정리하겠습니다. 온도와 습도를 센싱하는 장치는 DHT11 센서를 사용했습니다.

온도와 습도를 센싱함으로써, 이를 활용하여 쾌적환 생활 환경을 유지할 수 있습니다. 온도와 습도값을 계측하고 온도와 습도를 조절하는 에어컨, 난방기 또는 가습기 등을 자동으로 제어함으로써 원하는 온도와 습도를 유지할 수 있습니다.

아두이노에 DHT11 센서를 연결한 회로도는 다음과 같습니다.

DHT11 센서는 4개의 핀이 있는데, 왼쪽부터 VCC, Data, NC, GND입니다. Data 핀으로 온도와 습도값이 들어오는데 위의 회로도처럼 아두이노의 D2에 연결하였습니다. 아래의 화면은 실제 구동되는 모습인데요. 습도와 온도를 시리얼 LCD를 통해 표시하고 있습니다.

스케치 코드는 다음과 같습니다.

#include 

#define DHT11PIN 2

Dht11 DHT11(DHT11PIN);

void setup() {
    Serial.begin(9600);
    Serial.print("$CLEAR\r\n");
}

void loop() {
    Serial.println("\n");

    int chk = DHT11.read();

    if(chk == Dht11::OK) { 
            Serial.print("$GO 1 1\r\n");
            char szHumidity[30];
            sprintf(szHumidity, "$PRINT Humidity: %d%%\r\n", (int)DHT11.getHumidity());
            Serial.print(szHumidity);

            Serial.print("$GO 2 1\r\n");
            char szTemperature[30];
            sprintf(szTemperature, "$PRINT Temperature: %dC\r\n", (int)DHT11.getTemperature());
            Serial.print(szTemperature);
    }
    
    delay(1000);
}

DHT11 센서를 통해 값을 쉽게 얻기 위해 https://github.com/adalton/arduino/tree/master/projects/Dht11_Library 에서 제공되는 라이브러리를 사용했습니다.

지도 상에 통계 데이터를 차트를 통해 표현하는 코드를 정리해 봅니다. 차트의 종류는 많지만 이중 지도와 가장 잘맞는 차트는 파이 차트인데요. 이 파이 차트를 표시해 보도록 하겠습니다.

먼저 차트를 표시할 수치지도 레이어를 추가합니다. 차트 표시를 위해 반드시 수치지도가 필요한 것은 아니지만.. 수치지도는 차트를 표시할 위치와 통계 데이터를 속성 값으로 가질 수 있으므로 차트에 대한 예제로 사용하기에 좋습니다. 아래의 코드는 수치지도를 표시하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #map {
            top: 0px;
            left: 0px;
            position: absolute;
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
        }
    </style>

    <script src="../../scripts/fingereyes-xr/Xr.js">

    <script>
        var map = null;

        function onLoad() {
            map = new Xr.Map("map", {});

            var lyr = new Xr.layers.ShapeMapLayer("lyr",
                {
                    url: "http://168.192.76.10:8080/Xr?layerName=li_a@test"
                }
            );
            
            var theme = lyr.theme();
            theme.penSymbol().color("black");
            theme.brushSymbol().color("lightgray");
            lyr.needAttribute(true);

            var lm = map.layers();
            lm.add(lyr);

            map.onLayersAllReady(onLayersReady);

            window.addEventListener("resize", onResize);
        }

        var bFinishResizing = true;

        function onResize() {
            if (bFinishResizing) {
                bFinishResizing = false;

                setTimeout(function () {
                    var newWidth = window.innerWidth;
                    var newHeight = window.innerHeight;

                    map.resize(newWidth, newHeight);
                    map.update();

                    bFinishResizing = true;
                }, 500);                
            }
        }

        function onLayersReady() {
            var cm = map.coordMapper();
            var lyr = map.layers("lyr");
            var mbr = lyr.MBR();

            cm.zoomByMBR(mbr);

            map.update();
        }
    </script>

    <title></title>
</head>

<body onload="onLoad()">
    <div id="map" />
</body>
</html>

위의 코드에서 중요한 부분은 40번째 코드에서 수치지도 레이어에 대한 속성값이 필요하다고 명시하고 있다는 점입니다. 차트 표시를 위한 통계값으로써 수치지도의 속성값이 필요하므로 이 코드가 필요합니다. 만약 수치지도 레이어가 라벨 표시를 사용한다면 자동으로 속성값을 호출하므로 굳이 이 코드가 필요하지는 않습니다. 이제 버튼을 올려두고 이 버튼을 클릭했을때 차트를 지도 상에 표시하는 코드를 작성해 보도록 하겠습니다.

이제 이 수치지도에 차트를 구성하는 코드를 작성할 것인데요. 아래의 doCharting 함수가 차트를 구성합니다.

 function doCharting() {
    var gl = new Xr.layers.GraphicLayer("chart");
    map.layers().add(gl);

    var graphicRows = gl.rowSet();
    var lyr = map.layers("lyr");
    var rows = lyr.shapeRowSet().rows();
    var ars = lyr.attributeRowSet();
    var fieldSet = lyr.fieldSet();
    var idx_sum_po_u65 = fieldSet.fieldIndex("sum_po_u65");
    var idx_sum_po_u75 = fieldSet.fieldIndex("sum_po_u75");
    var minValue = Number.MAX_VALUE;
    var maxValue = -Number.MAX_VALUE;
            
    for (var fid in rows) {
        var aRow = ars.row(fid);
        var val_sum_po_u65 = aRow.valueAsFloat(idx_sum_po_u65);
        var val_sum_po_u75 = aRow.valueAsFloat(idx_sum_po_u75);
        var total = val_sum_po_u65 + val_sum_po_u75;

        if (minValue > total) minValue = total;
        if (maxValue < total) maxValue = total;
    }

    var graphMaxSize = 80;
    var graphMinSize = 30;

    for (var fid in rows) {
        var aRow = ars.row(fid);
        var sRow = rows[fid];
        var pt = sRow.shapeData().representativePoint();
        var val_sum_po_u65 = aRow.valueAsFloat(idx_sum_po_u65);
        var val_sum_po_u75 = aRow.valueAsFloat(idx_sum_po_u75);
        var totalValue = val_sum_po_u65 + val_sum_po_u75;
        var radiusOut = (((graphMaxSize - graphMinSize) * totalValue / (maxValue - minValue)) + graphMinSize) / 2;
        var pcisd = new Xr.data.PieChartItemShapeData({
            x: pt.x, y: pt.y,
            values: [val_sum_po_u65, val_sum_po_u75],
            radiusOut: radiusOut, radiusIn: radiusOut * 0.4
        });

        var pcigr = new Xr.data.PieChartItemGraphicRow(fid, pcisd);
        graphicRows.add(pcigr);

        pcigr.penSymbol().color("#ffffff").width(1);
        pcigr.brushSymbol(0).opacity(1).color('#1abc9c');
        pcigr.brushSymbol(1).opacity(1).color('#34495e');
    }

    gl.refresh();
}

위의 코드를 하나씩 살펴보면... 먼저 1-2번 코드는 chart라는 이름의 그래픽 레이어를 추가하고 있습니다. 바로 이 그래픽 레이어에 차트가 표현됩니다. 그리고 10번-11번에서는 2개의 필드에 대한 인덱스값을 저장하고 있습니다. doCharting 함수는 2개의 속성값을 이용해 파이차트를 구성하고 있는데, 이때 사용하는 필드는 sum_po_u65와 sum_po_u7 이고 그 값을 얻기 위해 필드 인덱스값이 필요합니다. 15번-23번 코드는 차트를 구성하는 값의 최대값과 최소값을 계산합니다. 25-26번은 파이 차트를 그릴때 최대값에서의 차트 크기와 최소값에서의 차트 크기를 나타냅니다. 차트 크기의 단위는 px입니다. 28번-48번이 그래픽 레이어에 차트 그래픽 요소를 추가하는 함수인데요. 차트 그래픽 요소를 구성하는 값들로써 차트가 표시될 위치, 값에 대한 배열, 차트의 크기가 있습니다. 이 함수를 실행하면 다음과 같은 결과 화면을 볼 수 있습니다.

글

아두이노를 이용한 IoT 개발 – 온도, 습도 센서

FingerEyes-Xr에서 파이 차트(Pie Chart) 표현하기