/****************************************************************************
GO DemoBuilder User's Guide

 Copyright 1991, GO Corporation, All Rights Reserved
****************************************************************************/

DemoBuilder is a simple presentation tool and application prototyper for 
the PenPoint Computer.  DemoBuilder exploits the power and flexibility of 
PenPoint to construct multi-page documents, each page of which may 
contain any number of PenPoint  components.  In addition, each page 
may contain links to other pages. When you tap  on one of the links, 
DemoBuilder turns to the page indicated by the link.  Because 
DemoBuilder is completely controlled by a text file, no knowledge of 
programming is required to create a DemoBuilder document 


The simplest use of DemoBuilder is as a presentation tool to sequence 
through a series of images.  These images can be generated using any 
program that can generate TIFF files.  (TIFF is an industry standard 
interchange format for images.)  You can navigate between adjacent 
images using PenPoint's scroll gestures.  Or, if you prefer, more complex 
navigation effects can by achieved by adding one or more links to each 
page. 

 

Using carefully designed images and links you can create prototype of 
an application.  This will help you to convey the concept for a new 
application.  Suppose you draw a button in the top left corner of each 
image in a slide show.  You can set up a link on each page such that 
tapping on the button causes DemoBuilder to turn to a given page.  Then 
when you are running the slide show, at any time you can turn the given 
page by tapping on the button.  Effects like this make your slide show 
look and feel more like an application prototype.

  

Even more compelling prototypes can be built using components other 
than images.  You can overlay images with a variety of other components 
including fields for handwriting translation, transparent signature pads 
that capture ink, and text fields for full functional gesture-based text 
editing.

 

DemoBuilder uses TIFF or MacPaint files for its images.  DemoBuilder 
assumes that the screen of thePenPoint computer is 400 pixels wide and 
640 pixels tall, the image files must be of that size or smaller.  (If you plan 
to use the computer in landscape mode, the width assumed is 640 pixels 
and the height is 400 pixels).  Each black and white image takes 
approximately 60K of memory  (about 15 slides per megabyte of 
memory).

 

When you turn to a DemoBuilder document, it reads in a text file that lists 
the images and other components used as well as describes the links for 
each page.  The exact format of this configuration file is described later in 
this document.  Each link specified in the file consists of the co-ordinates 
of a rectangle and a page number.  Tapping within the boundary of the 
rectangle defined by a link causes DemoBuilder to turn the page 
associated with the link.


DemoBuilder Example Configuration File

 

Below is an example of a simple DemoBuilder document.  It has two 
pages, each of which is a tiff file (named image1.tif and image2.tif 
respectively).  The two pages are shown below:

 

     |-------------------------------|       |----------------------------- |
     |                               |       |                              |
     |       Name                    |       |     Name                     |
     |       Company                 |       |      Company                 |
     |        Account #              |       |       Account #              |
     |                               |       |                              |
     |                               |       |                              |
     |                               |       |                              |
     |                               |       |                              |
     |                               |       |                              |
     |                               |       |                              |
     |                               |       |                              |
     |                               |       |                              |
     |                               |       |                              |
     |                               |       |                              |
 25  |       <<|      |>>            |       |       <<|    |>>             |
     |                               |       |                              |
     |-------------------------------|       |------------------------------ |

    0,0     100         200


 	image1.tif                                        image2.tif

 

The following configuration file is the minimum to include both files in the 
DemoBuilder document as separate pages.  To navigate between 
screens, use the scroll gestures (flick left to go forward and flick right to 
go backwards).

 

 	# Comment lines start with a #

 	# Simple configuration file using gesture navigation

 	define image1 tiff image1.tif

 	define image2 tiff image2.tif

 	#

 	newpage

 	add image1 0 0

 	#

 	newpage

 	add image2 0 0

 

Now let's add some links so that a tap on the right arrow on page 1 turns 
to page 2.  Likewise, a tap on the left arrow on page 2 will switch to page 
1.  Tapping on the left arrow on page 1 or the right arrow on page 2 will 
have no effect.  The first thing we need to do is to calculate the rectangle 
surrounding each arrow.

 

The numbers in the diagram  show the calculations necessary to add the 
two links.  The lower left corner of the left arrow is at (100, 25).  The lower 
left corner of the right arrow is at (200, 25).   Both arrows are 65 pixels 
wide and 60 pixels high.

                          

 Calculation of link coordinates

 

Below is the new configuration file created by adding the two links using 
the above calculations.

 

 	# Simple configuration file using links

 	define image1 tiff image1.tif

 	define image2 tiff image2.tif

 	#

 	newpage

 	add image1 0 0

 	link 200 25 65 60 builder goto 2

 	#

 	newpage

 	add image2 0 0

 	link 100 25 65 60 builder goto 1

 

 


Creating a DemoBuilder Document on a Macintosh

 

 You can create a DemoBuilder document using just a Macintosh 
computer.  First create the TIFF files for your document.  Since you will be 
transferring the files to a DOS format floppy, you must give your tiff files 
DOS compatible names.  DOS files names consist of an 8 letter string, 
followed by a period, followed a 3 letter string.  It is suggested that you 
name your tiff files with names like "SCREEN1.TIF",

 "IMAGE10.TIF", or "INTRO.TIF".

 

Next you need to figure out exactly where the links go for each page of 
your DemoBuilder document.  This task will be easier if you print a hard 
copy of each page.  Draw rectangles on the printout of each page 
indicating the locations of the links on that page.  Then label the co-
ordinates of the lower left corner, the width, and the height of each 
rectangle.  (Most programs on the Macintosh that can generate TIFF also 
provide a way to figure out the co-ordinates in pixels of any point on the 
document.  Note that 0,0 on the Macintosh is in the upper left.  On the PenPoint 
Computer, 0,0 is in the lower left.)

 

Now create the configuration file.  It should be named "BUILDER.DAT".  
The example above will be helpful at this point.  You should save this file 
as a  text file.  The Macintosh program TeachText can only create text 
files.  Most other word processors have a Save As.... option that saves a 
file as text only.

 

The final step on the Macintosh is to transfer the files onto the 
DemoBuilder floppy.  Use Apple File Exchange for this task.  Once Apple 
File Exchange is running, insert the DemoBuilder floppy into the 
Macintosh drive.   Move to  
BUILDER\PENPOINT\APP\BUILDER\STATNRY on the DemoBuilder 
floppy.  Then create a new folder for your new document.  (Apple File 
Exchange will automatically move into this folder.)  Now copy the TIFF 
files into the folder.  Transfer "BUILDER.DAT" to the DemoBuilder floppy.

 

 Put the DemoBuilder floppy into the floppy disk drive of the PenPoint 
Computer to load your new document.  When the "Note From Installer" 
comes up, select "DemoBuilder", then tap on "Install and Close".  After 
the "Installer" dialog disappears, tap on the  Stationery Notebook icon on 
the PenPoint Computer.  To turn to your document,  tap on its page number in 
the stationery notebook.

 

 When you are ready to exit your document and turn back to the 
notebook, draw an "X" on the screen.  A note will appear to verify that you 
really want to exit the document.  Every time you turn to a DemoBuilder 
document, all of its windows are reinitialized.  Any drawings in signature 
windows or handwriting in fields will be erased.



 Format of the DemoBuilder configuration file

 

 Defining a window.

 

 At the top of the configuration file, define all the windows that you will 
use in the rest of the file.  Each different type of window has different 
parameters for its definition.  The format for a definition is:

 

 	define <name> <type> <parameters>

 

 Where <name> is the name used to refer to the window being created 
later in the configuration file.  <Type> is the kind of window being created.  
<Parameters> will be different for each type of window.  As you may have 
noticed in the configuration file example, the parameter for a tiff window 
is the name of the tiff file.  Thus, the string used to define a TIFF window 
in the configuration file is:

 	define <window name> tiff <file name>

 If you are using MacPaint files, use this string:

 	define <window name> macpaint <file name> <width> <height>

 The upper left rectangle of the given width and height from the MacPaint 
file will be displayed.

 

 Another useful type of window is the handwriting recognition field.  
DemoBuilder supports three styles:  linefield, combfield, boxfield.   These 
three styles are a subset of those supported by the PenPoint class Field.  
These fields take the following appearances:

 

abc____________________________________


                              line field

 

 |_a_|_b_|_c_|__|__|__||__|__|__||__|__|__||__|__|


                             combed



|----------------------------------------------------------------------|

| |_a_|_b_|_c_|__|__|__||__|__|__||__|__|__||__|__|  |

|----------------------------------------------------------------------|


                              boxed


To define a handwriting recognition field, use:

 	define <window name> linefield <rows> <columns>

 	define <window name> combfield <rows> <columns>

 	define <window name> boxfield <rows> <columns>

 Where <columns> is be the number of characters that can be written into 
the field and <rows> is usually 1.

 

 Another useful type of window is the Signature (or Scribble) window.  
This type of window uses the PenPoint class SPaper and is a transparent 
window with a gray border than can be overlaid on top of other windows.  
When you draw within the border, the window captures whatever you 
draw.  To define a signature window, use:

 	define <window name> sigwin <width> <height>

 

 Another type of window that can be defined is a button.  A button has a 
text string that will appear on the screen and a command that will be 
executed when the button is tapped.  (Commands are explained later in 
this section.).  To define a button use the following string:

 	define <window name> button "<label>" "<command>"

 Note that the label and command must be quoted.

 

 Another type of window that can be defined is a label.  Labels are used 
to display text that is not in a TIFF file.  The format of the label definition is:

 	define <window name> label <width> "<label text>

 Note that the label text must begin with a quote.

 

 Starting a new page.

 

 To create a page in the DemoBuilder document, insert a newpage in the 
configuration file:

 	newpage

 Windows and links that belong to the newly specified page are added on 
the subsequent lines.  A DemoBuilder document has one page for each 
newpage in the configuration file.

 

 Adding a window to a page.

 

 To include a window on a page, use the add command.  The format for 
an add is:

 	add <window name> <x> <y>

 Where <x> and <y> are the X and Y coordinates that indicate the 
position at which the window should appear.  A window can only be 
added once to any given page.  However, a window can be added to 
more than one page and at a different position on each page.  Windows 
are added to the page such that the first window added is placed on top 
of all the other windows on the page.

 

 Adding a link to a page.

 

 To add a link to a page, use the link command.  The format for a link is:

 	link <x> <y> <width> <height> <command>

 Where <x> and <y> are the X and Y coordinates for link, <width> and 
<height> are the width and height of the link, and <command> is the 
command that should be executed when the user taps in the rectangle 
indicated by the link.

 

 Command format.

 

 The format for a command is:

 	<win name> <parameters>

 Where <win name> is the name of the window to which the command 
should be directed, and <parameters> are the parameters that describe 
the command.  To have DemoBuilder handle the command, the <win 
name> to be used is either self or builder.  For example, to refresh all the 
windows in a DemoBuilder document, use the command:

 	builder clear

 To set up a goto link to page 3:

 	builder goto 3

 The goto command may be appended by another command.  To clear 
the document and do a goto:

 	builder goto 3 builder clear

 

 The supported commands are listed in the table below.

 	

 	Action	Command

 	clear/refresh a window	<win name> clear

 	clear/refresh all windows	builder clear

 	clear/refresh the current page	builder clear-current

 	clear/refresh a particular page	builder clear-page <page>

 	turn to the next page	builder next

 	turn to the previous page	builder prev

 	turn to a particular page	builder goto <page> <optional 
command>

 	exit the document	builder exit

 


DemoBuilder Tips

 

 Use multiple, small TIFF files per page

 

 To conserve memory, rather than using one TIFF file for each page, 
reuse smaller tiff files on each page.  For example, if each page of the 
document is to have a logo in the upper left corner, create a tiff file just big 
enough to fit the logo.  Then add that image to the upper left of each 
page.  The result is that the rest of the image on each page can be 
smaller.

 

 A side effect of this technique is that it is easy to make sure that graphical 
elements are aligned between pages of the document.  The tradeoff is 
that the configuration file becomes more complex when you use this 
technique.


