Tests/Paint

Notes below each section are just my observations and/or suggestions that I had as I was working with a particular function in Paint. Things marked with asterisks are where either A) I was not sure whether this was a bug or an intended feature, but the effect produced was unconventional or awkward regardless or B) Where it might not matter whether these conditions are actually met (such as default settings). All the justification is self for now because the entry on the Wiki for Paint seems pretty outdated...in fact, it's referencing a Draw program that bears very little resemblance to the Paint in terms of features.

Start the Paint activity

Justification: HIG for startup process, Self for remaining

Actions:

1. Open the taskbar by mousing into one of the corners of the screen.
2. Click on the Paint icon.

Verify:

• That a Paint icon is added to the activity donut.
• That the icon pulses to show that it is opening.
• That the Paint program opens properly and displays the main canvas and toolbars.
• That the starting color is set to black.***
• That the starting draw mode is set to Paint.***

Select a brush and draw something

Justification: Self

Actions:

1. Click on the large circular brush icon in the left margin.
2. Draw any shape you want on the screen.
3. Switch to some of the other brushes and draw with them as well.

Verify:

• That your shape appears on the screen properly.
• That the currently selected brush icon becomes highlighted with a white circle.
• That an outline of the shape of your brush appears under your cursor. ***

Notes: When using a circular brush, the outline of a square, rather than a circle, appears under the user's cursor. It's not clear whether this is intentional - normally, you'd expect a circular outline outline that matches the actual shape of the brush. This applies to all non-square brushes.

Change to one of the 20 preset colors

Justification: Self

Actions:

1. Click on one of the 20 preset color circles in the lefthand margin.
2. Draw any shape you want on the screen.

Verify:

• That the rounded rectangle above the 20 color circles changes to the color you just chose.
• That the shape you drew is in the color you just chose.

Use the color editor

Justification: Self

Actions:

1. Open the color editor by clicking the rounded rectangle above the color circles.
2. Click a point inside the color triangle to change the color. Try clicking a point on the surrounding color wheel as well.
3. Click the Hue field and adjust its value using the arrows, and then by typing in a new value in the Hue field.
4. Do the same for the Saturation field, the Value field, and the Red, Green and Blue fields.
5. Close the color editor by clicking the "OK" button.
6. Draw something on the canvas.

Verify:

• That the window opens properly.
• That the color values in the color triangle match the values of the currently selected color.
• That the color values in the rectangle at the lower left match the values of the currently selected color.
• That the color triangle can be clicked normally and alters the color accordingly.
• That the arrow buttons alter their respective values properly, and that typing in fields changes their respective values properly and changes the cursor appropriately.
• That the hue, saturation, value, and R/G/B values, when altered, will change the selected color appropriately.
• That the color of the shape you draw matches the color you selected with the color editor.

Notes: Minor point, but color is spelled "colour" in the color editor.

Change a color using the eyedropper tool

Justification: Self

Actions:

1. Open the color editor.
2. Click the eyedropper tool, below the color wheel and next to the two rectangles.
3. Click a color anywhere on your canvas that is different from the current color.
4. Close the color editor by clicking the "OK" button.
5. Draw something on the canvas.

Verify:

• That the eyedropper icon becomes highlighted with a white circle.
• That the normal cursor properly changes to the eyedropper cursor.
• That the color properly changes to the color that you just clicked.
• That the color of what you drew matches the color you selected with the eyedropper.

Give your color a name using the color editor

Justification: Self

Actions:

1. Open the color editor.
2. Click anywhere in the color triangle to choose a color.
3. Click in the "Color name" field and type any name you want.
4. Close the color editor and then open it again.

Verify:

• That the "Color name" field allows you to type in it, and that the cursor changes accordingly when you mouse over it.
• That the color name changes when you change your color.
• That the color editor remembers the name that you give it when you reopen it.

Notes: The purpose of the color name function is unclear. You aren't able to save colors, and the name always reverts to hexadecimal once you reopen the color editor, even though the tooltip seems to suggest that you can name your colors normal names, like "Orange." It seems like the only use of "color name" is to alter the color value via hexadecimal, but the tooltip (and function name) makes it seem as though it is descriptive.

Cancel a color change that was made in the color editor

Justification: Self.

Actions:

1. Open the color editor.
2. Change the color.
3. Close the color editor by clicking the "Cancel" button.

Verify:

• That the window closes properly.
• That the color reverts to what it was before it was edited.

Use Paste Text

Justification: Self

Actions:

1. Click on the Paste Text icon on the top bar.
2. Click on a different font. Use the scrollbar to scroll through fonts.
3. Click on a different style and font size.
4. Click in the bar labeled "Preview" and type whatever you want.
5. Click the Paste button.
6. Press Enter. ***

Verify:

• That the Paste Text window opens properly.
• That the Paste Text icon becomes highlighted grey when you mouse over it.
• That the Paste Text icon becomes highlighted white when you click it.
• That the default font is Sans, the default style is Regular, the default size is 16, and the default text is "Enter Text Here." ***
• That the fonts, sizes and styles are selectable and the scrollbars are working properly, and that they are highlighted when selected.
• That the preview adjusts itself according to your changes.
• That the pasted text appears on the screen with the same text, font, size and style as you selected, in the currently selected color, and with a blue selection box around it.
• That the pasted text stays on the screen when you move on to do something else.

Notes: Unless you press enter after pasting, the text will disappear as soon as you try to do anything else. Obviously, you can work around this by just pressing enter, but it's very unintuitive and should probably be changed. This applies to all Paste functions in Paint, not just text.

Use the Flood Fill function

Justification: Self

Actions:

1. Using a solid brush tool, draw an enclosed shape with no cracks (like a circle.)
2. Click the "Flood Fill" button on the upper toolbar.
3. Choose a color.
4. Click inside the enclosed shape you just drew.

Verify:

• That the "Flood Fill" button becomes highlighted grey when you mouse over it.
• That the "Flood Fill" button becomes highlighted white when you click on it.
• That the appropriate area of the canvas is filled with the correct color.
• That none of the bordering, different-colored shapes are affected or corrupted by the fill.

Work with selections and copy/paste and cut/paste

Justification: Self

Actions:

1. Click the "Make Selection" button on the upper toolbar.
2. Click anywhere in your canvas, then hold down your click and drag around your mouse to create a selection box.
3. Click inside your selection and use a click-drag to resize the selection box.
4. Click the "Copy" button on the upper toolbar.
5. Click the "Paste" button on the upper toolbar.
6. Click your pasted selection and drag it around.
7. Press Enter. ***
8. Using Make Selection, create another selection box.
9. Click the "Cut" button on the upper toolbar, then click "Paste."
10. Click your pasted section and drag it around.

Verify:

• That the "Make Selection" button becomes highlighted grey when you mouse over it.
• That the "Make Selection" button becomes highlighted white when you click it.
• That the cursor changes to a 2-way arrow while dealing with a red-bordered selection.
• That a red-bordered, dotted line box appears according to where you pointed and dragged.
• That the cursor changes to a crosshair while resizing a selection or dealing with a blue-bordered selection.
• That selection boxes are resized according to how you drag them.
• That the "Copy," "Cut" and "Paste" buttons become appropriately highlighted grey as you mouse over them and white as you click them.
• That the pasted selection appears properly with a blue selection box around it, and is movable.
• That the pasted section remains even after you begin to do something else.
• That the selection that was cut disappears. ***
• That the cut-pasted selection behaves properly as the copy-pasted selection did.

Notes: Only blue-bordered selections (pasted, rather than manually selected) seem to be able to be dragged. Red-bordered selections (which is what manual selections default to) are resized instead. It's not quite clear how to get a manual selection from red mode to blue mode aside from copy-pasting it, which seems like an unnecessary hassle and very unconventional. It might be better to use a more standard selection model where clicking inside the body of the selection moves it, and clicking the corners resizes it, rather than having two different selection "modes."

Also, blue selections CANNOT be deselected unless the user switches to a different mode (like Flood Fill or Paint). It would be much more convenient to let the user deselect his selection (or start a new one) simply by clicking outside the body of the selection.

In most drawing/painting programs, cutting a selection simply removes it - i.e., paints it white. In Paint, rather than making the selection white, it makes it whatever the currently selected color is. I don't know if this is intentional, but it seems odd.

(The save and open testing features may or may not be relevant. As I understand, we eventually want to use Journal for all that, but Journal's save/load features don't work for Paint yet - you can't resume a Paint activity from Journal.)

Save and naming your picture

Justification: Self Actions:

1. Click the "Save Image File As" button on the upper taskbar.
2. Choose the save destination by clicking in the Folders window.
3. Type a name for your image file.
4. Choose a file format from the menu.
5. Click the OK button.

Verify:

• That the "Save Image File As" button becomes highlighted grey when you mouse over it.
• That the "Save Image File As" button becomes highlighted white when you mouse over it.
• That you are able to type in the Name field and that the cursor changes itself accordingly.
• That folder and file names become highlighted properly when you select them.
• That the file format adjusts accordingly when you select it.
• That a circular spinning arrow appears by your cursor to indicate that you are saving.

Open your file

Justification: Self

Actions:

1. First, make some sort of marking in the canvas. Do not save.
2. Click the "Load Image File" button on the upper taskbar.
3. Click "Yes" on the warning window that comes up.
4. Navigate your way to the location in which you saved your file and click on it.
5. Click the "OK" button.

Verify:

• That the "Load Image File" button becomes highlighted grey when you mouse over it.
• That the "Load Image File" button becomes highlighted white when you click it.
• That the warning window and load window appear properly.
• That folder and file names become highlighted properly when you select them.
• That your file loads properly, as it was at the time of your last save.

Notes: A minor quibble, but the warning window that comes up when you attempt to load and haven't saved can be a bit deceptive. Most warning windows of the same type offer you the chance to save your data before you close the window, with choices of Yes/No. Here, it offers you the choice of whether to lose your data, with choices of Yes/No. At first, I clicked Yes instinctively, assuming I was going to get to save. Not that this will probably matter to a child where this is their first experience with a computer, but it just seems to make a bit more sense to do it the other way around.

Save your progress

Justification: Self

Actions:

1. First, make any sort of marking in the canvas.
2. Click the "Save Image File" button on the upper taskbar.
3. Close Paint and reopen it.
4. Click the "Load Image File" button and load your file.

Verify:

• That the "Save Image File" button becomes highlighted grey when you mouse over it.
• That the "Save Image File" button becomes highlighted white when you click it.
• That the additional markings you made are still there after you reload.

Notes: Frequently, when using subwindows in Paint (such as, but not limited to, the save/load screens), I was returned to the activity donut. A grey circle appears on the activity bar next to Paint. If I try to click on the Paint icon on the activity donut to return to Paint, I just get a grey screen. If I click the grey circle, I'm returned to Paint properly. It seems as though Paint has made a separate activity on the donut out of this subwindow, but it continues to want to use it to manage Paint, even after I close the subwindow.

Make a new image

Justification: Self

Actions:

1. First, make any sort of marking on the canvas.
2. Click the "New Image File" button in the upper taskbar.
3. Click "Yes" on the warning window that comes up.
4. Click the arrows next to the height and width fields to adjust the values up and down. Then, click inside the fields and adjust the values by typing.
5. Click the "OK" button.

Verify:

• That the "New Image" button becomes highlighted grey when you mouse over it.
• That the "New Image" button becomes highlighted white when you click it.
• That a warning window appears to warn you of lost progress.
• That the dimensions window appears properly.
• That the dimensions values adjust properly according to the arrows/what is typed in the fields, and that the cursor changes properly when editing the fields.
• That the new file is created, completely white, with the dimensions specified.

Notes: The "New Image" button is located in the far upper left corner of the screen - right where I'd go to open up the rolldown taskbar for Sugar. Frequently, when trying to press this button, I triggered the taskbar instead, because their locations overlap. It was kind of a pain.

Adjust the picture's color using Transform Color

Justification: Self

Actions:

1. Load your previous image.
2. Click on the "Transform Color" button in the upper taskbar.
3. Click on the circle for the Gamma slider and drag it around.
4. Do the same for Brightness, Contrast, Saturation, Hue, and Posterize.
5. Click the "OK" button.
6. Reopen the Transform Color window.
7. Make some changes, then click Cancel.

Verify:

• That the "Transform Color" button becomes highlighted grey when you mouse over it.
• That the "Transform Color" button becomes highlighted white when you click it.
• That Transform Color window opens properly.
• That the default values are set as such: Gamma = 100, Brightness = 0, Contrast = 0, Saturation = 0, Hue = 0, Posterize = 8. ***
• That the value for Gamma (or whatever else) adjusts accordingly as you move the slider.
• That the circle for each slider moves properly as you drag or click it.
• That the color in the image adjusts properly as you adjust the values on the slider.
• That the color changes are applied once you click the "OK" button.
• That the color reverts to normal if you click the Cancel button.

Notes: On some tests, Posterize appears to do nothing.

View a thumbnail of the image using Pan Window

Justification: Self

Actions:

1. Click on the "Pan Window" button in the upper taskbar.
2. Click the "Close" button.

Verify:

• That the "Pan Window" button becomes highlighted grey when you mouse over it.
• That the "Pan Window" button becomes highlighted white when you click it.
• That a thumbnail of your picture appears properly in the upper right hand corner of the screen.
• That the window closes properly when the "Close" button is clicked.

Final Notes; Paint still has not had a close button added anywhere in the taskbar. This means that, in newer builds of Sugar, the only way to close Paint is to use alt-C. This should be fixed.