Screens and UI - Software-Engineering-Spring-2020/PollyPaint GitHub Wiki

It is strongly recommended to read the Glossary or have it handy before reading this document.

This is the primary page of the Polly Paint application, and it appears when you first open the application.

On top is the operating system's application bar. This allow users to minimize, maximize/restore down, or close out the application.

Technical note: The setTitle() function can be used to name the application window in Processing. Learn more

Beneath this is a row of buttons. This is Polly Paint's workspace menu. The workspace menu contains eight buttons. Clicking on the buttons with the left mouse button causes the below actions to occur:

On the left side (organized from left to right):

1. "COPY". This copies an object to the clipboard to be paster later. Copying one object and then copying another object will only preserve the most recently copied object; i.e. copying overwrites the currently copied object.
2. "PASTE". This creates a copy of the object(s) in the clipboard, pasting the copies onto the drawing canvas.
3. "SAVE". This opens a file dialogue that gives users the opportunity to save a Polly Paint file to their computer that contains information representing the current drawing canvas.
4. "OPEN". This opens the file dialogue to allow users to select and open a Polly Paint file to the current workspace.
5. "EXPORT". This exports PNG files containing the objects in the draw space to allow users to share or print their artwork. To print a PollyPaint drawing, click "EXPORT", choose a name for your file and location to save your file. Then, go to the file you just saved on your computer. Click on the file to open it; your file will open as a PNG with whatever program your computer uses to open PNGS, such as Photos. Use the program your computer uses to open PNGS to print your image.
6. "IMPORT". This opens the file dialogue to allow users to select and import a PNG, JPG, SVG, or GIF file to the current draw space as an object.
7. "TOGGLEGRID": This toggles whether the grid is visible.
8. "TOGGLECOMMENTS". This toggles whether comments are visible.

Beneath this and to the left is Polly Paint's object creation menu organized in a vertical column. Clicking on the these buttons with the left mouse button causes certain actions to occur. These buttons and their corresponding actions are below (organized from top to bottom).

1. "SELEC". After clicking this, the user can select objects by clicking them. The user can select multiple objects. The user can click an already-selected object to deselect it or select the canvas to deselect all selected objects.
2. "ELIP". After clicking this, the user can click on the draw space to create an ellipse. They can then move their mouse to adjust the size and aspect ratio of the ellipse and click again to finalize the shape. It can be edited later by selecting the shape and adjusting the object settings, discussed later.
3. "PEN". After clicking this, the user can click and drag on the draw space to create a free-form illustration or change the color of a single pixel.
4. "LINE". After clicking this, the user clicks once on the draw space to start creating the line and again on the draw space in a different location to create a line object between these points.
5. "CURVE" After clicking this, the user can click four times. The first click specifies the start point, the next two clicks specify how the curves bend, and the last click specifies the end point and finalizes the curve, which can be modified later.
6. "POLY". After clicking this, the user can click a certain number of times to create a polygon with that number of points. The number of points is determined by the "POLY" slider (discussed more in-depth in the section on the object settings menu, described below).
7. "TEXT". Before clicking this button, the user types their desired text into the text box and presses enter. Then, the user clicks this button. Then, the user can click on the screen where you want your text to appear.
8. "COMMENT". Before clicking this button, the user types their desired text into the text box and presses enter. Then, the user clicks this button. Then, the user can click on the screen where you want your text to appear. If the comment does not immediately appear, press "TOGGLECOMMENTS".

To the right of the object creation menu is a grey space that contains the lighter draw space. The draw space is a white rectangle. Users place and modify objects on the draw space to create pictures. They can use the mouse wheel (or arrow keys if no objects are selected) to zoom in and out of the draw space and hold down the mouse wheel button or hold down right click or left click and drag to pan the draw space and change what is visible.

To the right of the draw space is the object settings menu, which contains an assortment of sliders, buttons useful for changing the settings of created or existing objects

1. "RF" slider. Click on this slider and move the mouse along the slider to adjust the amount of red in the current color.

2. "BF" slider. Click on this slider and move the mouse along the slider to adjust the amount of blue in the current color.

3. "GF" slider. Click on this slider and move the mouse along the slider to adjust the amount of green in the current color.

4. "TOGGLEFILLCOLOR". Click this to toggle between whether adjusting the above sliders modifies the selected object's fill color or its border color.

5. "input text here then click <ENTER>". The user types their desired text into the text box and presses enter. Then, the user clicks the "TEXT" button. Then, the user can click on the screen where you want your text to appear.

6. "GROUP". This button groups objects so that selecting any object in the group selects all objects in that group.

7. "UNGROUP". If the selected objects are in a group, pressing this button ungroups them.

8. "SIZE". Click on this slider and move the mouse along the slider to adjust the current scale of the selected object(s).

9. "ROTATE". Click on this slider and move the mouse along the slider to adjust the current rotation of the selected object(s).

10. "POLY". Click on this slider and move the mouse along the slider to adjust the number of points the next polygon created with the "POLY" button will have.

11. "TRASH". Click on this button to destroy the selected object(s) and remove them from the draw space.