J-Log

Introduction

Resources

Elements

Styles

Layouts

VerticalFlowLayout

borderlayout

Colours

Bitmaps

Sysmetrics

Scrollbar Bitmaps

Gradients

Animation/Alpha Blending

Logon Box Borders

Moving the account list

Using 32 bit bitmaps for the buttons

Editing 32 bit bitmaps

Introduction

This is an attempt to write down everything I know about how the script (UIFile) part of a LogonUI works. It isn’t a tutorial: it’s intended to be more of a reference for people who have already made a logon screen and want to know more about how to control its appearance.

It’s far from complete, probably inaccurate in places and could probably explain things a little better. It would be nice, for example, to have a clearer idea of what DTBs are and what Handles are (let me know if you know).

The information in here was used to create the OSXP logon screen. Feel free to refer to it for clarification (I hope!).

Resources

Anything beginning with rc is a reference to a resource elsewhere. e.g. rcstr = resource string, rcbmp = resource bitmap, rcint = resource string as an int

Elements

Elements are the containers of the logon screen. They can be nested, and the positioning of the child elements is controlled using layouts. They can have the following attributes (at least)

layout	The type of layout used to arrange the child elements
layoutpos	For border layouts, the location in the parent layout the child should occupy
width	The desired width of the element. You don’t always get what you ask for though.
height	The desired height of the element. You don’t always get what you ask for though.
content	The graphic used to fill the background of an element. Use this if you don’t use id.
id	The name of an atom defined in a previous style section. This will form the background of the element.
sheet	The name of a style defined earlier.

Styles

Styles allow you to define a bunch of associated elements. This is confusing because although they are called elements inside a style section, they are referred to using the id attribute of an element section (see above). The advantage of defining elements inside a style section is that you can define a whole bunch of attributes about a graphic that you couldn’t specify using the element section attributes: things like: animation, cursor and alpha blending.

Personally I find it is neater to group related things together in a style section (such as rcbmps()) rather than use them directly in an element section.

You can define as many style sections as you like, but some of the existing ones seem to have a special meaning (like they are referred to with the logon executable itself). Things like the scroller style sheet.

Layouts

VerticalFlowLayout

verticalflowlayout(0,3,3,2)
verticalflowlayout(a,b,c,d)

a: seems to make no difference
b: 0= column, 1=fit, 2=fit (?)
c: 0=left, 1=right, 2=center
d: 0=top, 1=bottom, 2=middle

values seem to be mod 3.

borderlayout

	top
left	client	right
	bottom

Child elements can ave an attribute called layoutpos that can take any the above values. I’m not sure whether the dark grey areas belong to top, bottom, left or right. Any of the areas can be zero sized.

Colours

    rgb(RED, GREEN, BLUE)
    argb(ALPHA, RED, GREEN, BLUE)

Bitmaps

rcbmp(BMP_ID, STRETCHING, TRANSPARENT_COLOR, WIDTH, HEIGHT, SIZE_FLAG, MIRROR)

TRANSPARENT_COLOR: #RRGGBB
STRETCHING: 1 = normal, 3, = tile, 6 = stretch, 7 = 32 bit bitmap
SIZE_FLAG: 1 = use bitmap dimensions, 0 = use explicit dimensions
MIRROR: 0 = normal, 1 mirror

Use 1×1 magic pink with tile to empty a bitmap.

This is a list of all the standard bitmaps. You can always add more but you must declare them as atoms in one of the sections (actually, this might just be a problem with ResHack. LogonStudio seems much more robust in this regard):

100 - background image
102 - password entry field
103 - arrow button
104 - arrow button mousedown
105 - help button
106 - help button mousedown
107 - power button
108 - undock button
109 - scroll down arrow
110 - scroll up arrow
111 - scrollbar
112 - selected user box
113 - Picture frame
114 - default icon
119 - highlighted picture frame
121 - power button mousedown
122 - undock button mousedown
123 - Image displayed on left panel
124 - Divider vertical line
125 - Divider top of screen
126 - Divider bottom of screen
127 - Image displayed in center of screen during shut down

Sysmetrics

Sysmetrics are values about various aspects of the GUI. You can use them wherever a numeric value is expected. These are two that I know about:

0 The screen width
1 The screen height

You get the value by calling the sysmetric function. E.g.:

sysmetric(0)

Returns the screen width. This is an example of using it within the rcbmp function:

rcbmp(100, 6, 0, sysmetric(0), sysmetric(1), 0, 0);

I suspect that if you do a search at msdn.Microsoft.com on sysmetric, the list returned for FoxPro is correct except you should subtract 1.

Scrollbar Bitmaps

The scrollbar bitmaps aren’t used. To use them edit the various entries for the scrollbar components in the section. There are five parts:

Thumb background	The scrollbar itself
Thumb content	The ‘grabber’ in the middle of the thumb.
Lineup	The up arrow
Linedown	The down arrow
Pageup	The part of the trough above the thumb and below the up arrow
Pagedown	The part of the trough below the thumb and above the down arrow.

In general make all of the rcbmps stretchable. There are no standard bitmaps for the Pageup and Pagedown images.

A bug in the standard logonui means the scrollbars won’t be visible if you use WIN+L. However if you redefine scroller as above, they will!

Example:

To use the thumb background image change:

thumb

{

    background: dtb(handlemap(1),3,1);

    content: dtb(handlemap(1),9,1);

    contentalign: middlecenter;

}

to:

thumb

{

    background: rcbmp(111,6,#FF00FF,0,0,1,0);

    content: dtb(handlemap(1), 9, 1);

    contentalign: middlecenter;

}

Gradients

e.g.:

background: gradient(argb(0,60,59,98), argb(0,67,93,136), 0); //change the gradient; first color >(fades to)>second color

0 = vertical
1 = horizontal

Animation/Alpha Blending

The following snippet controls the appearance of the account list whilst the mouse pointer is inside it. The settings will cause the account with the cursor over it to be displayed in maximum intensity and with a solid background. The others will be alpha-blended down to an intensity of 96, i.e. they will be both dimmer and transparent.

<style resid=hotaccountlistss>

…

    logonaccount

    {

        cursor: hand;

        foreground: rgb(255,255,255);

        background: rgb(0,33,0);

        animation: alpha | log | fast;

        alpha: 96;

    }

…

    logonaccount [logonstate=1]

    {

        animation: rectangle | s | mediumfast;

        cursor: arrow;

        alpha:255;

    }

    logonaccount [mousewithin]

    {

        cursor: hand;

        alpha:255;

    }

    logonaccount [selected]

    {

        cursor: hand;

        alpha:255;

    }

…

    logonaccount [selected]

    {

        alpha: 255;

    }

…

</style>

The following controls the appearance of the account list when the mouse pointer is outside it. This will set the background to transparent and the list to full intensity. The transparent background is achieved by using argb as opposed to rgb. Argb means Alpha, Red, Green, Blue, so the first number is the alpha blending used for that color. In this case an alpha of 0 means we will have a transparent background.

Note there is no animation specified for this. For some reason that seems to mess up the drawing of the account list for the duration of the transition (if anyone can find out why or better still, how to fix it, let me know).

<style resid=accountlistss>

…

    logonaccount

    {

        cursor: hand;

        foreground: rgb(255,255,255);

        background: argb(0,0,0,0);

        alpha: 255;

    }

…

</style>

 

Logon Box Borders

Logon boxes often have annoying black borders around them once you’ve dealt with the alpha blending animation. This is how you get rid of them. Find the following sections (there are two of them). Set the border thicknesses to zero and add what they used to be to the padding rectangle. For example take:

element [id=atom(userpane)]

{
    padding: rect(2rp,2rp,14rp,2rp);

    borderthickness: rect(5,5,0,5);

    bordercolor: rgb(0,0,0);

    fontsize: rcint(45) pt;

}

And turn it into:

element [id=atom(userpane)]

{
    padding: rect(7rp,7rp,14rp,7rp);

    borderthickness: rect(0,0,0,0);
    bordercolor: rgb(0,0,0);

    fontsize: rcint(45) pt;

}

Now remove the argb entry from the following section as follows:

…

button [class=”status”]

{

    background: argb(0,0,0,0);

    foreground: rgb(255,255,255);

    fontsize: rcint(46) pt;

    fontweight: bold;

    contentalign: wrapleft;

}

…

To:

…

button [class=”status”]

{

    foreground: rgb(255,255,255);

    fontsize: rcint(46) pt;

    fontweight: bold;

    contentalign: wrapleft;

}

…

 

Moving the account list

To move the account list to the left half of the screen, simply swap the two sections in the logonframe section as follows:

<element id=atom(contentcontainer) layout=flowlayout(1,3,2,3) layoutpos=client content=rcbmp(100,0,0,1000rp,863rp,1,0)>

        <element id=atom(rightpanel) sheet=styleref(rightpanelss) layout=borderlayout() layoutpos=left width=384rp>

        <element id=atom(leftpanel) sheet=styleref(leftpanelss) layout=filllayout() layoutpos=left>

Using 32 bit bitmaps for the buttons

The various buttons (like the help button, power button etc.) can all be replaced with 32 bit bitmaps – so they will blend with any background without a case of the jaggies.

Firstly you will need at least one bitmap in the logon that is just magic pink. If you don’t already have one, add it. All my logons have bitmap 112 set to magic pink. To change the actual bitmap, see the next section. But you will also have to change the UI File. For each image find the section in the UIFile that defines the button, i.e. for image 107 (one of the two power button images) it looks like this:

element [id=atom(powerbutton)]

{

    content: rcbmp(107,3,#FF00FF,31rp,31rp,0,0);

    contentalign: middlecenter;

}

Replace it with this:

element [id=atom(powerbutton)]

{
    content: rcbmp(112,3,#FF00FF,31rp,31rp,0,0);
    background: rcbmp(107,7,#FF00FF,31rp,31rp,0,0);
    contentalign: middlecenter;
}

Basically you have changed the content: into a background: and changed the bitmap type from 3 to 7. You have then added another content: which just references a bitmap that is totally magic pink.

Editing 32 bit bitmaps

AFAIK, ResBuilder from TGTSoft is the only way of creating 32 bit bitmaps, which it does from 32 bit PNGs. You can only use it to edit existing 32 bit bitmaps in a logonui, so to change a 24 bit bitmap to 32 bits you have to first find a 32 bit bitmap with ResHack. Export it. Replace the bitmap you want to edit with the one you just exported, then edit it with ResBuilder.

So. Lets say you want to create a 32 bit bitmap for bitmap 107 (power off):

1. Open it with ResHacker and find an existing 32 bit bitmap (113, the picture frame is 32 bits in the original)
2. Export it.
3. Replace 107 with the image you just exported.
4. Save the UI.
5. Open it with ResBuilder and edit 113. It will open it as a 32 bit PNG in the editor you specified (e.g. PS or FireWorks).
6. Edit it and save it
7. Save the UI.