(Best viewed in 1024x768 display mode)

SiMPAINT

(Version: 12.11.01)

(SiMPAINT works only on Windows computers.)

The SiMPAINT program is included as part of the SiMPLE package. The source listing
for SiMPAINT can be found inside the "Tools" folder [located inside your "Simple
Projects" folder]. Or click here to download the latest version of the program.


You are probably familiar with the PAINT program that can be found in the Windows "Accessories" folder. That program lets you draw circles, lines, rectangles, etc. just by pointing and clicking with your mouse. But when you are finished, the final product is merely an image. . . a dead static  image. About the only thing you can do with such an image is just look  at it.

SiMPAINT is a program similar to the Windows PAINT program. However, instead of producing just images, SiMPAINT remembers all your drawing commands and uses them to generate the corresponding SiMPLE source listings  for your images. (I.e., SiMPAINT is a program that writes another  program for you! ) You can then incorporate those source listings into your own  programs.

SiMPAINT consists of three different screens:

We will now discuss each of these screens separately. (In these discussions, it is assumed that you are already familiar with Win-SiMPLE's graphics functions: "Linecolor", Solidcolor", etc.)


The Menu Screen

When SiMPAINT starts, you are presented with the menu screen (shown in the gray frame in the image below):

Select a shape:
The center-most portion of the menu consists of three rows of selectors. The top row of the set selects from the "line" shapes (Rectangle, Roundrectangle, Circle, Ellipse, and Triangle*). The middle row selects from the "Solid" shapes (Solidrectangle, Solidroundrectangle, Solidcircle, etc.). The bottom row selects from the "Filled" shapes (Filledrectangle, Filledroundrectangle, etc.). (The selector for the currently active shape will be illuminated.)

*(To draw any triangle shape, first hold down the mouse button and draw the
line for one of the sides. Then release the button, move the mouse to the desired
location for the vertex, and press the button again to complete the triangle.)

Select Linecolor, Solidcolor, Pointcolor:
Clicking any of these three selectors (located on the far-left side of the menu) will display the Color Palette screen. (The Color Palette screen will be discussed shortly.)
Select Linesize (n):
Clicking any of these three selectors (located on the far-right side of the menu) will set the thickness of all  lines that are to be drawn. (The selector for the currently active Linesize will be illuminated.)
Toggle "line-drawing" mode On/Off:
Clicking this selector (located in the bottom-right corner of the menu) will toggle between "line-drawing" mode and "point-plotting" mode. (When "line-drawing" mode is set, the selector will be illuminated.)
Select Floodfill:
Clicking this selector (located near the bottom-right corner of the menu) will set "floodfill" mode. This mode will allow you to fill any area of the canvas with the current Solidcolor.
Toggle zoom On/Off:
Clicking this selector (located near the bottom-left corner of the menu) will toggle between "zooming" or "jumping" to a magnified view of the canvas when a magnified view is requested. (When zoom mode is enabled, this selector will be illuminated.)

[Note: Some computers may require "zooming" to be OFF at all
                        times. Otherwise, the magnified view might come up very slowly.]                      
(Picked color):
When you exit the Canvas screen and return to the menu screen, whatever color was directly under the cursor is sampled and stored here. You can then drag this color to any of the three color selectors.
Barometer:
The barometer (located at the bottom-center of the menu) indicates how many drawing commands have been issued. (You have a maximum of almost 250 available.)
Click to exit:
Clicking the "QUIT" selector (located in the top-right corner of the menu) will terminate execution, and the source listing for your image will be generated.

Pressing the "Enter" key (or clicking the right mouse button) will take you to the Canvas screen.

Pressing the "Esc" key at any time (except when selecting a color) will always take you back to the menu screen.

Pressing "Ctrl-Q" from the menu screen is an abort exit. It will terminate execution without generating any output.


The Color Palette Screen

The Color Palette screen is used for selecting the colors to be used for drawing lines, shapes, and points.

Whenever the color palette appears, left-click to select the desired color from anywhere on the screen. Or right-click the color, and then left-click a shade of gray from one of the vertical gray scale bars to set the brightness of that color. (If the shade of gray is chosen from the gray scale bar on the left, the selected color will be made darker. If the shade of gray is chosen from the gray scale bar on the right, the selected color will be made lighter.)


The Canvas Screen

The Canvas screen is the one on which you "draw" your image.

Left-click to draw (using the current shape, colors, etc. as were selected on the menu screen). Right-click to magnify the portion of the screen at the current cursor location. Right-click again to un-magnify the screen.

When working on the Canvas screen, a number of single-key keyboard commands are available:

Single-Key Commands

  • Delete: Undo the previous action.
  • Insert: Re-do the previously undone action.
  • G:         Toggle between displaying one of two different
                  reference grids, or no grid at all.*
  • V:         Toggle between displaying either a black back-
                  ground (default), or a blue-green background.
                  (This feature is primarily intended to let
                  Vista users see their mouse cursor.)
  • A:         View the image as it would actually appear if the
                  generated source listing was used to display it.
                  (Press the "A" key again to continue working.)
  • Esc:       Return to the menu screen.
  • (Arrow keys): When viewing a magnified image of the Canvas
                            screen, pressing an arrow key will scroll the
                            screen in the specified direction.

*[Note: Some computers may require a grid to be displayed at all times.
                        Otherwise, the drawing of shapes, etc. might occur very slowly.]                        

In addition to the single-key commands, there are a number of double-key commands available. (These commands provide a convenient way of changing shapes, colors, etc. without having to go back to the menu screen.)

Double-Key Commands

  ( Line ) Solid Filled
Rectangle LR SR FR
Roundrectangle LO SO FO
Circle LC SC FC
Ellipse LE SE FE
Triangle LT ST FT

  • L1: Select "Linesize (1)"
  • L2: Select "Linesize (2)"
  • L3: Select "Linesize (3)"


  • PK: Select "Pointcolor"
  • LK: Select "Linecolor"
  • SK: Select "Solidcolor"


  • PM: Select "point-plotting" mode
  • LM: Select "line-drawing" mode


  • FF: Select "Floodfill"

Note: All the keys in the above tables are indicated by their "labels" as they appear on
the keyboard. None of the actual commands are upper-case; they are all lower-case.


How To Use SiMPAINT

If you're a beginner, the easiest way of starting SiMPAINT is to merely double-click the "SiMPAINT.exe" icon. Then, when you are finished creating your image, just click the "QUIT" selector. The source listing for your image will then be contained in a file named "IMAGE.TXT" in your project folder. When you run the listing, it will simply display your image.

If you later decide that you would like to go back and continue working on your image, just drag and drop the "IMAGE.TXT" file onto the "SiMPAINT" icon. Everything will be restored to the state that existed just prior to your clicking the "QUIT" selector.


How To Use SiMPAINT (For Advanced Users)

The "IMAGE.TXT" file consists of a 3-statement main program, followed by the task listing ("image") which contains all of the drawing commands that were used to create your image.

The "image" task has four calling parameters: "x", "y", "mag", and "flag".

In addition, the "image" task allows you to program in an optional "Brightness Factor". This factor, named "bf" (at the beginning of the task's listing), provides a handy way of letting you scale the brightness of the image as a whole. For example, to help create an illusion of "distance", you might want the overall brightness of the image to be a function of its magnification (as was done in the "Timewarp" example program, located inside the "Samples" folder that came with your download of SiMPLE).

Since the main program portion of the "IMAGE.TXT" file consists of little more than a single call to the "IMAGE.TXT" task, it can't do much of anything except display a single static image. (You could have just as well used the Windows PAINT program if that's all you wanted to do. )

The real power of SiMPAINT lies in its ability to let you create longer  programs incorporating multiple  images from an Append Library of your favorite images.


Creating and Using a SiMPAINT Image Library

Let's look at an example of how we might start a library of images in a Project folder. (We will assume that the Project folder already contains the standard Local Library folder and a copy of the "SiMPAINT.exe" file.)

Suppose you wanted to create a new image named "teddy" and place it in the library. To do so, first create a new (empty) text document and change its name to "teddy.txt".

Note:

If your copy of Windows does not "hide extensions for known file types", don't forget to keep the file's ".txt" extension when renaming the file. In other words, if the new text document that you created is named "New Text Document.txt", you will want to change its name to "teddy.txt" (as shown in the above image). On the other hand, if your new text document is simply named "New Text Document" (without a ".txt" extension), you will want to change its name to simply "teddy" (without a ".txt" extension).

You could also have named the file either "teddy.src" or simply "teddy". Any of those file names would work. Or you are free to choose some other  name. [The first character in the name must be a letter.]

Next, drag and drop that empty text document onto the "SiMPAINT.exe" file. (When the message: "Are you sure you want to modify the input file?" appears, click the "Yes" button.) Then, when SiMPAINT starts, create your image.

[Suggestion: When creating an image (especially if that image is intended for a library), it is generally a good idea to draw it as small as possible and at the very center of the Canvas screen (as shown in the above example). Then later on, if your program needs the image to be larger, you can easily magnify it to any desired size by simply setting the "mag" parameter to a number greater than one.]

When you are finished creating your image, just exit the SiMPAINT program and move the "teddy" document (which is now no longer empty) into the "Library" folder . . . and you're done!

If you later decide that you would like to go back and continue working on your image, just drag and drop the "teddy" document back onto the "SiMPAINT.exe" file. Everything will be restored to the state that existed just prior to your clicking the "QUIT" selector.

Now that you have your "teddy" image in your library, let's write a very short program that merely retrieves that image and displays a magnified view of it:

Source Listing

(Notice that the name of the "image" task is now "teddy". Also notice that the name "teddy" appears not only in the calling statement, but in the "Append" statement as well.)


As an example of how you might animate your "teddy" image, you might enjoy running the following short program:

Source Listing

(Hey . . . How come all the lines are so smooth? Where did all the "jaggies" go!?)




  [ Contact Us | Homepage | Online Forums | About the Author ]

Copyright 2008-2014 SiMPLE CodeWorks, Inc. All rights reserved.