프로젝트/[백엔드] JS,HTML 트래킹맵
#2 [1단계] 서버코드1 + 웹소캣,현재위치,위성맵 구현 HTML
SeokjunMan
2023. 11. 25. 14:55
지난 프로젝트 소개 및 파이프라인에 이어 본격적으로 1단계를 진행하도록 하겠다.
< 지난 포스팅 >
https://jayindustry.tistory.com/79
#1 프로젝트소개 및 서버코드 + 로봇위치 HTML
이번 프로젝트는 회사에서 진행한 프로젝트이다. 소비자가 대시보드상에서 로봇의 현재상태를 확인하기 위한 트래킹맵을 제공하기 위함이다. [ 프로젝트 소개 ] 실제로 전국의 여러 저수지나
jayindustry.tistory.com
[ 1 단계 개요 ]
1. HTML 웹소캣, 현재위치 찍기, 위성맵 구현
2.서버코드
[ 내용 ]
1. HTML 웹소캣, 현재위치 찍기, 위성맵 구현
먼저 맵을 표시하기위한 맵의 틀을 만들고, 아래 스크립트를 작성하였다.
initmap은 아래에 정의한 함수들을 실행한다.
서버스크립트와 연결하는 기능을 구현하고, 다른 로봇에도 적용할 수 있게 매개변수를 만들었다.
initMap함수에서는 구글맵에 띄우기 위한 위도 경도를 설정하고,
MQTT메시지로 들어오는 데이터를 웹소캣으로 받는다.
데이터를 파싱하고, 구독한 메시지의 엔드포인트 gps_location,과 로봇id(매개변수)로 원하는 gps데이터만 가져온다.
이 함수는 구글 위성맵을 가져오는 함수이다.
마지막으로 현재 위치데이터를 받아, 노랑색점으로 실시간으로 위성맵에 위치를 찍는 함수를 구현하였다.
아래 구문으로 현재 gps데이터 위치에 맵을 고정시킨다.
if (!isInitialLocationSet)
{ initializeMapAtLocation(latestLocation);
isInitialLocationSet = true;
return; }
그리고 아래구문으로 현재 위치를 노랑점으로 찍고, 경로를 위해 해당 기록들을 배열에 저장한다.
placeRobotMarker(latestLocation);
robotPathCoordinates.push(latestLocation);
그리고 지속적으로 업데이트하기위해 바로 이전의 점들은 지속적으로 지워준다.
if (currentRobotMarker) {
currentRobotMarker.setMap(null);
2. 서버코드
사진 속에 주석으로 설명들을 다 적어두었다.
정리하자면 미리 포트포워딩을하여 4003내부포트(서버코드)를 외부에서 접근할 수 있게 외부포트를 설정하였다.
app.use로 서버요청을 허용하고 실행한다.
그리고 코스들을 저장하고 꺼내기 위한 몽고db와의 연결을 한다.
그리고 몽고DB에 저장하기 위해 콜렉션 생성과 저장할 데이터형식을 지정해주는 스키마를 설정한다.
추가로 나중에 최근경로를 찍어줄 콜렉션의 스키마까지 설정해준다.
이는 gps데이터를 받아 최근 20분간의 데이터만 저장할 예정이다.
마지막으로 그라파나 대시보드에서 코스를 만들고, 삭제하고, 코스주행을 위해 특정 코스를 불러오고, 로봇에게 보내는 등 다양한 기능을 서버pc와 로봇이 소통하기 위한 API엔드포인트들을 정의하였다.
[ 결과 ]
html에 추가적으로 받은 gps데이터를 가지고 주황색 점,선으로 경로를 나타내는 기능을 추가하였다.
다음은 그라파나 대시보드에서 나온 결과물이다.
[ 피드백 ]
1. 90초마다 주황색 점이 찍히도록 설정하였는데, 이렇게하면 모든경로가 계속 표시되어있어서
시간이 지날수록 경로가 얽혀서 소비자들이 보기에 불편할 것 같았다.
2. 그리고 새로고침을 하면 경로가 싹 다 사라지며 다시 리셋되는 현상도 발생하였다.