Skinning Online Videos question (1 Viewer)

Rob Hexenmeister

MP Donator
  • Premium Supporter
  • May 12, 2011
    207
    49
    Slaithwaite
    Home Country
    United Kingdom United Kingdom
    Good evening everyone,

    I need some help with skinning buttons for Online Videos.

    What I am trying to achieve is move the buttons off the hidden menu into the main window. I've taken a screenshot to show what I am doing.

    The problem is with the bottom two buttons <id>5</id> and <id>9</id> [ full code at the end of this text.]

    They work fine, but navigation is awful. This type of selectbutton just isn't designed for sideways navigation as you end up changing the values. Ideally I would like to change them to a menubutton with dialoglist, but I don't know what I am doing as the guidance in the wiki is, to say the least, thin on this topic (this would be a really good addition to the tutorials)

    What I do know - some plugins crash if certain default buttons aren't present, or if you muck about with their button type, so they have to be kept as they are. What I would suggest to myself is moving the two problematic buttons to off-screen minus coordinates and putting in new buttons with different <id>s in their place.

    What I don't know how to do, is how to bind variables to a dialog style menubutton, and what properties to set for these two functions in OnlineVideos. A fairly fundamental failing on my part therefore. I've had a good search of the wiki and while it explains what binding is, there are no examples I can find, and I would only be guessing at setting OnlineVideos properties.

    Any advice would be very gratefully received

    Thank you
    RH

    The problem buttons:

    <control>
    <description>Button 2 max results</description>
    <type>selectbutton</type>
    <id>5</id>
    <posX>68</posX>
    <posY>912</posY>
    <font>TitanLight12</font>
    <label>#OnlineVideos.Translation.MaxResults.Label</label>
    <textcolor>FF000000</textcolor>
    <textcolorNoFocus>ffffffff</textcolorNoFocus>
    <onup>13</onup>
    <ondown>5</ondown>
    <onleft>901</onleft>
    <onright>9</onright>
    <animation effect="fade" time="250">WindowOpen</animation>
    <animation effect="fade" time="250">WindowClose</animation>
    <animation effect="fade" time="250">WindowOpen</animation>
    <animation effect="fade" time="250">WindowClose</animation>
    </control>


    <control>
    <description>Button 4 category</description>
    <type>selectbutton</type>
    <id>9</id>
    <posX>460</posX>
    <posY>912</posY>
    <font>TitanLight12</font>
    <label>#OnlineVideos.Translation.Category.Label</label>
    <textcolor>FF000000</textcolor>
    <textcolorNoFocus>ffffffff</textcolorNoFocus>
    <onup>10</onup>
    <ondown>9</ondown>
    <onleft>13</onleft>
    <onright>50</onright>
    <animation effect="fade" time="250">WindowOpen</animation>
    <animation effect="fade" time="250">WindowClose</animation>
    </control>

    What I would like: (format as per MyMusic)

    <control>
    <description>View-As</description>
    <type>menubutton</type>
    <id>2</id>
    <posX>68</posX>
    <posY>912</posY>
    <font>TitanLight12</font>
    <label></label>
    <mode>dialoglist</mode>
    <dialogTitle>792</dialogTitle>
    <valueTextInButton>yes</valueTextInButton>
    <valuePrefixText>95</valuePrefixText>
    <onup>.....
    etc
    </control>
     

    Attachments

    • OV Screenshot.png
      OV Screenshot.png
      572 KB
    • myonlinevideos.xml
      32 KB

    CyberSimian

    Test Group
  • Team MediaPortal
  • June 10, 2013
    2,849
    1,771
    Southampton
    Home Country
    United Kingdom United Kingdom
    What I don't know how to do, is how to bind variables to a dialog style menubutton,
    First of all, I have never used "OnlineVideos", so I cannot speak from personal experience. I can only make general comments. :(

    MP's skin engine allows the appearance of panels to be defined by the skin author, but mostly does not allow the skin author to vary the way that the skin engine operates. So on each panel, the skin engine will expect certain buttons or lists to be present, with specific control ids, and with specific control types. You can customise these via the tags defined for them (e.g. for a list), and you can position some controls off screen if you don't want to see them, but that is just about all that you can do for these pre-defined controls.

    You can add controls and buttons of your own, but generally you cannot use these to modify the behaviour of the skin engine (you have to use the pre-defined controls to do that). Example:

    In my skin, I allow the user to choose the number of rows that appear in the EPG and in lists. So I have added a menubutton control to enable this, but all that the menubutton does is to set a skin setting, and then the skin uses that value when calculating the layout of the EPG and lists. This menubutton does not cause the skin engine to do something different -- the button simply results in different sizes being specified for the pre-defined controls to use. This is the menubutton code:

    Code:
    <control>
      <description>"List rows" button</description>
      <type>menubutton</type>
      <id>33</id>
      <mode>dialoglist</mode>
      <dialogTitle>List rows</dialogTitle>
      <valuePrefixText>List rows: </valuePrefixText>
      <valueTextInButton>yes</valueTextInButton>
      <onclick>#(skin.setstring('#skin.list.rows',#selectedlabel33))</onclick>
      <binding>#skin.list.rows</binding>
      <subitems>
        <subitem>#(3)</subitem>
        <subitem>#(4)</subitem>
        <subitem>#(5)</subitem>
        <subitem>#(6)</subitem>
        <subitem>#(7)</subitem>
        <subitem>#(8)</subitem>
        <subitem>#(9)</subitem>
        <subitem>#(10)</subitem>
        <subitem>#(11)</subitem>
        <subitem>#(12)</subitem>
        <subitem>#(13)</subitem>
      </subitems>
      <onup>9</onup>
      <ondown>6</ondown>
      <onleft>10</onleft>
      <onright>10</onright>
    </control>


    In this code:
    • onclick specifies the skin setting to be set with the value chosen by the user.
    • binding specifies which skin setting contains the value to be used to highlight the current value when the menubutton list is displayed.
    • subitem lists the possible values for this skin setting. In this example the user can choose any value in the range 3 to 13. Note that in this particular case I have to use expression notation to prevent the skin engine interpreting the value as a reference to a string in the language file.
    • The control id is arbitrary -- you just need to choose a value that is not used by any of the pre-defined controls on that panel.
    This is what appears when the user clicks the "List rows" button in the left side menu:

    list_rows_menu.jpg

    So, if you want to define a value that will be used exclusively by your skin, the above code should act as an example. But you cannot add your own menubutton to modify a pre-defined control :(. @catavolt is the skin expert, so he may be able to provide further enlightenment.

    -- from CyberSimian in the UK
     

    Rob Hexenmeister

    MP Donator
  • Premium Supporter
  • May 12, 2011
    207
    49
    Slaithwaite
    Home Country
    United Kingdom United Kingdom
    You can customise these via the tags defined for them (e.g. for a list), and you can position some controls off screen if you don't want to see them, but that is just about all that you can do for these pre-defined controls.

    You can add controls and buttons of your own, but generally you cannot use these to modify the behaviour of the skin engine (you have to use the pre-defined controls to do that)

    Agree totally with the first part of this, my intentions are to move the buttons that I don't like off of the screen where they can't be seen.

    What I was hoping to do was create two new buttons in the menubutton style, (dialoglist mode), and alter the relevant OnlineVideos properties. As one is only number of items to display, and the other is a type of filter, I was hoping I would have some luck. If anyone with knowledge of how Online Videos works can confirm or help with this, then much appreciated.

    You have given me a handy tutorial though on subitems and dialoglist. I didn't know how to do that, and couldn't find anything as helpful as this in the Wiki, so I recommend this is put into the documentation.

    Thanks as ever
    RH
     

    Users who are viewing this thread

    Top Bottom