HOW TO: Build your own GUI-based BasicHome Editor (1 Viewer)

Status
Not open for further replies.

catavolt

Design Group Manager
  • Team MediaPortal
  • August 13, 2007
    12,922
    9,278
    Lanzarote
    Germany Germany
    Country flag
    • Thread starter
    • Admin
    • #1
    !!! 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
     

    Attachments

    Last edited:
    Status
    Not open for further replies.

    Users Who Are Viewing This Thread (Users: 0, Guests: 1)

    OP Similar threads Forum Replies Date
    M General TVE 3.5 VS2019 - build discussion TV Engine 50
    morpheus_xx [Help Me!] Build issues on TeamCity MediaPortal 2 1
    framug 1.24.0 1.25.0 pre : problem with build ? 1.24 Pre Release 89
    doskabouter Build errors MediaPortal 1 9
    doskabouter Building TVPlugins MediaPortal 1 17
    vapourEyes Building TV Plugin General Development (no feature request here!) 49
    wizard123 [solved] MP1 Build help MediaPortal 1 21
    morpheus_xx Test builds of MP2.3 WiP, x64, Nereus and more... MediaPortal 2 44
    T No TV after updating Windows 10 to latest Version 1903 / OS build 18362.175 (logs attached) General Support 2
    N [Question] How come when I build WIP_2.2.1 the logged version number is 2.1.1711.10774? MediaPortal 2 1
    N [Question] Build troubles MediaPortal 2 6
    Stéphane Lenclud [fixed] Core DLL not building from Visual Studio MediaPortal 1 2
    J Clock speed vs multi-core CPU's Can MediaPortal benefit from multi core cpu's? General 0
    J Recorded TV to NAS no longer working after Windows build 1803 1.19 6
    T [Evaluate] Own plugins for AmazonPrime and Netflix Feature Requests 2
    R MP2 GUI Issues General 7
    ajs [fixed] 5022: Improving the MPE Installer, providing nicer GUI :) MediaPortal 1 42
    ajs [fixed] 5015: Improving the MP1 installer, providing nicer GUI :) MediaPortal 1 138
    ltfearme Exception thrown when SetText in GUI Notification dialog Titan Skin Feedback 3
    F GUI incredibly slow Performance General 22
    S Hard crashes in gui when sending to importer Moving Pictures 2
    azzuro [Help Me!] Improve duration times of GUI List items MediaPortal 2 37
    Top Bottom