오늘은 HTML로 로봇의 데이터를 대쉬보드에 띄우는 작업을 해보았다.
팀장님께서 내주신 과제,
HTML와 JavaScript로 로봇으로부터 mqtt메시지로 받고있는 베터리 볼트 데이터를 그라파나라는 사이트의 대쉬보드에 띄우는 작업이다.
mqtt메시지는 현재 서버pc의 db에 저장되지않고 바로 대쉬보드에 쏴주는 경량메시지이다.
이번 포스팅에서든 HTML, CSS부분만 다루고 다음번에 <script>부분을 다루도록 하겠다.
< 그라파나 대쉬보드 >
각각의 패널이 HTML을 공유한다.
그래서 나같은 경우, 배터리정보 패널에 위 사진처럼 초록색 수치를 나타내는 모든 패널의 스타일과 스크립트를 넣었다.
[ Style ]
그라파나 대쉬보드 같은경우, 한 페이지의 여러패널들이 해당 페이지의 모든 html을 공유하기 때문에,
하나의 패널에 스타일과 스크립트를 모두 작성하여 넣고,
나머지 패널에는 필요한 부분만 html을 작성하면 된다.
각각 코드별로, 주석처리하여 설명을 적어놓았다.
코드의 맨아래부분에서 <p> 부분에서는 ecobot00001_bat을 ID로 부여하여,
자바스크립트에서 연결한 해당 아이디의 데이터값을 표시하게 한다.
[ 결과 ]
