그래서 좀더 직관적이고 편리한 인터페이스로 구현해보고자 열심히 구글링을 시작했다.
이 웹서비스의 목적은 모이터링 장비의 상태와 측정값을 웹으로 모니터링 하는 것이다. 장비는 여러지역에 설치되어 주기적으로 상태를 서버로 전송한다. 전송되는 데이타는 서버의 데이타 베이스에 저장되고 iPodTouch로 각 장비의 상태를 확인할수 있게 하는게 iPipeGuard의 목적이다.
첫페이지에 녹색의 방패 모양의 아이콘을 터치하면 웹페이지가 표시된다.
첫화면이다. 최근에 전송된 데이타의 건수를 표시해주고, 지역별, 일자별, 유형별로 장비의 상태(데이타)를 확인할수 있게 했다.
지역별을 선택하면 지역별로 데이타 전송 건수를 표시해 준다.
지도를 선택하면 구글맵에 장비의 설치위치를 표시하고 마커를 표기하고, 장비의 상태에 따라 다른 색의 마커를 이용하여 장비의 상태를 알수 있게 했다. 물론 레이블에 링크를 걸어 상세내역을 확인하는 페이지로 이동할수 있게했다.
그래프는 Google Visualization API를 이용하여 그렸다. 다양한 그래프 형태를 지원하고 상대적으로 이용하기 용이하도록 만들어 놓았다.
삽질을 조금 하긴 했는데 Google Chart API 보다 사용하기 편리하게 해 놓은것 같다. 일단 사파리에서 보여지는 그래프를 캡쳐해 봤다.
Google Chart API는 일단 가로축이 날짜같이 단어가 길면 문제가 중첩되어 표시되었는데, Google Visualization API 는 데이타만 설정해 주면 공간이 부족할 경우 알아서 글자를 기울여 준다. 채널별 선의 색상도 알아서 정해준다.
몇가지 생각지도 못했던 문제로 시간이 필요했지만 만족스러운것 같다.
아래 그림에선 보여지는 그래프는 Google Chart API로 그린 것이다. Google Visualization API로 그린 그래프와 조금의 차이가 있긴 한데 사용하기 약간 복잡한데 다양한 효과를 줄수 있는 장점이 있는것 같다.
물론 인터넷이 되는 곳에서만 가능한 서비스 이지만 아침에 와서 터치 한번으로 관리하는 장비의 상태를 확인할수 있다는게 좋은점 아니겠는가.
* 추가해야 할 내용
- 현장에서 장비를 점검한다거나 보수작업 완료후 바로 보고서 작성이 가능하도록 쓰기 기능을 추가
- GPS와의 연동
- 카메라 와의 연동
댓글 1개:
덧글이 하나도 없어니 너무 썰렁해서..
댓글 쓰기