Updating the windows

Everything about development and the OpenMW source code.
User avatar
Lazaroth
Posts: 220
Joined: 30 May 2012, 05:04

Updating the windows

Post by Lazaroth » 01 Jul 2012, 01:14

I asked in the alchemy task thread if it was ok that I updated some of the windows you see in the game, to make them look better. scrawl said sure and to create a new thread about it, hence this thread.

The main thing I was thinking of doing was to make the design look more fluid and unified while staying true to the original where it makes sense. Nothing drastic, just making sure edges line up, margins are the same and such.

If there are things I should know beforehand, or if parts are unnecessary because they are bound to change, let me know.

I also have two questions:
1. Where can I read about how the widgets work? I searched around on the mygui pages with little luck. Types, properties etc. What I know now is what I've figured out by studying examples.

2. Is there an editor where one can look at the changes in real time, or do I have to fire up OpenMW every time to watch a change? There are a Layout and Skin Editor bundled when you download MyGUI but I could not get them to work.

User avatar
scrawl
Posts: 2152
Joined: 18 Feb 2012, 11:51

Re: Updating the windows

Post by scrawl » 01 Jul 2012, 01:25

1. Where can I read about how the widgets work? I searched around on the mygui pages with little luck. Types, properties etc. What I know now is what I've figured out by studying examples.
I guess the only way is to read the mygui sources. Each widget has a setPropertyOverride method, there you can see all the properties that it accepts. If the widget is derived (e.g. Button derived from TextBox) then look at the properties of the parent class as well.

2. Is there an editor where one can look at the changes in real time, or do I have to fire up OpenMW every time to watch a change? There are a Layout and Skin Editor bundled when you download MyGUI but I could not get them to work.
Yes, as you said there is the mygui layout editor, however it doesn't work for some reason with our custom skins. I can't get it to load any layout, even after setting all resource paths to files/mygui. It might be worth looking into that, but I have no idea what to do about it or where to start.

If there are things I should know beforehand, or if parts are unnecessary because they are bound to change, let me know.
Please leave the image buttons (for example journal buttons) as they are. The problem there is that different localizations have different image sizes and alignment of the text on the image. Also, the book/scroll/journal windows don't have scaling yet which might be implemented at some point.

It would be nice if you could set up github, so you can make the pull requests your own instead of asking another developer.

User avatar
Lazaroth
Posts: 220
Joined: 30 May 2012, 05:04

Re: Updating the windows

Post by Lazaroth » 01 Jul 2012, 01:36

scrawl wrote: I guess the only way is to read the mygui sources.
I did a quick read of the sources, but I thought there was proper documentation somewhere. Guess that will have to make due.
scrawl wrote: It might be worth looking into that, but I have no idea what to do about it or where to start.
I'll do that.


I'll start first thing in the morning, it's getting late here. Also allows more people to getting a word if there's something else.

Edit:
scrawl wrote: It would be nice if you could set up github, so you can make the pull requests your own instead of asking another developer.
I'll do that as well tomorrow.

User avatar
scrawl
Posts: 2152
Joined: 18 Feb 2012, 11:51

Re: Updating the windows

Post by scrawl » 01 Jul 2012, 01:51

Lazaroth wrote:
scrawl wrote:
scrawl wrote: It might be worth looking into that, but I have no idea what to do about it or where to start.
I'll do that.
Ok, then here is some detail on the situation.
The layout editor itself works fine here, if I use it to open layouts from the MyGUI samples. If trying to open a layout from OpenMW, it complains about lots of missing stuff at first. This can be fixed by setting the resource path to the files/mygui folder. It still wouldn't open any layout though, I don't remember the error message.
In case you get stuck, make a post at the mygui forum, the people there are normally quite helpful.

User avatar
Lazaroth
Posts: 220
Joined: 30 May 2012, 05:04

Re: Updating the windows

Post by Lazaroth » 02 Jul 2012, 08:58

I've made some progress:

http://img812.imageshack.us/img812/8825 ... editor.png

I only need to make it less 'hackish'.

The three main issues now are:
1. Subfolders aren't recognized even though I've added them to resources. For the textures/*.dds.
2. You have to rename .xml to .layout for it to work.
3. I include core.xml, but have to remove the line <List file="openmw_layers.xml" />. Get an overlapping error otherwise.

User avatar
scrawl
Posts: 2152
Joined: 18 Feb 2012, 11:51

Re: Updating the windows

Post by scrawl » 02 Jul 2012, 09:24

Awesome!
1. Subfolders aren't recognized even though I've added them to resources. For the textures/*.dds.
those are from the BSA, right? and you have extracted them to a folder? maybe case sensitivity issue?
2. You have to rename .xml to .layout for it to work.
Not a big problem, we can do that.
3. I include core.xml, but have to remove the line <List file="openmw_layers.xml" />. Get an overlapping error otherwise.
Ah yes, this was one of the errors i had too. Maybe have two files (core.xml and core_layouteditor.xml). Not a nice solution, but the file is so small it doesn't really matter to maintain 2 versions of it.

Another problem is GUI textures that are dynamically generated at runtime. At the moment this is mostly the journal/scroll/book window buttons. I need to add a command line option to export all these to a folder, so that the layout editor can find them. It's a secondary problem though, because it only affects the display and not the editing itself (well, hopefully?)


P.S. maybe we can try the skin editor too? I don't know how it works, but maybe it could be useful...

User avatar
Lazaroth
Posts: 220
Joined: 30 May 2012, 05:04

Re: Updating the windows

Post by Lazaroth » 02 Jul 2012, 18:48

scrawl wrote:
1. Subfolders aren't recognized even though I've added them to resources. For the textures/*.dds.
those are from the BSA, right? and you have extracted them to a folder? maybe case sensitivity issue?
Indeed they are extracted from the bsa. I checked the case, but it was the same. I'll try some more today.
scrawl wrote:
2. You have to rename .xml to .layout for it to work.
Not a big problem, we can do that.
Was thinking about doing a batch to rename all and another to rename them back.
scrawl wrote:
3. I include core.xml, but have to remove the line <List file="openmw_layers.xml" />. Get an overlapping error otherwise.
Ah yes, this was one of the errors i had too. Maybe have two files (core.xml and core_layouteditor.xml). Not a nice solution, but the file is so small it doesn't really matter to maintain 2 versions of it.
Had the same idea. There are a couple of other additional minor issues, e.g. wrong cursor, so I think this is the way to go.
scrawl wrote: Another problem is GUI textures that are dynamically generated at runtime. At the moment this is mostly the journal/scroll/book window buttons. I need to add a command line option to export all these to a folder, so that the layout editor can find them. It's a secondary problem though, because it only affects the display and not the editing itself (well, hopefully?)
OK. I'll keep that in mind. And I agree.
Going to check the editing in more detail after I've fixed the other issues.
scrawl wrote: P.S. maybe we can try the skin editor too? I don't know how it works, but maybe it could be useful...
I could give it a try, but I do this after I'm satisfied with the Layout Editor.

User avatar
Lazaroth
Posts: 220
Joined: 30 May 2012, 05:04

Re: Updating the windows

Post by Lazaroth » 03 Jul 2012, 01:39

I did some more testing with the Layout and the SkinEditor.

They both seem to be fairly simplistic and in some areas outdated.

First of all the Skin Editor:
I think this is a no go.
Problems:
1. The current OpenMW implementation uses

Code: Select all

<MyGUI type="Skin">
    <Skin name="IB_T" size="512 2" texture="menu_thin_border_top.dds">
        <BasisSkin type="TileRect" offset="0 0 512 2" align="HStretch">
            <State name="normal" offset="0 0 512 2">
                <Property key="TileSize" value="512 2"/>
                <Property key="TileH" value="true"/>
                <Property key="TileV" value="true"/>
            </State>
        </BasisSkin>
    </Skin>
</MyGUI>
The skin Editor however wants (old/new way of writing?)

Code: Select all

<MyGUI type="Resource" version="1.1">
    <Resource type="ResourceSkin" name="IB_T" size="512 2" texture="menu_thin_border_top.png">
        <BasisSkin type="TileRect" offset="0 0 512 2" align="HStretch">
            <State name="normal" offset="0 0 512 2">
                <Property key="TileSize" value="512 2"/>
                <Property key="TileH" value="true"/>
                <Property key="TileV" value="true"/>
            </State>
        </BasisSkin>
    </Resource>
</MyGUI>
That isn't so big of a problem, since you can convert it easily, however...
2. This other way of writing doesn't support things as:

Code: Select all

<Skin name="MW_Box" size="516 516">
        <Child type="Widget" skin="IB_T" offset="2 0 512 2" align="ALIGN_TOP ALIGN_HSTRETCH"/>
        <Child type="Widget" skin="IB_B" offset="2 514 512 2" align="ALIGN_BOTTOM ALIGN_HSTRETCH"/>
        <Child type="Widget" skin="IB_L" offset="0 2 2 512" align="ALIGN_LEFT ALIGN_VSTRETCH"/>
        <Child type="Widget" skin="IB_R" offset="514 2 2 512" align="ALIGN_RIGHT ALIGN_VSTRETCH"/>
        <Child type="Widget" skin="IB_TL" offset="0 0 2 2" align="ALIGN_TOP ALIGN_LEFT"/>
        <Child type="Widget" skin="IB_TR" offset="514 0 2 2" align="ALIGN_TOP ALIGN_RIGHT"/>
        <Child type="Widget" skin="IB_BL" offset="0 514 2 2" align="ALIGN_BOTTOM ALIGN_LEFT"/>
        <Child type="Widget" skin="IB_BR" offset="514 514 2 2" align="ALIGN_BOTTOM ALIGN_RIGHT"/>
    </Skin>
which is used as an easy way to create a box. I don't know if it's written in another way or not supported at all, because I can only find documentation of MyGUI 3.0 and it says this should work.

3. Additionally, it doesn't seem as the skin editor supports DDS, so it have to be converted before using it.



Now to the Layout Editor:

I'm not 100% sure of this, but after much testing and reading, it seems it doesn't support textures in subfolders. Instead "textures\menu_thick_border_right.dds", folder+file, is interpreted as only a file.

Otherwise the functionality seems ok within the program, but I need to do more testing of this.

User avatar
scrawl
Posts: 2152
Joined: 18 Feb 2012, 11:51

Re: Updating the windows

Post by scrawl » 03 Jul 2012, 06:32

I'm not 100% sure of this, but after much testing and reading, it seems it doesn't support textures in subfolders. Instead "textures\menu_thick_border_right.dds", folder+file, is interpreted as only a file.
Have you tried to change backslash to forward slash?

Btw, eventually all these textures will be merged together at runtime in (very few) big textures, then you can just manually copy them to ./ which might solve the issue.
3. Additionally, it doesn't seem as the skin editor supports DDS, so it have to be converted before using it.
Again, this will be solved when saving the run-time textures to disk (Ogre can't do DDS saving anyway, so it will be png)
2. This other way of writing doesn't support things as:
It does, for example here is ScrollVTrack skin from MyGUI_Media:

Code: Select all

    <Resource type="ResourceSkin" name="ScrollTrackVSkin" size="14 19" texture="MyGUI_BlueWhiteSkins.png">
        <BasisSkin type="SubSkin" offset="0 0 4 4" align="Left Top">
            <State name="disabled" offset="113 37 4 4"/>
            <State name="normal" offset="113 57 4 4"/>
            <State name="highlighted" offset="113 77 4 4"/>
            <State name="pushed" offset="113 97 4 4"/>
        </BasisSkin>
        <BasisSkin type="SubSkin" offset="4 0 4 4" align="HStretch Top">
            <State name="disabled" offset="117 37 4 4"/>
            <State name="normal" offset="117 57 4 4"/>
            <State name="highlighted" offset="117 77 4 4"/>
            <State name="pushed" offset="117 97 4 4"/>
        </BasisSkin>
        <BasisSkin type="SubSkin" offset="8 0 6 4" align="Right Top">
            <State name="disabled" offset="121 37 6 4"/>
            <State name="normal" offset="121 57 6 4"/>
            <State name="highlighted" offset="121 77 6 4"/>
            <State name="pushed" offset="121 97 6 4"/>
        </BasisSkin>
        <BasisSkin type="SubSkin" offset="8 4 6 9" align="Right VStretch">
            <State name="disabled" offset="121 41 6 9"/>
            <State name="normal" offset="121 61 6 9"/>
            <State name="highlighted" offset="121 81 6 9"/>
            <State name="pushed" offset="121 101 6 9"/>
        </BasisSkin>
        <BasisSkin type="SubSkin" offset="8 13 6 6" align="Right Bottom">
            <State name="disabled" offset="121 50 6 6"/>
            <State name="normal" offset="121 70 6 6"/>
            <State name="highlighted" offset="121 90 6 6"/>
            <State name="pushed" offset="121 110 6 6"/>
        </BasisSkin>
        <BasisSkin type="SubSkin" offset="4 13 4 6" align="HStretch Bottom">
            <State name="disabled" offset="117 50 4 6"/>
            <State name="normal" offset="117 70 4 6"/>
            <State name="highlighted" offset="117 90 4 6"/>
            <State name="pushed" offset="117 110 4 6"/>
        </BasisSkin>
        <BasisSkin type="SubSkin" offset="0 13 4 6" align="Left Bottom">
            <State name="disabled" offset="113 50 4 6"/>
            <State name="normal" offset="113 70 4 6"/>
            <State name="highlighted" offset="113 90 4 6"/>
            <State name="pushed" offset="113 110 4 6"/>
        </BasisSkin>
        <BasisSkin type="SubSkin" offset="0 4 4 9" align="Left VStretch">
            <State name="disabled" offset="113 41 4 9"/>
            <State name="normal" offset="113 61 4 9"/>
            <State name="highlighted" offset="113 81 4 9"/>
            <State name="pushed" offset="113 101 4 9"/>
        </BasisSkin>
        <BasisSkin type="SubSkin" offset="4 4 4 9" align="Stretch">
            <State name="disabled" offset="117 41 4 9"/>
            <State name="normal" offset="117 61 4 9"/>
            <State name="highlighted" offset="117 81 4 9"/>
            <State name="pushed" offset="117 101 4 9"/>
        </BasisSkin>
    </Resource>
Also, note that there are apparently 2 different ways of doing a skin. There is ResourceSkin and ResourceLayout. ResourceLayout seems to correspond to the old system (with <Skin name....) because it can have a tree of child widgets (with arbitrary types). Example:

Code: Select all

  
<Resource type="ResourceLayout" name="WindowC" version="3.2.0">
        <Widget type="Widget" skin="PanelEmpty" position="15 10 68 49" name="Root">
            <Property key="Snap" value="true"/>
            <UserString key="LE_TargetWidgetType" value="Window"/>
            <Widget type="Widget" skin="CaptionSkin" position="0 0 68 28" align="HStretch Top">
                <Widget type="TextBox" skin="TextBox" position="7 1 52 22" align="HStretch Top" name="Caption">
                    <Property key="TextColour" value="0 0 0"/>
                    <Property key="TextAlign" value="Center"/>
                    <Property key="FontName" value="Default"/>
                </Widget>
            </Widget>
            <Widget type="Widget" skin="WindowFrameSkin" position="0 28 68 20" align="Stretch">
                <Widget type="Widget" skin="ClientTileSkin" position="4 2 58 12" align="Stretch" name="Client"/>
            </Widget>
        </Widget>
    </Resource>


So, the way to go would be:
- convert the absolute low-level skins to ResourceSkin syntax.
- convert the high-level widget skins to ResourceLayout syntax.

User avatar
Lazaroth
Posts: 220
Joined: 30 May 2012, 05:04

Re: Updating the windows

Post by Lazaroth » 03 Jul 2012, 09:38

scrawl wrote: Have you tried to change backslash to forward slash?
I've tried everything I can think of. Forward/backward, even writing the absolute location c:/etc.
Another possibility is that the resources aren't correctly set. I've read that all subdirs have to be set in order to be read. I have however added every combination to the resources.xml, le_user_settings.xml, se_user_settings.xml I can think of (not 100% sure which one of them need the info, but I would think resources.xml).
scrawl wrote: eventually all these textures will be merged together at runtime in (very few) big textures, then you can just manually copy them to ./ which might solve the issue.
That would solve it for sure.


In regard to the Skin editor:

Not sure how <Skin name="MW_Box" size="516 516"> would be translated to a <Resource type="ResourceSkin"> equivalent.

Anyhow, I'm guessing there's some code that need to be changed in order for OpenMW to recognize the new syntax?


Another thing I thought about was the extension of layout files. Since the layout editor wants .layout, would it make more sense to have them that instead of xml?

Post Reply