1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Q Light Controller Plus - Virtual Console Widget Styling & Placement</TITLE>
<SCRIPT SRC="utility.js" TYPE="text/javascript"></SCRIPT>
<link href="style.css" rel="stylesheet" type="text/css" />
</HEAD>
<BODY onLoad="replaceqrc()">
<H1>Virtual Console Widget Styling & Placement</H1>
<P>
The colors, font, frame style, stacking order,
size and placement of widgets can be changed to better suit your vision of the perfect lighting console.
Most of these options, except for moving and resizing, are available in the
Virtual Console <B>Edit</B> menu, that is, they can be accessed from the menu bar as well as from
a popup menu by right clicking a widget you wish to adjust.
</P>
<P>
<B>NOTE:</B> The Virtual Console widgets' styling and placement options are available
only when the application is in <A HREF="concept.html#Modes">Design Mode</A>.
</P>
<H3>Moving Widgets</H3>
<P>
Widgets can be moved simply by dragging them as if you were dragging any icon
on your desktop. Refer to your operating system manual on how to drag items.
</P>
<P>
To move a widget from one frame to another frame, you need to move the widget
through the Virtual Console clipboard. Cut the widgets from the first frame,
then select another frame and paste the widgets into that frame.
</P>
<H3>Resizing Widgets</H3>
<P>
Each widget has a special resize handle <IMG SRC="qrc:/resize.png"/> on their
lower right hand corner that you can grab and then resize the widget as appropriate simply by
dragging the handle.
</P>
<H3>Widget Background</H3>
<P>
To change a widget's background color, choose <B>Color</B> from the
<B>Background</B> menu and select a color from the popup dialog. To
set an image as the widget's background, choose <B>Image</B> from the
<B>Background</B> menu and select an image file from the popup dialog.
</P>
<P>
To restore the default background color (and to clear an image), choose
<B>Default</B> from the <B>Background</B> menu.
</P>
<P>
<B>NOTE:</B> Some operating systems and/or visual themes do not allow manual
setting of background colors or images. Try changing the desktop theme if you
encounter this problem.
</P>
<H3>Widget Foreground</H3>
<P>
To change a widget's foreground color, choose <B>Color</B> from the
<B>Foreground</B> menu and select a color from the popup dialog.
</P>
<P>
Buttons can have an icon in the foreground, which will override any text set as their name.
To change a button's icon, select <B>Choose...</B> from the <B>Icon</B> menu
and select an image file from the popup dialog.
</P>
<P>
To restore the default background color (and to clear an icon if applicable),
choose <B>Default</B> from the <B>Background</B> menu.
</P>
<P>
<B>NOTE:</B> Some operating systems and/or visual themes do not allow manual
setting of foreground colors or images. Try changing the desktop theme if you
encounter this problem.
</P>
<H3>Widget Borders</H3>
<P>
To change the border style for a widget, you can choose either <B>Raised</B>
or <B>Sunken</B> from the <B>Border</B> menu. To completely remove the borders
of a widget, choose <B>None</B> from the <B>Border</B> menu.
</P>
<P>
<B>NOTE:</B> Some operating systems and/or visual themes do not allow manual
setting of borders. Try changing the desktop theme if you encounter this
problem.
</P>
<H3>Fonts</H3>
<P>
You can change the font for all child widgets of a frame at the same time by
changing the font of the frame itself. Alternatively, you can change the font
for each widget separately. Fonts can be changed by selecting <B>Font...</B>
from the <B>Font</B> menu. To restore the font back to the widget's parent
frame's font, select <B>Default</B> from the <B>Font</B> menu.
</P>
<H3>Widget Stacking Order</H3>
<P>
In addition to the normal 2-dimensions, vertical and horizontal,
you can also adjust widgets' placement in the 3rd dimension: depth. If you see
a widget going behind another control, you can <B>raise</B> the widget on top
of all other widgets by selecting <B>Raise</B> from the <B>Stacking Order</B>
menu. Likewise, if you wish to put a widget behind all other widgets, you can
select <B>Lower</B> from the <B>Stacking Order</B> menu.
</P>
</BODY>
</HTML>
|
