HOW TO: Build your own GUI-based BasicHome Editor

Discussion in 'PureVision' started by catavolt, January 31, 2014.

Thread Status:
Not open for further replies.
  1. catavolt
    • Team MediaPortal
    • Administrator

    catavolt Design Group Manager

    Joined:
    August 13, 2007
    Messages:
    12,285
    Likes Received:
    5,007
    Gender:
    Male
    Occupation:
    Technical Documentation, Translation
    Location:
    Lanzarote
    Ratings:
    +7,450 / 38
    Home Country:
    Germany Germany
    Show System Specs
    !!! THIS PAGE IS INTENDED FOR SKINNERS !!!
    FIRST OF ALL A BIG THANKS TO OUR USER AND DESIGN TEAM MEMBER POG, WHO HELPED WITH HIS INCREDIBLE PATIENCE AND UNBEATABLE KNOWLEDGE OF THE MOST INTELLIGENT USE OF THE MEDIAPORTAL SKIN EXPRESSIONS TO MAKE THIS VERSATILE SKIN EDITOR COME TRUE!!!


    Where to start?

    For designing a BasicHome Editor we need to define all available plugins with their names, hyperlinks, latest media jumppoints, and hover images.

    This is done in the file BasicHomeEditorDefines.xml (attached).

    Here is an excerpt of that file showng hpw the defines are made (pls. note you can use this file as is :p)

    <define property="true" evaluateNow="true">#Video1:#(L(3))</define>
    <define property="true" evaluateNow="true">#Video1.hyperlink:6</define>
    <define property="true" evaluateNow="true">#Video1.hover:hover_my videos.png</define>
    <define property="true" evaluateNow="true">#Video1.plugin:#(L(3))</define>
    <define property="true" evaluateNow="true">#Video1.latestmedia:91915991</define>

    <define property="true" evaluateNow="true">#Video2:#(L(1300))</define>
    <define property="true" evaluateNow="true">#Video2.hyperlink:9811</define>
    <define property="true" evaluateNow="true">#Video2.hover:hover_my tv series.png</define>
    <define property="true" evaluateNow="true">#Video2.plugin:#(L(1300))</define>
    <define property="true" evaluateNow="true">#Video2.latestmedia:91919994</define>

    <define property="true" evaluateNow="true">#Video3:Moving Pictures</define>
    <define property="true" evaluateNow="true">#Video3.hyperlink:96742</define>
    <define property="true" evaluateNow="true">#Video3.hover:hover_moving pictures.png</define>
    <define property="true" evaluateNow="true">#Video3.plugin:Moving Pictures</define>
    <define property="true" evaluateNow="true">#Video3.latestmedia:91919991</define>

    etc.


    The BasicHome Editor

    Now we need the Editor file itself: BasicHomeEditor.xml (attached)

    In this file we first setup the pluginlist from which the user selects his preferred plugin at his preferred position. This is done with the expression "<define property="true" evaluateNow="false">#pluginlist:" and looks like this:

    <define property="true" evaluateNow="false">#pluginlist:-------------------- TV Plugins --------------------,#TV1,#TV2,#TV3,#TV4,#TV5,#TV6,#TV7,#TV8,#TV9,NoPlugin,-------------------- Video Plugins --------------------,#Video1,#Video2,#Video3,#Video4,#Video5,#Video6,#Video7,#Video8,#Video9,#Video10,NoPlugin,-------------------- Music Plugins --------------------,#Music1,#Music2,#Music3,#Music4,#Music5,#Music6,#Music7,#Music8,#Music9,#Music10,#Music11,#Music12,#Music13,NoPlugin,-------------------- Pictures Plugins --------------------,#Pictures1,#Pictures2,#Pictures3,NoPlugin,-------------------- Weather Plugins --------------------,#Weather1,#Weather2,NoPlugin,-------------------- Internet Plugins --------------------,#Internet1,#Internet2,#Internet3,#Internet4,#Internet5,#Internet6,#Internet7,#Internet8,#Internet9,#Internet10,#Internet11,#Internet12,NoPlugin,-------------------- Home Plugins --------------------,#Home1,#Home2,#Home3,#Home4,#Home5,#Home6,#Home7,#Home8,#Home9,#Home10,#Home11,#Home12,#Home13,NoPlugin,-------------------- Game Plugins --------------------,#Game1,#Game2,#Game3,#Game4,#Game5,#Game6,#Game7,#Game8,#Game9,#Game10,#Game11,#Game12,NoPlugin,-------------------- #(L(5)) --------------------,#Settings2,#Settings1,#Settings3,#Settings4,#TV9,#Video10,#Music13,#Pictures3</define>

    For my skins I used some separators, followed by the properties for this categorie, taken from the BasicHomeDefines.xml:

    -------------------- TV Plugins --------------------

    If you don´t want to use those, just delete them. I found it useful, so the user always see the categories from which he/she is selecting from ;)

    Then we define the layout properties like background, separators etc. according to our skin, followed by the menubutton lists to select from. (Of course you would do it in the look and feel of your skin, but in general you could just use the menubutton lists as they are, with adapted display positions.)

    Have a look into the attached BasicHomeEditor.xml to see how the menulist is structured ;)


    What is needed in settings_GUI_skin.xml?

    In settings_GUI_skin.xml we need to define a button for accessing/displaying the BasicHome Editor:

    <control>
    <description>BasicHome Editor</description>
    <type>checkbutton</type>
    <id>10000</id>
    <posX>800</posX>
    <posY>155</posY>
    <width>400</width>
    <label>BasicHome Editor</label>
    <selected>#(skin.hassetting('#skin.basichome.editor'))</selected>
    <onclick>#(skin.togglesetting('#skin.basichome.editor'))</onclick>
    <onup>17</onup>
    <onleft>15</onleft>
    <onright>15</onright>
    <ondown>10001</ondown>
    </control>


    Adapt the positioning controls to your needs, and dont forget to import this XML into your settings_GUI_Skin.xml.

    In the settings_GUI_Skin.xml mark all elements that must not be visible when BasicHome Editor is open with:

    <visible>!skin.hassetting(#skin.basichome.editor)</visible>

    That is all for the BasicHome Editor to be used from inside the GUI Settings.


    Implementing the properties selected in BasicHome Editor

    The following information shows how to use skin expressions for your basic home buttons. The example shows one button from my PureVisionHD skin, but should be more or less identical to the button controls you use.

    Please note that you do not have to change any of your button IDs, all is done by the intelligent expressions figured out by Pog ;-)

    Example for a button:

    <control Style="BasicHomeButton">
    <description>Recordings button</description>
    <type>button</type>
    <id>204</id>
    <label>#skin.basichome.TV4</label>
    <hyperlink>#(string.format('{0}.hyperlink',#skin.basichome.TV4))</hyperlink>
    <onup>203</onup>
    <ondown>205</ondown>
    <onleft>2</onleft>
    <onright>200200</onright>
    <onfocus>#(skin.setstring('#skin.currentbutton',string.format('{0}||204',#skin.basichome.TV4)))</onfocus>
    <visible>!string.equals(#skin.basichome.TV4,NoPlugin)</visible>
    </control>


    In general you will understand that we replace the label and hyperlink through a skin expression referring to the defines for TV4.


    Defining the jumppoints for LatesMediaHandler Info and store the button ID we come from

    How do we realize the jumppoint to LatesMediaHandler info to directly play the recording?

    Here we use one of the most intelligent skin expressions from Pog:

    <onright>200200</onright>
    <onfocus>#(skin.setstring('#skin.currentbutton',string.format('{0}||204',#skin.basichome.TV4)))</onfocus>


    What is that???

    Well, first you need to place a so-called selector in front of your button list, which looks like this:



    <control>
    <description>Selector for media panels</description>
    <type>button</type>
    <id>200200</id>
    <label />
    <posX>-999</posX>
    <posY>-999</posY>
    <onfocus>#(skin.setfocus(cint(#currentmoduleid),switch(
    eq(string.formatcount(0,#skin.currentbutton),'#TV4'),91919984,
    eq(string.formatcount(0,#skin.currentbutton),'#Video1'),91915991,
    eq(string.formatcount(0,#skin.currentbutton),'#Video2'),91919994,
    eq(string.formatcount(0,#skin.currentbutton),'#Video3'),91919991,
    eq(string.formatcount(0,#skin.currentbutton),'#Video5'),91919988,
    eq(string.formatcount(0,#skin.currentbutton),'#Music1'),91919997,
    eq(1,1),cint(string.formatcount(2,#skin.currentbutton)))))</onfocus>
    </control>


    This selector holds the jumppoints for the different latest media direct accesses, e.g for TV4 (Recordings, jumppoint 91919984), Video1 (MyVideos, jumppoint 91915991), Video2 (TVSeries, jumppoint 91919994) etc. and stores the ID of the actual focussed button.
    But how do we define, which latest media panel to open? And how do we come back to our button if we choose not to play that latest media?
    Well, therefore we have to change some properties in our latest media file.

    The visibility is set as follows (we still use recordings as our example):

    <visible>plugin.isenabled(Latest Media Handler)+string.contains(#highlightedbutton,TV4)|[Control.hasfocus(91919984)|Control.hasfocus(91919985)|Control.hasfocus(91919986)]+string.equals(#latestMediaHandler.tvrecordings.latest.enabled,true)</visible>

    Note the important thing here is the "string.contains(#highlightedbutton,TV4)", so this latest media info will only be displayed when the highlighted button belongs to TV4 (recordings).

    The button to play the latest media item itself looks like this:

    <control>
    <type>button</type>
    <id>91919984</id>
    <width>174</width>
    <height>118</height>
    <textureFocus>picturecase-focus.png</textureFocus>
    <textureNoFocus>picturecase.png</textureNoFocus>
    <label>-</label>
    <onleft>91919986</onleft>
    <onright>91919985</onright>
    <onup>#(cint(string.formatcount(2,#skin.currentbutton)))</onup>
    <ondown>91919984</ondown>
    <animation effect="rotatex" start="90" end="0" center="919,0" time="200" reversible="false">visible</animation>
    </control>


    Besides the different textures and positions, your button in your skin should look very similiar except this one:

    <onup>#(cint(string.formatcount(2,#skin.currentbutton)))</onup>

    This is nothing else than the button ID of the button you came from, stored with the selector explained above.

    Of course you must adapt this to the layout of your skin, e.g. the button to return to could also be done via <ondown> etc.

    That is all folks - now you have a nice GUI-based skin editor (screenshots are from my PureVisionHD 1080 implementation):

    22-07-18.jpg 22-07-22.jpg 22-07-39.jpg 22-07-47.jpg 22-08-41.jpg

    Have fun and of course Happy Skinning!

    catavolt
     

    Attached Files:

    Last edited: February 14, 2014
    • Like Like x 4
    • Thank You! Thank You! x 1
Loading...
Thread Status:
Not open for further replies.

Users Viewing Thread (Users: 0, Guests: 0)

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice
  • About The Project

    The vision of the MediaPortal project is to create a free open source media centre application, which supports all advanced media centre functions, and is accessible to all Windows users.

    In reaching this goal we are working every day to make sure our software is one of the best.

             

  • Support MediaPortal!

    The team works very hard to make sure the community is running the best HTPC-software. We give away MediaPortal for free but hosting and software is not for us.

    Care to support our work with a few bucks? We'd really appreciate it!