Sunday 23 December 2012

User Interface Customisation

Recently I have been improving the user interface for Galaxial and it has undergone a lot of changes.

I was having trouble deciding which colour scheme to use, so I made the user interface customisable so that you can choose the one you like best from the options menu.

Below are screenshots of the colour schemes I have made so far. The test window shown is for checking that all the user interface widgets work and to see they look. Also windows are no longer static so they can now be overlapping, moved, minimised and closed.

Default 
Dark 
Slate
Teal
Grey

Example Colour Scheme File

Galaxial is being developed so that its very mod-friendly. Below is an example XML file for one of the colour schemes to give you an idea how much control you can have over the appearance, if you wanted to add your own or modify the existing ones.

The widget graphics (buttons/windows etc.) are procedurally rendered so unfortunately you wont be able to change the style completely. Just the colours.
 
<?xml version="1.0" encoding="utf-8"?>
<uicolourscheme>
    <name>Dark</name>
    <!-- Window Widget -->
    <window>
        <colour background="48,48,48" outline="255,255,255" shadow="0,0,0" />
        <titlebar>
            <active>
                <colour background="32,32,32" button="32,32,32" />
                <text foreground="255,255,255" background="0,0,0" shadow="true" />
            </active>
            <inactive>
                <colour background="64,64,64" button="64,64,64" />
                <text foreground="224,224,224" background="0,0,0" shadow="true" />
            </inactive>
        </titlebar>
    </window>
    <!-- Button Widget -->
    <button>
        <colour glow="224,224,224" />
        <active>
            <colour background="32,32,32" image="255,255,255" outline="255,255,255" />
            <text foreground="255,255,255" background="0,0,0" shadow="false" />
        </active>
        <disabled>
            <colour background="64,64,64" image="128,128,128" outline="255,255,255" />
            <text foreground="128,128,128" background="0,0,0" shadow="false" />
        </disabled>
        <basic>
            <colour highlight="224,224,224" />
            <active>
                <colour background="32,32,32" border="0,0,0" />
                <text foreground="255,255,255" background="0,0,0" shadow="false" />
            </active>
            <disabled>
                <colour background="64,64,64" border="0,0,0" />
                <text foreground="128,128,128" background="0,0,0" shadow="false" />
            </disabled>
        </basic>
    </button>
    <!-- Checkbox Widget -->
    <checkbox>
        <colour highlight="64,64,64" />
        <active>
            <colour background="32,32,32" border="0,0,0" image="255,255,255" />
            <text foreground="255,255,255" background="0,0,0" shadow="false" />
        </active>
        <disabled>
            <colour background="64,64,64" border="0,0,0" image="128,128,128" />
            <text foreground="128,128,128" background="0,0,0" shadow="false" />
        </disabled>
    </checkbox>
    <!-- Combobox Widget -->
    <combobox>
        <colour highlight="64,64,64" shadow="0,0,0" />
        <active>
            <colour background="32,32,32" border="0,0,0" image="255,255,255" />
            <text foreground="255,255,255" background="0,0,0" shadow="false" />
        </active>
        <disabled>
            <colour background="64,64,64" border="0,0,0" image="128,128,128" />
            <text foreground="128,128,128" background="0,0,0" shadow="false" />
        </disabled>
    </combobox>
    <!-- Groupbox Widget -->
    <groupbox>
        <background>true</background>
        <colour outline="0,0,0" background="32,32,32" />
        <text foreground="255,255,255" background="0,0,0" shadow="true" />
    </groupbox>
    <!-- Label Widget -->
    <label>
        <small>
            <text foreground="255,255,255" background="0,0,0" shadow="false" />
        </small>
        <large>
            <text foreground="255,255,255" background="0,0,0" shadow="false" />
        </large>
    </label>
    <!-- Progressbar Widget -->
    <progressbar>
        <active>
            <colour background="32,32,32" bar="64,64,64" outline="255,255,255" />
            <text foreground="255,255,255" background="0,0,0" shadow="true" />
        </active>
        <disabled>
            <colour background="32,32,32" bar="64,64,64" outline="255,255,255" />
            <text foreground="128,128,128" background="0,0,0" shadow="false" />
        </disabled>
    </progressbar>
    <!-- Scrollbar Widget -->
    <scrollbar>
        <colour glow="64,64,64" slider="32,32,32" />
        <active>
            <colour background="64,64,64" button="32,32,32" image="255,255,255" outline="255,255,255" />
        </active>
        <disabled>
            <colour background="64,64,64" button="32,32,32" image="128,128,128" outline="255,255,255" />
        </disabled>
    </scrollbar>
    <!-- Textbox Widget -->
    <textbox>
        <colour selection="64,64,64" focus="255,255,255" />
        <active>
            <colour background="32,32,32" border="0,0,0" />
            <text foreground="255,255,255" background="0,0,0" shadow="false" />
        </active>
        <disabled>
            <colour background="32,32,32" border="0,0,0" />
            <text foreground="128,128,128" background="0,0,0" shadow="false" />
        </disabled>
    </textbox>
    <!-- Treeview Widget -->
    <treeview>
        <colour background="32,32,32" border="0,0,0" selection="64,64,64" text="255,255,255" line="0,0,0" />
    </treeview>
</uicolourscheme>

Thats all for now, as always let me know what you think and have a happy Christmas!

2 comments:

  1. Great Stuart! I can't wait for Galaxial >.<

    ReplyDelete
  2. Ah, these look very cool. I must admit, I've never heard of Galaxial before and I'm glad I stumbled across your blog.

    ReplyDelete