이 글은 IoT(Internet Of Things), NoSQL MongoDB, BIM(Building Information Modeling)과 Autodesk Forge 상호연결 방법에 대한 간단한 설명이다. 개발 환경은 node.js, express, bootstrap을 사용해 앱 서버로서 실행된다. 이 글에서 소개하는 기술은 디지털 트윈 개념 구현에 참고할 수 있으며, 손쉽고 저렴한 기술 개발을 위해, 오픈소스를 적극 사용한다. 동기 부여를 위해, 이 글에서 개발될 시스템명은 DTB-BMS(가칭 Digital Twin and BIM based Building Management System)으로 한다.
쉬운 개발을 위해, IoT 센서 데이터 취득 및 DB 연결은 node-red를 사용한다, 굳이 성능 최적화가 중요하다면, 파이썬 등 다른 언어를 사용해 코딩한다. 참고로, 이 글은 간단히 메이크하는 것을 지향하므로, 굳이 어려운 방법을 사용하지는 않는다.
이 글의 개발 파일 및 소스 코드는 블로그에 싣기에는 많고 복잡할 수 있다. 그러므로, 주요 개발 컨셉과 코드를 중심으로 설명한다. 관련 코드들을 이 github링크의 해당 폴더들을 참고하길 바란다. git을 설치하면, 간편하게 개발된 코드를 다운로드할 수 있다. 참고로, 개발 결과 화면은 다음과 같다. 이와 관련된 Mongo DB, node.js, IoT 장치 개발 등 다른 내용들이 궁금하다면, 이 블로그의 관련 글들을 참고한다.
DTB-BMS(Digital Twin and BIM based Building Management System) APP server screen and database REST API(Application Program Interface)
DTB-BMS 시스템 요구사항 및 패키지 디자인
막코딩이 싫다면 목적에 맞게 시스템 아키텍처를 설계하는 것은 중요하다. 이 시스템의 핵심 요구사항은 다음과 같다.
- BIM 모델의 각 공간에 설치한 IoT 센서 데이터 모니터링
- 분석을 위한 각 공간별 센서 데이터 취득 지원
- 소형화된 센서의 간편한 설치
- 공간별 센서 데이터의 주요 부분 그래프 지원
- 데이터 모델 확장성이 쉬운 구조
- 유지보수성 고려한 DB(Database), API, 비지니스 로직 분리
- 50만원 이하 매우 저렴한 비용으로 앱, DB, API 서버 구현
시스템 패키지 구조는 다음과 같다.
디지털 트윈 시스템 기본 아키텍처(UML)
IoT 센서 개발
아두이노 나노 센스를 이용해, BIM 공간 관리를 위한 데이터를 얻는다. 핵심 아두이노 코드는 다음과 같다. Serial port로 출력하며, 출력 목적지는 초기 설정에 따라 WiFi, BLE, 유선이 가능하도록 한다.
void sensingNano(void) {
display.clearDisplay();
float temperature = HTS.readTemperature();
float humidity = HTS.readHumidity();
float pressure = BARO.readPressure();
// print each of the sensor values
Serial.print(temperature);
Serial.print(", ");
Serial.print(humidity);
Serial.print(", ");
Serial.print(pressure);
display.setCursor(0, 24);
String data = String("THP: ") + String(temperature, 1) + ", " + String(humidity, 1) + ", " + String(pressure, 1);
display.println(data);
...
}
구현 코드는 다음 링크를 참고한다.
관련해 자세한 개발 방법은 아래 링크를 참고한다.
참고로, BLE 버전은 센서가 많으나 블루투스만 지원한다. 데이터를 몽고디비에 저장하기 위해서 인터넷 연결이 필요하다. 이는 Serial port를 통해 node-red에서 데이터를 받아 전송하거나, WiFi회로를 만들어 데이터를 전송한다. WiFi는 다음 예를 참고해 ESP8266를 사용한다.
노드레드 활용 Mongo DB에 IoT 데이터 전송
IoT 장치에서 보낸 데이터를 MongoDB에 전송하기 위해 node-red를 사용한다. node-red에서 다음과 같이 function노드를 만들어 프로그래밍한다.
노드레드 기반 센서 데이터베이스 저장을 위해 코딩된 그래프
프로그래밍 된 코드는 다음 링크를 참고한다.
참고로, 노드래드 그래프에서 첫번째 함수는 아두이노와 연결된 COM 포트에서 콤마 형식으로 구분된 IoT 데이터들(예. "608.02, 910.13, 7203.23, ...")을 개별 토큰(token)으로 분리한다. 두번째 함수는 토큰으로 분리된 값들을 각각 mongo DB 노드로 전송한다.
첫번째 함수 노드 스크립트는 다음과 같다.
var output = msg.payload.split(",");
var msgList = [];
output.forEach(function(v, index)
{
var msgIoT = {payload: parseFloat(v)};
msgList.push(msgIoT);
});
return msgList;
두번째 함수 노드 스크립크를 다음과 같이 코딩한다.
var d = new Date();
var date = d.getFullYear() + '-' + d.getMonth() + '-'
+ d.getDate() + '-' + d.getHours() + ':' + d.getMinutes()
+ ':' + d.getSeconds();
var newMsg = {
'sensor': 'temp',
'area' : 'Skinner',
'date' : date,
'value': msg.payload
};
return newMsg;
다음과 같이 노드레드에서 Mongo DB 노드를 생성해, 데이터베이스와 연결하면 된다.
node-red의 MongoDB 설정 화면
데이터베이스 및 BIM 정의
먼저 MongoDB를 설치한다(MongoDB에 대한 사용법은 이 링크를 참고한다).
센서 데이터베이스 모델링을 위해, 터미널에서 mongo를 실행하고, 다음과 같이 정의한다.
show dbs
use sensor
db.records.insert({sensor:'light', area:'UNF', date:'2021-1-1', value:31})
Mongo DB 터미널에서 데이터베이스 정의 결과
MongoDB compass에서 확인한 결과는 다음과 같다. 
현재는 온도만 저장하고 있으나, 센서 유형별로 다양한 데이터 값을 저장하기 위해 sensor 컬럼을 추가하였다. 테스트에서는 온도 센서값만 저장하고 있다. 1년동안 서비스한다는 가정하에 어느 정도 저장 용량 장치가 필요하지 확인하기 위해, 다음과 같이 저장 용량을 계산한다.
데이터베이스 향후 저장 용량 계산
1년을 저장한다면, 7,388.94 Mb 저장 용량이 필요하다. 센서 유형을 온도 이외에 습도, 조도, 사운드 추가시 약 30 Gb 저장 용량이면 된다. 1년 간 데이터 백업을 고려하면 60 Gb이다. 저장소가 부족하 경우, 압축이나 데이터 취득 간격 조정을 고려한다. 참고로, IoT장치에서 1초에 2번씩 데이터를 샘플링하므로, 1초로 줄일 경우, 계산된 저장용량의 절반 정도면 충분할 것이다. 참고로, 신호처리이론(Nyquist–Shannon sampling theorem, Sampling and sampling density)에 의해 데이터 처리 간격이 1/1초라면, 데이터 손상 없는 재현을 위해, 최소 두배(2.56) 간격으로 샘플링하는 것이 좋다. 아울러, 샘플링은 센서 스펙도 함께 고려한다(예. Arduino Nano BLE sense 33. Sensor output rate = 104 Hz).
각 레코드는 IoT 데이터와 연결을 위해서는 모델 객체 별로 연결 데이터 처리 작업이 필요하다. BIM 모델링은 Autodesk Revit을 이용한다. 이 과정은 모델 용량에 따라 매우 많은 노가다가 필요할 수 있다. BIM 객체에 센서 데이터 연결을 위한 ID같은 연결점을 모델링한다(마법은 없다. 눈으로 객체를 확인하며 손으로 직접 입력 수정한다). 상호 연결을 위해 객체 속성 GUID, 분류체계, 태그 ID 등을 생성하고 이를 이용해 DB, 비지니스 로직과 연결한다.
Autodesk Revit의 Room 속성 예시
참고로, 이 글에서는 테스트를 위해, Autodesk 제공 예제 파일을 이용한다.
MongoDB CRUD REST API 서버 개발
몽고디비 리소스는 보안 등의 문제로 인터넷 브라우저에서 직접 접속할 수 없다. 데이터를 얻기 위해, REST API서버를 개발한다. 주요 코드는 다음과 같다.
// sensor.mode.js 파일
const mongoose = require('mongoose'); // 몽고DB 연결을 위해 mongoose node 패키지 사용
var Schema = mongoose.Schema, ObjectId = Schema.ObjectId;
// 저장되는 몽고DB 스키마 구조 정의
const RecordSchema = new Schema({
_id : ObjectId,
sensor : String,
area : String,
date : String,
value : Number
// _msgid : String
});
const record = mongoose.model('record', RecordSchema);
module.exports = record;
// sensor.routes.js 파일
module.exports = (app) => {
const sensors = require('../controllers/sensor.controller.js');
// Retrieve all sensors
app.get('/sensors', sensors.findAll); // 센서 데이터를 얻는 URL GET 함수
...
// sensor.controll.js 파일
const Record = require('../models/sensor.model.js');
// 데이터베이스에서 데이터 검색해 리턴.
exports.findAll = (req, res) => {
Record.find()
.then(records => {
res.send(records);
}).catch(err => {
res.status(500).send({
message: err.message || "Some error occurred while retrieving Record."
});
});
};
...
실제 구현 코드는 아래 링크를 참고한다.
관련 내용의 자세한 설명은 다음 링크를 참고한다.
개발 결과는 다음과 같다.
센서 데이터 REST API 결과
Postman 도구를 이용하면, 개발된 REST API를 쉽게 테스트할 수 있다(참고. Postman 설치). Postman에서 GET URL을 http://localhost:4000/sensors로 입력한다. 다음 그림과 같은 결과가 출력되면 성공한것이다.
Postman REST API 테스트 결과
참고로, REST API서버는 이를 이용하는 포지 앱 서버와 서로 CORS 설정이 되어 있어야, 에러 없이 리소스에 접근할 수 있다. 구현 코드는 이를 기본 옵션으로 설정해 두었다. 관련 자세한 내용은 다음 링크를 참고한다.
- CORS node 설명
Autodesk Forge와 Mongo DB 연결 및 데쉬보드 개발
이제, Autodesk Forge와 Mongo DB를 연결하고, 데쉬보드 개발한다. BIM Forge view 개발 방법은 다음을 참고한다.
실제, 구현 코드는 다음 링크를 참고한다.
구현 코드의 폴더 구조는 다음과 같다.
구현 코드에서 포지 앱과 몽고 DB연결은 앞서 개발한 API 서버를 사용한다. 주요 코드는 다음과 같다.
// viewer.html 파일
<!DOCTYPE html>
<html>
...
<head>
</head>
...
<body>
<script type="text/javascript">
function renderSensorTable(responseText) {
var htmlElement= document.getElementById('sensorDataTable');
htmlElement.innerHTML = '';
var table = document.createElement("table");
table.setAttribute("class", "table table-striped table-sm table-responsive");
var head = "<thead><tr><th>No</th><th>Area</th><th>Sensor</th><th>Time</th><th>Value</th></tr></thead>";
table.innerHTML = head; // 테이블 헤더 정의
var tbody = document.createElement("tbody");
var records = JSON.parse(responseText); // REST API 리턴 데이터를 JSON 포맷으로 변환
for (var i = 0; i < records.length; i++) { // 센서 데이터 레코드 행 추가
var record = records[i];
var recValues = [];
recValues.push(i);
recValues.push(record.area);
recValues.push(record.sensor);
recValues.push(record.date);
recValues.push(record.value);
var row = document.createElement("tr");
for (var j = 0; j < recValues.length; j++) // 센서 데이터 레코드 값 추가
{
var c = document.createElement("td");
var t = document.createTextNode(recValues[j]);
c.appendChild(t);
row.appendChild(c);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
htmlElement.appendChild(table);
}
function renderSensorData() { // 센서 데이터 렌더링
// Create a new ajax requst
var oReq = new XMLHttpRequest(); // REST API 요청
oReq.onreadystatechange = function () // 비동기 데이터 처리
{
if (oReq.readyState == 4 && oReq.status == 200)
renderSensorTable(oReq.responseText); // IoT 데이터 전송 시 처리
};
// Create the connection to our API
oReq.open("GET", "http://localhost:4000/sensors"); // REST API를 통한 IoT 센서 데이터 요청
oReq.setRequestHeader('Content-Type', 'application/json');
oReq.send(); // Fire the request
}
/**
* Autodesk.Viewing.Document.load() success callback.
* Proceeds with model initialization.
*/
function onDocumentLoadSuccess(doc) {
// Load the default viewable geometry into the viewer.
// Using the doc, we have access to the root BubbleNode,
// which references the root node of a graph that wraps each object from the Manifest JSON.
var viewable = doc.getRoot().getDefaultGeometry();
if (viewable) {
viewer.loadDocumentNode(doc, viewable).then(function(result) { // 3D 뷰어 로딩시 발생 이벤트
console.log('Viewable Loaded!');
viewer.loadExtension("NestedViewerExtension", { filter: ["2d"], crossSelection: true });
renderSensorData(); // 센서 데이터 렌더링
}).catch(function(err) {
console.log('Viewable failed to load.');
console.log(err);
}
)
}
}
</script>
</body>
</html>
데쉬보드 그래픽은 Bootstrap을 사용하며, 뷰어 우측과 아래에 차트 그래프(forgeViewer div 요소 뒤에 추가됨), 테이블(sensorDataTable)로 동적 구성된다. 동적 구성될 요소는 viewer.html의 body에서 다음과 같이 정의되어 있다.
<body>
<!-- Custom script -->
<h4>Digital Twin based Building Monitoring and Data Analysis</h4>
<div class="container-fluid fill">
<div class="row fill">
<div class="col-sm-7 fill">
<div id="forgeViewer">
</div>
</div>
</div>
</div>
<div class="container-fluid fill">
<div class="row">
<div class="col-sm-12 fill">
<button id="reflashSensorData" onclick="renderSensorData()">Reflash IoT sensor data</button> <div id="sensorDataTable" class="table-responsive"></div>
</div>
</div>
</div>
그래프 동적 구성을 위한 주요 코드는 다음과 같다. 데쉬보드 div 요소가 추가되고, 데쉬보드 div 요소 안에 바차트, 파이차트 div 요소가 추가된다.
// dashboard.js
$(document).ready(function () {
$(document).on('DOMNodeInserted', function (e) {
if ($(e.target).hasClass('orbit-gizmo')) {
new Dashboard(NOP_VIEWER, [new BarChart('Light'), new PieChart('Temp')]); // HTML DOM ready 이벤트 발생 시 데쉬보드 추가.
}
});
})
class Dashboard {
adjustLayout() {
var row = $(".row").children();
if(row.length > 0)
$(row[0]).removeClass('col-sm-7').addClass('col-sm-9 transition-width').after('<div class="col-sm-3 transition-width" id="dashboard"></div>'); // Forge viewer div 아래에 차트 그래프 요소 추가
}
}
// Dashboard panel base
class DashboardPanel {
load(parentDivId, divId, viewer) {
this.divId = divId;
this.viewer = viewer;
$('#' + parentDivId).append('<div id="' + divId + '" class="dashboardPanel"></div>'); // 데쉬보드 요소 추가
}
}
// Dashboard panels for charts
class DashboardPanelChart extends DashboardPanel {
load(parentDivId, divId, viewer) {
divId = this.propertyToUse.replace(/[^A-Za-z0-9]/gi, '') + divId; // div name = property + chart type
super.load(parentDivId, divId, viewer);
this.canvasId = divId + 'Canvas';
$('#' + divId).append('<canvas id="' + this.canvasId + '" width="400" height="400"></canvas>'); // 차트 그래프 요소 추가
return true;
}
}
// 바차트 데이터 렌더링 구현
class BarChart extends DashboardPanelChart {
drawChart() {
..
}
}
// 파이차트 데이터 렌더링 구현
class PieChart extends DashboardPanelChart {
drawChart() {
}
}
이 코드의 실행 결과로 다음과 같이 HTML DOM(document object model)이 구성된다. 앱 화면 레이아웃은 목적에 맞게 CSS파일의 해당 요소 스타일을 적절히 수정한다.
DOM 구조
데쉬보드 화면
BIM 객체 선택 시 처리(object selection override)는 다음과 같이 Forge viewer에 이벤트 핸들러를 등록해 수행한다.
...
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, onSelectionChanged);
}
function onSelectionChanged(event) {
if (event.dbIdArray.length === 1) {
viewer.getProperties(event.dbIdArray[0], function(data) {
console.log(data.name);
if(data.name.indexOf("Column") >= 0)
{
var instanceTree = viewer.model.getData().instanceTree;
var parentId = instanceTree.getNodeParentId(event.dbIdArray[0])
viewer.select([parentId]);
}
});
}
}
...
마무리
이제 BIM 공간 선택 시 해당 데이터를 차트 그래프와 연결하고, IoT 센서 장치를 각 공간에 설치하면, 현실과 디지털 공간과 연결한 소위 디지털 트윈이란 개념을 구현한 것이다. 개발해 본 결과를 보면, 기존 센서 데이터를 디지털 모델과 연계하거나 시뮬레이션했던 시스템들과 큰 차이가 없다. 이런 접근이 브랜드로 발전하고 대중화된 것이다. 디지털 트윈을 구현하는 방법은 다양할 수 있다. 구현 방법은 요구사항과 개발 전략에 따라 달라질 수 있다. 만약, GIS map을 사용한다면, Leaflet(리플릿), mapbox(맵박스), 3D Cesuim(세슘) 등 다양한 오픈소스 도구를 사용할 수 있다. 도면만 필요하다면, DWG/DXF 캐드 뷰어만 사용해도 된다. 데이터 모니터링만 필요하다면, 테이블 및 차트만 지원되는 데쉬보드 형태의 HCI(Human Communication Interface)도 충분하다.
오픈소스 기반 GIS 공간정보 뷰어 예시
굳이, 3D 모델이 필요없이 효율적인 업무가 가능하다면, 디지털 트윈 타이틀이 붙은 과제라도 3D 모델 뷰어를 구현할 필요가 없다. 앞서 개발하는 과정을 보면 알겠지만, 디지털 트윈 개념을 서비스하기 위해서는 많은 비용과 노력이 필요하다. DATABASE, REST API, 보안, VIEWER, DASHBOARD, BUSINESS LOGIC, IoT, 서버, 데이터 모델링 등 욕심을 내다 보면 끝도 없다.
보통, 사용자는 유지보수 비용을 크게 간과하는 경향이 있다. 실제 서비스 중인 소프트웨어는 유지보수 비용이 80~90%를 상회한다.
소프트웨어 공학 관점에서 보았을 때 불필요한 모델, 데이터의 구현은 유저의 시스템 사용을 매우 불편하게 할 뿐아니라 유지보수, 성능에 나쁜 영향을 준다. 이 시점에서 모든 것을 막연한 짐작으로 디지털 트윈이나 BIM으로 구현하면 편리하다는 주장은 근거가 매우 빈약하며, 쉽게 납득하기도 어렵다(발주자가 진정 돈을 아끼고 싶다면, 화려하고 복잡한 PPT는 조심해야 한다). 물리적 데이터를 디지털 공간에 맵핑하는 것이 문제라면, 그 요구사항과 구현이 유저 입장인지가 중요하다.
레퍼런스
- Node.js MongoDB
- Building a Restful CRUD API with Node.js, Express and MongoDB
- Node.js Simple CRUD with Express.js and MySQL
- How to create dynamic table
- Fetch JSON data to render HTML
- How to Fetch and Display JSON Data in HTML Using JavaScript
- CORS node ('http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.)
- Cross-Origin Resource Sharing (xmlhttprequest "failed to load resource" localhost cors)
- Mongo DB manual for limit() and document
- It's 2020 and We're Still Doing Pagination The Wrong Way
- Forge Extension when deployed live is not loading due to uncaught Promise
- Creating a Simple RESTful Web App with Node.js, Express, and MongoDB
- Writing your first node/express/mongoose restful CRUD api
- Highlighting Revit Rooms in the Forge Viewer
- Autodesk Forge object selection override
추신 - 이 정도까지 진행하는 데 Full M/M로 대략 1개월(Not including holiday) 걸린 것 같다. 이 정도로도 물리적 공간에 붙착된 데이터를 가상으로 모니터링하고 분석용 데이터를 획득할 수 있다. 이제 좀 더 편리한 인터페이스 구현을 위해, 다음과 같은 부분을 처리한다.
- BIM 공간과 그래프 연결. 이벤트 처리
- IoT 센서 장치를 인터넷에 연결
- IoT 센서 장치를 각 공간에 설치
- 모니터링된 데이터에서 이상 패턴 감지를 위한 딥러닝 학습 모듈 개발
여기서, 다른 일을 하며 진행하므로, 개발 효율이 30~50% 정도... 그럼 앞으로 약 두달 정도해야 정리될 듯하다. 시간이 빡빡하기는 하지만, 센서 데이터와 글은 병행해 정리하기로 한다.
추신 - 오토데스크 포지 제공 API가 원하는 모든 기능을 제공하지는 않는다(직접 해봐야 안다). 제공되지 않는 기능은 직접 구현해야 하며, 가끔은 DOM 해킹, 3차원 기하 계산 등을 코딩해야 할 수 있다. 참고로, 이런 노가다 코딩이 인공지능으로 자동화될 수 있다고 착각하지 말자(한참 멀었다).
