eink display와 자전거(&Pebble)

자전거를 타려고 여러가지 준비를 하고 있다. 스마트폰은 속도계, 거리측정, 온도, 지도까지 모두 보여주는 훌륭한 장비지만 과거 경험으로 볼 때 햇빛 아래에서는 제대로 보기 어려웠다. 게다가 2년이 지난 휴대폰은 배터리도 빨리 닳아서 특히 gps와 data를 함께 이용하는 지도 어플리케이션을 켜놓은 상태에서 한 시간 정도 달리면 배터리를 채워주지 않으면 유혈사태가 날 수 있다며 배터리 색을 빨간색으로 바꿔버린다. 배터리도 오래 가고 햇빛에서도 잘 보일 수 있는 게 뭐가 있을까?

내 손목을 보니 Pebble이 깜빡이고 있다. Pebble은 스마트 디바이스로 햇빛에서도 잘 보이고 다른 스마트 디바이스와 달리 항상 켜 있어 원하는 정보를 잘 볼 수 있다. gps도 달려 있어서 현재 위치도 알 수 있다. 검색을 해보니 Pebble을 자전거에 부착하고 달리는 사람들의 동영상도 볼 수 있었다. 그런데 Pebble은 크기가 너무 작아서 내가 원하는 정보를 보기 힘들다. 특히 자전거를 탄다면 흔들리고 움직이는 상태라 화면을 집중해서 볼 수가 없다.

다른 방법이 없을까 고민하다가 eink display인 Ridi Paper(light)가 보였다. 이 녀석을 활용할 수 없을까 이틀정도 고민을 했다. Ride Paper는 루팅을 하지 않으면 어플리케이션을 설치할 수 없어서 우선 어플리케이션을 이용하는 방법은 배제했다(어플리케이션을 설치할 수 있는 시스템이었다면 이렇게까지 크게 고민하지 않았을 것이다). 한참 고민을 하다보니 전자책은 html로 작동하는데, 여기에 a href로 인터넷 링크를 추가하면 내장 브라우저를 통해 웹페이지를 열어볼 수 있다(Ridi Paper로는 기본적으로 인터넷도 할 수 없다).

내가 원하는 웹페이지를 여는 전자책을 간단히 만들고 테스트를 해보니 성공적으로 원하는 페이지를 볼 수 있었다. 이 페이지를 적당히 꾸민다면 어플리케이션을 설치하지 않고도 원하는 정보를 얻을 수 있겠다.

테스트페이지에 위경도 정보를 넣으면 구글 지도를 보여주도록 하고 현재 시각을 출력했다.

우선 지도 정보를 추가했다. 네이버 자전거 지도를 추가하고 싶었는데 API를 제공하지 않는 것 같아 gps 정보로 위경도를 가져와 구글 지도를 보이도록 만들었다. 그리고 15초마다 refresh하도록 했다.

보는 페이지는 만들었는데 Ridi Paper는 gps를 제공하지 않아 정상적으로 작동하지 않는 문제가 생겼다. 아무래도 제품 가격을 낮추기 위해 불필요한 기능을 없앤 것 같다. iPhone으로 페이지에 접속하니 잘 작동하기에 새로운 페이지를 만들어 iPhone에서 위경도 정보를 저장하고(A문서), Ridi Paper에서는 위경도 정보를 가져오기만 해서 지도를 보여주는 식으로 만들기로 했다(B문서).

위경도를 가져오는 소스가 워낙 많아서 아무거나 붙잡고 붙여넣었다. 간단히 A문서를 만들고 B문서로 데이터를 넘겨야 하는데 겨우 위경도 정보 하나로 DB에 쓰기와 읽기를 계속 하는 게 무슨 의미가 있겠나 싶어 파일로 저장했다. 그런데 javascript에서 파일 저장이 계속 실패한다. 읽기는 잘 되는데 쓰기가 안 되는 문제가 있어서 어쩔 수 없이 A문서에서 C문서로 ajax를 이용해 값을 넘기면 이 값을 파일로 저장하게 만들었다(D파일). B문서는 D파일에 저장된 위경도를 가져와 위치를 뿌려주기만 하면 된다.

<script src=”http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type=”text/javascript”>
function getMap() {
var lng = “<?=$lng?>”;
var lat = “<?=$lat?>”;
d = new Date();
var time = d.toLocaleString(“ko”);
time = d.toString(“yyyy-mm-dd hh:ii:ss”);
// var str = time + “<br>” + lng + “,” + lat;

$(“#now”).html(‘<br>’ + time + ‘<br><iframe src=”https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d3169.9672868744256!2d' + lng + ‘!3d’ + lat + ‘!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sko!2skr!4v1459689853884" width=”500" height=”600" frameborder=”0" style=”border:0" allowfullscreen></iframe>’);
}
getMap();
setInterval(function(){
getMap() // this will run after every 5 seconds
}, 15000);
</script>

B문서의 핵심 소스


여기까지 만들고 테스트를 하기 위해 출근버스에 올랐다. iPhone을 켜놓으니 위경도를 잘 저장했고, Ridi Paper를 iPhone과 연결한 후 링크를 열어보니 현재 위치가 실시간에 가깝게 표시된다. 성공!

출근해서 보니 iPhone이 또 힘들어한다. 지도 data를 불러오지는 않았지만 gps와 태더링으로 배터리를 많이 사용한 것이다. 둘 중 하나만 이용했으면 이렇게 힘들진 않았을텐데 생각을 잘못했다. gps 때문에 항상 켜있어야 하고, 태더링 때문에 배터리가 더 빨리 닳게 된 문제다. 아까부터 배터리가 계속 문제다.

괜한 짓을 하고있나 생각하며 이것저것 검색을 하다가 아래 동영상을 발견했다.

Amazon Kindle과 Raspberry Pi(with wifi and GPS)를 이용해 내가 생각한 방법을 구현해놓은 것이다. 저렇게까지 해야하나 싶기도 한데 그래도 생각한 것을 구현해놓았음에 안도하며 저대로만 만들면 성공이라는 생각이 든다.

문제가 되는 것은 2가지인데 1.gps정보, 2.Network(태더링)이다. 태더링은 olleh egg로 대체할까 고민을 해보기도 했는데 크지는 않지만 짐이 하나 늘어나는 문제가 있다. 네트워크는 iPhone으로 계속 해보기로 했다. 그러다 문득 손목을 보니 여전히 깜빡거리는 Pebble. 이거다.

Pebble에도 어플리케이션을 설치할 수 있다. gps정보를 이용할 수도 있다. pebble 어플리케이션을 어떻게 만드는지 재빨리 훑어봤는데 잘 모르겠고, 일단 앱을 만들어보면서 알아보기로 했다. sdk를 설치할 수도 있지만 cloud기반으로 웹에서 어플리케이션을 만들수도 있다. 요즘 유행하는 js 스타일의 어플리케이션 개발도 가능하다. 여러가지 검색하면서 일단 구동이 되도록 만들었다. 소스 내용은 모르지만 일단 돌아가야 뭘 해볼 수 있다.

var UI = require(‘ui’);
var where = new UI.Card({
fullscreen: true,
title:’Position’,
});
where.show();
var locationOptions = {
enableHighAccuracy: true,
maximumAge: 10000,
timeout: 10000
};
var lng = 0;
var lat = 0;
function locationSuccess(pos) {
where.subtitle(pos.coords.latitude + “, “ + pos.coords.longitude);
lng = pos.coords.longitude;
lat = pos.coords.latitude;
}
function locationError(err) {
console.log(‘location error (‘ + err.code + ‘): ‘ + err.message);
}
navigator.geolocation.getCurrentPosition(locationSuccess, locationError, locationOptions);
setInterval(function(){
getMap(); // this will run after every 5 seconds
// console.log(position);
}, 5000);
function getMap() {
var ajax = require(‘ajax’);
navigator.geolocation.getCurrentPosition(locationSuccess, locationError, locationOptions);
ajax(
{
url: ‘[URL]?lng=' + lng + ‘&lat=’ + lat,
type: ‘get’
}
);
}

app의 전체코드

처음에는 post로 값을 전송했는데 무슨 문제인지 제대로 전송이 안 되길래 get으로 값을 전송했고, C문서는 get으로 들어온 정보를 받아와 D파일에 저장하게 만들었다. 바로 테스트를 했더니 제대로 위치가 저장된다. 컴파일을 거치면 pbw 파일을 만들어주는데 이 파일을 dropbox에 올려놓고 폰에서 열면 어플리케이션을 설치할 수 있다.

내일은 자전거에 Ridi Paper를 거치시키고 실제로 달려보면서 어떤 문제가 있는지 살펴보려 한다.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.