[DEV] normalize scrolledWidget shaper

data/theme/color/black/Image.json

@@ -0,0 +1,5 @@
+{
+	"color": [
+		{ name:"foreground",         color:"#FFFF" },
+	]
+}

data/theme/color/black/WidgetScrolled.json

@@ -0,0 +1,8 @@
+{
+	"color": [
+		{ name:"EW_background",         color:"#0004" },
+		{ name:"EW_border",             color:"#FFF" },
+		{ name:"EW_foreground",         color:"#FFF9" },
+		{ name:"EW_foregroundPressed",  color:"#6006" },
+	]
+}

data/theme/color/white/Image.json

@@ -0,0 +1,5 @@
+{
+	"color": [
+		{ name:"foreground",         color:"#000F" },
+	]
+}

data/theme/color/white/WidgetScrolled.json

@@ -0,0 +1,8 @@
+{
+	"color": [
+		{ name:"EW_background",         color:"#FFF4" },
+		{ name:"EW_border",             color:"#000" },
+		{ name:"EW_foreground",         color:"#4449" },
+		{ name:"EW_foregroundPressed",  color:"#B006" },
+	]
+}

data/theme/shape/round/WidgetScrolled.conf

@@ -0,0 +1,15 @@
+# padding for the GUI
+PaddingX=16
+PaddingY=16
+# change status in ms
+ChangeTime=200
+# the associated openGL ES-2 program :
+program=THEME:GUI:WidgetScrolled.prog
+# the associated color theme
+color=THEME:COLOR:WidgetScrolled.json
+
+
+
+
+
+

data/theme/shape/round/WidgetScrolled.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 ...
+varying vec4  v_colorTansition;
+varying vec4  v_colorBorder;
+varying vec4  v_colorBackground;
+
+// internal static define
+float S_sizePadding  =  2.0; // must not be NULL
+float S_sizeBorder   =  1.3; //==> this id for 1 px border
+float S_roundedRatio =  6.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 = float(int(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 = v_colorBackground;
+	// set foreground
+	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 + v_colorBorder*(1.0-tmpVal2);
+	
+}
+

data/theme/shape/round/WidgetScrolled.vert

@@ -0,0 +1,47 @@
+#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;
+uniform vec4   EW_border;
+uniform vec4   EW_background;
+uniform vec4   EW_foreground;
+uniform vec4   EW_foregroundPressed;
+
+// output :
+varying vec2  v_position;       // This will be passed into the fragment shader.
+varying vec4  v_colorTansition;
+varying vec4  v_colorBorder;
+varying vec4  v_colorBackground;
+
+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;
+	
+	vec4 colorOld = EW_foreground;
+	if(EW_status.stateOld == 1) {
+		colorOld = EW_foregroundPressed;
+	}
+	vec4 colorNew = EW_foreground;
+	if(EW_status.stateNew == 1) {
+		colorNew = EW_foregroundPressed;
+	}
+	
+	// note : int() is needed for the OpenGL ES platform
+	v_colorTansition =   colorOld * (1.0 - EW_status.transition)
+	                   + colorNew * EW_status.transition;
+	v_colorBorder = EW_border;
+	v_colorBackground = EW_background;
+}

data/theme/shape/square/WidgetScrolled.conf

@@ -0,0 +1,14 @@
+# padding for the GUI
+PaddingX=15
+PaddingY=15
+# change status in ms
+ChangeTime=200
+# the associated openGL ES-2 program :
+program=THEME:GUI:WidgetScrolled.prog
+# the associated color theme
+color=THEME:COLOR:WidgetScrolled.json
+
+
+
+
+

data/theme/shape/square/WidgetScrolled.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 ...
+varying vec4 v_colorTansition;
+varying vec4 v_colorBorder;
+varying vec4 v_colorBackground;
+
+// internal static define
+float S_sizePadding = 3.0;
+float S_sizeBorder = 1.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 = v_colorBorder;
+		} else {
+			// note : int() is needed for the OpenGL ES platform
+			gl_FragColor = v_colorTansition;
+		}
+	} else {
+		gl_FragColor = v_colorBackground;
+	}
+}
+

data/theme/shape/square/WidgetScrolled.vert

@@ -0,0 +1,47 @@
+#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;
+uniform vec4 EW_border;
+uniform vec4 EW_background;
+uniform vec4 EW_foreground;
+uniform vec4 EW_foregroundPressed;
+
+// output :
+varying vec2 v_position; // This will be passed into the fragment shader.
+varying vec4 v_colorTansition;
+varying vec4 v_colorBorder;
+varying vec4 v_colorBackground;
+
+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;
+	
+	vec4 colorOld = EW_foreground;
+	if(EW_status.stateOld == 1) {
+		colorOld = EW_foregroundPressed;
+	}
+	vec4 colorNew = EW_foreground;
+	if(EW_status.stateNew == 1) {
+		colorNew = EW_foregroundPressed;
+	}
+	
+	// note : int() is needed for the OpenGL ES platform
+	v_colorTansition =   colorOld * (1.0 - EW_status.transition)
+	                   + colorNew * EW_status.transition;
+	v_colorBorder = EW_border;
+	v_colorBackground = EW_background;
+}

sources/ewol/compositing/Shaper.cpp

@@ -181,6 +181,11 @@ void ewol::compositing::Shaper::draw(bool _disableDepthTest) {
 
 void ewol::compositing::Shaper::clear(void) {
 	// nothing to do ...
+	m_propertySize = vec2(0,0);
+	m_propertyOrigin = vec2(0,0);
+	m_propertyInsidePosition = vec2(0,0);
+	m_propertyInsideSize = vec2(0,0);
+	memset(m_coord, 0, sizeof(m_coord));
 }
 
 bool ewol::compositing::Shaper::changeStatusIn(int32_t _newStatusId) {

sources/ewol/widget/Image.cpp

@@ -34,6 +34,8 @@ const char * const ewol::widget::Image::configSource = "src";
 const char * const ewol::widget::Image::configDistanceField = "distance-field";
 
 ewol::widget::Image::Image(const std::string& _file, const ewol::Dimension& _border) :
+  m_colorProperty(NULL),
+  m_colorId(-1),
   m_imageSize(vec2(0,0)),
   m_keepRatio(true) {
 	addObjectType("ewol::widget::Image");
@@ -43,9 +45,16 @@ ewol::widget::Image::Image(const std::string& _file, const ewol::Dimension& _bor
 	registerConfig(configBorder, "Dimension", NULL, "Border of the image");
 	registerConfig(configSource, "string", "Image source path");
 	registerConfig(configDistanceField, "bool", "Distance field mode");
+	m_colorProperty = ewol::resource::ColorFile::keep("THEME:COLOR:Image.json");
+	if (m_colorProperty != NULL) {
+		m_colorId = m_colorProperty->request("foreground");
+	}
 	set(_file, _border);
 }
 
+ewol::widget::Image::~Image(void) {
+	ewol::resource::ColorFile::release(m_colorProperty);
+}
 
 void ewol::widget::Image::setFile(const std::string& _file) {
 	EWOL_VERBOSE("Set Image : " << _file);
@@ -109,7 +118,9 @@ void ewol::widget::Image::onRegenerateDisplay(void) {
 	if (true == needRedraw()) {
 		// remove data of the previous composition :
 		m_compositing.clear();
-		
+		if (m_colorProperty != NULL) {
+			m_compositing.setColor(m_colorProperty->get(m_colorId));
+		}
 		// calculate the new position and size :
 		vec2 imageBoder = m_border.getPixel();
 		vec2 origin = imageBoder;

sources/ewol/widget/Image.h

@@ -14,6 +14,7 @@
 #include <draw/Color.h>
 #include <ewol/widget/Widget.h>
 #include <ewol/compositing/Image.h>
+#include <ewol/resource/ColorFile.h>
 #include <ewol/widget/Manager.h>
 
 namespace ewol {
@@ -38,6 +39,8 @@ namespace ewol {
 				static void init(ewol::widget::Manager& _widgetManager);
 			protected:
 				ewol::compositing::Image m_compositing; //!< compositing element of the image.
+				ewol::resource::ColorFile* m_colorProperty; //!< theme color property
+				int32_t m_colorId; //!< Color of the image.
 			public:
 				/**
 				 * @brief 
@@ -47,7 +50,7 @@ namespace ewol {
 				/**
 				 * @brief 
 				 */
-				virtual ~Image(void) { };
+				virtual ~Image(void);
 				/**
 				 * @brief set All the configuration of the current image
 				 * @param[in] _file Filaneme of the new image

sources/ewol/widget/Label.cpp

@@ -42,6 +42,10 @@ ewol::widget::Label::Label(std::string _newLabel) :
 	registerConfig(configValue, "string", NULL, "displayed value string"); // TODO : do not store in attibute...
 }
 
+ewol::widget::Label::~Label(void) {
+	ewol::resource::ColorFile::release(m_colorProperty);
+}
+
 void ewol::widget::Label::calculateMinMaxSize(void) {
 	vec2 tmpMax = m_userMaxSize.getPixel();
 	vec2 tmpMin = m_userMinSize.getPixel();

sources/ewol/widget/Label.h

@@ -46,9 +46,7 @@ namespace ewol {
 				/**
 				 * @brief destructor
 				 */
-				virtual ~Label(void) {
+				virtual ~Label(void);
-					
-				};
 				/**
 				 * @brief change the label displayed
 				 * @param[in] _newLabel The displayed decorated text.

sources/ewol/widget/WidgetScrolled.cpp

@@ -15,7 +15,9 @@
 
 
 
-ewol::widget::WidgetScrooled::WidgetScrooled(void) {
+ewol::widget::WidgetScrooled::WidgetScrooled(const std::string& _shaperName) :
+	m_shaperH(_shaperName),
+	m_shaperV(_shaperName) {
 	addObjectType("ewol::widget::WidgetScrooled");
 	m_originScrooled.setValue(0,0);
 	m_pixelScrolling = 20;
@@ -36,39 +38,38 @@ ewol::widget::WidgetScrooled::~WidgetScrooled(void) {
 }
 
 
-#define SCROLL_BAR_SPACE      (15)
-
 void ewol::widget::WidgetScrooled::onRegenerateDisplay(void) {
-	m_drawing.clear();
+	m_shaperH.clear();
+	m_shaperV.clear();
 	if (m_scroollingMode == scroolModeGame) {
-		
+		// nothing to do ...
-	} else {
+		return;
-		m_drawing.setColor(0xFF00007F);
+	}
-		m_drawing.setThickness(1);
+	if(    m_size.y() < m_maxSize.y()
-		if(    m_size.y() < m_maxSize.y()
+	    || m_originScrooled.y()!=0) {
-		    || m_originScrooled.y()!=0) {
+		vec2 padding = m_shaperV.getPadding();
-			m_drawing.setPos(vec3(m_size.x()-(SCROLL_BAR_SPACE/2), 0, 0) );
+		m_shaperV.setOrigin(vec2(m_size.x()-padding.x(), 0));
-			m_drawing.lineTo(vec3(m_size.x()-(SCROLL_BAR_SPACE/2), m_size.y(), 0 ) );
+		m_shaperV.setSize(vec2(padding.x(), m_size.y()));
-			float lenScrollBar = m_size.y()*m_size.y() / m_maxSize.y();
+		float lenScrollBar = m_size.y()*m_size.y() / m_maxSize.y();
-			lenScrollBar = etk_avg(10, lenScrollBar, m_size.y());
+		lenScrollBar = etk_avg(10, lenScrollBar, m_size.y());
-			float originScrollBar = m_originScrooled.y() / (m_maxSize.y()-m_size.y()*m_limitScrolling);
+		float originScrollBar = m_originScrooled.y() / (m_maxSize.y()-m_size.y()*m_limitScrolling);
-			originScrollBar = etk_avg(0.0, originScrollBar, 1.0);
+		originScrollBar = etk_avg(0.0, originScrollBar, 1.0);
-			originScrollBar *= (m_size.y()-lenScrollBar);
+		originScrollBar *= (m_size.y()-lenScrollBar);
-			m_drawing.setPos(vec3(m_size.x()-SCROLL_BAR_SPACE, m_size.y() - originScrollBar - lenScrollBar, 0) );
+		m_shaperV.setInsidePos(vec2(m_size.x()-padding.x(), m_size.y() - originScrollBar - lenScrollBar));
-			m_drawing.rectangleWidth(vec3(SCROLL_BAR_SPACE, lenScrollBar, 0));
+		m_shaperV.setInsideSize(vec2(padding.x(), lenScrollBar));
-		}
+	}
-		if(    m_size.x() < m_maxSize.x()
+	if(    m_size.x() < m_maxSize.x()
-		    || m_originScrooled.x()!=0) {
+	    || m_originScrooled.x()!=0) {
-			m_drawing.setPos(vec3(0, (SCROLL_BAR_SPACE/2), 0) );
+		vec2 padding = m_shaperH.getPadding();
-			m_drawing.lineTo(vec3(m_size.x()-SCROLL_BAR_SPACE, (SCROLL_BAR_SPACE/2), 0 ) );
+		m_shaperH.setOrigin(vec2(0, 0));
-			float lenScrollBar = (m_size.x()-SCROLL_BAR_SPACE)*(m_size.x()-SCROLL_BAR_SPACE) / m_maxSize.x();
+		m_shaperH.setSize(vec2(m_size.x()-padding.x(), padding.y()));
-			lenScrollBar = etk_avg(10, lenScrollBar, (m_size.x()-SCROLL_BAR_SPACE));
+		float lenScrollBar = (m_size.x()-padding.x())*(m_size.x()-padding.x()) / m_maxSize.x();
-			float originScrollBar = m_originScrooled.x() / (m_maxSize.x()-m_size.x()*m_limitScrolling);
+		lenScrollBar = etk_avg(10, lenScrollBar, (m_size.x()-padding.x()));
-			originScrollBar = etk_avg(0.0, originScrollBar, 1.0);
+		float originScrollBar = m_originScrooled.x() / (m_maxSize.x()-m_size.x()*m_limitScrolling);
-			originScrollBar *= (m_size.x()-SCROLL_BAR_SPACE-lenScrollBar);
+		originScrollBar = etk_avg(0.0, originScrollBar, 1.0);
-			m_drawing.setPos(vec3(originScrollBar, 0, 0) );
+		originScrollBar *= (m_size.x()-padding.x()-lenScrollBar);
-			m_drawing.rectangleWidth(vec3(lenScrollBar, SCROLL_BAR_SPACE, 0) );
+		m_shaperH.setInsidePos(vec2(originScrollBar, 0));
-		}
+		m_shaperH.setInsideSize(vec2(lenScrollBar, padding.y()));
 	}
 }
 
@@ -77,6 +78,8 @@ bool ewol::widget::WidgetScrooled::onEventInput(const ewol::event::Input& _event
 	vec2 relativePos = relativePosition(_event.getPos());
 	// corection due to the open Gl invertion ...
 	relativePos.setY(m_size.y() - relativePos.y());
+	vec2 paddingV = m_shaperV.getPadding();
+	vec2 paddingH = m_shaperH.getPadding();
 	if (m_scroollingMode == scroolModeNormal) {
 		if (    _event.getType() == ewol::key::typeMouse
 		     && (    m_highSpeedType == ewol::key::typeUnknow
@@ -84,30 +87,30 @@ bool ewol::widget::WidgetScrooled::onEventInput(const ewol::event::Input& _event
 			if (    _event.getId() == 1
 			     && _event.getStatus() == ewol::key::statusDown) {
 				// check if selected the scrolling position whth the scrolling bar ...
-				if (relativePos.x() >= (m_size.x()-SCROLL_BAR_SPACE)) {
+				if (relativePos.x() >= (m_size.x()-paddingV.x())) {
 					if(    m_size.y() < m_maxSize.y()
 					    || m_originScrooled.y() != 0) {
 						m_highSpeedMode = ewol::widget::Scroll::speedModeEnableVertical;
 						m_highSpeedType = ewol::key::typeMouse;
 						m_highSpeedStartPos.setX(relativePos.x());
-						m_highSpeedStartPos.setY(m_originScrooled.y() / m_maxSize.y() * (m_size.y()-SCROLL_BAR_SPACE*2));
+						m_highSpeedStartPos.setY(m_originScrooled.y() / m_maxSize.y() * (m_size.y()-paddingV.y()*2));
 						m_highSpeedButton = 1;
 						// force direct scrolling in this case
-						m_originScrooled.setY((int32_t)(m_maxSize.y() * (relativePos.y()-SCROLL_BAR_SPACE) / (m_size.y()-SCROLL_BAR_SPACE*2)));
+						m_originScrooled.setY((int32_t)(m_maxSize.y() * (relativePos.y()-paddingV.y()) / (m_size.y()-paddingV.y()*2)));
 						m_originScrooled.setY(etk_avg(0, m_originScrooled.y(), (m_maxSize.y() - m_size.y()*m_limitScrolling)));
 						markToRedraw();
 						return true;
 					}
-				} else if (relativePos.y() >= (m_size.y()-SCROLL_BAR_SPACE)) {
+				} else if (relativePos.y() >= (m_size.y()-paddingH.y())) {
 					if(    m_size.x() < m_maxSize.x()
 					    || m_originScrooled.x()!=0) {
 						m_highSpeedMode = ewol::widget::Scroll::speedModeEnableHorizontal;
 						m_highSpeedType = ewol::key::typeMouse;
-						m_highSpeedStartPos.setX(m_originScrooled.x() / m_maxSize.x() * (m_size.x()-SCROLL_BAR_SPACE*2));
+						m_highSpeedStartPos.setX(m_originScrooled.x() / m_maxSize.x() * (m_size.x()-paddingH.x()*2));
 						m_highSpeedStartPos.setY(relativePos.y());
 						m_highSpeedButton = 1;
 						// force direct scrolling in this case
-						m_originScrooled.setX((int32_t)(m_maxSize.x() * (relativePos.x()-SCROLL_BAR_SPACE) / (m_size.x()-SCROLL_BAR_SPACE*2)));
+						m_originScrooled.setX((int32_t)(m_maxSize.x() * (relativePos.x()-paddingH.x()) / (m_size.x()-paddingH.x()*2)));
 						m_originScrooled.setY(etk_avg(0, m_originScrooled.x(), (m_maxSize.x() - m_size.x()*m_limitScrolling)));
 						markToRedraw();
 						return true;
@@ -238,9 +241,9 @@ bool ewol::widget::WidgetScrooled::onEventInput(const ewol::event::Input& _event
 							}
 						}
 						if (m_highSpeedMode == ewol::widget::Scroll::speedModeEnableHorizontal) {
-							m_highSpeedStartPos.setX(m_originScrooled.x() / m_maxSize.x() * (m_size.x()-SCROLL_BAR_SPACE*2));
+							m_highSpeedStartPos.setX(m_originScrooled.x() / m_maxSize.x() * (m_size.x()-paddingV.x()*2));
 						} else {
-							m_highSpeedStartPos.setY(m_originScrooled.y() / m_maxSize.y() * (m_size.y()-SCROLL_BAR_SPACE*2));
+							m_highSpeedStartPos.setY(m_originScrooled.y() / m_maxSize.y() * (m_size.y()-paddingV.y()*2));
 						}
 						markToRedraw();
 					}
@@ -249,14 +252,14 @@ bool ewol::widget::WidgetScrooled::onEventInput(const ewol::event::Input& _event
 				}
 				if (    m_highSpeedMode == ewol::widget::Scroll::speedModeEnableHorizontal
 				     && _event.getStatus() == ewol::key::statusMove) {
-					m_originScrooled.setX((int32_t)(m_maxSize.x() * (relativePos.x()-SCROLL_BAR_SPACE) / (m_size.x()-SCROLL_BAR_SPACE*2)));
+					m_originScrooled.setX((int32_t)(m_maxSize.x() * (relativePos.x()-paddingH.x()) / (m_size.x()-paddingH.x()*2)));
 					m_originScrooled.setX(etk_avg(0, m_originScrooled.x(), (m_maxSize.x() - m_size.x()*m_limitScrolling)));
 					markToRedraw();
 					return true;
 				}
 				if (    m_highSpeedMode == ewol::widget::Scroll::speedModeEnableVertical
 				     && _event.getStatus() == ewol::key::statusMove) {
-					m_originScrooled.setY((int32_t)(m_maxSize.y() * (relativePos.y()-SCROLL_BAR_SPACE) / (m_size.y()-SCROLL_BAR_SPACE*2)));
+					m_originScrooled.setY((int32_t)(m_maxSize.y() * (relativePos.y()-paddingV.y()) / (m_size.y()-paddingV.y()*2)));
 					m_originScrooled.setY(etk_avg(0, m_originScrooled.y(), (m_maxSize.y() - m_size.y()*m_limitScrolling)));
 					markToRedraw();
 					return true;
@@ -392,7 +395,8 @@ bool ewol::widget::WidgetScrooled::onEventInput(const ewol::event::Input& _event
 
 
 void ewol::widget::WidgetScrooled::onDraw(void) {
-	m_drawing.draw();
+	m_shaperH.draw();
+	m_shaperV.draw();
 }
 
 void ewol::widget::WidgetScrooled::systemDraw(const ewol::DrawProperty& _displayProp) {

sources/ewol/widget/WidgetScrolled.h

@@ -13,7 +13,7 @@
 #include <ewol/debug.h>
 #include <ewol/widget/Widget.h>
 #include <ewol/widget/Scroll.h>
-#include <ewol/compositing/Drawing.h>
+#include <ewol/compositing/Shaper.h>
 
 #define CALCULATE_SIMULTANEOUS_FINGER (5)
 
@@ -30,7 +30,8 @@ namespace ewol {
 					scroolModeGame, //!< Zoom enable, no move left and right
 				};
 			private:
-				ewol::compositing::Drawing m_drawing; //!< generic element to display...
+				ewol::compositing::Shaper m_shaperH; //!< Compositing theme Horizontal.
+				ewol::compositing::Shaper m_shaperV; //!< Compositing theme Vertical.
 			protected:
 				vec2 m_originScrooled; //!< pixel distance from the origin of the display (Bottum left)
 				vec2 m_maxSize; //!< Maximum size of the Widget ==> to display scrollbar
@@ -49,8 +50,9 @@ namespace ewol {
 			public:
 				/**
 				 * @brief Scroll Widget main constructor to be herited from an other widget (this is not a stand-alone widget)
+				 * @param[in] _shaperName Shaper name if the scrolled widget.
 				 */
-				WidgetScrooled(void);
+				WidgetScrooled(const std::string& _shaperName="THEME:GUI:WidgetScrolled.conf");
 				/**
 				 * @brief Scroll widget destructor.
 				 */