More work on default theme.

gameplay/src/Container.cpp

@@ -25,6 +25,8 @@ static const long SCROLL_INERTIA_DELAY = 100L;
 static const float SCROLL_FRICTION_FACTOR = 5.0f;
 // Distance that must be scrolled before isScrolling() will return true, used e.g. to cancel button-click events.
 static const float SCROLL_THRESHOLD = 10.0f;
+// Number of milliseconds to fade auto-hide scrollbars out for
+static const long SCROLLBAR_FADE_TIME = 1500L;
 // If the DPad or joystick is held down, this is the initial delay in milliseconds between focus change events.
 static const float FOCUS_CHANGE_REPEAT_DELAY = 300.0f;
 
@@ -634,7 +636,7 @@ unsigned int Container::draw(Form* form, const Rectangle& clip)
     if (_scroll != SCROLL_NONE && (_scrollBarOpacity > 0.0f))
     {
         // Draw scroll bars.
-        Rectangle clipRegion(_viewportClipBounds);
+        Rectangle clipRegion(_clipBounds);
 
         SpriteBatch* batch = _style->getTheme()->getSpriteBatch();
         startBatch(form, batch);
@@ -658,7 +660,7 @@ unsigned int Container::draw(Form* form, const Rectangle& clip)
 
             clipRegion.width += verticalRegion.width;
 
-            Rectangle bounds(_viewportBounds.x + _viewportBounds.width, _viewportBounds.y + _scrollBarBounds.y, topRegion.width, topRegion.height);
+            Rectangle bounds(_viewportBounds.right() + (_bounds.right() - _viewportBounds.right())*0.5f - topRegion.width*0.5f, _viewportBounds.y + _scrollBarBounds.y, topRegion.width, topRegion.height);
             batch->draw(bounds.x, bounds.y, bounds.width, bounds.height, topUVs.u1, topUVs.v1, topUVs.u2, topUVs.v2, topColor, clipRegion);
 
             bounds.y += topRegion.height;
@@ -691,7 +693,7 @@ unsigned int Container::draw(Form* form, const Rectangle& clip)
 
             clipRegion.height += horizontalRegion.height;
         
-            Rectangle bounds(_viewportBounds.x + _scrollBarBounds.x, _viewportBounds.y + _viewportBounds.height, leftRegion.width, leftRegion.height);
+            Rectangle bounds(_viewportBounds.x + _scrollBarBounds.x, _viewportBounds.bottom() + (_bounds.bottom() - _viewportBounds.bottom())*0.5f - leftRegion.height*0.5f, leftRegion.width, leftRegion.height);
             batch->draw(bounds.x, bounds.y, bounds.width, bounds.height, leftUVs.u1, leftUVs.v1, leftUVs.u2, leftUVs.v2, leftColor, clipRegion);
 
             bounds.x += leftRegion.width;
@@ -1159,7 +1161,7 @@ void Container::updateScroll()
         _scrollBarOpacity = 0.99f;
         if (!_scrollBarOpacityClip)
         {
-            Animation* animation = createAnimationFromTo("scrollbar-fade-out", ANIMATE_SCROLLBAR_OPACITY, &_scrollBarOpacity, &to, Curve::QUADRATIC_IN_OUT, 500L);
+            Animation* animation = createAnimationFromTo("scrollbar-fade-out", ANIMATE_SCROLLBAR_OPACITY, &_scrollBarOpacity, &to, Curve::QUADRATIC_IN_OUT, SCROLLBAR_FADE_TIME);
             _scrollBarOpacityClip = animation->getClip();
         }
         _scrollBarOpacityClip->play();
@@ -1331,12 +1333,11 @@ bool Container::mouseEventScroll(Mouse::MouseEvent evt, int x, int y, int wheelD
             if (_scrollBarVertical)
             {
                 float vWidth = _scrollBarVertical->getRegion().width;
-                Rectangle vBounds(_viewportBounds.right() - _absoluteBounds.x,
+                Rectangle vBounds(_viewportBounds.right() + (_bounds.right() - _viewportBounds.right())*0.5f - vWidth*0.5f,
                                  _scrollBarBounds.y,
                                  vWidth, _scrollBarBounds.height);
 
-                if (x >= vBounds.x &&
-                    x <= vBounds.x + vBounds.width)
+                if (x >= vBounds.x && x <= vBounds.right())
                 {
                     // Then we're within the horizontal bounds of the vertical scrollbar.
                     // We want to either jump up or down, or drag the scrollbar itself.
@@ -1359,11 +1360,10 @@ bool Container::mouseEventScroll(Mouse::MouseEvent evt, int x, int y, int wheelD
             {
                 float hHeight = _scrollBarHorizontal->getRegion().height;
                 Rectangle hBounds(_scrollBarBounds.x,
-                                  _viewportBounds.y + _viewportBounds.height,
+                                  _viewportBounds.bottom() + (_bounds.bottom() - _viewportBounds.bottom())*0.5f - hHeight*0.5f,
                                   _scrollBarBounds.width, hHeight);
 
-                if (y >= hBounds.y &&
-                    y <= hBounds.y + hBounds.height)
+                if (y >= hBounds.y && y <= hBounds.bottom())
                 {
                     // We're within the vertical bounds of the horizontal scrollbar.
                     if (x < hBounds.x)

gameplay/src/Slider.cpp

@@ -164,43 +164,38 @@ void Slider::updateValue(int x, int y)
 {
     State state = getState();
 
-    // If the point lies within this slider, update the value of the slider accordingly
-    if (x > _clipBounds.x && x <= _clipBounds.x + _clipBounds.width &&
-        y > _clipBounds.y && y <= _clipBounds.y + _clipBounds.height)
-    {
-        // Horizontal case.
-        const Theme::Border& border = getBorder(state);
-        const Theme::Padding& padding = getPadding();
-        const Rectangle& minCapRegion = _minImage->getRegion();
-        const Rectangle& maxCapRegion = _maxImage->getRegion();
-
-        float markerPosition = ((float)x - maxCapRegion.width - border.left - padding.left) /
-            (_bounds.width - border.left - border.right - padding.left - padding.right - minCapRegion.width - maxCapRegion.width);
+    // Horizontal case.
+    const Theme::Border& border = getBorder(state);
+    const Theme::Padding& padding = getPadding();
+    const Rectangle& minCapRegion = _minImage->getRegion();
+    const Rectangle& maxCapRegion = _maxImage->getRegion();
+    const Rectangle& markerRegion = _markerImage->getRegion();
+
+    float markerPosition = x / (_viewportBounds.width - markerRegion.width);
             
-        if (markerPosition > 1.0f)
-        {
-            markerPosition = 1.0f;
-        }
-        else if (markerPosition < 0.0f)
-        {
-            markerPosition = 0.0f;
-        }
+    if (markerPosition > 1.0f)
+    {
+        markerPosition = 1.0f;
+    }
+    else if (markerPosition < 0.0f)
+    {
+        markerPosition = 0.0f;
+    }
 
-        float oldValue = _value;
-        _value = (markerPosition * (_max - _min)) + _min;
-        if (_step > 0.0f)
-        {            
-            int numSteps = round(_value / _step);
-            _value = _step * numSteps;
-        }
+    float oldValue = _value;
+    _value = (markerPosition * (_max - _min)) + _min;
+    if (_step > 0.0f)
+    {            
+        int numSteps = round(_value / _step);
+        _value = _step * numSteps;
+    }
 
-        // Call the callback if our value changed.
-        if (_value != oldValue)
-        {
-            notifyListeners(Control::Listener::VALUE_CHANGED);
-        }
-        _dirty = true;
+    // Call the callback if our value changed.
+    if (_value != oldValue)
+    {
+        notifyListeners(Control::Listener::VALUE_CHANGED);
     }
+    _dirty = true;
 }
 
 bool Slider::touchEvent(Touch::TouchEvent evt, int x, int y, unsigned int contactIndex)
@@ -424,23 +419,25 @@ unsigned int Slider::drawImages(Form* form, const Rectangle& clip)
     SpriteBatch* batch = _style->getTheme()->getSpriteBatch();
     startBatch(form, batch);
 
-    // Draw order: track, caps, marker.
-    float midY = _viewportBounds.y + (_viewportBounds.height) * 0.5f;
-    Vector2 pos(_viewportBounds.x, midY - trackRegion.height * 0.5f);
-    batch->draw(pos.x, pos.y, _viewportBounds.width, trackRegion.height, track.u1, track.v1, track.u2, track.v2, trackColor, _viewportClipBounds);
+    // Draw track, vertically centered
+    float midY = _viewportBounds.y + _viewportBounds.height * 0.5f;
+    Vector2 pos(_viewportBounds.x + minCapRegion.width, midY - trackRegion.height * 0.5f);
+    batch->draw(pos.x, pos.y, _viewportBounds.width - minCapRegion.width - maxCapRegion.width, trackRegion.height, track.u1, track.v1, track.u2, track.v2, trackColor, _viewportClipBounds);
 
+    // Draw min cap to the left of the track
     pos.y = midY - minCapRegion.height * 0.5f;
-    pos.x -= minCapRegion.width * 0.5f;
+    pos.x = _viewportBounds.x;
     batch->draw(pos.x, pos.y, minCapRegion.width, minCapRegion.height, minCap.u1, minCap.v1, minCap.u2, minCap.v2, minCapColor, _viewportClipBounds);
 
-    pos.x = _viewportBounds.x + _viewportBounds.width - maxCapRegion.width * 0.5f;
+    // Draw max cap to the right of the track
+    pos.x = _viewportBounds.right() - maxCapRegion.width;
     batch->draw(pos.x, pos.y, maxCapRegion.width, maxCapRegion.height, maxCap.u1, maxCap.v1, maxCap.u2, maxCap.v2, maxCapColor, _viewportClipBounds);
 
-    // Percent across.
+    // Draw the marker at the correct position
     float markerPosition = (_value - _min) / (_max - _min);
-    markerPosition *= _viewportBounds.width - minCapRegion.width * 0.5f - maxCapRegion.width * 0.5f - markerRegion.width;
-    pos.x = _viewportBounds.x + minCapRegion.width * 0.5f + markerPosition;
-    pos.y = midY - markerRegion.height / 2.0f;
+    markerPosition *= _viewportBounds.width - markerRegion.width;// -minCapRegion.width * 0.5f - maxCapRegion.width * 0.5f - markerRegion.width;
+    pos.x = _viewportBounds.x + markerPosition;
+    pos.y = midY - markerRegion.height * 0.5f;
     batch->draw(pos.x, pos.y, markerRegion.width, markerRegion.height, marker.u1, marker.v1, marker.u2, marker.v2, markerColor, _viewportClipBounds);
 
     finishBatch(form, batch);

gameplay/src/Theme.h

@@ -302,6 +302,11 @@ private:
          */
         const Theme::Border& getBorder() const;
 
+        /**
+         * Gets the skin region within the theme texture.
+         *
+         * @return The skin region.
+         */
         const Rectangle& getRegion() const;
 
         /**

samples/browser/res/common/default.theme

@@ -2,128 +2,146 @@ theme mainMenu
 {
     texture = res/png/default-theme.png
 
-    // Global color values that affect overal theme color
-    ${tint} = #aabbaaff
-    ${text} = #ffffffff
+    /////////////////////////////////////////////////////////////////////
+    //                    Global theme variables                       //
+    /////////////////////////////////////////////////////////////////////
+
+    ${normalColor} = #ffffffff
+    ${hoverColor} = #ccccccff
+    ${activeColor} = #aaaaaaff
+    ${textColor} = #ffffffff
+    ${font} = res/ui/arial.gpb
+
+    /////////////////////////////////////////////////////////////////////
+    //                        Image lists                              //
+    /////////////////////////////////////////////////////////////////////
 
     imageList normalImages
     {
-        color = ${tint}
+        color = ${normalColor}
 
         image unchecked
         {
-            region = 78, 1, 46, 46
+            region = 83, 3, 34, 34
         }
 
         image checked
         {
-            region = 78, 46, 46, 46
+            region = 83, 37, 34, 34
         }
 
         image unselected
         {
-            region = 127, 1, 46, 46
+            region = 120, 3, 34, 34
         }
 
         image selected
         {
-            region = 127, 46, 46, 46
+            region = 120, 37, 34, 34
         }
 
         image minCap
         {
-            region = 3, 115, 8, 11
+            region = 3, 41, 8, 17
         }
 
-        image maxCap
+        image track
         {
-            region = 3, 115, 8, 11
+            region = 11, 41, 62, 17
         }
 
-        image marker
+        image maxCap
         {
-            region = 16, 113, 18, 18
+            region = 73, 41, 8, 17
         }
 
-        image track
+        image marker
         {
-            region = 42, 119, 26, 6
+            region = 6, 59, 15, 27
         }
 
         image textCaret
         {
-            region = 5, 149, 11, 25
-            color = #C3D9BFff
+            region = 6, 92, 7, 22
         }
 
         image scrollBarTopCap
         {
-            region = 0, 99, 12, 5
+            region = 65, 59, 13, 6
         }
 
         image verticalScrollBar
         {
-            region = 0, 104, 12, 19
+            region = 65, 65, 13, 2
         }
 
         image scrollBarBottomCap
         {
-            region = 0, 138, 12, 5
+            region = 65, 88, 13, 6
         }
 
         image scrollBarLeftCap
         {
-            region = 35, 115, 5, 12
+            region = 25, 59, 6, 13
         }
 
         image horizontalScrollBar
         {
-            region = 43, 115, 19, 12
+            region = 32, 59, 2, 13
         }
 
         image scrollBarRightCap
         {
-            region = 65, 115, 5, 12
+            region = 55, 59, 6, 13
         }
     }
 
+    imageList hoverImages : normalImages
+    {
+        color = ${hoverColor}
+    }
+
     imageList activeImages : normalImages
     {
-        color = ${tint}
+        color = ${activeColor}
 
         image unchecked
         {
-            region = 78, 91, 46, 46
+            region = 83, 37, 34, 34
         }
 
         image checked
         {
-            region = 78, 91, 46, 46
+            region = 83, 37, 34, 34
         }
 
-        image unselected
+        image selected
         {
-            region = 127, 91, 46, 46
+            region = 120, 37, 34, 34
         }
 
-        image selected
+        image unselected
         {
-            region = 127, 91, 46, 46
+            region = 120, 37, 34, 34
         }
     }
 
+    /////////////////////////////////////////////////////////////////////
+    //                     Skin definitions                            //
+    /////////////////////////////////////////////////////////////////////
+
     skin FormSkin
     {
         border
         {
-            left = 10
-            right = 10
-            top = 10
-            bottom = 10
+            left = 8
+            right = 8
+            top = 8
+            bottom = 8
         }
 
-        region = 3, 3, 69, 70
-        color = ${tint}
+        region = 4, 4, 32, 32
+        color = ${normalColor}
     }
 
     skin ButtonSkin
@@ -136,25 +154,49 @@ theme mainMenu
             bottom = 12
         }
 
-        //region = 179, 3, 44, 44
-        region = 180, 145, 34, 34
-        color = ${tint}
+        region = 42, 3, 34, 34
+        color = ${normalColor}
     }
 
     skin ButtonSkinHover : ButtonSkin
     {
-        //region = 179, 49, 44, 44
-        region = 180, 182, 34, 34
-        ${tint}
+        color = ${hoverColor}
     }
 
     skin ButtonSkinActive : ButtonSkin
     {
-        //region = 179, 96, 44, 44
-        region = 180, 219, 34, 34
-        ${tint}
+        color = ${activeColor}
+    }
+
+    skin TextBoxSkin
+    {
+        border
+        {
+            left = 10
+            right = 10
+            top = 10
+            bottom = 10
+        }
+
+        region = 83, 3, 34, 34
+        color = ${normalColor}
     }
 
+    skin TextBoxSkinHover : TextBoxSkin
+    {
+        color = ${hoverColor}
+    }
+
+    skin TextBoxSkinActive : TextBoxSkin
+    {
+        color = ${activeColor}
+    }
+
+
+
+
+
+
     skin mainNormal
     {
         border
@@ -260,7 +302,7 @@ theme mainMenu
         {
             skin = underliner
             textColor = #ffffffff
-            font = res/ui/arial.gpb
+            font = ${font}
             fontSize = 16
             textAlignment = ALIGN_BOTTOM_HCENTER
         }
@@ -281,7 +323,7 @@ theme mainMenu
             skin = mainNormal
             imageList = normalImages
 
-            font = res/ui/arial.gpb
+            font = ${font}
             textColor = #ffffffff
             fontSize = 16
             textAlignment = ALIGN_VCENTER_HCENTER
@@ -339,7 +381,7 @@ theme mainMenu
         stateNormal
         {
             imageList = normalImages
-            font = res/ui/arial.gpb
+            font = ${font}
             textColor = #ffffffff
             fontSize = 16
             textAlignment = ALIGN_VCENTER_HCENTER
@@ -361,14 +403,14 @@ theme mainMenu
     {
         stateNormal
         {
-            font = res/ui/arial.gpb
+            font = ${font}
             fontSize = 16
             textAlignment = ALIGN_VCENTER_LEFT
         }
 
         stateActive
         {
-            font = res/ui/arial.gpb
+            font = ${font}
             fontSize = 16
             textAlignment = ALIGN_VCENTER_LEFT
         }
@@ -392,7 +434,7 @@ theme mainMenu
         stateNormal
         {
             textColor = #ffffffff
-            font = res/ui/arial.gpb
+            font = ${font}
             fontSize = 24
             textAlignment = ALIGN_BOTTOM_HCENTER
         }
@@ -403,25 +445,55 @@ theme mainMenu
         }
     }
 
+
+
+
+
+
     style Form
     {
         stateNormal
         {
             skin = FormSkin
+            imageList = normalImages
+        }
+
+        stateHover
+        {
+            imageList = hoverImages
+        }
+
+        stateActive
+        {
+            imageList = activeImages
         }
     }
 
     style Container
     {
+        stateNormal
+        {
+            imageList = normalImages
+        }
+
+        stateHover
+        {
+            imageList = hoverImages
+        }
+
+        stateActive
+        {
+            imageList = activeImages
+        }
     }
 
     style Label
     {
         stateNormal
         {
-            font = res/ui/arial.gpb
+            font = ${font}
             fontSize = 16
-            textColor = #ffffffff
+            textColor = ${textColor}
             textAlignment = ALIGN_VCENTER_LEFT
         }
     }
@@ -437,7 +509,7 @@ theme mainMenu
         stateNormal
         {
             skin = ButtonSkin
-            font = res/ui/arial.gpb
+            font = ${font}
             textColor = #ffffffff
             fontSize = 16
             textAlignment = ALIGN_VCENTER_HCENTER
@@ -459,20 +531,87 @@ theme mainMenu
         }
     }
 
-    style CheckBox : iconNoBorder
+    style CheckBox : Label
     {
+        stateNormal
+        {
+            imageList = normalImages
+        }
+
+        stateHover
+        {
+            imageList = hoverImages
+        }
+
+        stateActive
+        {
+            imageList = activeImages
+        }
+
+        stateFocus
+        {
+            imageList = hoverImages
+        }
     }
 
-    style RadioButton : iconNoBorder
+    style RadioButton : CheckBox
     {
     }
 
-    style TextBox : topLeftAlignedEntry
+    style TextBox
     {
+        stateNormal
+        {
+            skin = TextBoxSkin
+            imageList = normalImages
+            font = ${font}
+            fontSize = 16
+            textColor = ${textColor}
+            textAlignment = ALIGN_VCENTER_LEFT
+        }
+
+        stateHover
+        {
+            skin = TextBoxSkinHover
+        }
+
+        stateActive
+        {
+            skin = TextBoxSkinActive
+            imageList = activeImages
+        }
+
+        stateFocus
+        {
+            skin = TextBoxSkinHover
+        }
     }
 
-    style Slider : topLeftNoBorder
+    style Slider
     {
+        stateNormal
+        {
+            imageList = normalImages
+            font = ${font}
+            fontSize = 16
+            textColor = ${textColor}
+            textAlignment = ALIGN_TOP_LEFT
+        }
+
+        stateHover
+        {
+            imageList = hoverImages
+        }
+
+        stateActive
+        {
+            imageList = activeImages
+        }
+
+        stateFocus
+        {
+            imageList = hoverImages
+        }
     }
 
     style Image