2009년 4월 29일 수요일

Eye-Fi 카드



무선 기능가진 SD 카드

일반 SD카드와 같이 디지탈 카메라에 삽입하기만 하면 무선 LAN을 통해서 자동으로 PC로 사진이나 동영상을 전송할수 있다고 한다.

지원되는 포맷은 MPEG, Quick Time, Flash Video, Windows Media, AVI, MPEG4 이고,

파일용량은 2G바이트 이하이며 온라인 동영상 공유서비스인 유튜브와 플리커를 지원한다고 한다.

GMarket에서 2G 타입이 11만원에 판매되고 있었다.

2009년 4월 28일 화요일

이사를 해야지 - 안산 고잔1동

내가 사는 곳은 경기도 성남시 은행2동 이다.
이사 들어 올때 부터 재개발 말이 있었는데 근 10년 동안 눈에 보이는 진전이 없는것 같다.

작년에도 내년 봄에 개발 시작 할것 같다. 아마 이사해야지 않겟나 하더만...
아직도 그러고 있다. 물론 지장물 조사는 마치고 현관문 위쪽에 무슨 번호 같은걸 붙여 놓은지 2~3월된것 같다.

큰놈이 상원초등학교에 다니는데 멀리 가긴 좀 그렇지 않을까도 싶은데, 회사가 시화 공단이라 출퇴근이 너무 힘들다. 시간도 시간이고 6시에 퇴근해도 집에 오면 8시가 넘어니 여러모로 시간이 많이 허비된다.

가끔 모란시장 앞에서 버스를 타고 회사까지 오다 보면 내가 보기엔 괸찮은 입지의 회사에서 그리 멀지 않은 곳들이 눈에 뛴다.


오늘은 화정 1교 삼거리를 지나고 단원구청 삼거리를 지나는데 주변에 운동장, 학교도 있고 하천에 시청도 가깝고, 지하철역도 가깝고 괸찮은것 같다. 다음에 와서 전세시세랑 주변 여건을 좀더 둘어봐야 겠다.





















2009년 4월 27일 월요일

Google Visualization API 로 그래프 그리기


<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['piechart']});

// Set a callback to run when the API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
}
</script>
</head>

<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>

2009년 4월 26일 일요일

Google Map API 사용하기


구글맵 API는 워낙 잘 만들어 졌고, 설명도 잘 되어 있어 굳이 이렇게 설명할 필요도 없지만 간단하게 정리를 해둔다는 차원에서 기술한다.

1. 먼저 code.google.com에 접속한다. 구글의 공개 api는 여기서 접근이 가능하다. 구글 맵은 AJAX API 카테고리에 포함되어 있으므로 AJAX API 를 선택한다.




















첫번째에 Google 지도 API가 위치해 있다. 이를 선택하면



Google 지도 API 홈페이지가 표시된다.




















Map API 를 자신의 홈페이지에 사용하기 위해선 먼저 Google Maps API Key를 먼저 발급받아야 된다. 아래쪽 페이지에 삽입된 지도의 윈도우에 표시된 'Sign up' 링크를 클릭한다.





















그림과 같이 API Key를 발급받는 페이지가 표시된다. 여기서 맨 아래쪽에 보면 자신이 사용하고자 하는 페이지의 주소를 적어주고 체크 박스를 체크하고 'Generate API Key' 버튼을 누른다.




























친절하게도 단순히 KEY와 사용하는 웹 주소와 Javascript Maps API 예제와 Maps API 플래시 예제 및 웹서비스에 사용할때의 예를 표시해주고 있다.

이것을 자신의 웹 페이지 Copy&Paste 해서 사용하면 된다.

여기서 Javascript Maps API 의 예제코드를 선택해서 복사해 둔다.


이제 간단한 "hello world!" 페이지를 만들어 보자.

1. 먼저 Google Maps Api Key 를 명시한다.

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>

2.Map API를 로딩한다.

<script type="text/javascript">
google.load("maps", "2");
</script>


3. 맵 객체를 생성한 후 중심 좌표를 설정하는 초기화 작업을 수행한다.

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
<script type="text/javascript">
google.load("maps", "2.x");

// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}
google.setOnLoadCallback(initialize);
</script>



























4. 전체 코드는 아래와 같다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>

<title>Hello, World!</title>
<meta content="Google Maps API 예제" name="description" />

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAFXPJCgVoGSh1DdTiIZJvyhQmQlLuQ6m5PcQF3pInRAJcnkib3xTlDJAfzlKR1X6bp3W0lI17_QfbZw"></script>
<script type="text/javascript">
google.load("maps", "2.x");

// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(37.333832, 126.732782), 13);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body onunload="GUnload()">
<!-- Top Nav menu -->
<div id="topbar">
<div id="title">Hello, World!</div>
<div id="leftnav">
<a href="index.html"><img alt="home" src="images/home.png" /></a>
</div>
</div>
<!-- 맵 표시 -->
<div id="map" style="height:400px"></div>
<?php
include("footer.html");
?>
</body>
</html>

2009년 4월 21일 화요일

PipeGuard for iPodTouch

처음 만들었을때는 단순한 아래의 모양의 리스트 형태였다. 지역별 장비의 상태를 확인하고 측정값을 확인하는 일이 간단하지도 않고 직관적이지 못하다고 생각해서, 그때 한참 구글에 빠져있었는데, 우연히 API가 공개되어 있다는 내용을 확인하게 되었다.

그래서 좀더 직관적이고 편리한 인터페이스로 구현해보고자 열심히 구글링을 시작했다.






이 웹서비스의 목적은 모이터링 장비의 상태와 측정값을 웹으로 모니터링 하는 것이다. 장비는 여러지역에 설치되어 주기적으로 상태를 서버로 전송한다. 전송되는 데이타는 서버의 데이타 베이스에 저장되고 iPodTouch로 각 장비의 상태를 확인할수 있게 하는게 iPipeGuard의 목적이다.

첫페이지에 녹색의 방패 모양의 아이콘을 터치하면 웹페이지가 표시된다.



























첫화면이다. 최근에 전송된 데이타의 건수를 표시해주고, 지역별, 일자별, 유형별로 장비의 상태(데이타)를 확인할수 있게 했다.



























지역별을 선택하면 지역별로 데이타 전송 건수를 표시해 준다.



























지도를 선택하면 구글맵에 장비의 설치위치를 표시하고 마커를 표기하고, 장비의 상태에 따라 다른 색의 마커를 이용하여 장비의 상태를 알수 있게 했다. 물론 레이블에 링크를 걸어 상세내역을 확인하는 페이지로 이동할수 있게했다.



























그래프는 Google Visualization API를 이용하여 그렸다. 다양한 그래프 형태를 지원하고 상대적으로 이용하기 용이하도록 만들어 놓았다.





삽질을 조금 하긴 했는데 Google Chart API 보다 사용하기 편리하게 해 놓은것 같다. 일단 사파리에서 보여지는 그래프를 캡쳐해 봤다.


Google Chart API는 일단 가로축이 날짜같이 단어가 길면 문제가 중첩되어 표시되었는데, Google Visualization API 는 데이타만 설정해 주면 공간이 부족할 경우 알아서 글자를 기울여 준다. 채널별 선의 색상도 알아서 정해준다.

몇가지 생각지도 못했던 문제로 시간이 필요했지만 만족스러운것 같다.















아래 그림에선 보여지는 그래프는 Google Chart API로 그린 것이다. Google Visualization API로 그린 그래프와 조금의 차이가 있긴 한데 사용하기 약간 복잡한데 다양한 효과를 줄수 있는 장점이 있는것 같다.







물론 인터넷이 되는 곳에서만 가능한 서비스 이지만 아침에 와서 터치 한번으로 관리하는 장비의 상태를 확인할수 있다는게 좋은점 아니겠는가.

* 추가해야 할 내용
- 현장에서 장비를 점검한다거나 보수작업 완료후 바로 보고서 작성이 가능하도록 쓰기 기능을 추가
- GPS와의 연동
- 카메라 와의 연동

2009년 4월 19일 일요일

Apache FtpServer 설치

아이팟용 웹 페이지를 만들려고 하다 보니 최근에 웹서버에서 돌리도 있던 Serv-U가 서버의 재 설치하느라 없어지는 바람에 새로이 FTP 서버를 찾다가 Serv-U가 인터넷에서 다운받으면 해킹에 이용될수 있다는 지인의 말에 다른 대안을 찾아 보다가 우연히 아파치 프로젝트에 FTP Server가 있다는 걸 알게되었다.

현재까지 Apache FtpServer는 1.0.0 버젼이 릴리스 되어 있다. 그리고 윈도우 버젼과 Unix/Linux/Cygwin 버젼으로 빌드되어 배포된다.
따라서 버젼 1.0.0 Release / Windows 버젼(다운로드:ftpserver-1.0.0.zip)을 다운로드 받았다.

Apache FtpServer는 100% Pure java FtpServer 라서 일단 JDK(다운로드:J2SEv1.4.2_19 JRE)를 설치해야 한다.

1.설치
압축화일을 적당한 폴드에 푼다.

2.실행
명령 프롬프트에서 아래와 같이 실행한
bin\ftpd.bat

3.설정
윈도우 에서
bin\ftpd.bat res\conf\ftpd-typical.xml

이렇게만 하면 된다.


윈도우에서 서비스로 실행하고 싶다면 아래와 같이 명령 프롬프트에서 입력한다.
bin\service install

이렇게 입력하면 디폴트 설정을 이용하게 된다. 만약 xml 설정화일을 이용하려면 아래와 같이 입력해야 한다.
bin\service install ftpd



서버설정

xmlns:beans="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
http://mina.apache.org/ftpserver/spring/v1 http://mina.apache.org/ftpserver/ftpserver-1.0.xsd
"
id="서버아이디">

여기에서 "서버아이디" 부분을 적당히 변경해 주고

리스너










사용자 관리

사용자 관리는 2가지 방법이 있다.
1. File base user manager (디폴트 유저 메니져)
2. Database user manager

ㅇFile base user manager는 사용자 정보를 화일에 저장하는 방식이다.




res\conf\users.properties 화일

# regarding copyright ownership. The ASF licenses this file
# to you under the Apache License, Version 2.0 (the
# "License"); you may not use this file except in compliance
# with the License. You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing,
# software distributed under the License is distributed on an
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
# KIND, either express or implied. See the License for the
# specific language governing permissions and limitations
# under the License.

# userid '
사용자명' 의 설정
ftpserver.user.
사용자명.userpassword=패스워드
ftpserver.user.
사용자명.homedirectory=사용자별 홈디렉토리
ftpserver.user.
사용자명.enableflag=true
ftpserver.user.
사용자명.writepermission=true
ftpserver.user.
사용자명.maxloginnumber=0
ftpserver.user.
사용자명.maxloginperip=0
ftpserver.user.
사용자명.idletime=0
ftpserver.user.
사용자명.uploadrate=0
ftpserver.user.
사용자명.downloadrate=0


사용자가 여러명이면 위 내용 만큼의 설정정보를 추가로 만들어 주기만 하면 된다.
예를 들어 'guest' 라는 사용자를 추가하고 싶다면 아래의 내용을 추가해 주면된다.


# userid 'guest' 의 설정
ftpserver.user.guest
.userpassword=패스워드
ftpserver.user.
guest.homedirectory=c:\ftpserver\home\user
ftpserver.user.
guest.enableflag=true
ftpserver.user.
guest.writepermission=true
ftpserver.user.
guest.maxloginnumber=0
ftpserver.user.
guest.maxloginperip=0
ftpserver.user.
guest.idletime=0
ftpserver.user.
guest.uploadrate=0
ftpserver.user.
guest.downloadrate=0

bin\ftpd.bat 를 명령 프롬프트에서 실행하면 아래와 같이 실행이된다.