[DEV] add shader display for the pop-up element and dynamic event on the button rounded

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;

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;
 }

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
+

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;
+	}
+}
+

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;
+}

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);

data/theme/rounded/widgetButton.prog

@@ -1,2 +0,0 @@
-widgetButton.vert
-widgetButton.frag

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;
 }

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
+
+
+
+
+
+

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);
+	
+}
+

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;
+}

data/theme/rounded/widgetEntry.prog

@@ -1,2 +0,0 @@
-widgetEntry.vert
-widgetEntry.frag

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
+
+
+
+
+
+

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);
+	
+}
+

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;
+}

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");
 			/**

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_shaper.Clear();
-		m_compositing.SetColor(m_colorEmptyArea);
+		vec2 padding = m_shaper.GetPadding();
-		m_compositing.SetPos(vec3(0,0,0));
-		m_compositing.RectangleWidth(vec3(m_size.x(), m_size.y(), 0));
-		// set the area in white ...
 		if (NULL != m_subWidget) {
 			vec2 tmpSize = m_subWidget->GetSize();
 			vec2 tmpOrigin = m_subWidget->GetOrigin();
-			m_compositing.SetColor(m_colorBorder);
+			m_shaper.SetOrigin(vec2ClipInt32(m_origin));
-			m_compositing.SetPos(vec3(tmpOrigin.x()-BORDER_SIZE_TMP, tmpOrigin.y()-BORDER_SIZE_TMP,0) );
+			m_shaper.SetSize(vec2ClipInt32(m_size));
-			m_compositing.RectangleWidth(vec3(tmpSize.x()+2*BORDER_SIZE_TMP, tmpSize.y()+2*BORDER_SIZE_TMP, 0) );
+			m_shaper.SetInsidePos(vec2ClipInt32(tmpOrigin-padding));
-			m_compositing.SetColor(m_colorBackGroung);
+			m_shaper.SetInsideSize(vec2ClipInt32(tmpSize + padding*2.0f));
-			m_compositing.SetPos(vec3(tmpOrigin.x(), tmpOrigin.y(),0) );
+		} else {
-			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(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;
 }
+
+

sources/ewol/widget/PopUp.h

@@ -15,13 +15,28 @@
 #include <ewol/widget/Widget.h>
 #include <ewol/widget/Container.h>
 #include <ewol/compositing/Drawing.h>
+#include <ewol/compositing/Shaper.h>
 
 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);

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.*','')