Club Amiga de Montreal - CAM/CAM_CD_1.iso/files/514a.lha/PPB_2.05/Docs/PPB.Tutorial.pp/PPB.Tutorial

Text File | 1991-06-08 | 6KB | 187 lines

        CREATING A USABLE USER INTERFACE WITH PPB
                 By T.C.DeVeau


    PPB is unique among Paint programs in that it is possible to
generate source code listings directly from the program. The following
is a step by step tutorial in the use of PPB.

1: Parameters For Tutorial:

    From the CLI/Shell enter (without quotes):
        For Multiscan Monitors: "Run PPB -d42"
        For Normal Monitors...: "Run PPB -d32"

    From the WorkBench DoubleClick the PPB icon and select:
        For Multiscan: HIRES+INTERLACE 2
        For Normal...: HIRES 2


2: Getting To Know PPB:

    PPB consists of two(2) screens where something happens. The Main
    screen (the big blank one) is where the drawing takes place. The
    Tools screen (the small full one) is the heart of PPB.

    Drawing is fairly simple. To start drawing, press the left mouse
    button. To stop drawing, release the left mouse button.


3: Format:

    The format of this tutorial is a step by step method. All steps
    are numbered.

4: Getting Started with Interface Creation with PPB:

    Select the BOX gadget on the Tools screen, notice that the mouse
    pointer changes to a box. This Pointer change is a reminder of
    which tool is active when the Tools screen is hidden.

    When creating gadgets, their position is relative to the upper-
    left corner of the Main screen.


4.1: Creating a Single Image Gadget:

    1. Select the TEXT gadget and click on the Main screen.

    2. Type 'Gadget', then hit RETURN.

    3. Draw a box somewhere in the middle of the Main screen.

    4. Pick up the text as a brush and put it into the box.

    5. Pick up the box as a brush and select the GADGET gadget.

    6. Enter a filename in the appropriate space in the File
       Requester and hit RETURN.

    Now you are presented with the 'Define Gadget' window.

    7. Select the GADGET_ID string gadget and and enter 'GADGET' without
       the quotes.

    8. Select the ID_VALUE string gadget and enter '100'.

    9. Select the 'Define' gadget and the gadget is witten to the disk.

4.2: Creating a Double Image Gadget:

    1. Select the CLEAR gadget.

    2. This gadget will be an AmigaDOS 2.x type 3-D gadget.

    3. Select Palette. Set the palette to 0->AAA, 1->000, 2->FFF, 3->679.
       Select OKAY.

    4. Turn on the GRID tool.

    5. Draw a box anywhere on the screen in black.

    6. Select the LINE tool.

    7. Click the mouse Menu button (right button) and select white.

    Note: From this point forward, I will use the phrase
          "Select color n".

    8. Draw a line from the bottom-left to the top-left and top-left to
       the top-right. Presto! It looks like it's in the 'up' position.

    9. Pick the box up as a brush, and put a copy of it below it. Make
       sure that they don't overlap.

    10. Select the PAINT tool and the crosshair. Select color blue.

    11. Paint the black line blue. Select color black. Paint the while
        line black. Select color white. Paint the blue line white.

    12. Turn the crosshair off.

    Now you have a template for a bi-Image gadget.

    13. To write the source for this gadget, pick up the lower image as a
        BRUSH. Select the GADGET tool. Define a filename and hit return.

    14. Select the Flag gadgets and define the Gadget_ID and ID_Value.
        Select the ALT gadget and hit DEFINE.

    15. Now, pick up the upper image as a BRUSH and select the GADGET
        tool. Note that the file requter is bypassed.

    16. Select the the ALT gadget again , then define.

    Now you have a bi-Image gadget.

4.3: Editing with the ZOOM function:

    Sometimes it is neccessary to do finer editing to an image. Centering
    text in a box is one example. As with the Single Image gadget example
    above, if you don't think you have an even number of pixels on each
    side of the text, you can check with the ZOOM function.

    Repeat the Single Image Gadget example.

    Select the ZOOM tool gadget and position the pointer near the
    top-left of the image and click the left mouse button.

    Now it's possible to count the pixels on each side of the image
    and modify it if neccessary. Click the closewindow gadget when done.

4.4: Creating a Window/Screen:

    1. Select the WINDOW tool. Note that the BOX tool is selected.

    2. Draw a box around the area that you want a window to be.

    3. Select the filename that you want to write it under.

    4. Select the desired Window and IDCMP flags.

    5. Select CUSTOMSCREEN or WBENCHSCREEN.

    6. Define a title for the window.

    7. Select DEFINE.

    If CUSTOMSCREEN was selected, a NewScreen structure is written
    to conform to the parameters of the current screen.

5.0: Creating An Interface In C:

    1. Create the desired imagery for each of the gadgets.

    2. Define each gadget as described above.

    3. Define a window.

6.0: Creating An Interface In Assembler:

    1. Create the desired imagery for each of the gadgets.

    2. Define a window. The string gadget for 'FirstGadget' is for the
       first gadget in the list of gadgets to be defined. This
       corresponds to the Gadget_ID in the 'Define Gadget' window.

    3. Define each gadget as described above. The string gadget 'Next
       Gadget' is for the Gadget_ID and ID_Value of the next gadget
       in the list of gadgets.


7.0: Last Word:

    Hopefully this tutorial will help you to design useful interfaces
    for your programs. Future releases will address the interface design
    and source code generation aspects of PPB to make it easier and more
    useful to the Amiga programming community.

    This of course depends on you. Your support for this project WILL
    bear results for makeing the BEST graphics computer on the market
    today easier for users of all experience to use.

End of file.