* backport [16210]. which was ommitted earlier.

  xkeepratio and ykeepratio for skins2 

doc/skins/skins2-howto.xml

@@ -398,7 +398,7 @@ difficulty to understand how VLC skins work.</para>
   </sect3>
   <sect3 id="anchorrange">
     <title>range</title>
-    <para>Range of action of the anchor, in pixels. Default is "10".</para>
+    <para>Range of action of the anchor, in pixels.</para>
     <para>Default value: 10</para>
   </sect3>
 </sect2>
@@ -406,7 +406,7 @@ difficulty to understand how VLC skins work.</para>
 
 <sect2 id="commattr">
   <title>Common attributes</title>
-  <para>The following attributes are common to all the controls (Image, Button, Checkbox, Text, Slider, RadialSlider, Playtree, Video)</para>
+  <para>The following attributes are common to all the controls (Image, Button, Checkbox, Text, Slider, RadialSlider, Playlist, Playtree, Video)</para>
   <sect3 id="attrid">
     <title>id</title>
     <para>Identifiant of the control. Currently unused.</para>

modules/gui/skins2/parser/builder.cpp

@@ -430,7 +430,8 @@ void Builder::addButton( const BuilderData::Button &rData )
     const Position pos = makePosition( rData.m_leftTop, rData.m_rightBottom,
                                        rData.m_xPos, rData.m_yPos,
                                        pBmpUp->getWidth(),
-                                       pBmpUp->getHeight(), *pLayout );
+                                       pBmpUp->getHeight(), *pLayout,
+                                       rData.m_xKeepRatio, rData.m_yKeepRatio );
 
     pLayout->addControl( pButton, pos, rData.m_layer );
 
@@ -505,7 +506,8 @@ void Builder::addCheckbox( const BuilderData::Checkbox &rData )
     const Position pos = makePosition( rData.m_leftTop, rData.m_rightBottom,
                                        rData.m_xPos, rData.m_yPos,
                                        pBmpUp1->getWidth(),
-                                       pBmpUp1->getHeight(), *pLayout );
+                                       pBmpUp1->getHeight(), *pLayout,
+                                       rData.m_xKeepRatio, rData.m_yKeepRatio );
 
     pLayout->addControl( pCheckbox, pos, rData.m_layer );
 
@@ -551,9 +553,10 @@ void Builder::addImage( const BuilderData::Image &rData )
 
     // Compute the position of the control
     const Position pos = makePosition( rData.m_leftTop, rData.m_rightBottom,
-                                       rData.m_xPos,
-                                       rData.m_yPos, pBmp->getWidth(),
-                                       pBmp->getHeight(), *pLayout );
+                                       rData.m_xPos, rData.m_yPos,
+                                       pBmp->getWidth(), pBmp->getHeight(),
+                                       *pLayout, rData.m_xKeepRatio,
+                                       rData.m_yKeepRatio );
 
     // XXX: test to be changed! XXX
     if( rData.m_actionId == "move" )
@@ -660,8 +663,8 @@ void Builder::addText( const BuilderData::Text &rData )
     // Compute the position of the control
     const Position pos = makePosition( rData.m_leftTop, rData.m_rightBottom,
                                        rData.m_xPos, rData.m_yPos,
-                                       rData.m_width, height,
-                                       *pLayout );
+                                       rData.m_width, height, *pLayout,
+                                       rData.m_xKeepRatio, rData.m_yKeepRatio );
 
     pLayout->addControl( pText, pos, rData.m_layer );
 
@@ -708,10 +711,12 @@ void Builder::addRadialSlider( const BuilderData::RadialSlider &rData )
 
     // XXX: resizing is not supported
     // Compute the position of the control
-    const Position pos =
-        makePosition( rData.m_leftTop, rData.m_rightBottom, rData.m_xPos,
-                      rData.m_yPos, pSeq->getWidth(),
-                      pSeq->getHeight() / rData.m_nbImages, *pLayout );
+    const Position pos = makePosition( rData.m_leftTop, rData.m_rightBottom,
+                                       rData.m_xPos, rData.m_yPos,
+                                       pSeq->getWidth(),
+                                       pSeq->getHeight() / rData.m_nbImages,
+                                       *pLayout,
+                                       rData.m_xKeepRatio, rData.m_yKeepRatio );
 
     pLayout->addControl( pRadial, pos, rData.m_layer );
 
@@ -772,7 +777,8 @@ void Builder::addSlider( const BuilderData::Slider &rData )
     const Position pos = makePosition( rData.m_leftTop, rData.m_rightBottom,
                                        rData.m_xPos, rData.m_yPos,
                                        pCurve->getWidth(), pCurve->getHeight(),
-                                       *pLayout );
+                                       *pLayout,
+                                       rData.m_xKeepRatio, rData.m_yKeepRatio );
 
     pLayout->addControl( pBackground, pos, rData.m_layer );
 
@@ -852,7 +858,8 @@ void Builder::addList( const BuilderData::List &rData )
     const Position pos = makePosition( rData.m_leftTop, rData.m_rightBottom,
                                        rData.m_xPos, rData.m_yPos,
                                        rData.m_width, rData.m_height,
-                                       *pLayout );
+                                       *pLayout,
+                                       rData.m_xKeepRatio, rData.m_yKeepRatio );
 
     pLayout->addControl( pList, pos, rData.m_layer );
 
@@ -916,7 +923,8 @@ void Builder::addTree( const BuilderData::Tree &rData )
     const Position pos = makePosition( rData.m_leftTop, rData.m_rightBottom,
                                        rData.m_xPos, rData.m_yPos,
                                        rData.m_width, rData.m_height,
-                                       *pLayout );
+                                       *pLayout,
+                                       rData.m_xKeepRatio, rData.m_yKeepRatio );
 
     pLayout->addControl( pTree, pos, rData.m_layer );
 
@@ -945,7 +953,8 @@ void Builder::addVideo( const BuilderData::Video &rData )
     const Position pos = makePosition( rData.m_leftTop, rData.m_rightBottom,
                                        rData.m_xPos, rData.m_yPos,
                                        rData.m_width, rData.m_height,
-                                       *pLayout );
+                                       *pLayout,
+                                       rData.m_xKeepRatio, rData.m_yKeepRatio );
 
     pLayout->addControl( pVideo, pos, rData.m_layer );
 
@@ -956,7 +965,8 @@ void Builder::addVideo( const BuilderData::Video &rData )
 const Position Builder::makePosition( const string &rLeftTop,
                                       const string &rRightBottom,
                                       int xPos, int yPos, int width,
-                                      int height, const Box &rBox ) const
+                                      int height, const Box &rBox,
+                                      bool xKeepRatio, bool yKeepRatio ) const
 {
     int left = 0, top = 0, right = 0, bottom = 0;
     Position::Ref_t refLeftTop = Position::kLeftTop;
@@ -1033,7 +1043,7 @@ const Position Builder::makePosition( const string &rLeftTop,
     }
 
     return Position( left, top, right, bottom, rBox, refLeftTop,
-                     refRightBottom );
+                     refRightBottom, xKeepRatio, yKeepRatio );
 }
 
 

modules/gui/skins2/parser/builder.hpp

@@ -90,7 +90,8 @@ class Builder: public SkinObject
         const Position makePosition( const string &rLeftTop,
                                      const string &rRightBottom,
                                      int xPos, int yPos, int width, int height,
-                                     const Box &rBox ) const;
+                                     const Box &rBox, bool xKeepRatio = false,
+                                     bool yKeepRatio = false ) const;
 
         // Build the full path of a file
         string getFilePath( const string &fileName ) const;

modules/gui/skins2/parser/builder_data.def

@@ -9,13 +9,13 @@ MenuSeparator pos:int popupId:string
 Window id:string xPos:int yPos:int visible:bool dragDrop:bool playOnDrop:bool
 Layout id:string width:int height:int minWidth:int maxWidth:int minHeight:int maxHeight:int windowId:string
 Anchor xPos:int yPos:int leftTop:string range:int priority:int points:string layoutId:string
-Button id:string xPos:int yPos:int leftTop:string rightBottom:string visible:string upId:string downId:string overId:string actionId:string tooltip:string help:string layer:int windowId:string layoutId:string
-Checkbox id:string xPos:int yPos:int leftTop:string rightBottom:string visible:string up1Id:string down1Id:string over1Id:string up2Id:string down2Id:string over2Id:string state:string action1:string action2:string tooltip1:string tooltip2:string help:string layer:int windowId:string layoutId:string
-Image id:string xPos:int yPos:int leftTop:string rightBottom:string visible:string bmpId:string actionId:string action2Id:string resize:string help:string layer:int windowId:string layoutId:string
+Button id:string xPos:int yPos:int leftTop:string rightBottom:string xKeepRatio:bool yKeepRatio:bool visible:string upId:string downId:string overId:string actionId:string tooltip:string help:string layer:int windowId:string layoutId:string
+Checkbox id:string xPos:int yPos:int leftTop:string rightBottom:string xKeepRatio:bool yKeepRatio:bool visible:string up1Id:string down1Id:string over1Id:string up2Id:string down2Id:string over2Id:string state:string action1:string action2:string tooltip1:string tooltip2:string help:string layer:int windowId:string layoutId:string
+Image id:string xPos:int yPos:int leftTop:string rightBottom:string xKeepRatio:bool yKeepRatio:bool visible:string bmpId:string actionId:string action2Id:string resize:string help:string layer:int windowId:string layoutId:string
 IniFile id:string file:string
-Text id:string xPos:int yPos:int visible:string fontId:string text:string width:int leftTop:string rightBottom:string color:uint32_t scrolling:string alignment:string help:string layer:int windowId:string layoutId:string
-RadialSlider id:string visible:string xPos:int yPos:int leftTop:string rightBottom:string sequence:string nbImages:int minAngle:float maxAngle:float value:string tooltip:string help:string layer:int windowId:string layoutId:string
-Slider id:string visible:string xPos:int yPos:int leftTop:string rightBottom:string upId:string downId:string overId:string points:string thickness:int value:string imageId:string nbHoriz:int nbVert:int padHoriz:int padVert:int tooltip:string help:string layer:int windowId:string layoutId:string
-List id:string xPos:int yPos:int visible:string width:int height:int leftTop:string rightBottom:string fontId:string var:string bgImageId:string fgColor:string playColor:string bgColor1:string bgColor2:string selColor:string help:string layer:int windowId:string layoutId:string
-Tree id:string xPos:int yPos:int visible:string flat:string width:int height:int leftTop:string rightBottom:string fontId:string var:string bgImageId:string itemImageId:string openImageId:string closedImageId:string fgColor:string playColor:string bgColor1:string bgColor2:string selColor:string help:string layer:int windowId:string layoutId:string
-Video id:string xPos:int yPos:int width:int height:int leftTop:string rightBottom:string visible:string autoResize:bool help:string layer:int windowId:string layoutId:string
+Text id:string xPos:int yPos:int visible:string fontId:string text:string width:int leftTop:string rightBottom:string xKeepRatio:bool yKeepRatio:bool color:uint32_t scrolling:string alignment:string help:string layer:int windowId:string layoutId:string
+RadialSlider id:string visible:string xPos:int yPos:int leftTop:string rightBottom:string xKeepRatio:bool yKeepRatio:bool sequence:string nbImages:int minAngle:float maxAngle:float value:string tooltip:string help:string layer:int windowId:string layoutId:string
+Slider id:string visible:string xPos:int yPos:int leftTop:string rightBottom:string xKeepRatio:bool yKeepRatio:bool upId:string downId:string overId:string points:string thickness:int value:string imageId:string nbHoriz:int nbVert:int padHoriz:int padVert:int tooltip:string help:string layer:int windowId:string layoutId:string
+List id:string xPos:int yPos:int visible:string width:int height:int leftTop:string rightBottom:string xKeepRatio:bool yKeepRatio:bool fontId:string var:string bgImageId:string fgColor:string playColor:string bgColor1:string bgColor2:string selColor:string help:string layer:int windowId:string layoutId:string
+Tree id:string xPos:int yPos:int visible:string flat:string width:int height:int leftTop:string rightBottom:string xKeepRatio:bool yKeepRatio:bool fontId:string var:string bgImageId:string itemImageId:string openImageId:string closedImageId:string fgColor:string playColor:string bgColor1:string bgColor2:string selColor:string help:string layer:int windowId:string layoutId:string
+Video id:string xPos:int yPos:int width:int height:int leftTop:string rightBottom:string xKeepRatio:bool yKeepRatio:bool visible:string autoResize:bool help:string layer:int windowId:string layoutId:string

modules/gui/skins2/utils/position.cpp

@@ -35,16 +35,88 @@ Rect::Rect( int left, int top, int right, int bottom ):
 
 
 Position::Position( int left, int top, int right, int bottom, const Box &rBox,
-                    Ref_t refLeftTop, Ref_t refRightBottom ):
+                    Ref_t refLeftTop, Ref_t refRightBottom, bool xKeepRatio,
+                    bool yKeepRatio ):
     m_left( left ), m_top( top ), m_right( right ), m_bottom( bottom ),
     m_rBox( rBox ), m_refLeftTop( refLeftTop ),
-    m_refRighBottom( refRightBottom )
+    m_refRighBottom( refRightBottom ), m_xKeepRatio( xKeepRatio ),
+    m_yKeepRatio( yKeepRatio )
 {
+    // Here is how the resizing algorithm works:
+    //
+    //  - if we "keep the ratio" (xkeepratio="true" in the XML), the relative
+    //    position of the control in the layout (i.e. the given rBox) is
+    //    saved, and will be kept constant. The size of the control will not
+    //    be changed, only its position may vary. To do that, we consider the
+    //    part of the layout to the left of the control (for an horizontal
+    //    resizing) and the part of the layout to the right of the control,
+    //    and we make sure that the ratio between their widths is constant.
+    //
+    //  - if we don't keep the ratio, the resizing algorithm is completely
+    //    different. We consider that the top left hand corner of the control
+    //    ("lefttop" attribute in the XML) is linked to one of the 4 corners
+    //    of the layouts ("lefttop", "leftbottom", "righttop" and
+    //    "rightbottom" values for the attribute). Same thing for the bottom
+    //    right hand corner ("rightbottom" attribute). When resizing occurs,
+    //    the linked corners will move together, and this will drive the
+    //    moving/resizing of the control.
+
+    // Initialize the horizontal ratio
+    if( m_xKeepRatio )
+    {
+        // First compute the width of the box minus the width of the control
+        int freeSpace = m_rBox.getWidth() - (m_right - m_left);
+        // Instead of computing left/right, we compute left/(left+right),
+        // which is more convenient in my opinion.
+        if( freeSpace != 0 )
+        {
+            m_xRatio = (double)m_left / (double)freeSpace;
+        }
+        else
+        {
+            // If the control has the same size as the box, we can't compute
+            // the ratio in the same way (otherwise we would divide by zero).
+            // So we consider that the intent was to keep the control centered
+            // (if you are unhappy with this, go and fix your skin :))
+            m_xRatio = 0.5;
+        }
+    }
+
+    // Initial the vertical ratio
+    if( m_yKeepRatio )
+    {
+        // First compute the width of the box minus the width of the control
+        int freeSpace = m_rBox.getHeight() - (m_bottom - m_top);
+        // Instead of computing left/right, we compute left/(left+right),
+        // which is more convenient in my opinion.
+        if( freeSpace != 0 )
+        {
+            m_yRatio = (double)m_top / (double)freeSpace;
+        }
+        else
+        {
+            // If the control has the same size as the box, we can't compute
+            // the ratio in the same way (otherwise we would divide by zero).
+            // So we consider that the intent was to keep the control centered
+            // (if you are unhappy with this, go and fix your skin :))
+            m_yRatio = 0.5;
+        }
+    }
+
 }
 
 
 int Position::getLeft() const
 {
+    if( m_xKeepRatio )
+    {
+        // Ratio mode
+        // First compute the width of the box minus the width of the control
+        int freeSpace = m_rBox.getWidth() - (m_right - m_left);
+        return (int)(m_xRatio * freeSpace);
+    }
+    else
+    {
         switch( m_refLeftTop )
         {
             case kLeftTop:
@@ -58,11 +130,21 @@ int Position::getLeft() const
         }
         // Avoid a warning
         return 0;
+    }
 }
 
 
 int Position::getTop() const
 {
+    if( m_yKeepRatio )
+    {
+        // Ratio mode
+        // First compute the height of the box minus the height of the control
+        int freeSpace = m_rBox.getHeight() - (m_bottom - m_top);
+        return (int)(m_yRatio * freeSpace);
+    }
+    else
+    {
         switch( m_refLeftTop )
         {
             case kLeftTop:
@@ -76,11 +158,21 @@ int Position::getTop() const
         }
         // Avoid a warning
         return 0;
+    }
 }
 
 
 int Position::getRight() const
 {
+    if( m_xKeepRatio )
+    {
+        // Ratio mode
+        // The width of the control being constant, we can use the result of
+        // getLeft() (this will avoid rounding issues).
+        return getLeft() + m_right - m_left;
+    }
+    else
+    {
         switch( m_refRighBottom )
         {
             case kLeftTop:
@@ -94,11 +186,21 @@ int Position::getRight() const
         }
         // Avoid a warning
         return 0;
+    }
 }
 
 
 int Position::getBottom() const
 {
+    if( m_yKeepRatio )
+    {
+        // Ratio mode
+        // The height of the control being constant, we can use the result of
+        // getTop() (this will avoid rounding issues).
+        return getTop() + m_bottom - m_top;
+    }
+    else
+    {
         switch( m_refRighBottom )
         {
             case kLeftTop:
@@ -112,6 +214,7 @@ int Position::getBottom() const
         }
         // Avoid a warning
         return 0;
+    }
 }
 
 

modules/gui/skins2/utils/position.hpp

@@ -82,8 +82,8 @@ class Position
 
         /// Create a new position relative to the given box
         Position( int left, int top, int right, int bottom, const Box &rBox,
-                  Ref_t refLeftTop = kLeftTop,
-                  Ref_t refRightBottom = kLeftTop );
+                  Ref_t refLeftTop, Ref_t refRightBottom,
+                  bool xKeepRatio, bool yKeepRatio );
 
         ~Position() {}
 
@@ -108,6 +108,13 @@ class Position
         const Box &m_rBox;
         Ref_t m_refLeftTop;
         Ref_t m_refRighBottom;
+        /// "Keep ratio" mode
+        bool m_xKeepRatio;
+        bool m_yKeepRatio;
+        /// Initial width ratio (usually between 0 and 1)
+        double m_xRatio;
+        /// Initial height ratio (usually between 0 and 1)
+        double m_yRatio;
 };
 
 

share/skins2/skin.dtd

@@ -114,6 +114,8 @@
         y           CDATA   "0"
         lefttop     CDATA   "lefttop"
         rightbottom CDATA   "lefttop"
+        xkeepratio  CDATA   "false"
+        ykeepratio  CDATA   "false"
         image       CDATA   #REQUIRED
         action      CDATA   "none"
         action2     CDATA   "none"
@@ -128,6 +130,8 @@
         y           CDATA   "0"
         lefttop     CDATA   "lefttop"
         rightbottom CDATA   "lefttop"
+        xkeepratio  CDATA   "false"
+        ykeepratio  CDATA   "false"
         up          CDATA   #REQUIRED
         down        CDATA   "none"
         over        CDATA   "none"
@@ -143,6 +147,8 @@
         y            CDATA   "0"
         lefttop      CDATA   "lefttop"
         rightbottom  CDATA   "lefttop"
+        xkeepratio  CDATA   "false"
+        ykeepratio  CDATA   "false"
         up1          CDATA   #REQUIRED
         down1        CDATA   "none"
         over1        CDATA   "none"
@@ -164,6 +170,8 @@
         y           CDATA   "0"
         lefttop     CDATA   "lefttop"
         rightbottom CDATA   "lefttop"
+        xkeepratio  CDATA   "false"
+        ykeepratio  CDATA   "false"
         up          CDATA   #REQUIRED
         down        CDATA   "none"
         over        CDATA   "none"
@@ -191,6 +199,8 @@
         y           CDATA   "0"
         lefttop     CDATA   "lefttop"
         rightbottom CDATA   "lefttop"
+        xkeepratio  CDATA   "false"
+        ykeepratio  CDATA   "false"
         sequence    CDATA   #REQUIRED
         nbimages    CDATA   #REQUIRED
         minangle    CDATA   "0"
@@ -208,6 +218,8 @@
         width       CDATA   "0"
         lefttop     CDATA   "lefttop"
         rightbottom CDATA   "lefttop"
+        xkeepratio  CDATA   "false"
+        ykeepratio  CDATA   "false"
         text        CDATA   ""
         font        CDATA   #REQUIRED
         color       CDATA   "#000000"
@@ -225,6 +237,8 @@
         height      CDATA   "0"
         lefttop     CDATA   "lefttop"
         rightbottom CDATA   "lefttop"
+        xkeepratio  CDATA   "false"
+        ykeepratio  CDATA   "false"
         font        CDATA   #REQUIRED
         bgimage     CDATA   "none"
         fgcolor     CDATA   "#000000"
@@ -244,6 +258,8 @@
         height      CDATA   "0"
         lefttop     CDATA   "lefttop"
         rightbottom CDATA   "lefttop"
+        xkeepratio  CDATA   "false"
+        ykeepratio  CDATA   "false"
         font        CDATA   #REQUIRED
         bgimage     CDATA   "none"
         itemimage   CDATA   "none"
@@ -267,6 +283,8 @@
         height      CDATA   "0"
         lefttop     CDATA   "lefttop"
         rightbottom CDATA   "lefttop"
+        xkeepratio  CDATA   "false"
+        ykeepratio  CDATA   "false"
         autoresize  CDATA   "true"
         help        CDATA   ""
     >