node-red를 이용해서 mqtt서버의 gps 위치 자료를 지도에 표시하는 방법

owntrack를 이용해서 휴대폰 위치를 주기적으로 mqtt에 보내고 있으며 ha에서 확인이 가능하지만 이 위치 정보를 다른 사람과 공유할 필요가 생김. ha를 깔아주기에는 너무 과해서 위치 정보만 표시하는 웹서버를 만들 계획임

애초에는 도커에 돌아가는 파이썬 flask 웹서버가 있는데 여기에 마찬가지로 mqtt 받아서 구급맵에 표시하려니 은근 귀찮아서 찾아보니 대시보니 구축에 streamit이 쉬워서 많이 사용되는 듯해서 배워볼까하다가 node-red를 이용하면 스크래치처럼 드래그드랍으로 더쉽게 가능하다고 해서 결국 여기까지 오게됨.

설치과정은 아래 참고

https://do121.tistory.com/193

node-red 설치하기

 

최종 완성형태를 보면

 

제일 왼쪽위의 와이파이 표시같은게 mqtt out으로 mqtt서버에서 subscribe한 자료를 출력하는 노드임

노드를 더블클릭하면 mqtt관련 설정이 가능함

펑션은 mqtt에서 받은 자료의 형식을 worldmap에서 입력가능한 형식으로 변환해서 출력해 주는 기능임

더블클릭하면 설정가능함

mqtt out으로 출력되는 자료(msg.payload)는 아래와 같을 때 이 중에서 필요한게 lon과 lat, tid라서 펑션기능으로 아래와 같이 추출해서 worldmap에 집어넣음

원래 mqtt 포맷은 텍스트포맷인데 mqtt out에서 json포맷으로 보내주고 있으므로 따로 json 노드를 사용하지 않고 추출만 해서 worldmap에 보내줌

{"_type":"location","acc":100,"alt":52,"batt":78,"bs":1,"conn":"m","created_at":1xxxxx962,"lat":xx.xxx4023,"lon":1xx.xxx3764,"m":1,"t":"p","tid":"9s","tst":1x474,"vac":23,"vel":0}

 

 

 

 

return {

  payload: {

    lon: msg.payload.lon,

    lat: msg.payload.lat,

    name: msg.payload.tid,

    popped: true

  }

};

 

트랙스 노드는 없어도 상관없지만 이동경로를 표시하기 위해서 추가함, 트랙 포인트수를 지정가능함.

트랙스와 월드 맵은 기본 기능에는 없어서 팔레트관리에서 추가 설치해줘야 이용가능함.

우상단의 햄버거 표시 클릭해서 나온 메뉴의 팔레트 관리/설치가능한 노드에서 " node-red-contrib-web-worldmap"를

검색해서 설치하면 추가됨

 

 

더블클릭하면 설정이 나옴

web path가 지도 표시되는 url임. xxx.xxx.xxx.xxx:노드포트번호/worldmap 하면 접속가능함.

 

디버거 노드도 더블클릭하면 설정가능함

디버그 결과는 오른쪽 창의 벌레를 클릭하면 표시됨