Window layout

Page updated March 15, 2011
This pages explains how to get consistent window layout when you write a GUI application with HUG (Highlevel Universal GUI). You may design a window to look nice on your PC, but on a different PC with different screen DPI (Dots Per Inch) and resolution, and different fonts, the appearance of the application window may have deteriorated.

Changeable factors

There are various factors that can change the appearance of the window:

Xft.dpi	You will find this value in /root/.Xresources. It is also set by the choosing the 'Desktop' category in the menu, then choose 'Set global font size'. Most builds of Puppy have this set to 78, whereas many other distributions have default of 96. Increasing this causes text to render bigger on the screen.
Screen	The physical screen resolution and DPI, plus the resolution that X is set to, also affect how a window appears.
Font	Text will render in a window with the fonts specified in the current GTK theme. If the current theme has a different font than the ones for which the window was designed, then the text may not fit the window properly

GUI applications coded with the GTK library have various ways in which widgets and text are rendered in a window. Broadly, there are two, a "packing" technique that draws each widget one at a time, or an "absolute coordinate" technique -- HUG uses the latter.
With the absolute coordinate layout, each widget is drawn at a fixed x/y position in the window.

Dots Per Inch

I will use my 'proxy-setup' application (see /usr/local/simple_network_setup/proxy-setup.bac in recent puppies) to illustrate the layout issues and the solutions. Here is part of the main window:

layout1

Looks ok, however, if the size of the font is changed, by increasing that Xft.dpi value, or different physical screen, then the window could look like this:

layout2

However, there is a simple solution. Peter van Eerten, the creator of BaCon, introduced a DPI specification that automatically takes care of this. Put this line near the beginning of the program:

HUGOPTIONS("BASEXFTDPI 78")

...where the value of 78 is the Xft.dpi value in /root/.Xresources when I designed the GUI. That is, it is the value for which my layout looks correct.

If the DPI value is changed, say increased to 96, instead of getting a messed up window as shown above, the window will automatically scale so as to render the text correctly:

layout3

...superb!

GTK theme font

The same thing as shown above could also happen if a different GTK theme with larger font is chosen (see menu Desktop -> GTK theme chooser). Different users are going to have their own theme preference, but it isn't so good if a theme has bigger font sizes which cause our example window to be messed up.

There is also a simple solution to this. Peter introduced a feature that allows a font to be specified in the program, that overrides the GTK default. This will apply to all widgets. Put this near the beginning of the program:

HUGOPTIONS("FONT DejaVu Sans 12")

...with whatever font you want. DejaVu Sans is available in all puppies.

If you want to override that global font setting with a per-widget font, use the FONT HUG function. For example, I wanted some widgets to be a monospace font:

httpproxy = ENTRY(http_proxy$,280,20)
ATTACH(mainwin, httpproxy, 120, 100)
FONT(httpproxy,"Monospace 13")

...I wanted this text-entry box to display with a monospaced font.

If you want to view the complete 'proxy-setup' application code, go here:

proxy-setup.bac