[HTML5] 안드로이드 및 아이폰에서 input file 사용시 카메라 호출하기.

Posted by Find my true self Fimtrus
2013. 12. 9. 11:09 Programming/Hybrid App

오랜만에 글쓰네요.

요즘 하이브리드 웹을 많이 사용하시는데요.

네이티브 코딩없이 카메라 호출하는 법에 대해 쓰겠습니다.

안드로이드의 경우 2.2버전 이하는 카메라를 호출 할 수 없습니다.(4.0이상, 2.2 이하 에서만 확인해봤습니다.ㅠ 2.3단말기가 없어서)

아이폰은...IOS 6 이상에서만 확인해 봤습니다.(아마 5이하는 안될듯 하네요)

흔히 input file을 사용할때


<input type="file"/>


type만 file로 옵션을 주는데요.

이러면 lg단말기나, 베가 단말에서는 카메라 라는 항목이 보이지 않을 수 있습니다.(삼성은 카메라 라는 항목이 뜨더군요. 얼마나 뜯어 고친건지...;)

하지만 

<input type="file" accept="image/*;capture=camera"/>

또는

<input type="file" accept="image/*" capture="camera"> 

accept 에 파일 형식을 쓰고, capture 항목에 camera 라고 써주면 

직접 카메라가 호출되는 것을 볼 수 있습니다.

안드로이드의 경우 둘다 잘되는데요.

아이폰에서는 후자의 경우에만 카메라로 연결되더군요.(전자의 경우 카메라 및 비디오로 연결됩니다)

전 후자의 방법을 추천합니다.

많은 도움이 되셨길 바라면서...


이 댓글을 비밀 댓글로
    • 2017.04.04 13:31
    비밀댓글입니다
    • 지나가던협객
    • 2018.07.04 10:35
    이럴수가... 사랑합니다....

[Android] R.java 가끔 생성안될때

Posted by Find my true self Fimtrus
2013. 9. 24. 13:45 Programming/Android

대부분 개발자들은 이클립스를 사용할때, Build Automatically 옵션을 꺼놓고 사용할 것이다.(나만그런가??)

아무튼...언제부터인지는 모르겠는데 수동으로 빌드를 할 경우 반응이 없는 경우가 있는데

Build Automatically를 체크하고 다시 시도해보길 바란다.

그러면 간단히 해결될 수도 있다..(물론...경우에 따라서 안될수도 있음!!^^;;)


이 댓글을 비밀 댓글로

[Android] 안드로이드 SDK 업데이트 이후 R.java 생성 오류

Posted by Find my true self Fimtrus
2013. 9. 24. 13:42 Programming/Android

안드로이드 SDK Tools가 업데이트(Ver.22 이상) 된 이후로 R.java 생성하는데 오류가 생겼다.

이는 Android SDK Build-tools를 설치하면 간단히 해결된다.


출처 : ALPHAFACTORY


이 댓글을 비밀 댓글로

[Android] GCM Test URL

Posted by Find my true self Fimtrus
2013. 9. 10. 17:49 Programming/Android

일단..내가 필요하기때문에 간단하게 만들어 놨지만,

기능들은 점점 추가될 예정입니다. ( 지금은 하나만 저장되지만, 추후에,, 리스트 저장등..ㅎ)

링크 : GCM 테스트


이 댓글을 비밀 댓글로

[CSS] phone, tablet 구별하기(media query)

Posted by Find my true self Fimtrus
2013. 9. 4. 16:49 Programming/Hybrid App

Media Query에서 디바이스의 넓이를 구하기 위해서 사용되는 명칭은 두가지다.

max-width 와 max-device-width 가 있는데 각각 다른 특징을 가진다.

max-width 는 현재 웹뷰에서의 상대크기, 즉 device-ratio가 적용된 사이즈를 말한다.

iphone5의 경우 device-ratio 는 2, 실 디바이스 넓이는 640pixel이다.

하지만 max-width에는 320pixel로 대응된다.

이말은  device-ratio(안드로이드에서의 density)가 현재 웹뷰에서 적용되는 1pixel의 크기와 동일하다고 볼 수 있다.

max-device-width는 위와 반대로 실제 디바이스 넓이를 기준한다.

ratio와는 상관없이 실제 픽셀의 기준을 적용시킨다는 의미다.

나는 max-device-width를 사용하지 않고, max-width만 사용하여 phone과 tablet을 구분하였다.



/*mobile*/
@media all and (max-width: 640px) {
	
	.ui-mobile .ui-page {
		width: 100%;
		left: initial;
	}
	
	.sidebar {
		display : none;
	}
}
/*tablet */
@media all and (min-width:641px) { 
	stepbar {
		width: initial;
		left : 17.063em;
		right : 0;
	}
	
	.ui-mobile .ui-page {
		left : 17.063em;
		right : 0;
		width : initial;
	}
	
	.sidebar {
		width : 17.063em;
		display : initial;
	}
} 

기준을 640px로 잡은 이유는 현재 phone중에 device-width가 가장 높은 폰이 

옵티머스 G 프로 인데, 가로모드일때 width가 무려....1920pixel이다. 

다행히도, ratio가 3이라서 640px 이내로 적용이된다.

나중에 더 좋은 폰이 나오고, 해상도가 더 높은 폰이 나온다고 하더라도,, 위의 Media Query는 

변하지 않을 것 같다는 생각이 든다.

이 댓글을 비밀 댓글로

[jQuery] mobiscroll 에 타이틀 넣기.

Posted by Find my true self Fimtrus
2013. 7. 16. 11:32 Programming/Hybrid App

센차에서는 datepicker를 자체 제공하지만, jQuery 에서는 따로 지원을 하지 않는다.

그래서 mobiscroll을 많이 사용한다.

jquery와 mobiscroll...

하지만 mobiscroll에는 치명적인 단점이 있는데, 

picker 타이틀을 지원하지 않는다.

그래서 core를 수정해 봤다.


mobiscroll.core.js

Line : 675

 html += '</div>' + (s.display != 'inline' ? '<div style="display : -webkit-box;" class="dwbc' + (s.button3 ? ' dwbc-p' : '') + '">'

            + '<span class="dwbw dwb-c"><span class="dwb dwb-e">' + s.cancelText + '</span></span>'

            + '<div style="-webkit-box-flex : 1; display: -webkit-box; -webkit-box-align : center; -webkit-box-pack : center; font-size : 1.4em; overflow: hidden;"><span>' + s.titleText + '</span></div>' 

            + (s.button3 ? '<span class="dwbw dwb-n"><span class="dwb dwb-e">' + s.button3Text + '</span></span>' : '')

            + '<span class="dwbw dwb-s"><span class="dwb dwb-e">' + s.setText + '</span></span>' 

             + '</div></div>' : '') + '</div></div></div>';


위의 코드를 merge 하고, mobiscroll 생성시 옵션으로 "titleText" 를 지정해주면 된다.


이 댓글을 비밀 댓글로

[Javascript] input file 이미지 미리보기, 썸네일 보기, Thumbnail

Posted by Find my true self Fimtrus
2013. 7. 10. 14:11 Programming/Hybrid App
/**
  * 이미지 썸네일을 불러오는 function
  * @param html : input 필드의 dom을 인자로 받는다. 물론 타입은 file
  * @param $target : 불러온 이미지를 적용할 jquery 객체.
  **/
function getThumbnail(html, $target) {
	if (html.files && html.files[0]) {
		var reader = new FileReader();
		reader.onload = function (e) {
			$target.css('background-image', 'url(\"' + e.target.result + '\")');
		}
		reader.readAsDataURL(html.files[0]);
	}
}


냉무.
이 댓글을 비밀 댓글로
  1. 안녕하세요 혹시 위 소스 사용법좀 알수있을까요?
    아래와 같이 코딩해서 테스트해보니 html.files 에서 에러가 발생하더라구여
    dom 객체를 어떤식으로 넘겨 주어야 하나요?
    감사합니다. 좋은하루되세요.
    ===============================================
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    function getThumbnail(html, $target) {
    if (html.files && html.files[0]) {

    var reader = new FileReader();
    reader.onload = function (e) {
    $target.css('background-image', 'url(\"' + e.target.result + '\")');
    }
    reader.readAsDataURL(html.files[0]);
    }
    }
    function filechange(){
    var $target = $("#test");
    var html = document.getElementById("file1");
    getThumbnail(html,$target);

    }
    </script>
    <div id="test"></div>
    <input id="file1" type="file" onchange="javascript:filechange();">
    • 제가 이제 봤네요...한동안 너무 바쁘게 지내서 블로그를 돌볼 시간이 없었어요.

      해결하셨다고 생각하지만 답변드릴께요.

      getThumbnail 이라는 function은 두개의 인자를 받습니다.

      첫번째는 input tag의 input document 객체, 즉 document.querySelector('input') 하였을때 나오는 객체를 말합니다.
      file dom을 말하는거죠..
      두번째인자인 target은 jquery 객체를 말하는건데....
      소스 보시면 알겠지만 읽어 들인 파일의 thumbnail을 표시할 객체입니다.
      img tag일수도 있고, background를 주기 위한 division일 수도 있습니다.
      저는 division에 background-image로 적용하였습니다.

      결론을 말씀드리면, html은 input tag의 dom 객체를 넘기면 됩니다.

      더 궁금하신게 있으시다면 답변바랍니다.

[Javascript] // 주석제거 정규식.

Posted by Find my true self Fimtrus
2013. 6. 19. 17:58 Programming/Hybrid App

언어마다 정규식 표현방식이 다르다.

특히 Javascript의 경우, RegExp라는 function을 사용하여 만든다. ( 물론 사용하지 않고도 만들 수 있다. 하지만 Syntax Error 를 경험하게 될것이다.)

기본적인 문법은 다음과 같다.

/**
 * 1.권장하는 방법..
 **/
var regExp = new RegExp(pattern,modifiers);

//또는.
/**
 * 2.같은 정규식을 만들더라도..Syntax Error가 많이 발생하는 것을 경험했다.
 **/
var regExp = /pattern/modifiers;


1번방법을 이용하여, 주석을 제거하는 정규식을 만들어 보겠다.("//" 에 해당하는 주석만 삭제된다.)



/**
 * "//"로 시작하고, "\n"(줄바꿈)으로 끝나는 글자(문장?)를 찾는다. 
 * modifier로 gm 을 지정. g 는 global(전체검색), m은 multiline(여러줄 찾기)
 */
var regExp = new RegExp("//.*\n", "gm");
/**
 * 그리고 제거하고자 하는 String value의 replace를 사용하면된다.
 * trim은 양 끝의 공백, 줄바꿈 등을 제거하기 위해 사용.
 * str은 임의의 문자.
 */
str = str.replace(regExp, "").trim()

위의 코드대로 검색하면, "//"에 해당하는 주석은 모두 제거된다.

"/* */"도 제거하는 코드는 다음에....업데이트.,,

이 댓글을 비밀 댓글로

[CSS] CSS Property 관련 사이트.

Posted by Find my true self Fimtrus
2013. 6. 11. 10:53 Programming/Hybrid App

크롬으로 디버깅을 하더라도, CSS에서 지원하는 function들의 code assist 를 지원하지 않는 경우가 많다.

아래의 사이트를 참고하면 보다 편하게 작업할 수 있을 것이다.



이 댓글을 비밀 댓글로

[Javascript] 현재 위치 얻어오기.

Posted by Find my true self Fimtrus
2013. 6. 10. 21:16 Programming/Hybrid App
 window.navigator.geolocation.getCurrentPosition(successCallback, failedCallback);

이 댓글을 비밀 댓글로