'2014/07'에 해당되는 글 2건

  1. 2014.07.30 transparent ewebkit
  2. 2014.07.25 CSS pixel 이란 무엇인가? (2)

기존 글:

Hello, ewebkit



이번에는 ewk_view에 투명한 배경을 주는 예제를 소개할까 합니다.

기존의 예제(simple.c)를 약간 수정하는 정도의 예제입니다.


먼저 투명한 배경에 대한 설명을 하겠습니다.


일반적으로 웹 페이지는 웹뷰(ewk_view)의 전체 영역에 컨텐츠를 그리게 됩니다.

웹페이지는 body 태그의 배경을 이용하여 컨텐츠의 배경색을 갖게 되는데, 보통 다음과 같이 사용합니다.

### html

<!doctype html>

<!- no background -->

<body>HELLO</body>


### html

<!doctype html>

<body bgcolor="red">Hello, I am red background</body>


### html

<!doctype html>

<head><style>body { background-color: green; } </style></head>

<body>Hello, I am green background</body>


두번째와 세번째는 배경을 갖는 예제인 반면, 첫번째는 배경을 갖지 않는 예제입니다. 그러나 만약 첫번째 예제를 브라우저에서 실행한다면 흰 배경 위에 HELLO라는 글자가 적혀 있는 것을 보게 될 것입니다.


일반적으로 거의 대부분의 브라우저들은 기본 배경을 흰색으로 제공하고 있습니다.

그래서 웹 컨텐츠를 제작하는 대부분의 분들이 배경을 지정하지 않고 있습니다.

(

하지만 만약 흰 배경을 사용하지 않는 브라우저가 나타나면 어쩌실건가요? ㅡ.ㅡ

그리고, 특정 모바일 디스플레이들은 흰색일 때 배터리 소모가 극심합니다.

)


webkit도 기본 배경을 흰색으로 정하고 있지만, 다른 색을 쓰거나, 투명하게 그릴 수 있는 방법을 제공하고 있습니다.

ewebkit에서 관련 API는 ewk_view_bg_color_set 이라는 API가 존재합니다.


### c++

/**
 * Sets the background color and transparency of the view.             
 *
 * @param o view object to change the background color
 * @param r red color component
 * @param g green color component                                          
 * @param b blue color component     
 * @param a transparency             
 */
EAPI void ewk_view_bg_color_set(Evas_Object *o, int r, int g, int b, int a);

각각의 color component들은 0 부터 255 사이의 숫자여야 합니다.


일반적으로 EFL에서는 evas_object_color_set이라는 API를 이용하여 evas object의 색을 지정했지만,

ewebkit에서는 alpha를 제외하곤 evas_object_color_set의 다른 인자들을 사실상 무시합니다.

이유는, evas_object_color_set의 alpha가 전체 컨텐츠의 opacity를 다루는 반면, ewebkit은 배경만의 opacity를 다루어야 하는 요구사항이 있기 때문입니다.

즉, evas_object_color_set은 evas_object 전체의 색을 조절하는 API로 ewebkit에서는 contents의 색은 contents가 지정해야 하기 때문에 RGB값은 무시됩니다. (현재)


ewk_view_bg_color_set 을 사용하는 예제는 아래와 같습니다.

https://github.com/ewebkit/samples/blob/master/devs/ryuan/transparent.c

### c++

// gcc transparent.cpp `pkg-config --cflags --libs elementary ewebkit2
#include <Elementary.h>
#include <EWebKit2.h>

void on_done(void *userData, Evas_Object *webView, void *eventInfo)
{
   elm_exit();
}

EAPI_MAIN int
elm_main(int argc, char *argv[])
{
   ewk_init();

   Evas_Object* win;
   win = elm_win_add(NULL, "sample", ELM_WIN_BASIC);
   elm_win_title_set(win, "sample");
   evas_object_smart_callback_add(win, "delete,request", on_done, NULL);
   elm_win_autodel_set(win, EINA_TRUE);

   Evas_Object* bg = elm_bg_add(win);
   evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_bg_color_set(bg, 0, 0, 255);
   elm_win_resize_object_add(win, bg);
   evas_object_show(bg);

   Evas_Object* ewk = ewk_view_add(evas_object_evas_get(win));
   ewk_view_html_string_load(ewk, "<!doctype html><body>HELLO</body>", NULL, NULL);
   ewk_view_bg_color_set(ewk, 0, 0, 0, 0);

   evas_object_resize(ewk, 400, 400);
   evas_object_move(ewk, 0, 0);
   evas_object_show(ewk);

   evas_object_resize(win, 400, 400);
   evas_object_show(win);

   elm_run();

   ewk_shutdown();
}
ELM_MAIN()

배경 속성이 없는 web contents를 위해 url 대신 ewk_view_html_string_load를 이용했습니다.

그리고 ewk_view_bg_color_set 을 통해 ewk_view의 배경을 투명하게 만든 예제입니다.


위에서 elm_bg의 색을 blue로 했기 때문에 파란색 배경 위에 HELLO라는 글자가 적혀있어야 합니다.

만약 검은색으로 나온다면, ewebkit을 최신으로 빌드해보시기 바랍니다.

(최근 수정 :https://bugs.webkit.org/show_bug.cgi?id=135333)


추신. 현재 ewk_view_bg_color_set과 EFL 관련 버그가 하나 더 있는 것 같습니다.

만약 ewk_view_bg_color_set의 RGB요소에 값을 주고 alpha를 준 경우, elm_bg의 색과 blend되고 있습니다.

만약 투명한 웹뷰가 필요한 경우라면 RGB요소를 모두 0으로 주시기 바랍니다.

저작자 표시
신고

'Open Source > EFL' 카테고리의 다른 글

[EFL] EWebKit Extension  (0) 2014.09.23
transparent ewebkit  (0) 2014.07.30
Hello ewebkit?  (2) 2014.03.14
WebKit/efl 하면서 쓸 ctags 만들기  (0) 2013.12.17
Elementary Dark theme  (0) 2013.10.17
[TIZEN][EFL] 타이젠 상에서 EFL 예제 실행하기  (9) 2013.08.02
Posted by 소혼

일반적으로 픽셀(pixel)은 아래처럼 설명할 수 있습니다.[1][2]

"In digital imaging, a pixel, pel,or picture element is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen." (출처 : wikipedia)


흔히 TV/모니터는 얼마나 많은 픽셀을 표현하는지를 (display) resolution이라고 부르며 (물리적인) 픽셀로 처리합니다.[3]

( 해상도 관련 글 )

그래서 그동안 프로그래밍을 하는 과정에서 픽셀이라는 개념은 물리적인 스크린의 한 점과 같다고 생각해 왔습니다.


최근 모바일 (그리고 모바일 웹)에서 이러한 픽셀의 개념에 큰 혼란이 생겨 개인적으로 조사한 내용을 적으려고 합니다.


아이폰의 등장

2007년 초 아이폰과 이후 안드로이드의 등장으로 모바일 디바이스는 스마트폰(그전에도 존재했지만)의 세상이 되었습니다.

이들 스마트폰이 등장하면서 모바일 브라우저는 기존 웹 페이지를 '거의' 문제 없이 모바일에서 렌더링할 수 있게 되었습니다.


레티나 디스플레이의 등장

2010년 애플은 아이폰4에 레티나 디스플레이라는 화면 구성을 가져옵니다. 이는 기존의 아이폰 3에 비해 사실상 두배의 해상도를 갖는 디스플레이(640 x 960)입니다.

(사실 레티나 디스플레이에서 중요한 것은 DPI 로 특정 시야거리에서 기존의 160 ppi 의 두배인 326 ppi 를 만족한다는 의미로 레티나라고 불렀던 것으로 압니다.)

여기에서 한가지 문제점은 기존의 앱/웹페이지들이 320 x 480에 최적화 되어 있다는 것이었습니다.

이를 위해 애플은 웹의 경우 device pixel ratio 라는 요소를 가져왔습니다.

즉, device의 width는 320으로 놓고 대신 pixel ratio의 값을 2로 설정하도록 한 것입니다.

여기서 새로운 픽셀의 정의가 생겨나고 말았습니다.

웹페이지는 contents가 320픽셀이라고 생각하지만, 실제 물리적인 픽셀은 640픽셀인 것입니다.

다시 말해 우리가 width=100 px 의 DIV태그를 만들면 화면상에는 200px의 박스가 그려지게 됩니다.


안드로이드의 따라하기.

후발주자인 안드로이드는 어쩔수 없이 애플이 만들어놓은 컨텐츠를 잘 그리기 위해서 아이폰의 많은 부분을 그대로 차용하게 됩니다.

그래서 레티나급 디바이스에 대해 유사하게 2.0의 device pixel ratio를 사용하게 됩니다.

문제는 안드로이드는 정말 많은 디바이스가 존재하고 각 디바이스들이 전부 ppi가 달랐습니다.

target-density라는 개념을 통해 device 별로 테이블을 만들고 했지만, 문제는 간단하지 않았던 것 같습니다.

device pixel ratio는 아이폰의 의미와 약간 다르게 device의 ppi를 고려하여 1.5 2.0 3.0등 다양한 값을 갖게 되었습니다.

여기서, 이 값이 실제 1.0 일 때의 ppi에 정확히 비례하지 않을 뿐 아니라, 실제 단말의 픽셀과도 정확히 일치하지 않게 됩니다.

즉, 1.5 의 단말의 픽셀이 320 x 1.5 = 480 px 이 아닌 단말들도 많아지게 됩니다.


사실 w3c에서는...

사실 웹 표준인 w3c에서는픽셀에 대한 정의를 "Reference pixel"이라고 정의하고 있었습니다. [4]


Showing that pixels must become larger if the viewing distance increases


The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).


애초에 물리 픽셀 과 논리 픽셀을 구분해둔 셈입니다.


일반적으로 모니터는 팔길이 정도의 시야거리(viewing distance)를 갖고 있고 96 dpi 였습니다. 웹 표준을 만들 때 이미 시야거리의 변화와 dpi의 변화를 고려하여 가상의 픽셀인 reference pixel을 정의하고 있었고 웹은 이 값에 기반하여 cm, inch등으로 픽셀값을 변환할 수 있었습니다.

그러나 모바일 벤더들은 96dpi를 바꾸지 않았습니다.(여러가지 문제가 있었을 거라고 생각됩니다.)

따라서 160dpi나 326dpi인 아이폰에서도 1 픽셀을 인치로 변환하면 1/96이 나오게 된 것입니다.


아이폰과 같은 모바일의 시야거리는 대략 10 inch (25cm) 라고 생각할 수 있습니다.

대충 계산하면 동일한 시야각을 얻으려면 픽셀은 0.1 mm 여야 할듯 합니다.

0.26 : 71 = x : 25


다시 말해 모니터와 같은 reference pixel(같은 시야각을 같는 픽셀)을 얻으려면 대략 243 dpi가 나와야 합니다.

하지만 현재 모바일은 160 dpi를 de-factor처럼 사용하고 있는 셈입니다.

심지어, 그 값도 단말에 따라 약간씩 다릅니다.


결론적으로

1. 웹에서 현재 있는 cm , inch 등은 printer를 media type을 위해서 사용해야 합니다.

     px과 cm간의 변환은 사실상 의미를 잃어버렸습니다.

2. px 정보(screen.width window.clientWidth) 를 이용하여 디바이스의 크기를 알아내는 것은 사실상 불가능해졌습니다.

     현재의 웹은 디바이스의 크기를 알 방법을 제공하지 않습니다.

     당연히 디바이스의 크기를 구분할 수 있는 올바른 방법은 존재하지 않고 미디어쿼리나 user agent를 통해 이미 알고 있는 디바이스만을 고려할 수 있게 되었습니다.


참고 :

[1] (한글) http://ko.wikipedia.org/wiki/%ED%99%94%EC%86%8C

[2] (영문) http://en.wikipedia.org/wiki/Pixel

[3] http://en.wikipedia.org/wiki/Display_resolution

[4] http://dev.w3.org/csswg/css-values/

http://ko.wikipedia.org/wiki/%EB%A0%88%ED%8B%B0%EB%82%98_%EB%94%94%EC%8A%A4%ED%94%8C%EB%A0%88%EC%9D%B4

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

http://alistapart.com/article/a-pixel-identity-crisis/


저작자 표시
신고
Posted by 소혼
이전버튼 1 이전버튼

티스토리 툴바