반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

Corona SDK/Corona SDK TIPs

앱 화면 Screen Capture하기

2011. 12. 29. 04:26 | Posted by 솔웅


반응형
오랜만에 Corona SDK Tip을 공부합니다.

예전 텍스트, 이미지, 모양 표시하기... 2 에서 이런게 있다는 설명만 하고 넘어갔는데요.
오늘 예제와 함께 자세히 다뤄 볼께요.

display.setStatusBar( display.HiddenStatusBar )
 
-- Fill the screen with a green rectangle
local rect = display.newRect(0, 0, display.contentWidth, display.contentHeight)
rect:setFillColor(0, 255, 0)
 
-- Draw a circle on the screen
local circle = display.newCircle(155, 100, 36)
circle:setFillColor(255, 0, 0)
 
-- Capture the screen
local screenCap = display.captureScreen( true )
 
-- Remove the objects from the screen
rect:removeSelf()
circle:removeSelf()
 
-- Scale the screen capture, now on the screen, to half it's size
screenCap:scale(.5,.5)
 
-- Alert the user to look in the library (device)
-- or on the desktop (simulator) for the screen capture
local alert = native.showAlert( "Success", "Screen Capture Saved to Library", { "OK" } )
이 앱을 실행하면 위 화면이 실행되고 아래 화면이 캡쳐 됩니다.

왜 그런지 소스를 보실까요?
첫째줄은 아이폰에서 status 바를 없앱니다.
그 다음엔 커다란 녹색 사각형을 그리고 그 다음에 빨간 원을 그립니다.
녹색 사각형은 화면에 꽉 차게 그려집니다.
그 다음 display.captureScreen(true)를 해서 스크린을 캡쳐합니다.
(true)를 했으니까 이 파일은 디바이스 안에 이미지 파일로 저장됩니다.
그리고 사각형과 원을 screen에서 없앱니다.
그리고 아까 캡쳐한 것을 반 크기로 줄여서 화면에 표시합니다.
맨 마지막엔 제대로 스크린 캡쳐가 됐다는 Alert 메세지를 뿌립니다.

즉 이 앱은 꽉찬 녹색 사각형과 큰 원을 캡쳐한 후 두 사각형과 원을 지우고 절반크기로 다시 화면에 보여주는 앱입니다.

여기서 사각형과 원을 removeSelf()한 부분을 주석처리한 다음에 실행해 보세요.

그럼 이렇게 나올 겁니다.
보시다시피 캡쳐 전 도형들이 사라지지 않고 나와서 전체가 녹색 사각형이고 빨간 원도 좀 큽니다. 그리고 그 위에 캡쳐한 이미지를 절반크기로 올려 놓은 화면입니다.

간단하지만 때에 따라서는 아주 유용하겠죠?
display.captureScreen( false ) 하면 디바이스에는 저장되지 않습니다.
이것을 true로 할 경우
아이폰 같은 경우는 Photo Albums에 자동으로 저장이 되구요.
안드로이드는 build.settings에 아래와 같이 퍼미션을 주어야 합니다.
settings =
{
   androidPermissions =
   {
       "android.permission.WRITE_EXTERNAL_STORAGE"
   },
}
그리고 시뮬레이터는 컴퓨터 바탕화면에 캡쳐된 화면을 저장합니다.
(윈도우에서는 MyPictures\Corona Simulator" 디렉토리에 저장이 될 겁니다.)
저장된 파일은 png형식이고 이름은 Picture#.png이렇게 나갑니다.
10000개까지 가능합니다.


이 화면처럼 버튼을 누르면 화면을 캡쳐하도록 만들어 볼까요?
display.setStatusBar(display.HiddenStatusBar)
local background = display.newImage('background.png')
local captureButton = display.newImage('captureButton.png')

captureButton:setReferencePoint(display.CenterReferencePoint)
captureButton.x = display.contentWidth * 0.5
captureButton.y = display.contentHeight * 0.5

function captureButton:tap(e)
    local screenshot = display.captureScreen(true)
    -- Show Image in Photo Library
    media.show(media.PhotoLibrary)
end
captureButton:addEventListener("tap", captureButton)

이 소스처럼 button이미지에 리스너를 달아서 tap할 경우 display.captureScreen(true)를 하도록 하면 됩니다.
간단하죠?

샘플 파일은 아래에 있습니다.

ScreenCapture.zip





반응형
저작자표시 비영리 동일조건

'Corona SDK > Corona SDK TIPs' 카테고리의 다른 글

imageSuffix로 디바이스 해상도에 맞는 이미지 출력하기  (0) 2012.02.27
코로나로 물방울 올라가는 효과 내기  (0) 2012.02.26
enterFrame Event에 대해 이해하기  (0) 2012.02.24
Corona SDK로 cross platform 앱 개발시 주의해야 할 10가지  (4) 2012.02.09
iOS - armv6 (-19033) error  (0) 2012.01.25
Modular Classes in Corona - 모듈과 클래스 이해하기 -  (0) 2011.12.08
코로나로 책장 넘기는 효과 주기  (0) 2011.12.06
내 코드 모듈화 하기 (modularize)  (0) 2011.12.01
드래그 하기 기초  (0) 2011.11.25
화면 전환 클래스(director.lua) 사용하기 와 랜덤 화면 전환  (2) 2011.11.24
Corona SDK/Corona SDK News

코로나 관련 신간 소개

2011. 12. 28. 00:02 | Posted by 솔웅


반응형
요즘 들어 코로나 관련 책들이 하나 둘 나오기 시작하는 것 같습니다.

얼마전에 일본에서 책이 나왔다는 소식도 들었는데요.
지난주에 미국에서도 책이 나왔습니다.

오프라인 서점에 나왔는지 모르겠습니다.
저는 이 책의 첫장 Hello World 만 있는 PDF를 받았거든요.

아래에 공유해 드릴께요.

Mobile App Development with Corona -Sample.pdf


******** o ******* o ******* o ******* o ******* o ******* o *******

그리고 출판업계 관련 있으신분들 관심 가져 주셨으면 좋겠습니다.
제가 Corona SDK 관련 책을 내려고 준비 중에 있습니다.
CoronaSDK 의 CEO한테도 메일 했고 관심 있다는 답장도 받았습니다.

기존 책을 번역하는 것으로 할지 아니면 별도로 만들지는 지금 고민중인데요.

아직 책을 내 본 경험이 없어서 출판사 쪽에서 관심 있으시면 같이 일 진행 하면 좋겠습니다.

Corona SDK 는 쉽게 모바일 게임을 만들 수 있는 툴로 최근 급 성장하고 있는 개발 Language입니다.

혹시 이 글 보시는 분 들 중에 도움 주실 수 있으신 분들 연락 부탁드립니다.
(댓글로 써 주셔도 되구요. solkit2011@yahoo.com 으로 이메일 주셔도 되요.)

그럼........
반응형
저작자표시 비영리 동일조건

'Corona SDK > Corona SDK News' 카테고리의 다른 글

Corona SDK 명예 홍보 대사 공식 임명 메일 받았어요.  (18) 2012.03.07
9살 Tyler Poon의 앱 개발 스토리  (4) 2012.02.25
Corona SDK book 표지 디자인 콘테스트 우승작  (5) 2012.02.22
Corona SDK 명예 홍보 대사 위촉....  (16) 2012.02.21
Angry bird 만들기, 코로나 책 표지 디자인 콘테스트 등  (2) 2012.01.24
New App 'Fire Man' published on Android Market.  (0) 2012.01.21
개발한 앱 테스트하기와 아마존 Kindle Fire 빌드하기  (0) 2012.01.14
Corona SDK 다음 버전에 추가될 기능 들 등  (0) 2011.12.16
Big Change Build 2011.703 버전 Release.  (0) 2011.12.08
daily build 698에 Kindle fire simulator 추가 등등  (0) 2011.12.02
WEB_APP/HTML5

HTML5 Web Storage -01-

2011. 12. 27. 04:44 | Posted by 솔웅


반응형
HTML5 에서 데이터를 저장했다가 사용하도록 하는 방법이 여러가지가 있습니다.
외부 서버에 접속해서 DB에 있는 데이터를 가져와서 처리하는게 아니라 그냥 Client side에서 데이터를 관리할 수 있도록 제공하는 기능을 말합니다.
이전에는 (정확히는 지금까지 지만..) 쿠키와 세션을 많이 사용했습니다.
이 방법은 client 쪽에 쿠키라는 작은 정보를 넣고 이 쿠키에 접근해서 그 정보를 사용하는 겁니다. 이 경우 쿠키에 접근할 때마다 서버와의 communication이 일어나는데요 Web Storage는 그런 서버와의 커뮤니케이션이 일어나지 않아서 서버의 부담을 줄일 수 있습니다.
Web Storage는 Key와 Value 의 구조로 돼 있습니다.
이 Web Storage는 싸이트 단위로 관리되는 Local Storage와 Browsing Context로 관리되는 Session Storage가 있습니다. 둘 다 똑 같은데요. 그냥 세션 스토리지는 기간의 제한이 있다는 것만 다릅니다.
local Storage는 한 싸이트에 대해 다른 창(탭)을 띄워도 정보가 계속 유지 되는 거구요. Session Storage는 한 창에서만 정보가 유지 되는 겁니다.

뭐 골치아픈 이론은 넘어가고 곧바로 페이지 만드는 것 부터 할께요.

오늘 만들 화면은 왼쪽에 Key 입력하는 textbox와 value 입력하는 text area 그리고 정보를 저장하기 위한 save 버튼을 만들겠습니다.
그리고 오른쪽에는 save 버튼을 누르면 key 와 value 가 표시 되도록 할 거구요.

일단 HTML 로 기본 틀을 잡아 보죠.
 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Web Storage API</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="webstoragedoug01.css">
    <script src="webstoragedoug02.js"></script>
</head>
<body>
    <section id="leftbox">
    <form>
        <p>(key) One: <input type="text" id="one"></p>
        <p>(value) Two <textarea id="two"></textarea></p>
        <p><input type="button" id="button" value="Save"</p>
    </form>   
    </section>
    <section id="rightbox">
        Nothing Yet Now!
    </section>
</body>
</html>

<input type="text"> 태그와 <textarea> 태그는 기본 html 문법입니다. 따로 설명은 안 할께요. 혹시 이거 모르시는 분은 html 공부부터 시작하시는게 좋을 겁니다.
leftbox,rightbox 라는 id를 갖는 두개의 section을 만들었습니다.
leftbox에는 input, textarea,button 태그들이 있구요. rightbox에는 그냥 글자만 있습니다.

여기까지 하면 이런 화면이 나옵니다.
이제 webstoragedoug01.css 를 작성해서 화면을 꾸며 보겠습니다.
#leftbox{
    float:left;
    padding:20px;
    border:3px solid red;
}
#rightbox{
    float:left;
    width:250px;
    margin-left:20px;
    padding:20px;
    border:3px solid blue;
}
float를 주어서 왼쪽에서 오른쪽으로 section 을 배치하도록 했습니다.

이제 왼쪽 오른쪽 box들이 제대로 표시되고 있습니다.
그럼 이제 동적인 효과를 위해서 JavaScript를 작성하겠습니다.
function doFirst(){
    var button = document.getElementById("button");
    button.addEventListener("click",saveData,false);
}
function saveData(){
    var one = document.getElementById("one").value;
    var two = document.getElementById("two").value;
    sessionStorage.setItem(one,two);
    display(one);
}
function display(one){
    var rightbox = document.getElementById("rightbox");
    var two = sessionStorage.getItem(one);
    rightbox.innerHTML = "Name : " + one + "<br/> Value : " + two;
}
window.addEventListener("load",doFirst,false);
분석해 볼까요?
1. 우선 맨 밑에 리스너부터 실행이 될 겁니다.
페이지가 load 될 때 doFirst 함수가 Call 됩니다.
2. doFirst() 함수에는 button이라는 지역변소에 html 내의 id가 button인 요소를 대입합니다.
그리고 이 버튼에 리스너를 다는데요. click 이벤트가 발생하면 saveData()함수를 실행합니다. 그러니까 화면에서 save버튼을 누르면 saveData()가 call 되서 실행 될 겁니다.
3. saveData()에는 one,two 두 지역 변수를 만들어서 각각 html 내에 id가 one,two 인 애들의 value 를 이 변수에 집어 넣습니다. 둘 다 input box와 textarea 안에 있는 글자들(values)이 대입 될 겁니다.
그 다음에 바로 오늘 배울 세션 스토리지가 나오네요.
4. sessionStorage.setItem(one,two)의 의미는 one을 key값으로 하고 two를 value 값으로 하는 세션스토리지를 만든다는 의미입니다. one이 key 값이라고 하는 것은 값이 중복되지 않는다는 말입니다. unique 한 key인거죠.
이러면 간단하게 세션스토리지에 원하는 값들을 저장하는 겁니다.
그리고 나서 display함수를 call 하는데요. parameter 로 one 즉 key 값을 던져 줍니다.
5. display() 함수에서는 one을 인자로 받아서 사용할 겁니다.
우선 rightbox라는 지역변수를 만들어서 거기에 html에서 id가 rightbox인 요소를 대입합니다.
6. 다음이 오늘 배우는 세션스토리지 관련한 내용인데요.
saveData()함수에서 set 한 세션스토리지를 불러와서 사용하는 방법입니다.
sessionStorage.getItem(one); 하면 key값이 one인 value를 불러오는 겁니다. 이 값을 two 에 대입합니다.
그리고 나서 HTML 코드를 만들어서 Name에 one을 Value에 two 를 표시하도록 합니다.


이러면 왼쪽에 글을 입력하고 save를 누르면 오른쪽에 그 내용이 표시 됩니다.
그런데 세션스토리지는 해당 정보를 브라우저에 저장해 둔다고 했습니다.
제가 animal2, Cat 치기 전에 animal1, Dog를 쳤었거든요.
근데 그 정보를 볼 수가 없네요.

이 코드는 세션스토리지를 충분히 잘 활용하기 위한 코드는 못 됩니다. 제대로 활용하기 위해서 자바스크립트를 많이 바꾸겠습니다.
function doFirst(){
    var button = document.getElementById("button");
    button.addEventListener("click",saveData,false);
    display();
}
function saveData(){
    var one = document.getElementById("one").value;
    var two = document.getElementById("two").value;
    sessionStorage.setItem(one,two);
    display();
    document.getElementById('one').value="";
    document.getElementById('two').value="";
}
function display(){
    var rightbox = document.getElementById("rightbox");
    rightbox.innerHTML = "";
    for(var x=0; x<sessionStorage.length;x++){
        var a = sessionStorage.key(x);
        var b = sessionStorage.getItem(a);
        rightbox.innerHTML += a+" - "+b+"<br/>";
    }
}
window.addEventListener("load",doFirst,false);

display()함수가 많이 바뀌었죠?
먼저 보면 일단 one이라는 인수를 받지 않습니다.
rightbox는 이전이랑 똑 같구요. 다음줄에서 rightbox를 빈 공간으로 만들어 버립니다.
그 다음에 session Storage에 저장 되 있는 내용들을 표시할 건데요.
for문을 sessionStorage에 저장돼 있는 갯수만큼 돌립니다.
sessionStorage.length가 세션스토리지에 저장된 데이터의 수 입니다.
a에 key값을 넣고 b에 이 키값에 대한 value 값을 집어 넣은 다음 HTML 코드를 넣어 표시합니다.
이러면 해당 창에서 이전에 넣었던 데이터들도 모두 표시 될 겁니다.
심지어는 Naver 나 Google로 가서 다른 싸이트 막 써핑하다가 다시 돌아와도 계속 그 값을 남아있을 겁니다.
이렇게 다른 싸이트 나갔다가 돌아오는 경우를 대비해서 doFirst()함수 마지막에 display(); 함수 Call 하는 부분을 추가합니다.
그리고 Html에서 값을 넣고 save버튼을 누르면 그 값이 오른쪽에 표시되고 input box나 Text Area는 새로운 값을 입력 받기 위해 빈칸으로 만들어 주면 좋겠죠?
그래서 saveData() 함수에 display();  하고 난 후 one,two 의 value 를 빈칸으로 합니다.


자 이제 세션 스토리지에 나와 있는 내용들이 다 나옵니다.
제가 우리나라 역대 10명의 대통령과 그 말로를 Key, Value로 짝 지었습니다.
이제 naver나 내 블로그나 다른 싸이트를 돌아 다니다가 와도 저 정보는 그대로 있을 겁니다.
하지만 다른 탭을 열거나 다른 브라우저를 띄워서 접속하면 이 정보는 남아있지 않습니다. 이게 바로 세션스토리지 입니다.
만약에 이 데이터들을 로컬 스토리지로 set 하고 사용했다면 새로운 탭으로 열어도 이 정보는 계속 남아 있을 겁니다.
세션스토리지에서 특정 데이터를 지울 수도 있습니다.
그럴 경우는 sessionStorage.removeItem("name");을 하시면 됩니다.
그리고 모든 데이터를 지우려면 sessionStorage.clear(); 하시면 되구요.

재미삼아 우리나라 역대 대통령을 가지고 예를 들었는데요.
총 10명의 역대 대통령이 있군요 우리나라에.(현 대통령까지 포함해서)
외국으로 도망간 대통령에 쿠테타로 쫒겨난 두명의 대통령, 총 맞아 죽은 대통령, 퇴임 후 대통령에서 졸지에 반란 수괴로 법원 판결을 받은 두명의 대통령, 퇴임후 살아있는 대통령, 퇴임후 노환으로 별세한 대통령, 그리고 퇴임 후 자살한 대통령까지...
내용들은 별로 재미있지 않네요. 현 대통령께선 퇴임 후 어떻게 될까요?

제가 컴퓨터 프로그래밍 일을 한지 10년이 넘었는데요. 전공이 정치학이었거든요. 좀 정치에 관심이 많아요.
프로그래머는 열심히 프로그래밍 하고, 학생은 열심히 공부하고, 근로자는 열심히 일 하고 국민은 열심히 정치해야 합니다. :)

그럼 다음 글에서 뵐께요.

P.S. 제가 역대 대통령을 1대부터 현재까지 쭉 순서대로 입력을 했는데 출력 되는건 순서가 막 뒤죽 박죽 되서 나오네요.
이게 순서대로 입력되고 순서대로 출력되지 않나봐요. 세션스토리지가요. 버그인가?
세션스토리지 정보를 좀 더 찾아봐도 정렬과 관련한 API는 없는 것 같구요.
혹시 세션스토리지 내 데이터 정렬에 대해 아시는 분 계시면 조언 부탁드립니다.
반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Form 공부하기 -2-  (3) 2012.01.02
HTML5 Form 공부하기 -1-  (0) 2012.01.02
HTML5 기본 Semantic Tag 들 알아보기 -3-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -2-  (0) 2012.01.01
HTML5 기본 Semantic Tag 들 알아보기 -1-  (1) 2012.01.01
HTML5 드래그 앤 드롭 하기 Drag and Drop  (0) 2011.12.26
HTML5 Canvas 이용하기 - 04 - Image/Animation  (0) 2011.12.24
HTML5 Canvas 이용하기 - 03 -  (0) 2011.12.24
HTML5 Canvas 이용하기 - 02 - 다각형,글자,그림자  (0) 2011.12.22
HTML5 Canvas 이용하기 - 01 -  (0) 2011.12.21

티스토리툴바