기존 글:

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 소혼

티스토리 툴바