Modifying the User Interface (Unofficial)

Collaborate with other modders to make Synthesia the way you want it.
Always the latest versions: [ colors.xml | ui.xml ]
Read the Getting Started topic to learn how important it is to MERGE YOUR CHANGES every time you download a new dev preview.
Post Reply
Nicholas
Posts: 13170

Post by Nicholas »

Be sure to visit the Getting Started topic to get a copy of the latest ui.xml.

The interface isn't really flexible enough to support his officially yet. I'd need something like Lua scripting, too, to make it really general purpose. Still, there is enough there that you can try out and share new ideas with me and other modders.

Tips:
  • There are some really important comments at the top of the file that I would urge you to get a good understanding of before attempting any changes. Once you get a good feel for the way type, inherit, and find interact with one another you shouldn't have any trouble at all.
  • Generally you can shimmy things around inside and out of different containers. The code uses a recursive search to find a UI element no matter where it is in its parent... that said, this is all unofficial so if you break it, you buy it. ;)
  • It's probably a good idea to leave id's alone. They're almost always used as a key for something. If it's only for inheritance inside of ui.xml, it's safe (though a little scary) to change, but if it's anything Synthesia checks for by name, it has to be there or you'll get a crash.
  • "tid" is a special attribute whose value will be used to look up text from the current language and be treated like a "text" attribute.
Here's the part you're probably most interested in:

Code: Select all

Things that can anchor/stretch in both directions
- Frame
- Spacer
- Image
- Button
- DataGrid
- LineChart
- ScrollContainer
- DistributedLayout
- MovingOutline (NOT YET IMPLEMENTED!)

Things that can stretch in one direction:
- FlowLayout
- Breadcrumb
- Keyboard
- Label (when maxWidth is set, only changes maxWidth)
- GridLayout (either, based on direction, but only one at a time)
- TextBox (NOT YET IMPLEMENTED)


Types used below
----------------
- string: a simple set of UTF-8 characters (ui.xml assumes UTF-8 encoding)
- bool: 0 for false, 1 for true
- color: the id from a color defined in colors.xml
- float: a number that can have a decimal point
- int: a number that can't
- texture: the name of one of the .tga resources included in the executable (external image loading isn't supported yet!)


Recognized Style Properties (Specified using "attributeName : type, default")
---------------------------
(All elements):
- id : string, ""
- layer : int, 1
- type : button|label|image|window|etc.
- inherit : id of some previously defined control
- find : id of a control that should exist at this level
- position : vector<float>(2), (0,0)
- color : color, White
- sensitive : bool, 1
- visible : bool, 1
- align : pair of: [left|center|right] and [top|center|bottom] second part optional, "left, top"
- anchor : pair of: [none|left|right|both] and [none|top|bottom|both] second part optional, "left, top"

containers like frame/flowLayout/gridLayout/etc.:
- childrenSensitive, bool, 1

label:
- text : string, ""
- fontSize : float, 14
- fontEffect : none|shadow|outline, none
- maxWidth : float, -1
- wrap : float, -1

frame
- size : vector<float>(2), (0,0)
- autoSizePadding : vector<float>(2), (-1, -1)

spacer
- size : vector<float>(2), (0,0)

image:
- size : vector<float>(2), (0,0)
- texture : texture, (none)
- uv : vector<float>(4), (-1,-1,-1,-1)
- hitTest : bool, 0

window (+ frame):
- size : vector<float>(2), (0,0)
- textureBorder : float, 5
- textureFromEdge : float, 1
- background : texture, ui_window
- backgroundOverlay1 : texture, ui_window_overlay1
- backgroundOverlay2 : texture, ui_window_overlay2
- hr : float (repeatable)

button:
- size : vector<float>(2), (0,0)
- text : string, ""
- textAlign : left|center|right, center
- textureBorder : float, 5
- textureFromEdge : float, 1
- background : texture, ui_window
- backgroundOverlay1 : texture, ui_window_overlay1
- backgroundOverlay2 : texture, ui_window_overlay2
- fontSize : float, 14
- fontEffect : none|shadow|outline, none
- fontColor : color, White
- fontColorHover : color, White
- colorHover : color, White
- image : texture, (none)
- imageColor : color, White
- imageAlign : left|center|right, left
- hoverShimmy : bool, 1
- textPadding : float, 3
- autoWidthPadding : float, -1

flowLayout:
- padding : float, 0
- direction : horizontal|vertical, vertical
- excludeHidden : bool, 0

distributedLayout:
- size : vector<float>(2), (0, 0)
- maxSpacing : float, 0
- direction : horizontal|vertical, vertical
- excludeHidden : bool, 0
- extentsArePadded: bool, 0

groupedTable (+ window):
- labelTemplate
- detailTemplate
- checkmarkColor
- disclosureColor
- asteriskColor

textbox:
- width : float, 0 (none)
- text : string, ""
- fontSize : float, 14
- fontEffect : none|shadow|outline, none
- emptyHint : string, "", looks up a text ID like "tid" attribute
- maxLength : int, 0 (no limit)
- passwordMask : bool, 0
- textPadding : float, 3
- fontColor : color, Black
- hintColor : color, Black

popup (+ frame):
- texture : texture, ui_popup_arrow
- color : color, White
- padding : float, 32, space between popup and source
- arrowOffset : float, 16, arrow is drawn at (edge - arrowOffset)

breadcrumb:
- maxWidth : float, 0
- fontSize : float, 14
- fontColor : color, White
- fontColorHover : color, White
- labelBackground : color, Transparent
- labelBackgroundHover : color, Transparent

pagedDataGrid:
- rowHeight, float, 10
scrollingDataGrid:
- size : vector<float>(2), (0,300), width is ignored for now and still calculated by column widths
- mode : display|selectable, display
- headerFontColor : color, White
- rowBackgroundColor : color, Transparent
- rowBackgroundAlternatingColor : color, Transparent
- rowBackgroundSelectedColor : color, White
- fontColor : color, White

slider:
- size : vector<float>(2), (20, 20)
- foreground : texture, (none)
- background : texture, (none)
- foregroundColor : color, White
- backgroundColor : color, White
- minValue : double, 0
- maxValue : double, 100
- value : double, 0
- splitter : texture, (none)
- splitterWidth : float, 0
- step : double, 0
- immediateUpdate : bool, false

keyboard:
- width : float, 100

scrollContainer:
- size : vector<float>(2), (0,0)
- horizontal : never|normal|always, normal
- vertical : never|normal|always, normal
- scrollbar : color, White
- scroller : color, White
- scrollerHover : color, White

switch:
- color : color, White, for the round sliding part of the switch
- foregroundColor : color, White, the oval filled color when the switch is turned on
- backgroundColor : color, Black, the oval border/stroke color when the switch is turned off

segmentButton:
- size : vector<float>(2), (0,0), width ignored, auto-sized using padding
- textureBorder : float, 0
- textureFromEdge : float, 0
- texture : texture, (none)
- activeColor : color, White
- backgroundColor : color, Black
- shadowColor : color, Black
- padding : float, 4

gridLayout:
- padding : float, 0
- fixedDimension : float, 100
- excludeHidden : bool, 0
- direction : horizontal|vertical, vertical
- childLayout : english|asian|rightToLeft, english

numericLabel:
- numericText : string comprised of {0123456789 .,:-+/%()x}, ""

Change History
Spoiler:
Synthesia 10.9
  • segmentButton was revamped and only uses a single texture instead of six. The texture's height must be divisible by 3 and should contain the "active" area, shadow overlay, and "background" area stacked vertically. The colors were also renamed.
  • segmentButton now works with generalized FlowLayouts internally instead of Labels, so all of the "text*" properties were removed. textPadding was renamed to padding. (All current segmentButtons have been switched to now use the new "segmentLabel" prototype in ui.xml for their labels.)
Synthesia 10.6
  • Added the new "switch" control.
Synthesia 10.4
  • Removed numericLabel's numericFontSize property. Using ui.xml, you can only get 12pt numericLabels (the equivalent of numericTextSize="small").
Synthesia 10.2
  • Added "uv" property to "image" elements. uv is a four-element comma-separated list of texel coordinates to use for an image: x, y, width, and height, respectively.
  • Added "asteriskColor" property to "groupedTable" elements. This covers the new asterisk "default" icon.
Synthesia 9
  • Added "autoSizePadding" propert to frame. Units are pixels (width, height). Setting to -1 disables auto-size in that dimension. Zero or greater will cause the frame (window, etc.) to auto-size to the size of any visible children + the value specified as padding.
  • Added "tid" properties that will look up text from language_{current}.xml and generate "text" properties from the result. ("emptyHint" attributes for textbox are now also text lookups instead of the text itself.)
  • Added "wrap" property to label. Units are pixels; determines layout width before text wraps to a new line.
Synthesia 8.4
  • Initial ui.xml release.
Post Reply