Completed themes for textboxes with horizontal scrollbars.

Source/DFPSR/gui/VisualTheme.cpp

@@ -150,6 +150,19 @@ BEGIN: VerticalScrollList
 	PACK_RGBA: colorImage, 0, 0, 0, visImage
 END:
 
+BEGIN: HorizontalScrollList
+	INPUT: FixedPoint, width
+	INPUT: FixedPoint, height
+	INPUT: FixedPoint, red
+	INPUT: FixedPoint, green
+	INPUT: FixedPoint, blue
+	OUTPUT: ImageRgbaU8, colorImage
+	CREATE: visImage<ImageU8>, width, height
+	CREATE: lumaImage<ImageU8>, width, height
+	FADE_LINEAR: visImage, 0, 0, 128, 0, height, 0
+	PACK_RGBA: colorImage, 0, 0, 0, visImage
+END:
+
 BEGIN: TextBox
 	INPUT: FixedPoint, width
 	INPUT: FixedPoint, height
@@ -183,12 +196,20 @@ UR"QUOTE(
 		method = "TextBox"
 	[VerticalScrollKnob]
 		rounding = 8
+	[HorizontalScrollKnob]
+		rounding = 8
 	[VerticalScrollList]
 		method = "VerticalScrollList"
+	[HorizontalScrollList]
+		method = "HorizontalScrollList"
 	[ScrollUp]
 		rounding = 5
 	[ScrollDown]
 		rounding = 5
+	[ScrollLeft]
+		rounding = 5
+	[ScrollRight]
+		rounding = 5
 	[Panel]
 		border = 1
 		method = "HardRectangle"

Source/DFPSR/gui/components/TextBox.h

@@ -29,8 +29,6 @@
 #include "../../api/fontAPI.h"
 #include "../../math/LVector.h"
 
-// TODO: Make a theme for the horizontal scroll-bar.
-
 namespace dsr {
 
 struct LineIndex {

Source/DFPSR/gui/components/helpers/ScrollBarImpl.cpp

@@ -26,10 +26,10 @@
 using namespace dsr;
 
 void ScrollBarImpl::loadTheme(VisualTheme theme, const ColorRgbI32 &color) {
-	this->scalableImage_scrollTop = theme_getScalableImage(theme, U"ScrollUp");
-	this->scalableImage_scrollBottom = theme_getScalableImage(theme, U"ScrollDown");
-	this->scalableImage_verticalScrollKnob = theme_getScalableImage(theme, U"VerticalScrollKnob");
-	this->scalableImage_verticalScrollBackground = theme_getScalableImage(theme, U"VerticalScrollList");
+	this->scalableImage_scrollTop = theme_getScalableImage(theme, this->vertical ? U"ScrollUp" : U"ScrollLeft");
+	this->scalableImage_scrollBottom = theme_getScalableImage(theme, this->vertical ? U"ScrollDown" : U"ScrollRight");
+	this->scalableImage_scrollKnob = theme_getScalableImage(theme, this->vertical ? U"VerticalScrollKnob" : U"HorizontalScrollKnob");
+	this->scalableImage_scrollBackground = theme_getScalableImage(theme, this->vertical ? U"VerticalScrollList" : U"HorizontalScrollList");
 	component_generateImage(theme, this->scalableImage_scrollTop,     this->scrollBarThickness,  this->scrollButtonLength, color.red, color.green, color.blue, 0)(this->scrollButtonTopImage_normal);
 	component_generateImage(theme, this->scalableImage_scrollTop,     this->scrollBarThickness,  this->scrollButtonLength, color.red, color.green, color.blue, 1)(this->scrollButtonTopImage_pressed);	
 	component_generateImage(theme, this->scalableImage_scrollBottom,  this->scrollBarThickness,  this->scrollButtonLength, color.red, color.green, color.blue, 0)(this->scrollButtonBottomImage_normal);
@@ -147,20 +147,21 @@ void ScrollBarImpl::draw(OrderedImageRgbaU8 &target, VisualTheme &theme, const C
 		IRect lower = getEndRect(scrollBarLocation, this->scrollButtonLength, this->vertical);
 		IRect knob = this->getKnobLocation(scrollBarLocation);
 		// Only redraw the knob image if its dimensions changed
-		if (!image_exists(this->scrollKnobImage)
-		  || image_getWidth(this->scrollKnobImage) != knob.width()
-		  || image_getHeight(this->scrollKnobImage) != knob.height()) {
-			component_generateImage(theme, this->scalableImage_verticalScrollKnob, knob.width(), knob.height(), color.red, color.green, color.blue, 0)(this->scrollKnobImage);
+		if (!image_exists(this->scrollKnobImage_normal)
+		  || image_getWidth(this->scrollKnobImage_normal) != knob.width()
+		  || image_getHeight(this->scrollKnobImage_normal) != knob.height()) {
+			component_generateImage(theme, this->scalableImage_scrollKnob, knob.width(), knob.height(), color.red, color.green, color.blue, 0)(this->scrollKnobImage_normal);
+			component_generateImage(theme, this->scalableImage_scrollKnob, knob.width(), knob.height(), color.red, color.green, color.blue, 1)(this->scrollKnobImage_pressed);
 		}
 		// Only redraw the scroll list if its dimenstions changed
-		if (!image_exists(this->verticalScrollBarImage)
-		  || image_getWidth(this->verticalScrollBarImage) != scrollBarLocation.width()
-		  || image_getHeight(this->verticalScrollBarImage) != scrollBarLocation.height()) {
-			component_generateImage(theme, this->scalableImage_verticalScrollBackground, scrollBarLocation.width(), scrollBarLocation.height(), color.red, color.green, color.blue, 0)(this->verticalScrollBarImage);
+		if (!image_exists(this->scrollBarImage)
+		  || image_getWidth(this->scrollBarImage) != scrollBarLocation.width()
+		  || image_getHeight(this->scrollBarImage) != scrollBarLocation.height()) {
+			component_generateImage(theme, this->scalableImage_scrollBackground, scrollBarLocation.width(), scrollBarLocation.height(), color.red, color.green, color.blue, 0)(this->scrollBarImage);
 		}
 		// Draw the scroll-bar
-		draw_alphaFilter(target, this->verticalScrollBarImage, scrollBarLocation.left(), scrollBarLocation.top());
-		draw_alphaFilter(target, this->scrollKnobImage, knob.left(), knob.top());
+		draw_alphaFilter(target, this->scrollBarImage, scrollBarLocation.left(), scrollBarLocation.top());
+		draw_alphaFilter(target, this->holdingScrollBar ? this->scrollKnobImage_pressed : this->scrollKnobImage_normal, knob.left(), knob.top());
 		draw_alphaFilter(target, this->pressScrollUp ? this->scrollButtonTopImage_pressed : this->scrollButtonTopImage_normal, upper.left(), upper.top());
 		draw_alphaFilter(target, this->pressScrollDown ? this->scrollButtonBottomImage_pressed : this->scrollButtonBottomImage_normal, lower.left(), lower.top());
 	}

Source/DFPSR/gui/components/helpers/ScrollBarImpl.h

@@ -69,9 +69,12 @@ private:
 	int64_t reservedStart = 0; // How many pixels to leave empty at the left/top side to avoid collisions.
 	int64_t reservedEnd = 0; // How many pixels to leave empty at the right/bottom side to avoid collisions.
 	// Scalable parametric images.
-	MediaMethod scalableImage_scrollTop, scalableImage_scrollBottom, scalableImage_verticalScrollBackground, scalableImage_verticalScrollKnob;
+	MediaMethod scalableImage_scrollTop, scalableImage_scrollBottom, scalableImage_scrollBackground, scalableImage_scrollKnob;
 	// Generated raster images.
-	OrderedImageRgbaU8 scrollButtonTopImage_normal, scrollButtonTopImage_pressed, scrollButtonBottomImage_normal, scrollButtonBottomImage_pressed, scrollKnobImage, verticalScrollBarImage;
+	OrderedImageRgbaU8 scrollButtonTopImage_normal, scrollButtonTopImage_pressed;
+	OrderedImageRgbaU8 scrollButtonBottomImage_normal, scrollButtonBottomImage_pressed;
+	OrderedImageRgbaU8 scrollKnobImage_normal, scrollKnobImage_pressed;
+	OrderedImageRgbaU8 scrollBarImage;
 private:
 	IRect getScrollBarLocation(int32_t parentWidth, int32_t parentHeight);
 	IRect getScrollRegion(const IRect &scrollBarLocation);

Source/tools/wizard/media/Drawing.mmc

@@ -81,6 +81,41 @@ BEGIN: Diffuse3x3
 	PACK_RGBA: colorImage, redImage, greenImage, blueImage, visibilityMap
 END:
 
+BEGIN: FocusableDiffuse3x3
+	INPUT: FixedPoint, width
+	INPUT: FixedPoint, height
+	INPUT: FixedPoint, red
+	INPUT: FixedPoint, green
+	INPUT: FixedPoint, blue
+	INPUT: FixedPoint, sourceLeft
+	INPUT: FixedPoint, sourceTop
+	INPUT: FixedPoint, sourceWidth
+	INPUT: FixedPoint, sourceHeight
+	INPUT: FixedPoint, focusOffsetX
+	INPUT: FixedPoint, focusOffsetY
+	INPUT: FixedPoint, focused
+	INPUT: FixedPoint, preserved
+	INPUT: ImageRgbaU8, atlas
+	OUTPUT: ImageRgbaU8, colorImage
+	# Select image using the focused state.
+	MUL: sourceOffsetX<FixedPoint>, focused, focusOffsetX
+	MUL: sourceOffsetY<FixedPoint>, focused, focusOffsetY
+	ADD: adjustedSourceLeft<FixedPoint>, sourceLeft, sourceOffsetX
+	ADD: adjustedSourceTop<FixedPoint>, sourceTop, sourceOffsetY
+	# Scale by 1 / 255 so that 255 represents full intensity in atlas.
+	MUL: normRed<FixedPoint>, red, 0.00392156862745
+	MUL: normGreen<FixedPoint>, green, 0.00392156862745
+	MUL: normBlue<FixedPoint>, blue, 0.00392156862745
+	# Resize source region from the atlas.
+	CALL: Resize3x3, rescaledImage<ImageRgbaU8>, width, height, preserved, atlas, adjustedSourceLeft, adjustedSourceTop, sourceWidth, sourceHeight
+	GET_RED: diffuseMap<ImageU8>, rescaledImage
+	GET_ALPHA: visibilityMap<ImageU8>, rescaledImage
+	MUL: redImage<ImageU8>, diffuseMap, normRed
+	MUL: greenImage<ImageU8>, diffuseMap, normGreen
+	MUL: blueImage<ImageU8>, diffuseMap, normBlue
+	PACK_RGBA: colorImage, redImage, greenImage, blueImage, visibilityMap
+END:
+
 BEGIN: DiffuseSpecular3x3
 	INPUT: FixedPoint, width
 	INPUT: FixedPoint, height
@@ -124,14 +159,17 @@ BEGIN: PressableDiffuseSpecular3x3
 	INPUT: FixedPoint, sourceWidth
 	INPUT: FixedPoint, sourceHeight
 	INPUT: FixedPoint, pressOffsetX
+	INPUT: FixedPoint, pressOffsetY
 	INPUT: FixedPoint, preserved
 	INPUT: ImageRgbaU8, atlas
 	OUTPUT: ImageRgbaU8, colorImage
 	# Select image using the pressed state.
 	MUL: sourceOffsetX<FixedPoint>, pressed, pressOffsetX
+	MUL: sourceOffsetY<FixedPoint>, pressed, pressOffsetY
 	ADD: adjustedSourceLeft<FixedPoint>, sourceLeft, sourceOffsetX
+	ADD: adjustedSourceTop<FixedPoint>, sourceTop, sourceOffsetY
 	# Rescale the source region to fit width and height, while applying the diffuse color and adding white shine.
-	CALL: DiffuseSpecular3x3, colorImage, width, height, red, green, blue, adjustedSourceLeft, sourceTop, sourceWidth, sourceHeight, preserved, atlas
+	CALL: DiffuseSpecular3x3, colorImage, width, height, red, green, blue, adjustedSourceLeft, adjustedSourceTop, sourceWidth, sourceHeight, preserved, atlas
 END:
 
 BEGIN: DiffuseSpecular1x1
@@ -177,14 +215,17 @@ BEGIN: PressableDiffuseSpecular1x1
 	INPUT: FixedPoint, sourceWidth
 	INPUT: FixedPoint, sourceHeight
 	INPUT: FixedPoint, pressOffsetX
+	INPUT: FixedPoint, pressOffsetY
 	INPUT: FixedPoint, preserved
 	INPUT: ImageRgbaU8, atlas
 	OUTPUT: ImageRgbaU8, colorImage
 	# Select image using the pressed state.
 	MUL: sourceOffsetX<FixedPoint>, pressed, pressOffsetX
+	MUL: sourceOffsetY<FixedPoint>, pressed, pressOffsetY
 	ADD: adjustedSourceLeft<FixedPoint>, sourceLeft, sourceOffsetX
+	ADD: adjustedSourceTop<FixedPoint>, sourceTop, sourceOffsetY
 	# Rescale the source region to fit width and height, while applying the diffuse color and adding white shine.
-	CALL: DiffuseSpecular1x1, colorImage, width, height, red, green, blue, adjustedSourceLeft, sourceTop, sourceWidth, sourceHeight, preserved, atlas
+	CALL: DiffuseSpecular1x1, colorImage, width, height, red, green, blue, adjustedSourceLeft, adjustedSourceTop, sourceWidth, sourceHeight, preserved, atlas
 END:
 
 BEGIN: ListBox
@@ -216,3 +257,16 @@ BEGIN: VerticalScrollList
 	FADE_LINEAR: visImage, 0, 0, 128, width, 0, 0
 	PACK_RGBA: colorImage, 0, 0, 0, visImage
 END:
+
+BEGIN: HorizontalScrollList
+	INPUT: FixedPoint, width
+	INPUT: FixedPoint, height
+	INPUT: FixedPoint, red
+	INPUT: FixedPoint, green
+	INPUT: FixedPoint, blue
+	OUTPUT: ImageRgbaU8, colorImage
+	CREATE: visImage<ImageU8>, width, height
+	CREATE: lumaImage<ImageU8>, width, height
+	FADE_LINEAR: visImage, 0, 0, 128, 0, height, 0
+	PACK_RGBA: colorImage, 0, 0, 0, visImage
+END:

Source/tools/wizard/media/Theme.ini

@@ -1,8 +1,5 @@
 atlas = File:Style.png
-; Image location in the atlas
 preserved = 7
-; Fall back on the Diffuse3x3 method if a component's class could not be recognized.
-;method = "DiffuseSpecular1x1"
 
 [Button]
 method = "PressableDiffuseSpecular3x3"
@@ -11,6 +8,7 @@ sourceTop = 0
 sourceWidth = 64
 sourceHeight = 64
 pressOffsetX = 64
+pressOffsetY = 0
 preserved = 16
 
 [ListBox]
@@ -20,16 +18,39 @@ sourceTop = 64
 sourceWidth = 16
 sourceHeight = 16
 
+[TextBox]
+method = "FocusableDiffuse3x3"
+sourceLeft = 0
+sourceTop = 80
+sourceWidth = 16
+sourceHeight = 16
+focusOffsetX = 16
+focusOffsetY = 0
+
 [VerticalScrollKnob]
-method = "DiffuseSpecular1x1"
+method = "PressableDiffuseSpecular1x1"
 sourceLeft = 96
 sourceTop = 64
 sourceWidth = 16
 sourceHeight = 32
+pressOffsetX = 16
+pressOffsetY = 0
+
+[HorizontalScrollKnob]
+method = "PressableDiffuseSpecular1x1"
+sourceLeft = 96
+sourceTop = 96
+sourceWidth = 32
+sourceHeight = 16
+pressOffsetX = 0
+pressOffsetY = 16
 
 [VerticalScrollList]
 method = "VerticalScrollList"
 
+[HorizontalScrollList]
+method = "HorizontalScrollList"
+
 [ScrollUp]
 method = "PressableDiffuseSpecular1x1"
 sourceLeft = 64
@@ -37,6 +58,7 @@ sourceTop = 64
 sourceWidth = 16
 sourceHeight = 16
 pressOffsetX = 16
+pressOffsetY = 0
 
 [ScrollDown]
 method = "PressableDiffuseSpecular1x1"
@@ -45,6 +67,25 @@ sourceTop = 80
 sourceWidth = 16
 sourceHeight = 16
 pressOffsetX = 16
+pressOffsetY = 0
+
+[ScrollLeft]
+method = "PressableDiffuseSpecular1x1"
+sourceLeft = 64
+sourceTop = 96
+sourceWidth = 16
+sourceHeight = 16
+pressOffsetX = 16
+pressOffsetY = 0
+
+[ScrollRight]
+method = "PressableDiffuseSpecular1x1"
+sourceLeft = 64
+sourceTop = 112
+sourceWidth = 16
+sourceHeight = 16
+pressOffsetX = 16
+pressOffsetY = 0
 
 [Panel]
 method = "Diffuse3x3"