Tests/Paint: Difference between revisions

From OLPC
Jump to navigation Jump to search
No edit summary
Line 12: Line 12:
* That the icon pulses to show that it is opening.
* 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 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==
==Select a brush and draw something==
Line 20: Line 18:
Actions:
Actions:
# Click on the large circular brush icon in the left margin.
# Click on the large circular brush icon in the left margin.
# Draw any shape you want on the screen.
# Draw any shape you want on the screen in the upper-left corner of the screen.
# Switch to some of the other brushes and draw with them as well.
# Switch to some of the other brushes and draw with them in the same area.
Verify:
Verify:
* That your shape appears on the screen properly.
* That your shape appears on the screen properly.
Line 34: Line 32:
Actions:
Actions:
# Click on one of the 20 preset color circles in the lefthand margin.
# Click on one of the 20 preset color circles in the lefthand margin.
# Draw any shape you want on the screen.
# Draw any shape you want in the upper right-hand corner of the screen.
Verify:
Verify:
* That the rounded rectangle above the 20 color circles changes to the color you just chose.
* That the rounded rectangle above the 20 color circles changes to the color you just chose.
Line 45: Line 43:
# Open the color editor by clicking the rounded rectangle above the color circles.
# Open the color editor by clicking the rounded rectangle above the color circles.
# Click a point inside the color triangle to change the color. Try clicking a point on the surrounding color wheel as well.
# Click a point inside the color triangle to change the color. Try clicking a point on the surrounding color wheel as well.
# Click the Hue field and adjust its value using the arrows, and then by typing in a new value in the Hue field.
# Do the same for the Saturation field, the Value field, and the Red, Green and Blue fields.
# Close the color editor by clicking the "OK" button.
# Close the color editor by clicking the "OK" button.
# Draw something on the canvas.
# Draw something on the canvas in the lower left corner of the screen.
Verify:
Verify:
* That the window opens properly.
* That the window opens properly.
Line 54: Line 50:
* That the color values in the rectangle at the lower left 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 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.
* That the color of the shape you draw matches the color you selected with the color editor.


Line 66: Line 60:
# Open the color editor.
# Open the color editor.
# Click the eyedropper tool, below the color wheel and next to the two rectangles.
# Click the eyedropper tool, below the color wheel and next to the two rectangles.
# Click the shape you drew in the upper right corner.
# Click a color anywhere on your canvas that is different from the current color.
# Close the color editor by clicking the "OK" button.
# Close the color editor by clicking the "OK" button.
# Draw something on the canvas.
# Draw something on the canvas.
Line 74: Line 68:
* That the color properly changes to the color that you just clicked.
* 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.
* 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:
# Open the color editor.
# Click anywhere in the color triangle to choose a color.
# Click in the "Color name" field and type any name you want.
# 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:
# Open the color editor.
# Change the color.
# 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==
==Use Paste Text==
Line 107: Line 75:
# Click on the Paste Text icon on the top bar.
# Click on the Paste Text icon on the top bar.
# Click on a different font. Use the scrollbar to scroll through fonts.
# Click on a different font. Use the scrollbar to scroll through fonts.
# Click on a different style and font size.
# Click on a different style and increase the font size.
# Click in the bar labeled "Preview" and type whatever you want.
# Click in the bar labeled "Preview" and type whatever you want.
# Click the Paste button.
# Click the Paste button.
Line 115: Line 83:
* That the Paste Text icon becomes highlighted grey when you mouse over it.
* 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 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 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 preview adjusts itself according to your changes.
Line 127: Line 94:


Actions:
Actions:
# Using a solid brush tool, draw an enclosed shape with no cracks (like a circle.)
# Click the "Flood Fill" button on the upper toolbar.
# Click the "Flood Fill" button on the upper toolbar.
# Choose a color.
# Choose a color.
# Click inside the enclosed shape you just drew.
# Click inside an enclosed area that was created by your text (inside an O, for example).
Verify:
Verify:
* That the "Flood Fill" button becomes highlighted grey when you mouse over it.
* That the "Flood Fill" button becomes highlighted grey when you mouse over it.
Line 137: Line 103:
* That none of the bordering, different-colored shapes are affected or corrupted by the fill.
* That none of the bordering, different-colored shapes are affected or corrupted by the fill.


==Copy/paste the text you just made==
==Work with selections and copy/paste and cut/paste==
Justification: Self
Justification: Self


Actions:
Actions:
# Click the "Make Selection" button on the upper toolbar.
# Click the "Make Selection" button on the upper toolbar.
# Click anywhere in your canvas, then hold down your click and drag around your mouse to create a selection box.
# Click and drag around the text you made.
# Click inside your selection and use a click-drag to resize the selection box.
# Click the "Copy" button on the upper toolbar.
# Click the "Copy" button on the upper toolbar.
# Click the "Paste" button on the upper toolbar.
# Click the "Paste" button on the upper toolbar.
# Click your pasted selection and drag it around.
# Click your pasted selection and drag it directly above the original selection.
# Press Enter. ***
# Press Enter. ***

# Using Make Selection, create another selection box.
# Click the "Cut" button on the upper toolbar, then click "Paste."
# Click your pasted section and drag it around.
Verify:
Verify:
* That the "Make Selection" button becomes highlighted grey when you mouse over it.
* That the "Make Selection" button becomes highlighted grey when you mouse over it and white when you click 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 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 a red-bordered, dotted line box appears according to where you pointed and dragged.
Line 160: Line 122:
* That the "Copy," "Cut" and "Paste" buttons become appropriately highlighted grey as you mouse over them and white as you click 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 selection appears properly with a blue selection box around it, and is movable.
* That the pasted selection sticks when you press Enter.

==Cut/paste something you drew==

Justification: Self

Actions:
# Deselect the previous selection
# Using Make Selection, create another selection box around what you drew in the upper left corner.
# Click the "Cut" button on the upper toolbar, then click "Paste."
# Click your pasted section and drag it to the bottom center of the screen.

Justification:
* That the pasted section remains even after you begin to do something else.
* That the pasted section remains even after you begin to do something else.
* That the selection that was cut disappears. ***
* That the selection that was cut disappears. ***
Line 176: Line 151:
Actions:
Actions:
# Click on the "Transform Color" button in the upper taskbar.
# Click on the "Transform Color" button in the upper taskbar.
# Click on the circle for the Gamma slider and drag it around.
# Adjust one of the values (Hue is the most obvious) by dragging its slider around.
# Do the same for Brightness, Contrast, Saturation, Hue, and Posterize.
# Click the "OK" button.
# Click the "OK" button.
# Reopen the Transform Color window.
# Reopen the Transform Color window.
# Make some changes, then click Cancel.
# Make some changes, then click Cancel.
Verify:
Verify:
* That the "Transform Color" button becomes highlighted grey when you mouse over it.
* That the "Transform Color" button becomes highlighted grey when you mouse over it and white when you click on it.
* That the value for the slider you chose adjusts as you move the slider, as does the color in the image and the graphic of the slider itself.
* 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 changes are applied once you click the "OK" button.
* That the color reverts to normal if you click the Cancel button.
* That the color reverts to normal if you click the Cancel button.


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



==View a thumbnail of the image using Pan Window==
==View a thumbnail of the image using Pan Window==
Line 200: Line 170:
# Click on the "Pan Window" button in the upper taskbar.
# Click on the "Pan Window" button in the upper taskbar.
# Click the "Close" button.
# Click the "Close" button.

Verify:
Verify:
* That the "Pan Window" button becomes highlighted grey when you mouse over it.
* That the "Pan Window" button becomes highlighted grey when you mouse over it.
Line 207: Line 178:




==Collboration==
(The save and open testing features may or may not be relevant. As I understand, we eventually want
Placeholder. Not yet functional.
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:
# Click the "Save Image File As" button on the upper taskbar.
# Choose the save destination by clicking in the Folders window.
# Type a name for your image file.
# Choose a file format from the menu.
# 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:
# First, make some sort of marking in the canvas. Do not save.
# Click the "Load Image File" button on the upper taskbar.
# Click "Yes" on the warning window that comes up.
# Navigate your way to the location in which you saved your file and click on it.
# 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:
# First, make any sort of marking in the canvas.
# Click the "Save Image File" button on the upper taskbar.
# Close Paint and reopen it.
# 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:
# First, make any sort of marking on the canvas.
# Click the "New Image File" button in the upper taskbar.
# Click "Yes" on the warning window that comes up.
# 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.
# 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.




The closing and reopening section is a bit of a placeholder as most of these features aren't working just yet.
==Resume your activity using Journal==
==Resume your activity using Journal==
Justification: [[HIG]], self
Justification: [[HIG]], self
Line 294: Line 195:
* That clicking "Resume" opens the Paint activity and properly loads your work.
* That clicking "Resume" opens the Paint activity and properly loads your work.


Placeholder. Not yet functional.


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.
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.


==Undo and Redo==
Justification: Self

Actions
# Click the Undo button until you have undone every action you performed.
# Click the Redo button until all your actions have been restored.

Verify:
* That every individual operation is undone properly, and that you are left with a white screen once you are done undoing.
* That every individual operation is redone properly, and your picture is restored to exactly what it was like after you used Transform Color.

Revision as of 19:52, 25 June 2007

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.

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 in the upper-left corner of the screen.
  3. Switch to some of the other brushes and draw with them in the same area.

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 in the upper right-hand corner of 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. Close the color editor by clicking the "OK" button.
  4. Draw something on the canvas in the lower left corner of the screen.

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 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 the shape you drew in the upper right corner.
  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.

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 increase the 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 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. Click the "Flood Fill" button on the upper toolbar.
  2. Choose a color.
  3. Click inside an enclosed area that was created by your text (inside an O, for example).

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.

Copy/paste the text you just made

Justification: Self

Actions:

  1. Click the "Make Selection" button on the upper toolbar.
  2. Click and drag around the text you made.
  3. Click the "Copy" button on the upper toolbar.
  4. Click the "Paste" button on the upper toolbar.
  5. Click your pasted selection and drag it directly above the original selection.
  6. Press Enter. ***

Verify:

  • That the "Make Selection" button becomes highlighted grey when you mouse over it and 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 selection sticks when you press Enter.

Cut/paste something you drew

Justification: Self

Actions:

  1. Deselect the previous selection
  2. Using Make Selection, create another selection box around what you drew in the upper left corner.
  3. Click the "Cut" button on the upper toolbar, then click "Paste."
  4. Click your pasted section and drag it to the bottom center of the screen.

Justification:

  • 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.


Adjust the picture's color using Transform Color

Justification: Self

Actions:

  1. Click on the "Transform Color" button in the upper taskbar.
  2. Adjust one of the values (Hue is the most obvious) by dragging its slider around.
  3. Click the "OK" button.
  4. Reopen the Transform Color window.
  5. Make some changes, then click Cancel.

Verify:

  • That the "Transform Color" button becomes highlighted grey when you mouse over it and white when you click on it.
  • That the value for the slider you chose adjusts as you move the slider, as does the color in the image and the graphic of the slider itself.
  • 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.


Collboration

Placeholder. Not yet functional.


Resume your activity using Journal

Justification: HIG, self

Actions:

  1. Close out of the Paint activity by clicking the X button in the upper right, or by pressing alt-C.
  2. Open Journal.
  3. Find the entry for your Paint activity session. Click on it.
  4. Click the Resume button.

Verify:

  • That Paint closes properly and its icon is removed from the activity donut.
  • That an entry exists in Journal for your activity sessions, and properly displays a preview of your work.
  • That clicking "Resume" opens the Paint activity and properly loads your work.

Placeholder. Not yet functional.

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.


Undo and Redo

Justification: Self

Actions

  1. Click the Undo button until you have undone every action you performed.
  2. Click the Redo button until all your actions have been restored.

Verify:

  • That every individual operation is undone properly, and that you are left with a white screen once you are done undoing.
  • That every individual operation is redone properly, and your picture is restored to exactly what it was like after you used Transform Color.
Retrieved from "http://wiki.laptop.org/mediawiki/index.php?title=Tests/Paint&oldid=45965"