diff --git a/data/theme/default/widgetContextMenu.frag b/data/theme/default/widgetContextMenu.frag index e81bf9bb..37d1df78 100644 --- a/data/theme/default/widgetContextMenu.frag +++ b/data/theme/default/widgetContextMenu.frag @@ -15,10 +15,10 @@ uniform displayProperty EW_widgetProperty; // transmit from the vertex shader varying vec2 v_position; // interpolated position ... -varying vec4 v_colorTansition; // internal static define vec4 S_colorBg = vec4(0.0); +vec4 S_colorFg = vec4(1.0,1.0,1.0,0.8); vec4 S_colorBorder = vec4(0.0,0.0,0.0,1.0); float S_sizePadding = 1.0; float S_sizeBorder = 3.0; @@ -42,7 +42,7 @@ void main(void) { gl_FragColor = S_colorBorder; } else { // note : int() is needed for the OpenGL ES platform - gl_FragColor = v_colorTansition; + gl_FragColor = S_colorFg; } } else { gl_FragColor = S_colorBg; diff --git a/data/theme/default/widgetContextMenu.vert b/data/theme/default/widgetContextMenu.vert index 6ecb88e2..f721d1fe 100644 --- a/data/theme/default/widgetContextMenu.vert +++ b/data/theme/default/widgetContextMenu.vert @@ -17,39 +17,9 @@ uniform mat4 EW_MatrixTransformation; // output : varying vec2 v_position; // This will be passed into the fragment shader. -varying vec4 v_colorTansition; - -// internal : -vec4 S_colorFg[4]; void main(void) { - S_colorFg[0] = vec4(1.0,1.0,1.0,0.8); - S_colorFg[1] = vec4(0.7,0.0,0.0,0.4); - S_colorFg[2] = vec4(0.0,0.0,0.7,0.4); - S_colorFg[3] = vec4(0.0,0.7,0.0,0.4); - gl_Position = EW_MatrixTransformation * vec4(EW_coord2d, 0.0, 1.0); // transmit position of the curent element (intermolated ...) v_position = EW_coord2d; - - vec4 colorOld = S_colorFg[0]; - if(EW_status.stateOld==1) { - colorOld = S_colorFg[1]; - } else if(EW_status.stateOld==2) { - colorOld = S_colorFg[2]; - } else if(EW_status.stateOld==3) { - colorOld = S_colorFg[3]; - } - vec4 colorNew = S_colorFg[0]; - if(EW_status.stateNew==1) { - colorNew = S_colorFg[1]; - } else if(EW_status.stateNew==2) { - colorNew = S_colorFg[2]; - } else if(EW_status.stateNew==3) { - colorNew = S_colorFg[3]; - } - - // note : int() is needed for the OpenGL ES platform - v_colorTansition = colorOld*(1.0-EW_status.transition) - + colorNew*EW_status.transition; } diff --git a/data/theme/default/widgetPopUp.conf b/data/theme/default/widgetPopUp.conf new file mode 100644 index 00000000..c53540ba --- /dev/null +++ b/data/theme/default/widgetPopUp.conf @@ -0,0 +1,8 @@ +# padding for the GUI +PaddingX=8 +PaddingY=8 +# change status in ms +ChangeTime=356 +# the associated openGL ES-2 program : +program=widgetPopUp.prog + diff --git a/data/theme/default/widgetPopUp.frag b/data/theme/default/widgetPopUp.frag new file mode 100644 index 00000000..1be52dba --- /dev/null +++ b/data/theme/default/widgetPopUp.frag @@ -0,0 +1,51 @@ +#ifdef GL_ES +precision mediump float; +precision mediump int; +#endif +struct displayProperty { + vec2 size; + vec2 origin; + vec2 insidePos; + vec2 insideSize; +}; + + +uniform displayProperty EW_widgetProperty; + + +// transmit from the vertex shader +varying vec2 v_position; // interpolated position ... + +// internal static define +vec4 S_colorBg = vec4(0.5,0.5,0.5,0.8); +vec4 S_colorFg = vec4(1.0,1.0,1.0,0.8); +vec4 S_colorBorder = vec4(0.0,0.0,0.0,1.0); +float S_sizePadding = 1.0; +float S_sizeBorder = 3.0; + +void main(void) { + // prevent origin moving ... + vec2 position = v_position - EW_widgetProperty.insidePos; + float specialBorder = S_sizeBorder+S_sizePadding; + vec2 endStart = EW_widgetProperty.insideSize - vec2(S_sizePadding) - vec2(S_sizeBorder); + vec2 endStop = EW_widgetProperty.insideSize - vec2(S_sizePadding); + if( position.x> S_sizePadding + && position.y> S_sizePadding + && position.x<= endStop.x + && position.y<= endStop.y + ) { + if( position.x<= specialBorder + || position.y<= specialBorder + || position.x> endStart.x + || position.y> endStart.y + ) { + gl_FragColor = S_colorBorder; + } else { + // note : int() is needed for the OpenGL ES platform + gl_FragColor = S_colorFg; + } + } else { + gl_FragColor = S_colorBg; + } +} + diff --git a/data/theme/default/widgetPopUp.vert b/data/theme/default/widgetPopUp.vert new file mode 100644 index 00000000..f721d1fe --- /dev/null +++ b/data/theme/default/widgetPopUp.vert @@ -0,0 +1,25 @@ +#ifdef GL_ES +precision mediump float; +precision mediump int; +#endif + +struct widgetStateProperty { + int stateOld; + int stateNew; + float transition; +}; + +uniform widgetStateProperty EW_status; + +// Input : +attribute vec2 EW_coord2d; +uniform mat4 EW_MatrixTransformation; + +// output : +varying vec2 v_position; // This will be passed into the fragment shader. + +void main(void) { + gl_Position = EW_MatrixTransformation * vec4(EW_coord2d, 0.0, 1.0); + // transmit position of the curent element (intermolated ...) + v_position = EW_coord2d; +} diff --git a/data/theme/rounded/widgetButton.frag b/data/theme/rounded/widgetButton.frag index 211c5b5c..c4839040 100644 --- a/data/theme/rounded/widgetButton.frag +++ b/data/theme/rounded/widgetButton.frag @@ -22,10 +22,10 @@ uniform widgetStateProperty EW_status; // transmit from the vertex shader varying vec2 v_position; // interpolated position ... +varying vec4 v_colorTansition; // internal static define vec4 S_colorBg = vec4(0.0); -vec4 S_colorFg = vec4(0.5,0.5,0.5,0.3); vec4 S_colorBorder = vec4(0.0,0.0,0.0,1.0); float S_sizePadding = 3.0; // must not be NULL float S_sizeBorder = 1.0; //==> this id for 1 px border @@ -59,7 +59,7 @@ void main(void) { // set Background gl_FragColor = S_colorBg; // set foreground - gl_FragColor = gl_FragColor*tmpVal + S_colorFg*(1.0-tmpVal); + gl_FragColor = gl_FragColor*tmpVal + v_colorTansition*(1.0-tmpVal); // set border float tmpVal2 = abs(tmpVal-0.5)*2.0; gl_FragColor = gl_FragColor*tmpVal2 + S_colorBorder*(1.0-tmpVal2); diff --git a/data/theme/rounded/widgetButton.prog b/data/theme/rounded/widgetButton.prog deleted file mode 100644 index a6c7b7f8..00000000 --- a/data/theme/rounded/widgetButton.prog +++ /dev/null @@ -1,2 +0,0 @@ -widgetButton.vert -widgetButton.frag \ No newline at end of file diff --git a/data/theme/rounded/widgetButton.vert b/data/theme/rounded/widgetButton.vert index 1b0652d7..45fd4957 100644 --- a/data/theme/rounded/widgetButton.vert +++ b/data/theme/rounded/widgetButton.vert @@ -3,15 +3,54 @@ precision mediump float; precision mediump int; #endif +struct widgetStateProperty { + int stateOld; + int stateNew; + float transition; +}; + +uniform widgetStateProperty EW_status; + // Input : attribute vec2 EW_coord2d; uniform mat4 EW_MatrixTransformation; // output : varying vec2 v_position; // This will be passed into the fragment shader. +varying vec4 v_colorTansition; + +// internal : +vec4 S_colorFg[4]; void main(void) { + + S_colorFg[0] = vec4(0.5,0.5,0.5,0.3); + S_colorFg[1] = vec4(0.7,0.0,0.0,0.4); + S_colorFg[2] = vec4(0.0,0.0,0.7,0.4); + S_colorFg[3] = vec4(0.0,0.7,0.0,0.4); + gl_Position = EW_MatrixTransformation * vec4(EW_coord2d, 0.0, 1.0); // transmit position of the curent element (intermolated ...) v_position = EW_coord2d; + + vec4 colorOld = S_colorFg[0]; + if(EW_status.stateOld==1) { + colorOld = S_colorFg[1]; + } else if(EW_status.stateOld==2) { + colorOld = S_colorFg[2]; + } else if(EW_status.stateOld==3) { + colorOld = S_colorFg[3]; + } + vec4 colorNew = S_colorFg[0]; + if(EW_status.stateNew==1) { + colorNew = S_colorFg[1]; + } else if(EW_status.stateNew==2) { + colorNew = S_colorFg[2]; + } else if(EW_status.stateNew==3) { + colorNew = S_colorFg[3]; + } + + // note : int() is needed for the OpenGL ES platform + v_colorTansition = colorOld*(1.0-EW_status.transition) + + colorNew*EW_status.transition; } diff --git a/data/theme/rounded/widgetContextMenu.conf b/data/theme/rounded/widgetContextMenu.conf new file mode 100644 index 00000000..bf88beba --- /dev/null +++ b/data/theme/rounded/widgetContextMenu.conf @@ -0,0 +1,15 @@ +# padding for the GUI +PaddingX=13 +PaddingY=7 +# change status in ms +ChangeTime=356 +# if an image is needed : +#image=plop.png +# the associated openGL ES-2 program : +program=widgetContextMenu.prog + + + + + + diff --git a/data/theme/rounded/widgetContextMenu.frag b/data/theme/rounded/widgetContextMenu.frag new file mode 100644 index 00000000..f48577eb --- /dev/null +++ b/data/theme/rounded/widgetContextMenu.frag @@ -0,0 +1,68 @@ +#ifdef GL_ES +precision mediump float; +precision mediump int; +#endif + +struct displayProperty { + vec2 size; + vec2 origin; + vec2 insidePos; + vec2 insideSize; +}; + +struct widgetStateProperty { + int stateOld; + int stateNew; + float transition; +}; + +uniform displayProperty EW_widgetProperty; + +uniform widgetStateProperty EW_status; + +// transmit from the vertex shader +varying vec2 v_position; // interpolated position ... + +// internal static define +vec4 S_colorBg = vec4(0.0); +vec4 S_colorFg = vec4(1.0,1.0,1.0,0.8); +vec4 S_colorBorder = vec4(0.0,0.0,0.0,1.0); +float S_sizePadding = 3.0; // must not be NULL +float S_sizeBorder = 2.0; //==> this id for 1 px border +float S_roundedRatio = 10.0; + + +void main(void) { + // position form center : + vec2 ratio = EW_widgetProperty.size / 2.0; + + // prevent origin moving ... + vec2 position = v_position - EW_widgetProperty.origin; + + /* generate a central simetry + ____ _____ + \ / + \ / + \ / + - + */ + vec2 positionCenter = abs(position-ratio); + // This is a clip to remove center of the display of the widget + vec2 ratioLow = ratio - (S_roundedRatio+S_sizePadding); + vec2 circleMode = smoothstep(ratioLow, ratio, positionCenter)*(S_roundedRatio+S_sizePadding); + // Calculate the distance of the radius + float tmpDist = sqrt(dot(circleMode,circleMode)); + // Generate the internal rampe for the the imput drawing + float tmpVal = smoothstep(S_roundedRatio - S_sizeBorder*1.5, + S_roundedRatio + S_sizeBorder*1.5, + tmpDist); + // set Background + gl_FragColor = S_colorBg; + // set foreground + gl_FragColor = gl_FragColor*tmpVal + S_colorFg*(1.0-tmpVal); + // set border + float tmpVal2 = abs(tmpVal-0.5)*2.0; + gl_FragColor = gl_FragColor*tmpVal2 + S_colorBorder*(1.0-tmpVal2); + +} + diff --git a/data/theme/rounded/widgetContextMenu.vert b/data/theme/rounded/widgetContextMenu.vert new file mode 100644 index 00000000..1b0652d7 --- /dev/null +++ b/data/theme/rounded/widgetContextMenu.vert @@ -0,0 +1,17 @@ +#ifdef GL_ES +precision mediump float; +precision mediump int; +#endif + +// Input : +attribute vec2 EW_coord2d; +uniform mat4 EW_MatrixTransformation; + +// output : +varying vec2 v_position; // This will be passed into the fragment shader. + +void main(void) { + gl_Position = EW_MatrixTransformation * vec4(EW_coord2d, 0.0, 1.0); + // transmit position of the curent element (intermolated ...) + v_position = EW_coord2d; +} diff --git a/data/theme/rounded/widgetEntry.prog b/data/theme/rounded/widgetEntry.prog deleted file mode 100644 index 464185b4..00000000 --- a/data/theme/rounded/widgetEntry.prog +++ /dev/null @@ -1,2 +0,0 @@ -widgetEntry.vert -widgetEntry.frag \ No newline at end of file diff --git a/data/theme/rounded/widgetPopUp.conf b/data/theme/rounded/widgetPopUp.conf new file mode 100644 index 00000000..918bd7cb --- /dev/null +++ b/data/theme/rounded/widgetPopUp.conf @@ -0,0 +1,15 @@ +# padding for the GUI +PaddingX=13 +PaddingY=7 +# change status in ms +ChangeTime=356 +# if an image is needed : +#image=plop.png +# the associated openGL ES-2 program : +program=widgetPopUp.prog + + + + + + diff --git a/data/theme/rounded/widgetPopUp.frag b/data/theme/rounded/widgetPopUp.frag new file mode 100644 index 00000000..0cfb9bba --- /dev/null +++ b/data/theme/rounded/widgetPopUp.frag @@ -0,0 +1,68 @@ +#ifdef GL_ES +precision mediump float; +precision mediump int; +#endif + +struct displayProperty { + vec2 size; + vec2 origin; + vec2 insidePos; + vec2 insideSize; +}; + +struct widgetStateProperty { + int stateOld; + int stateNew; + float transition; +}; + +uniform displayProperty EW_widgetProperty; + +uniform widgetStateProperty EW_status; + +// transmit from the vertex shader +varying vec2 v_position; // interpolated position ... + +// internal static define +vec4 S_colorBg = vec4(0.5,0.5,0.5,0.8); +vec4 S_colorFg = vec4(1.0,1.0,1.0,0.8); +vec4 S_colorBorder = vec4(0.0,0.0,0.0,1.0); +float S_sizePadding = 3.0; // must not be NULL +float S_sizeBorder = 2.0; //==> this id for 1 px border +float S_roundedRatio = 10.0; + + +void main(void) { + // position form center : + vec2 ratio = EW_widgetProperty.insideSize / 2.0; + + // prevent origin moving ... + vec2 position = v_position - EW_widgetProperty.insidePos; + + /* generate a central simetry + ____ _____ + \ / + \ / + \ / + - + */ + vec2 positionCenter = abs(position-ratio); + // This is a clip to remove center of the display of the widget + vec2 ratioLow = ratio - (S_roundedRatio+S_sizePadding); + vec2 circleMode = smoothstep(ratioLow, ratio, positionCenter)*(S_roundedRatio+S_sizePadding); + // Calculate the distance of the radius + float tmpDist = sqrt(dot(circleMode,circleMode)); + // Generate the internal rampe for the the imput drawing + float tmpVal = smoothstep(S_roundedRatio - S_sizeBorder*1.5, + S_roundedRatio + S_sizeBorder*1.5, + tmpDist); + // set Background + gl_FragColor = S_colorBg; + // set foreground + gl_FragColor = gl_FragColor*tmpVal + S_colorFg*(1.0-tmpVal); + // set border + float tmpVal2 = abs(tmpVal-0.5)*2.0; + gl_FragColor = gl_FragColor*tmpVal2 + S_colorBorder*(1.0-tmpVal2); + +} + diff --git a/data/theme/rounded/widgetPopUp.vert b/data/theme/rounded/widgetPopUp.vert new file mode 100644 index 00000000..1b0652d7 --- /dev/null +++ b/data/theme/rounded/widgetPopUp.vert @@ -0,0 +1,17 @@ +#ifdef GL_ES +precision mediump float; +precision mediump int; +#endif + +// Input : +attribute vec2 EW_coord2d; +uniform mat4 EW_MatrixTransformation; + +// output : +varying vec2 v_position; // This will be passed into the fragment shader. + +void main(void) { + gl_Position = EW_MatrixTransformation * vec4(EW_coord2d, 0.0, 1.0); + // transmit position of the curent element (intermolated ...) + v_position = EW_coord2d; +} diff --git a/sources/ewol/widget/Button.h b/sources/ewol/widget/Button.h index a935ba84..33498e13 100644 --- a/sources/ewol/widget/Button.h +++ b/sources/ewol/widget/Button.h @@ -50,7 +50,7 @@ namespace widget { public: /** * @brief Constructor - * @param[in] _newLabel Button Label to display + * @param[in] _shaperName Shaper file properties */ Button(const etk::UString& _shaperName="THEME:GUI:widgetButton.conf"); /** diff --git a/sources/ewol/widget/PopUp.cpp b/sources/ewol/widget/PopUp.cpp index a8d0ec29..4eee6cd8 100644 --- a/sources/ewol/widget/PopUp.cpp +++ b/sources/ewol/widget/PopUp.cpp @@ -13,16 +13,11 @@ #undef __class__ #define __class__ "PopUp" -widget::PopUp::PopUp(void) +widget::PopUp::PopUp(const etk::UString& _shaperName) : + m_shaper(_shaperName) { m_userExpand.setValue(false, false); SetMinSize(ewol::Dimension(vec2(80,80),ewol::Dimension::Pourcent)); - - m_colorBackGroung = draw::color::white; - m_colorEmptyArea = draw::color::black; - m_colorEmptyArea.a = 0x7F; - m_colorBorder = draw::color::black; - m_colorBorder.a = 0x7F; } widget::PopUp::~PopUp(void) @@ -30,6 +25,12 @@ widget::PopUp::~PopUp(void) } +void widget::PopUp::SetShaperName(const etk::UString& _shaperName) +{ + m_shaper.SetSource(_shaperName); + MarkToRedraw(); +} + void widget::PopUp::CalculateSize(const vec2& _availlable) { @@ -61,37 +62,29 @@ void widget::PopUp::CalculateSize(const vec2& _availlable) MarkToRedraw(); } -void widget::PopUp::SystemDraw(const ewol::DrawProperty& _displayProp) -{ - ewol::Widget::SystemDraw(_displayProp); - if (NULL != m_subWidget) { - m_subWidget->SystemDraw(_displayProp); - } -} - void widget::PopUp::OnDraw(void) { - m_compositing.Draw(); + m_shaper.Draw(); } #define BORDER_SIZE_TMP (4) void widget::PopUp::OnRegenerateDisplay(void) { if (true == NeedRedraw()) { - m_compositing.Clear(); - m_compositing.SetColor(m_colorEmptyArea); - m_compositing.SetPos(vec3(0,0,0)); - m_compositing.RectangleWidth(vec3(m_size.x(), m_size.y(), 0)); - // set the area in white ... + m_shaper.Clear(); + vec2 padding = m_shaper.GetPadding(); if (NULL != m_subWidget) { vec2 tmpSize = m_subWidget->GetSize(); vec2 tmpOrigin = m_subWidget->GetOrigin(); - m_compositing.SetColor(m_colorBorder); - m_compositing.SetPos(vec3(tmpOrigin.x()-BORDER_SIZE_TMP, tmpOrigin.y()-BORDER_SIZE_TMP,0) ); - m_compositing.RectangleWidth(vec3(tmpSize.x()+2*BORDER_SIZE_TMP, tmpSize.y()+2*BORDER_SIZE_TMP, 0) ); - m_compositing.SetColor(m_colorBackGroung); - m_compositing.SetPos(vec3(tmpOrigin.x(), tmpOrigin.y(),0) ); - m_compositing.RectangleWidth(vec3(tmpSize.x(), tmpSize.y(), 0) ); + m_shaper.SetOrigin(vec2ClipInt32(m_origin)); + m_shaper.SetSize(vec2ClipInt32(m_size)); + m_shaper.SetInsidePos(vec2ClipInt32(tmpOrigin-padding)); + m_shaper.SetInsideSize(vec2ClipInt32(tmpSize + padding*2.0f)); + } else { + m_shaper.SetOrigin(vec2ClipInt32(m_origin)); + m_shaper.SetSize(vec2ClipInt32(m_size)); + m_shaper.SetInsidePos(vec2ClipInt32(m_origin+padding)); + m_shaper.SetInsideSize(vec2ClipInt32(m_size-padding*2.0f)); } } // SUBwIDGET GENERATION ... @@ -108,3 +101,5 @@ ewol::Widget* widget::PopUp::GetWidgetAtPos(const vec2& pos) } return this; } + + diff --git a/sources/ewol/widget/PopUp.h b/sources/ewol/widget/PopUp.h index 37a0b3bf..bd745817 100644 --- a/sources/ewol/widget/PopUp.h +++ b/sources/ewol/widget/PopUp.h @@ -15,13 +15,28 @@ #include #include #include +#include namespace widget { class PopUp : public widget::Container { + private: + ewol::Shaper m_shaper; //!< Compositing theme. public: - PopUp(void); + /** + * @brief Constructor + * @param[in] _shaperName Shaper file properties + */ + PopUp(const etk::UString& _shaperName="THEME:GUI:widgetPopUp.conf"); + /** + * @brief Destructor + */ virtual ~PopUp(void); + /** + * @brief Set the shaper name (use the contructer one this permit to not noad unused shaper) + * @param[in] _shaperName The new shaper filename + */ + void SetShaperName(const etk::UString& _shaperName); private: draw::Color m_colorBackGroung; draw::Color m_colorBorder; @@ -30,7 +45,6 @@ namespace widget { protected: // Derived function virtual void OnDraw(void); public: // Derived function - virtual void SystemDraw(const ewol::DrawProperty& _displayProp); virtual void OnRegenerateDisplay(void); virtual void CalculateSize(const vec2& _availlable); //virtual void CalculateMinMaxSize(void); diff --git a/sources/lutin_ewol.py b/sources/lutin_ewol.py index 053fad31..3fff24d5 100755 --- a/sources/lutin_ewol.py +++ b/sources/lutin_ewol.py @@ -119,9 +119,12 @@ def Create(target): myModule.CopyFolder('../data/theme/default/widgetEntry.*','theme/default') myModule.CopyFolder('../data/theme/rounded/widgetEntry.*','theme/rounded') - myModule.CopyFolder('../data/theme/default/widgetContextMenu.*','theme/default') myModule.CopyFolder('../data/theme/default/widgetButton.*','theme/default') myModule.CopyFolder('../data/theme/rounded/widgetButton.*','theme/rounded') + myModule.CopyFolder('../data/theme/default/widgetContextMenu.*','theme/default') + myModule.CopyFolder('../data/theme/rounded/widgetContextMenu.*','theme/rounded') + myModule.CopyFolder('../data/theme/default/widgetPopUp.*','theme/default') + myModule.CopyFolder('../data/theme/rounded/widgetPopUp.*','theme/rounded') myModule.CopyFolder('../data/textured.*','') myModule.CopyFolder('../data/texturedNoMaterial.*','') myModule.CopyFolder('../data/text.*','')