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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
|
<html>
<head>
<link href="../lg.css" rel="stylesheet" type="text/css" media="screen, projection" />
<title>Designing Simple front ends with dialog/Xdialog </h1> LG #101</title>
<style type="text/css" media="screen, projection">
<!--
.articlecontent {
position:absolute;
top:143px;
}
-->
</style>
</head>
<body>
<img src="../gx/2003/newlogo-blank-200-gold2.jpg" id="logo" alt="Linux Gazette"/>
<p id="fun">...making Linux just a little more fun!</p>
<div class="content articlecontent">
<div id="previousnexttop">
<A HREF="pramode.html" ><-- prev</A> | <A HREF="lg_backpage.html" >next --></A>
</div>
<h1>Designing Simple front ends with dialog/Xdialog </h1></h1>
<p id="by"><b>By <A HREF="../authors/sunil.html">Sunil Thomas Thonikuzhiyil</A></b></p>
<p>
<h2>1) Introduction</h2>
<p> This article introduces dialog and Xdialog for building simple front ends to shell scripts. It assumes that you are familiar with shell programming.
<br> The latest version of this document can be found at
<a href="http://gnubox.dyndns.org:8080/~sunil/dialog.php">http://gnubox.dyndns.org:8080/~sunil/dialog.php</a>.
<p>dialog is a utility for building console-based front ends. Xdialog is a similar program for X. Both programs are more or less compatible and easy to program. Dialog is shipped with most GNU/Linux distributions. If you want to build from sources, a tarball can be obtained from <a href="http://hightek.org/dialog/">here</a>. Xdialog is available from <a href="http://xdialog.dyns.net/">here</a>.
<p> Both of these programs are free software and run on a variety of *nix platforms. Most of the examples given in this tutorial are adapted from examples given along with dialog sources.
<h2>2) Basics</h2>
Here is the first dialog script I tried. It displays a simple YES/NO box.
<pre>
#!/bin/bash
DIALOG=${DIALOG=dialog}
$DIALOG --title " My first dialog" --clear \
--yesno "Hello , this is my first dialog program" 10 30
case $? in
0)
echo "Yes chosen.";;
1)
echo "No chosen.";;
255)
echo "ESC pressed.";;
esac
</pre>
<p> Copy the above lines to a file say yesno.sh and give executable permission to it.
<pre>
$chmod u+x yesno.sh
</pre>
<p> Now try running the program.
<pre>
$./yesno.sh
</pre>
<p> A screen-shot of the above program is given below.
<br>
<IMG ALT="yesno box" SRC="misc/sunil/yesno.png" >
<br>Now try changing the line.
<pre>
DIALOG=${DIALOG=dialog}
</pre>
to
<pre>
DIALOG=${DIALOG=Xdialog}
</pre>
<p>Try running it from an xterm. I got the following output.
<br>
<IMG ALT="xyesno box" SRC="misc/sunil/xyesno.png" >
<p>Let us have a detailed look at the above program. The first line is basically a comment which also indicates that bash shell is used to run this program.
<pre>DIALOG=${DIALOG=dialog}</pre>
<p>The above line sets the variable DIALOG to the value 'dialog'. The actual dialog box is drawn by the following line.
<pre>
$DIALOG --title "My first dialog" --clear \
--yesno "Hello, this is my first dialog program" 10 30
</pre>
<p> Options used are
<br> --title This option sets title of your box
<br> --clear This option clears the screen before drawing
<br> --yesnobox This draws the box with the text given inside the box.
<p>The text to be printed inside yesnobox is given in double quotes. The text wraps depending on width of the box. You can use \n to force a new line. Last 2 numbers specify width and height of the box. You can move between "yes" and "no" using tabs.
<p>The dialog program now waits for user input. When you press enter on "yes" or "no" or if you press escape key the program returns and the return value is available on shell variable $? which you can process further.
<h2>2) Reading input</h2>
<p>The following program reads a string you input and prints it back.
<pre>
#!/bin/sh
DIALOG=${DIALOG=dialog}
tempfile=`tempfile 2>/dev/null` || tempfile=/tmp/test$$
trap "rm -f $tempfile" 0 1 2 5 15
$DIALOG --title "My input box" --clear \
--inputbox "Hi, this is a sample input box\n
Try entering your name below:" 16 51 2> $tempfile
retval=$?
case $retval in
0)
echo "Input string is `cat $tempfile`";;
1)
echo "Cancel pressed.";;
255)
if test -s $tempfile ; then
cat $tempfile
else
echo "ESC pressed."
fi
;;
esac
</pre>
<p>Try running the program under console and under X ( after changing dialog to Xdialog as above). See the results.
<br>
<IMG ALT="input box" SRC="misc/sunil/inputbox.png" >
<p>This program is slightly more complex than our previous yesno box program. The following lines set up a temporary file:
<pre>
tempfile=`tempfile 2>/dev/null` || tempfile=/tmp/test$$
trap "rm -f $tempfile" 0 1 2 5 15
</pre>
<p>The first line above tries to create a temporary file using the utility tempfile. If it fails, a temporary file is manually set up in /tmp. The second line above sets up a trap routine. When the script exits (either normally or abnormally) the trap removes the tempfile. The numbers shown are the signals that will be trapped.
<p>dialog is then invoked as below:
<pre>
$DIALOG --title "My input box" --clear \
--inputbox "Hi, this is a sample input box\n
Try entering your name below:" 16 51 2> $tempfile
</pre>
<p>The dialog program writes its output to the standard error by default. Hence the input string you enter is echoed to standard error which we are redirecting to our tempfile. You can capture the entered text from tempfile for further processing.
<h2>3) Building a menu</h2>
<p> Try the following program both in console and X (after changing dialog to Xdialog as before):
<pre>
#!/bin/sh
DIALOG=${DIALOG=dialog}
tempfile=`tempfile 2>/dev/null` || tempfile=/tmp/test$$
trap "rm -f $tempfile" 0 1 2 5 15
$DIALOG --clear --title "My favorite HINDI singer" \
--menu "Hi, Choose your favorite HINDI singer:" 20 51 4 \
"Rafi" "Mohammed Rafi" \
"Mukesh" "Mukesh" \
"Kishore" "Kishore Kumar" \
"Saigal" "K L Saigal" \
"Lata" "Lata Mangeshkar" \
"Yesudas" "K J Yesudas" 2> $tempfile
retval=$?
choice=`cat $tempfile`
case $retval in
0)
echo "'$choice' is your favorite hindi singer";;
1)
echo "Cancel pressed.";;
255)
echo "ESC pressed.";;
esac
</pre>
<p>The results are as below
<br><IMG ALT="Menu box" SRC="misc/sunil/menubox.png">
<br>
<IMG ALT="menu box" SRC="misc/sunil/xmenubox.png">
<p> The logic is exactly similar to inputbox. We redirect the choice you have selected to a tempfile and then process return value of dialog and contents of the tempfile.
<h2>4) Radiolist and Checklist</h2>
<p> Radiolists and checklists can be programmed just like menus. A simple radio list example is given below.
<pre>
#! /bin/sh
DIALOG=${DIALOG=dialog}
tempfile=`tempfile 2>/dev/null` || tempfile=/tmp/test$$
trap "rm -f $tempfile" 0 1 2 5 15
$DIALOG --backtitle "Select your favorite singer" \
--title "My favorite singer" --clear \
--radiolist "Hi, you can select your favorite singer here " 20 61 5 \
"Rafi" "Mohammed Rafi" off \
"Lata" "Lata Mangeshkar" ON \
"Hemant" "Hemant Kumar" off \
"Dey" "MannaDey" off \
"Kishore" "Kishore Kumar" off \
"Yesudas" "K. J. Yesudas" off 2> $tempfile
retval=$?
choice=`cat $tempfile`
case $retval in
0)
echo "'$choice' is your favorite singer";;
1)
echo "Cancel pressed.";;
255)
echo "ESC pressed.";;
esac
</pre>
<p> A screen shot is shown below.</p>
<IMG ALT="radiolist" SRC="misc/sunil/radiolist.png">
<p> For trying out checklist just change --radiolist option in the above program to --checklist.
<h2>5) Building a Gauge</h2>
<p> A gauge based on dialog can be used to indicate progress of your program. Building a gauge is slightly tricky. Look at the following example:
<pre>
#!/bin/sh
DIALOG=${DIALOG=dialog}
COUNT=10
(
while test $COUNT != 110
do
echo $COUNT
echo "XXX"
echo "The new\n\message ($COUNT percent)"
echo "XXX"
COUNT=`expr $COUNT + 10`
sleep 1
done
) |
$DIALOG --title "My Gauge" --gauge "Hi, this is a gauge widget" 20 70 0
</pre>
<p> Here the dialog program gets its input from the code shown within the parentheses. This code emits the number to be used for gauge and the message to be shown. The message to be shown in the gauge box must be surrounded by echo "XXX". The screen-shot of a gauge is shown below.
<br>
<IMG ALT="gauge" SRC="misc/sunil/gauge.png">
<h2>6) File selections </h2>
<p> Code for a typical file selection dialog box is shown below.
<pre>
#!/bin/sh
DIALOG=${DIALOG=dialog}
FILE=`$DIALOG --stdout --title "Please choose a file" --fselect $HOME/ 14 48`
case $? in
0)
echo "\"$FILE\" chosen";;
1)
echo "Cancel pressed.";;
255)
echo "Box closed.";;
esac
</pre>
<br><IMG ALT="file selection" SRC="misc/sunil/fselect.png">
<p> Please note that the above program uses a different technique to capture the selected file. As mentioned previously all outputs from dialog is sent to standard error by default. However --stdout option can be used to send the output information to standard output which in turn can be assigned to a variable. This trick can be used in the case of other dialog boxes such as menubox yesnobox etc.
<p> The file selection dialog presents 2 panes. You can use Tab key to switch between panes and space key to select a file. It is also possible to type into the input box of files select dialog.
<h2>7) Calendar and time boxes </h2>
<h3>a) Calendar</h3>
<p> A calendar box displays month, day and year in separately adjustable windows. If the values for day, month or year are missing or negative, the current date's corresponding values are used. You can increment or decrement any of those using the left-, up-, right- and down-arrows. Use vi-style h, j, k and l for moving around the array of days in a month. Use tab or back tab to move between windows. If the year is given as zero, the current date is used as an initial value. On exit, the date is printed in the form day/month/year.
<pre>
#!/bin/sh
DIALOG=${DIALOG=dialog}
USERDATE=`$DIALOG --stdout --title "CALENDAR" --calendar "Please choose a date..." 0 0 7 7 1981`
case $? in
0)
echo "Date entered: $USERDATE.";;
1)
echo "Cancel pressed.";;
255)
echo "Box closed.";;
esac
</pre>
<br><IMG ALT="calendar" SRC="misc/sunil/calendar.png">
<h3>b) Time</h3>
<p> The time dialog box allows you to select time. Try out the following program and see how it works.
<pre>
#!/bin/sh
DIALOG=${DIALOG=dialog}
USERTIME=`$DIALOG --stdout --title "TIMEBOX" --timebox "Please set the time..." 0 0 12 34 56`
case $? in
0)
echo "Time entered: $USERTIME.";;
1)
echo "Cancel pressed.";;
255)
echo "Box closed.";;
esac
</pre>
<br><IMG ALT="time" SRC="misc/sunil/time.png">
<h2>8) Other Features</h2>
<p> Xdialog has some additional features such as tree-view, range-box, edit-box, etc. Please look <a href="http://thgodef.nerim.net/xdialog/doc/box.html">here</a>. Dialog man page has interesting information of some other options such as password box, tailbox etc. Also there are options for changing colors, shadow etc.
<h2>9) Tips</h2>
<p> You can choose between dialog and Xdialog at run time using the following code snippet:
<pre>
if [ -z $DISPLAY ]
then
DIALOG=dialog
else
DIALOG=Xdialog
fi
</pre>
<p> Try this program on console as well as under X and see the difference.
<pre> #!/bin/sh
if [ -z $DISPLAY ]
then
DIALOG=dialog
else
DIALOG=Xdialog
fi
$DIALOG --yesno "Is this fun" 0 0
</pre>
<h2>10) References</h2>
<p> 1) <a href="http://hightek.org/dialog/manual-0.9a-20010429.html">Manual page for dialog</a>
<p> It is a must read if you are planning to write some useful dialog scripts. There are several other options which allow you to modify the look and feel.
<p> 2) Dialog examples at <a href="http://www.fifi.org/doc/dialog/examples/">http://www.fifi.org/doc/dialog/examples/</a>.
<p> All the examples in this tutorial are modified versions of examples found here. If you have Debian GNU/Linux the examples are available at /usr/share/doc/dialog/examples.
<p> 3) Thomas Dickey's dialog page: <a href="http://dickey.his.com/dialog">http://dickey.his.com/dialog/</a>
<p> 4) Vincent Stemen's dialog page <a href="http://hightek.org/dialog/">http://hightek.org/dialog/</a>.
<p>This page has comprehensive information on various dialog versions.
<p> 5) Xdialog documentation at <a href="http://thgodef.nerim.net/xdialog/doc/index.html">http://thgodef.nerim.net/xdialog/doc/index.html</a>.
<br>This page has exhaustive information on Xdialog.
</p>
<!-- *** BEGIN author bio *** -->
<P>
<P>
<!-- *** BEGIN bio *** -->
<P>
<img ALIGN="LEFT" ALT="[BIO]" SRC="../gx/2002/note.png">
<em>
I work as consultant information technology at the Kerala Legislative
Assembly Trivandrum India. I have been hooked on Linux since 1996. I have a
Masters in Computer Science from Cochin University. I am interested in all
sorts of operating systems. In my free time I love to listen to Indian
classical music.
</em>
<br CLEAR="all">
<!-- *** END bio *** -->
<!-- *** END author bio *** -->
<div id="articlefooter">
<p>
Copyright © 2004, Sunil Thomas Thonikuzhiyil. Copying license
<a href="http://linuxgazette.net/copying.html">http://linuxgazette.net/copying.html</a>
</p>
<p>
Published in Issue 101 of Linux Gazette, April 2004
</p>
</div>
<div id="previousnextbottom">
<A HREF="pramode.html" ><-- prev</A> | <A HREF="lg_backpage.html" >next --></A>
</div>
</div>
<div id="navigation">
<a href="../index.html">Home</a>
<a href="../faq/index.html">FAQ</a>
<a href="../lg_index.html">Site Map</a>
<a href="../mirrors.html">Mirrors</a>
<a href="../mirrors.html">Translations</a>
<a href="../search.html">Search</a>
<a href="../archives.html">Archives</a>
<a href="../authors/index.html">Authors</a>
<a href="../contact.html">Contact Us</a>
</div>
<div id="breadcrumbs">
<a href="../index.html">Home</a> >
<a href="index.html">April 2004 (#101)</a> >
Article
</div>
<img src="../gx/2003/sit3-shine.7-2.gif" id="tux" alt="Tux"/>
</body>
</html>
|
