YT UI library widgets

Michael Herf
20 Sep 2000

The UI library for Workflow supports several widget definitions. Layout is implemented using Photoshop layers. Most widgets respect the following conventions for layer data:

  1. Layer bounds (rectangular bounds of non-transparent pixels on a layer) define the size of an object
  2. Top-left pixel (including alpha) defines color & opacity
  3. Layer opacity is used in combination with pixel opacity.
  4. Layer name determines extra parameters and widget type.
  5. "Background" is not a real layer and is ignored (you should throw it away.)
  6. First real layer becomes the UI background (root).
  7. Apply modes other than "Normal" are ignored.
  8. All layer names are converted to lower case within the system. Spaces are preserved. (This is useful to know when setting up a hierarchy, but that's for later.)

general format

widget([[param],] [[param],] [...]): layername

Rules:
  1. If widget is omitted, the static bitmap widget is used.
  2. If parameters are omitted, the widget will see no arguments. Many widgets are fine with this.
    e.g., rect: frame is a perfectly valid rect.
  3. Parameters can be empty, so you could have a button with no text:
    button(,button): iconbutton
  4. Layernames MUST BE UNIQUE.

rect

The rect widget is relatively simple. It uses the above conventions to draw a pixel-snapped rectangle, using layer opacity and top-left-pixel opacity.

Example: rect: green background

decrect(path)

Please see decrect documentation.

Example: decrect(dec/roundrect): roundbg

srect

The srect widget adds a shadow to the rect. This is a default shadow now, but it will have parameters soon.

Example: srect: text background

window

The window widget gives a name to a window, which should be attached to a windows dialog control in C++ code. This object allows us to use constraints, pixel-level layout, and have other UI objects to refer to the window. Rules:
  1. Windows draw on top of everything else (overlapping is undefined)
  2. Windows are opaque, no opacity
  3. Windows ignore input color
Example: window: recent items

swindow(width, offsetx, offsety, opacity)

The swindow is a window with a shadow drawn in the UI. The shadow is drawn in layer order, not on top, so position this item properly.

It takes either four or zero params (any other is an error):

Example: swindow(3.0, 1, 1, 0.3): floating edit

clip

Clippers are used to clip their children (below them in the hierarchy.) They are invisible rectangles.

Example: clip: panel clipper

static(text)

Static text has one argument: the text to draw. In general, this doesn't get changed at runtime, and it doesn't wordwrap.

Example: static(Search results:): sresults

text

Specifies layout for dynamic (wrapping) text.

Example: text: message contents

button(labeltext, normal, pressed, hover)

Specify a text label, a normal bitmap, a pressed bitmap, and a hover bitmap. UI art for buttons is shared. If you leave out the bitmaps, the bitmap on the current layer will be used instead of external art.

Example: button(,button/normal, button/pressed, button/hover): OK button [text built in]
Example: button(OK,b/normal, b/pressed, b/hover): OK button [rendered text]

vbutton(labeltext)

A virtual button.

This button has no associated graphics, but may draw text. It respects the bounds of the input layer.

Example: vbutton(push me): pushbutton
Example: vbutton: justarect

buttcon(labeltext, normal, pressed, hover)

A toggleable button
Properties: Example:
buttcon(b/normal, b/pressed, b/hover): tab1

In .tre file:
tab1: root
Property showtarget ui/firsttabcontainer
Property setpressed 1

buttcontainer

A buttcontainer contains buttcons, and it is usually used to implement a radio button group.
Buttcons added as direct descendents of this will be pressed one-at-a-time, like radio buttons.

Example: buttcontainer: radiogroup1

In .tre file:
radiogroup1: root

tab1: radiogroup1
tab2: radiogroup1
tab3: radiogroup1

www(URL)

Open a browser window in the rectangle. Start at the specified URL.

Notes: you may optionally specify shadow parameters after the URL, exactly as swindow does.

Example: www(http://www.idealab.com/): browser

tbitmap

A tiled bitmap, origin in global coordinates, fills specified rect.

Example: tbitmap(backgrounds/snazzytile): bg

scbitmap

A bitmap scaled to the destination rectangle.

Example: scbitmap(misc/stretchme): stretched

In .tre file:
stretched: root
# do nearest-neighbor, rather than default (bilinear)
SetProperty hiquality 0

bicubic

A node that bicubically resamples its source (file, jpeg, or bitmap) and centers it in its display. Only recomputes on resize

Example: bicubic: showme

textedit

Text that is editable if hooked up to a dbvar.

Example: textedit(Edit me): editable

scrolltext

Text with a scrollbar.

Example: scrolltext: lotsoftext

fps

A node that tells the current UI frames per second.

Example: fps: slowfpscounter

Node identifiers

In a .tre file, the available properties are as follows:

MaintainOffset "edge": keeps "left/right/top/bottom" side aligned.
MaintainRatio "edge": makes "left/right/top/bottom" side proportionally resize.
XConstraint x, y, z: keeps child position "x" constrained to parent "y" + "z" pixels.
YConstraint x, y, z: same.

Properties

fontsize: sets font size in pixels
fontname: sets fontname
fontweight: sets fontweight (boldness), defaults to 400
fonttrack: sets tracking in 0.25-pixel increments (can be negative)
typecolor num num num: sets font color for buttons, hex with alpha, normal, pressed, hover
showtarget: for buttons, items to show when pushed
hidetarget: for buttons, items to hide
setpressed: set default state of a buttcon
setvisible: set default visibility of any node
setautorepeat: makes a button continuously send messages when held down
sethiquality: makes a node render using bilinear rather than point sampling
drag: makes an object draggable (can't mix with constraints)
windrag: makes an object drag the parent window
winsize: makes an object resize the parent from the lower-right
normalcursor: makes a button use a normal cursor (pointer)
textcursor: makes a button use an I-beam cursor
useshadow: turns on shadows for bitmap nodes
hitchildren: makes children of buttons cause hits on parents
scaleclamp: sets maximum scale of a bicubic node
mousedown: makes a button message on mousedown and ignore mouseup
usealpha: makes an item ignore its alpha channel