\chapter{Color selector example}
\hypertarget{tutorial_colorselector}{}\label{tutorial_colorselector}\index{Color selector example@{Color selector example}}


This example shows how to change the color of a rectangle using a color selector. We aren\textquotesingle{}t going to explain a lot of the code since it\textquotesingle{}s the usual setup code\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\textcolor{comment}{//Compile\ with:}}
\DoxyCodeLine{\textcolor{comment}{//gcc\ -\/g\ colorselector\_example\_01.c\ -\/o\ colorselector\_example\_01\ \`{}pkg-\/config\ -\/-\/cflags\ -\/-\/libs\ elementary`}}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{preprocessor}{\#include\ <Elementary.h>}}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}\ \_change\_color(\textcolor{keywordtype}{void}\ *data,\ Evas\_Object\ *obj,\ \textcolor{keywordtype}{void}\ *event\_info);}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}\ \_colorpalette\_clicked\_cb(\textcolor{keywordtype}{void}\ *data,\ Evas\_Object\ *obj,\ \textcolor{keywordtype}{void}\ *event\_info);}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}\ \_colorpalette\_longpressed\_cb(\textcolor{keywordtype}{void}\ *data,\ Evas\_Object\ *obj,\ \textcolor{keywordtype}{void}\ *event\_info);}
\DoxyCodeLine{}
\DoxyCodeLine{EAPI\_MAIN\ \textcolor{keywordtype}{int}}
\DoxyCodeLine{elm\_main(\textcolor{keywordtype}{int}\ argc\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}},\ \textcolor{keywordtype}{char}\ **argv\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ Evas\_Object\ *win,\ *cs,\ *rect,\ *bx,\ *fr;}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__General_ga7a05f37fd3a019da5e26c5fc91fcd937}{elm\_policy\_set}}(\mbox{\hyperlink{group__Elm__General_ggaa16f3378ecdbf660fa378402e3c5a0a9a02fadb6faada04b19d0fa42c11a8d32a}{ELM\_POLICY\_QUIT}},\ \mbox{\hyperlink{group__Elm__General_gga46af37e6ac2c406321060be827117196abbe0962d88ae12afe1a173da881f56cd}{ELM\_POLICY\_QUIT\_LAST\_WINDOW\_CLOSED}});}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ win\ =\ \mbox{\hyperlink{group__Elm__Win__Group_ga23d9d1ffa0a65a1a1dd482d570db1ba0}{elm\_win\_util\_standard\_add}}(\textcolor{stringliteral}{"{}color\ selector"{}},\ \textcolor{stringliteral}{"{}Color\ selector"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Win__Group_ga9a16a2f8c9fd5b6e9203ed9dcb53ea8b}{elm\_win\_autodel\_set}}(win,\ \mbox{\hyperlink{group__Eina__Types__Group_ga05c12dacc8b4058994df842b41be85fc}{EINA\_TRUE}});}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ bx\ =\ \mbox{\hyperlink{group__Elm__Box__Group_ga49ec615c90bf8bead2158d5ffab2e445}{elm\_box\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(bx,\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}},\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Win__Group_ga505d6bd217e5ee01e82b548ec35986eb}{elm\_win\_resize\_object\_add}}(win,\ bx);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(bx);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ fr\ =\ \mbox{\hyperlink{group__Elm__Frame__Group_ga7a1801e032f479332d8c68b17bc2e0bf}{elm\_frame\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(fr,\ 1.0,\ 0.5);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_gaaf1d3e26e36b316977336066b6f56632}{evas\_object\_size\_hint\_align\_set}}(fr,\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}},\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}});}
\DoxyCodeLine{\ \ \ elm\_object\_text\_set(fr,\ \textcolor{stringliteral}{"{}Color\ View"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(bx,\ fr);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(fr);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ rect\ =\ \mbox{\hyperlink{group__Evas__Object__Rectangle_ga1b7a9d8e6ce240590c1734da5f3449d2}{evas\_object\_rectangle\_add}}(\mbox{\hyperlink{group__Evas__Object__Group_ga7e211219d11abced5f3089362f7476b9}{evas\_object\_evas\_get}}(win));}
\DoxyCodeLine{\ \ \ elm\_object\_content\_set(fr,\ rect);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_gab751e9d24c16e74af6f7c08ea5b930c2}{evas\_object\_color\_set}}(rect,\ 255,\ 90,\ 18,\ 255);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(rect);}

\end{DoxyCodeInclude}
 Now that we have a window with background and a rectangle we can create our color\+\_\+selector 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ fr\ =\ \mbox{\hyperlink{group__Elm__Frame__Group_ga7a1801e032f479332d8c68b17bc2e0bf}{elm\_frame\_add}}(win);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(fr,\ 1.0,\ 0.5);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_gaaf1d3e26e36b316977336066b6f56632}{evas\_object\_size\_hint\_align\_set}}(fr,\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}},\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}});}
\DoxyCodeLine{\ \ \ elm\_object\_text\_set(fr,\ \textcolor{stringliteral}{"{}Color\ Selector"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Box__Group_ga66a10dd861578521af2ab7b8c2ca65c5}{elm\_box\_pack\_end}}(bx,\ fr);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(fr);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ cs\ =\ \mbox{\hyperlink{group__Elm__Colorselector_ga959a3b0c379998c8a49e18f4cac0c7ac}{elm\_colorselector\_add}}(win);}

\end{DoxyCodeInclude}
 Now colors can be loaded to color selector\textquotesingle{}s palette by setting the palette name 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ elm\_colorselector\_palette\_name\_set(cs,\ \textcolor{stringliteral}{"{}painting"{}});}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_ga9379629ad8ad2860aa786d838a4a106a}{evas\_object\_size\_hint\_weight\_set}}(cs,\ \mbox{\hyperlink{Evas__Common_8h_aa47c85083d3dae0111c21ec49359306a}{EVAS\_HINT\_EXPAND}},\ 0.0);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_gaaf1d3e26e36b316977336066b6f56632}{evas\_object\_size\_hint\_align\_set}}(cs,\ \mbox{\hyperlink{Evas__Common_8h_aecbac710f36d52911fc34dcdaf8e729c}{EVAS\_HINT\_FILL}},\ 0.0);}
\DoxyCodeLine{\ \ \ elm\_colorselector\_color\_set(cs,\ 255,\ 90,\ 18,\ 255);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(cs);}

\end{DoxyCodeInclude}
 Next we ask to be notified whenever the color changes on selector\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(cs,\ \textcolor{stringliteral}{"{}changed"{}},\ \_change\_color,\ rect);}

\end{DoxyCodeInclude}
 Next we ask to be notified whenever the color item is selected and longpressed\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(cs,\ \textcolor{stringliteral}{"{}color,item,selected"{}},\ \_colorpalette\_clicked\_cb,\ rect);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Smart__Object__Group_gac12dd6655f488cc47ce6cf00eb7d12b2}{evas\_object\_smart\_callback\_add}}(cs,\ \textcolor{stringliteral}{"{}color,item,longpressed"{}},\ \_colorpalette\_longpressed\_cb,\ rect);}

\end{DoxyCodeInclude}
 We add some more code to the usual setup code\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{\ \ \ elm\_object\_content\_set(fr,\ cs);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group_gacad94595f83580c18908cb3b69b08d1a}{evas\_object\_resize}}(win,\ 320,\ 480);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_ga07208fcafd4739de606bc35fff684bf5}{evas\_object\_show}}(win);}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__General_gadf2553f83e6b0b9c7fbe054019a664a1}{elm\_run}}();}
\DoxyCodeLine{}
\DoxyCodeLine{\ \ \ \textcolor{keywordflow}{return}\ 0;}
\DoxyCodeLine{\}}
\DoxyCodeLine{\mbox{\hyperlink{group__Elm__General_ga50fe52d513f7e89c9c770afd76de7ad9}{ELM\_MAIN}}()}

\end{DoxyCodeInclude}
 now get to the "{}changed"{} callback that sets the color of the rectangle\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_change\_color(\textcolor{keywordtype}{void}\ *data,\ Evas\_Object\ *obj,\ \textcolor{keywordtype}{void}\ *event\_info\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}})}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \textcolor{keywordtype}{int}\ r,\ g,\ b,\ a;}
\DoxyCodeLine{\ \ \ elm\_colorselector\_color\_get(obj,\ \&r,\ \&g,\ \&b,\ \&a);}
\DoxyCodeLine{\ \ \ \textcolor{comment}{//\ ensure\ colors\ are\ pre-\/multiplied\ by\ alpha}}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Utils_gaf3b432607f6e8a987598a3489c7e386e}{evas\_color\_argb\_premul}}(a,\ \&r,\ \&g,\ \&b);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_gab751e9d24c16e74af6f7c08ea5b930c2}{evas\_object\_color\_set}}(data,\ r,\ g,\ b,\ a);}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 And now get to the "{}color,item,selected"{} callback that sets the color of the rectangle\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_colorpalette\_clicked\_cb(\textcolor{keywordtype}{void}\ *data,\ Evas\_Object\ *obj\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}},}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \textcolor{keywordtype}{void}\ *event\_info)}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \textcolor{keywordtype}{int}\ r\ =\ 0,\ g\ =\ 0,\ b\ =\ 0\ ,a\ =\ 0;}
\DoxyCodeLine{\ \ \ Elm\_Object\_Item\ *color\_it\ =\ (Elm\_Object\_Item\ *)\ event\_info;}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Colorselector_ga9058fd3f763834982fc00c1cc66c1288}{elm\_colorselector\_palette\_item\_color\_get}}(color\_it,\ \&r,\ \&g,\ \&b,\ \&a);}
\DoxyCodeLine{\ \ \ \textcolor{comment}{//\ ensure\ colors\ are\ pre-\/multiplied\ by\ alpha}}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Utils_gaf3b432607f6e8a987598a3489c7e386e}{evas\_color\_argb\_premul}}(a,\ \&r,\ \&g,\ \&b);}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Evas__Object__Group__Basic_gab751e9d24c16e74af6f7c08ea5b930c2}{evas\_object\_color\_set}}(data,\ r,\ g,\ b,\ a);}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 And now get to the "{}color,item,longpressed"{} callback that gets and displays the color of the rectangle\+: 
\begin{DoxyCodeInclude}{0}
\DoxyCodeLine{}
\DoxyCodeLine{\textcolor{keyword}{static}\ \textcolor{keywordtype}{void}}
\DoxyCodeLine{\_colorpalette\_longpressed\_cb(\textcolor{keywordtype}{void}\ *data\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}},\ Evas\_Object\ *obj\ \mbox{\hyperlink{group__Eina__Types__Group_ga82d751be730f849719ca292f9558be87}{EINA\_UNUSED}},}
\DoxyCodeLine{\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \textcolor{keywordtype}{void}\ *event\_info)}
\DoxyCodeLine{\{}
\DoxyCodeLine{\ \ \ \textcolor{keywordtype}{int}\ r\ =\ 0,g\ =\ 0,b\ =\ 0\ ,a\ =\ 0;}
\DoxyCodeLine{\ \ \ Elm\_Object\_Item\ *color\_it\ =\ (Elm\_Object\_Item\ *)\ event\_info;}
\DoxyCodeLine{\ \ \ \mbox{\hyperlink{group__Elm__Colorselector_ga9058fd3f763834982fc00c1cc66c1288}{elm\_colorselector\_palette\_item\_color\_get}}(color\_it,\ \&r,\ \&g,\ \&b,\ \&a);}
\DoxyCodeLine{\ \ \ printf(\textcolor{stringliteral}{"{}\(\backslash\)ncolor\ =\ \%d-\/\%d-\/\%d-\/\%d\(\backslash\)n"{}},\ r,\ g,\ b,\ a);}
\DoxyCodeLine{\}}

\end{DoxyCodeInclude}
 This example will look like this\+:

 
\begin{DoxyImageNoCaption}
  \mbox{\includegraphics[width=\textwidth]{screenshots/colorselector_example_01}}
\end{DoxyImageNoCaption}
 