Tile Systems (MenuQue)

A TileSystem is an automated process that will do the same as certain hardcoded behaviour for the UI. Things like using the mouse wheel to scroll, dragging an element back and forth or a small yet effective textedit box.

General

In order for modders to easily mark an element as a TileSystem they need to use a specific string-constant for the <id> trait of the element in question. Then, whenever the game processes that particular XML the code will pick up on the desired tile system, create the needed background stuff and attach it to the element.

There can be only one per element but a menu can contain any number of systems, even with the same type.

<menu name="DemoMenu">
 	<class> &GenericMenu; </class>
 	<stackingtype> &no_click_past; </stackingtype>
 	<locus> &true; </locus>
 	<explorefade> 0.25 </explorefade>
 
 	<rect name="background">
<include src="generic_background.xml" />

		<id> &TileSystemType; </id> <!-- this will mark the element as a TileSystem -->
		<visible> &true; </visible>
		<depth> 15 </depth>
		<locus> &true; </locus>
		<target> &true; </target>
		<user0> 400 </user0>
		<user1> 580 </user1>
		<x>
			<copy src="screen()" trait="width" />
			<sub src="me()" trait="width" />
			<div> 2 </div>
		</x>
		<y>
			<copy src="screen()" trait="height" />
			<sub src="me()" trait="height" />
			<div> 2 </div>
		</y>
	</rect>
 	
</menu>

Types

There are a number of different types of TileSystems, each one dealing with a different aspect of user-to-UI interaction. Depending on the system an element will also need to have certain <userX> traits in order to function properly.

Scroll

This will respond to the mousewheel and increment or decrement the <user5> trait. Most common use would be for custom scrollbars but how this value is used makes no difference. REQUIRES: <user5> trait.

• A scroll system is only considered active (and thus invoked) when it is visible and targetable. When a menu has more than one scroll system (including the default scrolling behaviour) it will use the first active one it finds. Scroll systems always take precedence over the default scrolling behaviour.
• The code does not check for boundaries when it detects scrolling, that should be done in the XML using the <max> and <min> traits.

Here is a quick template, when you see a trait with ... then that means it is of no importance to this system in particular and should be filled with whatever value you need it to be. They are listed for completeness and to better illustrate things.

...
<image name="scroll_bar">
<include src="vertical_scroll.xml" />
	<id> &Scroll; </id>
	<target> &true; </target>
	<locus> &true; </locus>
	<depth> 15 </depth>
	<user1> ... </user1>
	<user2> ... </user2>
	<user3> ... </user3> <!-- step distance -->
	<user4> ... </user4> <!-- jump distance -->
	<user5> 0 </user5> <!-- code set - scroll force value (must be 0 here) -->
	<!-- user7 --> <!-- current value -->
	<user8> ... </user8> <!-- num visible -->
</image>
...

Drag

These will respond to the mouse movement while holding down the left mouse button. There are three versions, two for movement along a single axis and one movement along both axis. There is a small limitation in that the moving of the dragged element should not affect the position of its parent element (or anything else higher up the chain).

The element itself does not have to move though. REQUIRES: <user8> and <user9> for horizontal -or- vertical dragging and <user11>, <user12>, <user13> and <user14> for dragging along both axis.

FocusBox

A focus system will react to the active element (e.g. the mouse is over it). It will then get the same <width>,<height>, <x> and <y> traits as the active element. But this only happens if the active element has a "&true;" <focus> and a "&true;" <target> trait. The position offset can be adjusted with the <focusinset> trait. The difference in size can be adjusted with the <focussize> trait.

A quick template

...
<rect name="focus_box">
<include src="focus_box.xml"/>
	<id> &FocusBox; </id>
	<visible> &false; </visible>
</rect>
...
<rect name="some_element">
	<width> ... </width>
	<height> ... </height>
	<x> ... </x>
	<y> ... </y>

	<!-- when the mouse is over this element its dimension
	and position will be copied to the focus box -->
	<focus> &true; </focus> 

	<!-- this gets added to the width and height before they are copied.
	And half of it gets substracted from X and Y to even the increase in size
	between the outline. -->
	<focussize> 20 </focussize> 

	<!-- this gets added to the X and Y before they are copied -->
	<focusinset> 0 </focusinset>
</rect>

To put things in a couple of simple formulas:

focusBox_X = (element_X - (focussize / 2) + focusinset)
focusBox_Y = (element_Y - (focussize / 2) + focusinset)
focusBox_Width = (element_Width + focussize)
focusBox_Height = (element_Height + focussize)

TextEdit

A textedit system allows simple boxes that can be typed in. Although not as powerful as OBSE's TextInput it is much more flexible in terms of layout and can be added to any menu, even those that have a textedit box by default. It will match the default typing behaviour as seen in some menus.

• The initial value is determined by the <string> trait when it gets activated, any changes once it is active are ignored.
• The textedit is activated by clicking on either the element itself or the parent element.
• To terminate the textedit the user has to click on any element (that can be targeted).
• The use of the Enter key will terminate the textedit.

Here is a quick template, when you see a trait with ... then that means it is of no importance to this system in particular and should be filled with whatever value you need it to be. They are listed for completeness and to better illustrate things.

...
<rect name="textedit">
	<locus> &true; </locus>
	<target> &true; </target>
	<x> ... </x>
	<y> ... </y>
	<width> 240 </width>
	<height> 40 </height>
	<depth> 3 </depth>

	<text name="textedit_text">
		<id> &TextEdit; </id>
		<string> My Initial Text </string>
		<depth> 3 </depth>
		<locus> &true; </locus>
		<target> &true; </target>
		...
	</text>
</rect>
...

See Also

Oblivion XML