Designing & implementing a new skin... (1 Viewer)

JJDoherty

MP Donator
  • Premium Supporter
  • July 10, 2013
    143
    72
    42
    Dublin
    Ireland Ireland
    Country flag
    Hi all,

    I've done a search on this in the forum and I've been able to find bits and pieces here and in the Wiki, here and what I was wondering is, is there a single resource, post or location that I should concentrate on to get started with MP2 skin design and implementation? I don't want to be wasting my time or using out-of-date information before getting started.

    I suspect that the best course of action will be to take an existing skin and alter that to get started but I would like to understand more, such as what the architecture is or why the default skin is where it is (the explanation I have read on that isn't very clear to me).

    I know this is a very non-concrete type of question but I suppose I am lacking some of the very basics of how I might approach this from scratch and indeed how to compile any new skin I might develop.

    Any help or anyone's two cents worth is more than welcome.
     

    ge2301

    MP2 Design
  • Team MediaPortal
  • January 11, 2014
    6,615
    2,385
    Stuttgart
    Germany Germany
    Country flag
    Hi and welcome,

    I can help you with the design as I'm the designer of existing MP2 skins. But I have to tell you, that I also started at 0 and learned everything with learning by doing method. That said, there is no real documentation, it would simply take too much time to create that.
    MP2 designs are based on xaml language, not xml as for MP1. There is only a small thing, MP2 uses basically MPF (MediaPresentation Foundation), which is 95% same as WPF (WindowsPresentationFoundation). If you google for xaml or WPF (it's same meaning), you have basically a large online library with all the code you need.
    As you said the best thing is to use an existing skin, that is at least partly comparable to your target design, as base. I also would recommend to first trying to create a theme of an existing skin.

    As tool you can theoretically use notepad, but I strongly recommend usage of Visual Studio. There is a free version, that fully covers all needs.
    Overall, I appreciate any people how are willing to support MP2 (y) But to not hide the hard facts, you'll definitely need some time and some enthusiasm to get a bit into xaml. The beginning is hard and I want only to support, if you are really sure that you are not somebody who gives up quickly ;) And I'll be in vacation and business trip for a month from Friday, I won't be available at all in this time frame.
    If you are still interested just let me know :D
     

    CyberSimian

    Test Group
  • Team MediaPortal
  • June 10, 2013
    1,999
    1,234
    Southampton
    United Kingdom United Kingdom
    Country flag
    I suspect that the best course of action will be to take an existing skin and alter that to get started
    I also started at 0 and learned everything with learning by doing method.
    I agree with @ge2301. I use MP1, but I was dissatisfied with the existing MP1 skins (there was one feature that I wanted that none of the existing skins offered), so I copied the files for a skin that I liked (the old "DefaultWide"), and started modifying that. I don't know anything about MP2 skins, but the MP1 skin language is full of restrictions and inconsistencies, so you can never be quite sure whether some mark-up will work until you try it. This makes the development of a new skin very time consuming.

    One really useful aspect of MP1 skins is that you can modify most skin files while MP1 is running (including for the panel on display). Simply exit the panel and then re-enter it; MP1 notices that the file has changed and reloads it. This makes experimentation very quick. Let's hope MP2 behaves the same!

    I started work on my new skin in January 2017, and I am less than halfway through (I have done most of the parts that I actually use, but none of the parts that I don't use). Of course, work on the skin has been intermittent.

    -- from CyberSimian in the UK
     

    ge2301

    MP2 Design
  • Team MediaPortal
  • January 11, 2014
    6,615
    2,385
    Stuttgart
    Germany Germany
    Country flag
    I don't know anything about MP2 skins, but the MP1 skin language is full of restrictions and inconsistencies, so you can never be quite sure whether some mark-up will work until you try it. This makes the development of a new skin very time consuming.
    MPF is very consistant and has lot of potential. But it's more a real code language and consists a lot of styles, templates etc. I do not know xml well, but I think you mostly place what you want directly (with all the conconsitances mentioned). In MPF you place e.g. just a list, which has a style (defined in another style file). This list style contains another container style for the entries, the container style contains a button style, which defines the action and design on click, focus etc. As a result you can minimize reduntant code and quickly adjust the complete skin, because everything is linked. But on the other hand, as mentioned, people struggle at first to deal with all the references, because they do not know the systematic behind. I also struggeled, but not everything makes sense and step by step I can also use the potential.

    Let's hope MP2 behaves the same!
    It does partly. Styles can be partly changed "online", but base entries not. Compiling is necessary after every change. It's not a big deal, in MP2 things are not placed with coordinates as I saw very often. Positioning things by try and error (moving) is not the right way. In MP2 most elements are adjusted according to a base structure by clear alignment. Also compiling is done mostly in a few seconds.
     

    Scheibes

    Portal Pro
    June 14, 2012
    675
    45
    35
    Germany Germany
    Country flag
    I am so happy that we may have a new designer at MP2. Because I think that more skins attract more people.
    And if more people use MP2, maybe more programmers will come up with MP2.

    Would be nice if the MP2 community would grow! (y)
     

    JJDoherty

    MP Donator
  • Premium Supporter
  • July 10, 2013
    143
    72
    42
    Dublin
    Ireland Ireland
    Country flag
    Great to get so many positive and useful responses. I am a programmer by profession so I am hoping (presuming) that getting up the hill regarding learning WPF (MPF in this case) will not be beyond me.

    Yes, @ge2301 "learning by doing" is definitely the way to go when learning a new programming skill. I do think that any documentation, once it is up-to-date, regardless of quality is better than none, as a starting position anyway. having used tutorials before, not unlike the (unfortunately incomplete) "Hello World" skin tutorial that can be found in the Wiki, can be a very useful starting point too.

    Anyway, thanks all for the input so far...
     
    Last edited:

    ge2301

    MP2 Design
  • Team MediaPortal
  • January 11, 2014
    6,615
    2,385
    Stuttgart
    Germany Germany
    Country flag
    Great to get some many positive responses and useful responses.
    I was already worrying I was too nagative. But I prefer to show also the dark side, so nobody is dreaming of undoable things ;)

    I am a programmer by profession so I am hoping (presuming) that getting up the hill regarding learning WPF (MPF in this case) will not be beyond me.
    That's great. In this case you won't have too much trouble I think. WPF is not too complicated compared to #C and for skins it's mostly copy-paste or small modification of existing code peaces. You need mostly to know where to search.

    Yes, @ge2301 "learning by doing" is definitely the way to go when learning a new programming skill. I do think that any documentation, once is up-to-date, regardless of quality is better than none as a starting position anyway. I have also used tutorials before, not unlike the (unfortunately incomplete) "Hello World" skin tutorial that can be found in the Wiki, which can be a very useful starting point too.
    I won't write a documentation, because I'm the only MP2 designer, who needs to maintain all skins and I'm working also on a new skin.
    Professional and private life keep me also busy. I'm actually already spending too much time with MP2, because I write also Wiki parts etc.
    You can contact me privately regarding your skin project. Discussing it in public is not good, because everybody will know better than you and before you even started you have a list of things others want to have. This is your vision and your skin.

    What I need to know in the beginning is following:
    • Do you plan to have a different main menu structure? (this is handled by a model in #C and most dofficult to change, because you need a developer)
    • Do you already have mock-ups of your design?
    • Do you have a structure of which screens and elements you want to have? Is it just rearrangement of existing elements you find in existing skins or new?
    • Which is the existing skin, that fit's closest to what you want to achieve?
    After that I can tell you where to start with small "exercises" and explain step by step the base structure of MP2.
     

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

    OP Similar threads Forum Replies Date
    ajs [fixed] 5029: Add the ability to choose the type of pause for designers in the slideshow MediaPortal 1 4
    ge2301 New forum design together with change to XF2.x Online Facilities 4
    M.Hulot Fragen zu FSK-Angaben/Symbole + Cover-Design-Darstellung Allgemeines Supportforum 9
    B [Finished] [MP2-817] Implement NotifyOnSourceUpdated and NotifyOnTargetUpdated binding events MediaPortal 2 3
    C Is there an ideot save how-to implement madVR incl. HDR? Codecs, External Players 1
    Rob Hexenmeister Quick question - skinning MyPics General Support 7
    ajs [Info] Pre 0.7 Beta - MPExtended, WebMP, Bootstrap skin by ajs - Hard way MPExtended 393
    S Touchscreen skin? MediaPortal 1 Talk 6
    azzuro [fixed] 5011: Version label in Splash screen - pos, size from skin MediaPortal 1 61
    catavolt [WiP] When changing theme in my skins, I always get this error message in logs MediaPortal 1 9
    joecrow MultiShortcut Plugin (Uavailable) in DWHD skin General Support 58
    V Skin With Menu Editor MediaPortal 1 Skins 13
    wizard123 New Skin Template ? MediaPortal 2 8
    Rob Hexenmeister [solved] Latest Media Handler - skinning buttons Fanart Handler 19
    CyberSimian [solved] MP1-4976 Built-in skin variables for current date MediaPortal 1 8
    Mr6686 [solved] Titan skin broken since update to 1.23 Installation, configuration support 6
    doskabouter Skin question Skins and Plugins Installer (MPEI) 1
    Y Titan Skin unter 1.23 nicht mehr so schön Allgemeines Supportforum 1
    framug 1.22.0 BasicHome Editor settings for DefaultWide HD skin not kept when update 1.22 3
    catavolt [solved] FanartHandler - Skin - Holiday and Spotlight support Fanart Handler 5
    ajs [fixed] 4936 - Strange behavior of the font in the skin MediaPortal 1 35
    ajs [solved] 4935: Add string.replace function to Skin engine MediaPortal 1 10
    ajs [solved] Latest Media Handler - Skin settings - Custom latests items number Fanart Handler 27
    Rob Hexenmeister [solved] Latests Media Handler - Skinning an updating window or control Fanart Handler 26
    T Skin Wechsel Installationsprobleme? 1
    Similar threads

























    Top Bottom