#4 [2단계] 최근 20분경로표시 및 자동업데이트 HTML

 

지난 포스팅에서 만든 2단계 서버코드2를 기반으로 한 HTML을 구현해보도록 하겠다.

 

지난포스팅에서는 2단계의 파이프라인과 서버코드를 구현하였다.

 

 

< 지난 포스팅 >

https://jayindustry.tistory.com/82

#3 [2단계] 파이프라인 + 서버코드2

 

 

 

 

[ 2단계 개요 ]

 

1. 파이프라인

2. 서버코드2

3. 최근 20분경로만 표시 및 자동업데이트 HTML

 

 

이번 포스팅에선 2단계의 3번부터 진행한다.

 

 

 

 

3. 최근 20분경로만 표시 및 자동업데이트 HTML

 

 

 

경로를 연결하기 위한 주황색 점을 그리는 스타일과 방식을 지정한다.

 

 

 

 

 

 

위의 주황점들을 연결하는 경로 선을 정의한다.

 

지속적으로 경로를 업데이트 하기위해 기존의 경로를 제거하고 다시그려주는 기능을 추가하였다.

 

 

 

 

 

서버스크립트로부터 gps20data를 받아 처리하기

 

서버와 API로 연결, 및 매개변수를 설정한다. (서버코드 스크립트는 24003외부포트로 포트포워딩하였다.)

 

 

 

다음은 API엔드포인트로 gps20data콜렉션에 저장된 robot00005의 1분간격의 gps데이터 20분 분량을 가져온다.

 

자세한 코드설명은 아래 문제 및 해결과 함께 설명하도록 하겠다.

 

 

*** 문제 및 해결 ***

 

1. 경로 갱신하기

20분 분량의 경로만 표시되어야하니 20개만 경로에 표시되기를 원했다.

그래서 가장 오래된 주황색 점과 경로선을 지워야겠다고 생각 후 코딩하였으나 잘 구현되지 않았다.

 

그래서 방법을 바꾸어 html이 반복호출 될때마다 기존경로 전체를 지우고 다시 띄우는 방식을 택하였다.

( marker.setMap , path.setMap )

 

 

 

2. 뒤죽박죽 경로선이 연결되는 문제

가끔 시간순서대로 점을 연결하지 못하여 뒤죽박죽 경로선이 연결되는 현상을 겪었다.

그래서 data.sort와 data.forEach 메서드로 시간순서대로 정렬하여 연결하게끔 개선하였다.

 

 

 

 

 

로봇의 현재위치 표시 + 경로표시 함수 실행

 

 

이 함수는 구글맵 지도를 초기화하고 위에서 만든 함수들을 실행하는 실행함수이다.

이 때 10초마다 반복호출하도록 기능을 넣는다.

 

 

 

*** 문제 및 해결 ***

 

1. 처음 html을 작성하였을 때, 내가 그라파나 사이트를 수동으로 새로고침하지 않으면 경로가 갱신되지 않았다.

 

고민끝에 반복호출을 생각했다.

 

이 구글맵 지도초기화 및 실행함수를 인터벌로 자동호출되도록 설정한다.

이는 새로고침하지않아도 경로가 지속적으로 업데이트될 수 있게 해준다.

 

 

 

 

[ 결과 ]

 

 

로봇 1.

 

 

로봇 2.

 

 

 

로봇 3.

 

 

 

로봇 1,2,3호기의 결과를 가져와보았다.

그라파나 대시보드 상에 모두 원하는 a기능을 잘 구현해내었다.

 

현재위치를 실시간으로 노랑점으로 잘 표시하였고, 1분마다 경로가 주황점으로 찍히며 선으로 연결되었다.

최신 20분의 경로가 자동지속적으로 갱신되었다.

 

이는 소비자가 보았을 때 로봇의 경로를 실시간으로 확인할 수 있게 구현되었다.