Difference between revisions of "MythUI"

From MythTV Official Wiki
Jump to: navigation, search
m (spelling)
m (MythUI Screenshots: Use non-redirecting link to Demo theme)
 
(9 intermediate revisions by 4 users not shown)
Line 1: Line 1:
As part of mythtv's on-going development effort, a new UI backend (called libmythui) is being developed and everything is slowly being rewritten to use this. This new backend allows multiple 'painters' that do the actual drawing - OpenGL and Qt based painters have been written. Using the OpenGL painter, a more modern/advanced UI is possible. At the same time, the process of rewriting converting Myth's UI to this new backend will allow everything to be made more consistent.
+
As part of mythtv's on-going development effort, a new UI library (called libmythui) is being developed and everything is slowly being rewritten to use this. This new library allows multiple 'painters' that do the actual drawing - OpenGL and Qt based painters have been written. Using the OpenGL painter, a more modern/advanced UI is possible. At the same time, the process of rewriting/converting Myth's UI to this new library will allow everything to be made more consistent.
 +
 
 +
 
 +
= MythUI Screenshots =
 +
 
 +
See the following pages for some examples of what is possible with MythUI.
 +
 
 +
*[[Theme Terra|Terra theme for 0.22]]
 +
*[[MythUI_Demo_Theme|MythUI Demonstration theme]]
 +
 
 +
= MythUI for themers =
 +
 
 +
The existing UI limits the creativity of themers and mythui seeks to change that. Mythui will spoil themers for choice and also make it even easier to create new themes.
 +
 
 +
* [[MythUI Theme Development]]
 +
 
 +
== Inheritance ==
 +
 
 +
Mythui aims to make theme creation easier by introducing the concept of inheritance. The basic style of widgets can be defined once and then copied from each other or from global definitions. This reduces the amount of copying and pasting required and means that theme-wide changes can be made by editing just a couple of lines.
 +
 
 +
<pre>
 +
    <textarea name="basetextarea">
 +
        <area>100,200,300,40</area>
 +
        <font>large</font>
 +
        <align>left</align>
 +
        <multiline>yes</multiline>
 +
        <cutdown>yes</cutdown>
 +
        <scroll>lefttoright</scroll>
 +
    </textarea>
 +
 
 +
    <textarea name="newtextarea" from="basetextarea">
 +
        <position>400,300</position>
 +
        <align>right</align>
 +
    </textarea>
 +
</pre>
 +
 
 +
In the above example the textarea called "newtextarea" shares all the properties of basetextarea except for the position and alignment which have been overridden.
 +
 
 +
== Fewer Widgets ==
 +
 
 +
Another change which should make life easier for themers is a reduction in the number of widgets. One of the key goals of mythui was to keep a small set of very powerful widgets which means themers do not need to remember the differences between a pushbutton and textbutton, a listtreearea and managedtreelist etc.
 +
 
 +
== More Versatility and options ==
 +
 
 +
In mythui the widgets are more flexible and more powerful. For example, the "buttonlist" can operate in different layouts - Vertical, horizontal or grid. The layout of information within a list item can be customised to produce some very unique styles.
 +
 
 +
[[Image:mythui_buttonlist1.png|thumb|Example of how a mythui list can be styled.]]
 +
 
 +
There are more choices for alignment, behaviour and effects.
 +
 
 +
== Animation ==
 +
 
 +
Mythui adds some animation capabilities to the MythTV UI including object movement and image animation. These will be basic at first, however more will be added as time goes on.
 +
 
 +
= MythUI for programmers =
 +
 
 +
MythUI brings a lot of code simplifications, migration of plugins to mythui has so far eliminated thousands of lines of code. It seeks to remove layout and behaviour responsibility from the programmer, handing it to the themer instead. There are fewer widgets to understand and there will be greater consistency across screens.
 +
 
 +
== MythUI Coding Standards ==
 +
 
 +
This section will evolve as soon as some basic rules are decided upon. As we move to the new code we have the opportunity to establish some basic framework and rules for screen design and dealing with mythui.
 +
 
 +
* Do not force layout, style, widgets or behaviour on themers. Make as much as possible optional and offer more widgets to the themer even if they aren't used in the default theme.
 +
* Do not create new widgets, see how the existing widgets can be made to do what you want and discuss it with other developers first.
 +
* Try to copy the layout and code of existing screens. This will make maintaining MythTV easier for everyone.
 +
 
 +
[[Category:Developer Documentation]]

Latest revision as of 18:11, 29 August 2009

As part of mythtv's on-going development effort, a new UI library (called libmythui) is being developed and everything is slowly being rewritten to use this. This new library allows multiple 'painters' that do the actual drawing - OpenGL and Qt based painters have been written. Using the OpenGL painter, a more modern/advanced UI is possible. At the same time, the process of rewriting/converting Myth's UI to this new library will allow everything to be made more consistent.


MythUI Screenshots

See the following pages for some examples of what is possible with MythUI.

MythUI for themers

The existing UI limits the creativity of themers and mythui seeks to change that. Mythui will spoil themers for choice and also make it even easier to create new themes.

Inheritance

Mythui aims to make theme creation easier by introducing the concept of inheritance. The basic style of widgets can be defined once and then copied from each other or from global definitions. This reduces the amount of copying and pasting required and means that theme-wide changes can be made by editing just a couple of lines.

    <textarea name="basetextarea">
        <area>100,200,300,40</area>
        <font>large</font>
        <align>left</align>
        <multiline>yes</multiline>
        <cutdown>yes</cutdown>
        <scroll>lefttoright</scroll>
    </textarea>

    <textarea name="newtextarea" from="basetextarea">
        <position>400,300</position>
        <align>right</align>
    </textarea>

In the above example the textarea called "newtextarea" shares all the properties of basetextarea except for the position and alignment which have been overridden.

Fewer Widgets

Another change which should make life easier for themers is a reduction in the number of widgets. One of the key goals of mythui was to keep a small set of very powerful widgets which means themers do not need to remember the differences between a pushbutton and textbutton, a listtreearea and managedtreelist etc.

More Versatility and options

In mythui the widgets are more flexible and more powerful. For example, the "buttonlist" can operate in different layouts - Vertical, horizontal or grid. The layout of information within a list item can be customised to produce some very unique styles.

Example of how a mythui list can be styled.

There are more choices for alignment, behaviour and effects.

Animation

Mythui adds some animation capabilities to the MythTV UI including object movement and image animation. These will be basic at first, however more will be added as time goes on.

MythUI for programmers

MythUI brings a lot of code simplifications, migration of plugins to mythui has so far eliminated thousands of lines of code. It seeks to remove layout and behaviour responsibility from the programmer, handing it to the themer instead. There are fewer widgets to understand and there will be greater consistency across screens.

MythUI Coding Standards

This section will evolve as soon as some basic rules are decided upon. As we move to the new code we have the opportunity to establish some basic framework and rules for screen design and dealing with mythui.

  • Do not force layout, style, widgets or behaviour on themers. Make as much as possible optional and offer more widgets to the themer even if they aren't used in the default theme.
  • Do not create new widgets, see how the existing widgets can be made to do what you want and discuss it with other developers first.
  • Try to copy the layout and code of existing screens. This will make maintaining MythTV easier for everyone.