Skinning contest: One month to go (1 Viewer)

[FreakyJ]

AW: Skinning contest: One month to go

One more question: Is also Viewport3D available? Because I tried a simple example in MP2 and it works fine in WPF but not in MPF...

<DockPanel
    xmlns="www.team-mediaportal.com/2008/mpf/directx"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Context="{Model Id=5726DA5A-70D5-458f-AF67-611293D97912}" LastChildFill="False">
  


    <Grid>
        <DockPanel
            Width="Auto"
            VerticalAlignment="Stretch"
            Height="Auto"
            HorizontalAlignment="Stretch"
            Grid.ColumnSpan="1"
            Grid.Column="0"
            Grid.Row="0"
            Margin="0,0,0,0"
            Grid.RowSpan="1">
            <StackPanel>
                <StackPanel.Background>
                    <LinearGradientBrush>
                        <GradientStop Color="#FFFFFFFF" Offset="0"/>
                        <GradientStop Color="#00000000" Offset=".3"/>
                        <GradientStop Color="#00000000" Offset=".7"/>
                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    </LinearGradientBrush>
                </StackPanel.Background>
                <StackPanel Margin="10">

                </StackPanel>
            </StackPanel>
            <Viewport3D Name="mainViewport" ClipToBounds="True">
                <Viewport3D.Camera>
                    <PerspectiveCamera
                        FarPlaneDistance="100"
                        LookDirection="-11,-10,-9"
                        UpDirection="0,1,0"
                        NearPlaneDistance="1"
                        Position="11,10,9"
                        FieldOfView="70" />
                </Viewport3D.Camera>
                <ModelVisual3D>
                    <ModelVisual3D.Content>
                        <DirectionalLight Color="#FFFFFFFF" Direction="-2,-3,-1" />
                    </ModelVisual3D.Content>
                </ModelVisual3D>
            </Viewport3D>
        </DockPanel>
    </Grid>


</DockPanel>

I already looked at the difference between MPF and WPF in the documentation and there was the color mentioned, so I changed it... but it is still not working and in WPF it is still.

I'm sorry that I have questions over questions, but the error message "2010-10-31 15:48:51.438957 [Info.][InputManager dispatch thread]: WorkflowManager: Error showing screen 'hello_world'" doesn't help me in any way. I know that it is a really hard work to write such a mediacenter and I really appreciate your effort, but it would really nice to have a more detail error message. For example: "Attribute xyz doesn't exist" oder "Element xyz isn't supported by MPF". Without a detailed error message I just have no clue what's going wrong oO

Hopefully you can help me and thumbs up fo MP2

 

[Baboonanza]

Viewport3D doesn't exist in MPF. At some future point it might get added but it is a lot of work and for me it is a fairly low priority, mainly because I'm not really sure what benefits it would give that couldn't be done more easily in other ways. If a good case was put forward for it's utility I would be more inclined to implement it.

Debug logging gives very good error messages for Skin errors. I'm not sure how you would enable it in release mode at the moment, but it is on by default in debug builds.

 

[Baboonanza]

Re: AW: Skinning contest: One month to go

So I'm absolutely new to WPF/MPF and it seems really hard to skin in MP2.
I think I understood your little examplePlugin (HelloWorld), but how to add images?! I was trying hardly to dig into the weatherPlugin, but no way...

Omitted

I can see the text "Select an Image", but no image >_> Maybe somebody can give me a hint. Do I have to register the media folder in the plugin.xml?! I didn't found anything in the weatherPlugin nor in the documentation.
Only this:

Media files

Media files are all files which provide image or sound to the skin. They are referenced from the screen files. Media files are located in the skin's or theme's media subdirectory (preferred location: skin or theme).

I also tried

<Image Grid.Column="0" Grid.Row="0" Width="200" 
Source="01.jpg"/>

but this also doesn't work.

Jpeg files are supported. I just left a little bug in the Image control when I re-wrote it recently. Sorry about that. I have already submitted a patch to Albert that fixes it so it should appear in the SVN soon.

Personally I find WPF quite nice once you get used to it. There is a much steeper learning curve, which is a problem that can be helped with some tutorials, but once you've learnt the basics it's not difficult to do visual changes. Adding bindings and commands gets a little more complicated, but that is partly the price of the added flexibility.

If you have any features you would really like added to the SkinEngine (or features that haven't been implemented yet) just let me know. I also have some ideas for useful additions for stuff like particle effects and custom shaders, but I'm concentrating on getting the main stuff working perfectly first.

 

[FreakyJ]

AW: Skinning contest: One month to go

First, I really like the community here, everybody is polite and wants to help that's great

Sad that Viwport3D isn't implemented yet, but I understand that the main stuff is on a much higher priority. I tried to implement coverflow into MP2 with the help of some tutorials, it should be a little challenge for me, because for music I really like the coverflow and I wanted to help =)

Concerning the features: I'm pretty happy with MP1, I'm just struggling with the sync... and I think MP2 will top MP1 =) but if I should get any wishes I will let you know =)

 

[n4orcer]

I'm not too sure about if this is possible or not as-is or something that needs to be developed. But here is my "wish-list" of skinning features I would love to see in MP2 that would just make it PERFECT in my view.

* 3D support, eg: Create a model and export to some standard fileformat that could be animated and such. Think logos and stuff like that. Also have them loopable or loop x times then slide out and that kind of stuff.
* I dont know if this ties in with the above but the possibility to mimic and create effects such as the particles and moving background in the Playstation 3 GUI with fast transitions, eg: background does not change, only content with no visible hiccup.
* Smooth transitions such as on the PS3, XBMC (Too some extent) and XBOX360. Would be awesome if you could do all from MP1 -> XBMC -> PS3 -> XBOX360 in terms of transistions with both static and dynamic/animated backgrounds.
* Consistent "controls". eg: Shadows are available for all kinds of text elements regardless if they are in a menulist, grid, or other function. All animations can be done on all "controls" and so on.

I can probably keep going and I hope you get what i mean even if I do mix and match from MP1 and my non-existent knowledge of what is currently possible. I just want a smooth as MP2 that can do loads of eye candy. Effects as in the promo video would be awesome it it where possible to do

/n4orcer

 

[Albert]

AW: Skinning contest: One month to go

The support for jpeg images is now added/fixed in the SVN trunk (thx to Baboonanza).

 

[FreakyJ]

AW: Skinning contest: One month to go

Here is a little link for other people who wants to get started with WPF =)
WPF Tutorial

 

[bodiroga]

Hi all!

Just one (although it's not trivial) question: does anybody knows how all the navigation stuff work in Mediaportal? I understand that the navigaton is controlled by the workflow files, is that correct? But for example, if we take the weather-actions file we can see:

<?xml version="1.0" encoding="utf-8"?>
<!-- Media workflow state actions -->
<Workflow DescriptorVersion="1.0">
  <MenuActions>
    <PushNavigationTransition Id="E34FDB62-1F3E-4aa9-8A61-D143E0AF77B5"
        Name="Home->Weather"
        DisplayCategory="a-Weather"
        SortOrder="a"
        SourceState="7F702D9C-F2DD-42da-9ED8-0BA92F07787F"
        TargetState="44E1CF89-66D0-4850-A076-E1B602432983"
        DisplayTitle="[Weather.Title]"/>

    <PushNavigationTransition Id="65A9A5F6-CA50-4459-8E49-0DC614B7A2E8"
        Name="Weather->WeatherLocations"
        DisplayCategory="a-WeatherLocations"
        SortOrder="a"
        SourceState="44E1CF89-66D0-4850-A076-E1B602432983"
        TargetState="9A20A26F-2EF0-4a45-8F92-42D911AE1D8F"
        DisplayTitle="[Weather.ChooseLocation]"/>

    <MethodCallAction Id="7AEB11DE-BA40-40a2-933A-B00BBD151B08" 
        Name="Weather" 
        DisplayCategory="b-Refresh"
        SortOrder="b"
        DisplayTitle="[Weather.Refresh]"
        SourceState="44E1CF89-66D0-4850-A076-E1B602432983"
        ModelId="92BDB53F-4159-4dc2-B212-6083C820A214"
        MethodName="Refresh"/> <!-- Model = WeatherModel -->
  </MenuActions>
</Workflow>

What are all those PushNavigation IDs? What do all those numbers and letters mean? Where are they pointing at?

I have tried to read the wiki, but all the BindingMarkupExtension, TemplateBindingMarkupExtension,... explications are in "To be continued" state. This is really complicated and frustrating, and the incompatibility of Expression Blend with MPF makes all more complicated (you can't see what you are doing). Themes folders, media folders, workflow folders, screen folders,... each one in every "plugin" folder and they are referenced to each other, too much scattered (I know that this is also in WPF).

The visual part can be learned with WPF tutorials, but the data binding and navigation part is much more specific in Mediaportal 2, you can't understand it with other WPF application tutorials. Please Albert and Baboonanza, when you have time (I know that this is so easy to say, I'm sorry ) try to complete a little bit more the wiki "To be continued" parts and try to add same examples for binding and navigation. Thanks for all the work you are doing, we really appreciate it

This is much more complicated than what I expected, but I'm not going to give up!! I have, at least, a year to understand all this things before Mediaportal 2 is released, so we have enough time

Thanks for all MP Team and best regards,

Aitor

 

[Albert]

AW: Skinning contest: One month to go

Hi Aitor and thanks for all your effort!

You're right, bindings are very complicated. But most of the bindings functionality can be compared to how it works in WPF. We just have some extensions which makes it even more flexible.

The navigation part is new and MP2 specific, and there is a concept page for it in the wiki. Go to the Wiki -> MP2 developers guide -> Developers and skinners documentation. Here, in the "Concepts" section, read the "Workflow" concept. You need that to understand what a workflow state is. You're right, unfortunately, actions are not documented here (I'll do that in the next days).

An action (or: MenuAction) is bound to one or more source workflow states where it is visible in the menu. There are many types of workflow actions, the simplest one is "PushNavigationTransition" which just pushes another workflow state onto the workflow navigation stack. "PopNavigationTransition" removes a workflow state from the stack. "MethodCallAction" calls a method.

The action's "Id" ist just a unique guid (just generate one). It is currently not referenced from anywhere.
"DisplayCategory" and "SortOrder" control the order in the menu. "Source-"/"TargetState" are guids of the referenced workflow states, as they are defined in the states file.

Btw: In the background, we're moving to a new wiki. I hope that our docs people will officially switch to it soon, because we don't change the old one any more. So you'll hopefully find more docs in the new wiki when it is available.

 

[Baboonanza]

I'm afraid the Wrokflow page on the wiki isn't very useful Albert. It's too general and wordy to serve as a useful introduction.

As a skinner you don't have to worry about workflow states/actions. They control how the plugin wndows and dialogs connect together and are completely independent of the visual appearance. I expect that some skinners will eventually want to change this for some plugins but it's certainly not something to worry about when you start. Workflow knowledge is really only essential for plugin coders.

I'll give you the summary of my knowledge and maybe Albert can correct me where I've got it wrong (and then we can both learn soemthing!):

The long strings of numbers: These are just Guids, numbers that are big enough that you can almost guarantee that randomly generated ones are unique. I'd like to move toward using human readable names at some point but that has some implementation problems. All workflow models, states and actions have a guid.

Workflow States: These are the stopping points in the GUI, like Windows or Dialogs, that wait for user action. These are linked to a WorkflowModel that provides the code and data to run the window and an XAML screen that defines it's visual appearance. For example:

    <WorkflowState Id="44E1CF89-66D0-4850-A076-E1B602432983" Name="Weather" MainScreen="Weather"
        DisplayLabel="Weather" WorkflowModel="92BDB53F-4159-4dc2-B212-6083C820A214"/>

Id: this is a new guid that can be used to refer to this WorkflowState. These can be generated here
Name: Not 100% sure about this one, I think this is just an internal name.
MainScren: This is the name of the XAML screen file to use for the window
DisplayLabel: I think this is the text that will be displayed in the navigator bar when this WorkflowState is active, but maybe not since it isn't using language translation.
WorkflowModel: This is the class that will provide the code to run the screen. One class can be the model for several different screens and dialogs. In this example the Guid is the ModelId of the WeatherModel class.

Workflow Actions: These define the transitions between workflow states. For example, when you select a menu item on the main screen it triggers the corresponding workflow action that tells it how to get to another state. The clever bit is that the menu has been created by looking through all of the actions for ones that have a starting state that matches the current window (for instance 'Home'). I'm less certain about how these work, but I'll give my best guess:

    <PushNavigationTransition Id="E34FDB62-1F3E-4aa9-8A61-D143E0AF77B5"
        Name="Home->Weather"
        DisplayCategory="a-Weather"
        SortOrder="a"
        SourceState="7F702D9C-F2DD-42da-9ED8-0BA92F07787F"
        TargetState="44E1CF89-66D0-4850-A076-E1B602432983"
        DisplayTitle="[Weather.Title]"/>

A PushNavigationTransition is a transition that adds a new item onto the navigation stack- so opening Weather adds 'Weather' to the stack and pressing ESCAPE takes the top item off the stack. It's the normal model changing transition basically.
Name: Internal name?
DisplayCategory & SortOrder: Presumably these have something to do with how the items are ordered when displayed in a menu list.
SourceState: This is the state that the action will start from. This is used by MP2 to find possible actions for a workflow state and build the menus. In this case the WorkflowState id corresponds to the home state, so this action will be displayed in the main menu on the home screen.
TargetState: This is the state that the action will transition to. In this case it is the Weather state, and the Guid matches the WorkflowState in our examaple above.
DisplayTitle: This is the name that will be used when the action is displayed in a menu. In this case it's looking up [Weather.Title] from the plugin's language file to get the correct translation.

There are other forms of actions, such as the Method action that calls a method on the Model but keeps the same state.



I hope this has been of some help. Like a lot of the MP2 skinning it looks much more complicated than it really is, but I can understand that in the absence of good docs it's difficult to get started. Once you get your head around everything it all starts to make sense

I'll write some docs myself when I have some more experience.