MediaPortal Windows Media Center
MediaPortal Wiki > MediaPortal 1 > Contribute > Skins > Skin Architecture > Skin Controls > Imagelist

Imagelist

Was this page helpful?

    Description

    Displays an image or a list of images a number of times.

    Subitems:

    Subitems allows to define a series of images that are used under specific circumstances.

    • The first item is used to draw all items that shouldn't be visible
    • The second item is used to draw all visible items
    • All subsequent items are used as the percentage increases (see example)

    Given an example with 10 items and 4 textures (t0, t1, t2, t3) , the following textures will be drawn given the current percentage value:

    % Textures used Example
    100 (t1) (t1) (t1) (t1) (t1) (t1) (t2) (t2) (t2) (t3) imagelist100.png
    70 (t1) (t1) (t1) (t1) (t1) (t1) (t2) (t0) (t0) (t0) imagelist70.png
    40 (t1) (t1) (t1) (t1) (t0) (t0) (t0) (t0) (t0) (t0) imagelist40.png
    0 (t0) (t0) (t0) (t0) (t0) (t0) (t0) (t0) (t0) (t0) imagelist0.png

    To calculate which item is shown at which percentage, calculate:

    percentage / 100 * number of textures

    and cast this value to int. (round towards zero/truncate)

    Changelog

    ChangeDateVersion
    No changes yet for this control

    Tags

    GUIImageList (imagelist)

    Element Name Data Type Description
    align Alignment Left | Right | Center | Top | Bottom | Middle
    orientation String Horizontal | Vertical (vertical not supported yet (MP 1.1)
    textureWidth Integer Width of one image element
    textureHeight Integer Height of one image element
    percentage Boolean How many of the images should be drawn. Be advised that the number is multiplied by 10. (So if you set 5, the Percentage value will be 50)
    imagesToDraw Integer With this property you can define how many images are drawn. It was added to fix problems in skins where the screen resolution differes to the resolution the skin was designed for.
    subitems Item Images that are drawn, for a detailled explanation see below.

    Inherited by GUIControl

    See GUIControl for the full documentation of this control.

    Element Name Data Type Description
    id Integer The id of the control. The id will couple the skin file to the code, so if we later on want to check that a user pressed a button, the id will be required and must be unique. For controls that will never be referenced in the code it is safe to set it to "1"
    description String An optional description of the control for your reference
    type String The type of the control, for instance "button", "label", "textbox" and all other controls.
    posX Integer The X-position on the window for this control
    posY Integer The Y-position on the window for this control
    width Integer The width of this control
    height Integer The height of this control
    onleft Integer The control id to move the focus to when the user moves left. If not specified (or zero) MediaPortal will find the closest control in that direction to move to
    onright Integer The control id to move the focus to when the user moves right. If not specified (or zero) MediaPortal will find the closest control in that direction to move to
    onup Integer The control id to move the focus to when the user moves up. If not specified (or zero) MediaPortal will find the closest control in that direction to move to
    ondown Integer The control id to move the focus to when the user moves down. If not specified (or zero) MediaPortal will find the closest control in that direction to move to
    colordiffuse Long Allows you to mix a color & a graphics texture. E.g. If you have a graphics texture like a blue button you can mix it with a yellow color diffuse and the end result will be green. Defaults to 0xFFFFFFFF
    dimColor Integer Color for a control when it is not focussed. Defaults to half transparent (0x60ffffff)
    onfocus String [Since 1.3] Executes a MediaPortal skin function when the control gains focus.  See Skin Settings for more information.

    XML Examples

    Example:

    <control>
      <type>imagelist</type>
      <id>1</id>
      <posX>210</posX>
      <posY>583</posY>
      <width>302</width>
      <height>40</height>
      <textureWidth>22</textureWidth>
      <textureHeight>22</textureHeight>
      <subitems>
        <subitem>UserRatingStarOff.png</subitem>
        <subitem>stargood.png</subitem>
      </subitems>
      <orientation>horizontal</orientation>
      <align>left</align>
      <imagesToDraw>10</imagesToDraw>
      <percentage>#MovingPictures.SelectedMovie.score</percentage>
      <visible>facadeview.list+Control.isvisible(50)</visible>
    </control>

    The result of the above xml would produce the star rating seen in the following screenshot:

    multiimage_example.png




    Tag page (Edit tags)
    • No tags
    Running the latest version?

    V1.7.0 - released April 2014
    Releasenews | Download
    Changelog
     | Requirements
    HTPC
    Team-MediaPortal
     
    About
    Contact |  Press
    Partners