VLE ~ QuickDraw 3.0

Added by Matt Fishbach, last edited by Sam Fentress on May 29, 2008  (view change) show comment

Design Spec for QuickDraw 3.0

Bleeding-edge versions:

APRIL 2008 UPDATE

APRIL FIXES NEEDED FOR DRAWING TOOL

1. [Tels] Step Type shown should be called "QuickDraw"

2. Need a simple "Select Background" button at bottom of screen.  Calls up a file-selection window so user can select a graphic on their local computer.   Typing in a URL is confusing.  Note that the system should then incorporate this background graphic into the OTML data file.

3. Adding Stamp Art:  when call up the Add Stamp window, the ADD button should be active at all times.   It should NOT activate dependent on typing into the blank box  (few users will realize they're supposed to do this). 

4. Clicking the ADD button calls up a file-selection window so user can select a graphic on their local computer.  Author should be able to add up to 10 stamps.  The menu shows the filenames of all graphics imported.  (The user can customize their filenames before importing them if desired).  Note that the system should automatically incorporate these stamp graphics into the OTML data file.

5. Need at least two different font sizes for now, small and medium.   Let's just have two separate text icons along the right edge, one mapped to 10px and the other mapped to 16px.

  • We have two icons now that create different sized text. As this feature is not wanted for all projects, this is a setting in the OTDrawingTool object: largeTextButtonVisible. By default this is false (though it is true in the demo versions linked above). --Sam

6. Line Widths Not Saved:  if you draw some wider lines, save the step, navigate to another step, and return, the width of all lines returns to the minimum width.  The drawing tools needs to save/remember the width of lines.

MAY-JUNE FIXES NEEDED FOR DRAWING TOOL

1.    Undo:  expand to allow either 10 or 20 levels of Undo.  This will make this tool much more useful for students.

2.  Selecting an Object:  currently the selection corners are a dull-gray.  Hard to distinguish from the default black drawing color. Please change the corners to a shade of blue to make them more visible.

3.  New Tool Icons.  Please implement NEW Tool Icon artwork.  The Tool Icons include both an inactive and active (yellow) state.  The tool icons are:

  • Selection Arrow
  • Pencil Tool  (click-hold to see submenu of options)
  • Line Tool  (click-hold to see submenu of options)
  • Rectangle Tool  (click-hold to see submenu of options)
  • Circle Tool  (click-hold to see submenu of options)
  • Text Tool  (click-hold to see submenu of options)
  • Stamp Tool  (click-hold to see submenu of options)

4.   Please implement NEW Action Icons. 

  • Color Wheel
  • Delete/Trash
  • Undo
  • Save  [Sam will talk to Aaron about this one]
  • Help

5.  [TELS] VLE: Directions Screen:  Implement "Directions" pop-up screen for first time use of step by students.  See design document.  This is a critical tool for informing the student of their goal in making the drawing.

6.   [TELS] Authoring: Directions Screen:  The authoring tool needs an "Directions for Student" button which calls up an editable HTML window of the text that will be presented to students in the VLE.   The user can enter an unlimited amount of HTML-formatted text into a data entry box.   Author can also unclick a checkbox that says "Show Directions Panel on first-time use of this step."  (this checkbox has a checkmark by default)

7.   [TELS] VLE: Directions icon:  an icon of the lightbulb with text 'Directions' should appear in the top bar of the interface.  See design doc.  This allows the student to reactivate the directions panel.

8.   [TELS] VLE:Directions icon:  an icon of the lightbulb should also appear next to the Step Name in the left navigation panel.  If clicked the directons panel is reactivated.

9.    Keyboard controls

  • Delete key should delete selected objects
  • Shift + Mouse Click should select multiple objects

10.    Pencil Tool Sub-Menu.  If User clicks-holds over the pencil icon, a pop-up sub menu appears.  It offers two options:  Regular Pencil (current width) and Wide Pencile (current width + 2 pixels).   The currently selected sub-option is indicated via a checkmark.  SEE DESIGN DOC

11.    Line Tool Sub-Menu.  Click-hold [250ms delay] over the line icon reveals 4 sub-options:  Plain Line (current width), Thick Line (current +2 pixels), 1 Arrow Head (current width with an arrowhead on end end), 2 Arrowhead line (current width with two arrowheads).

Rectangle Tool Sub-Menu.  Click-hold over the rectangle icon reveals 2 sub-options:  Empty Rectangle and Colored Rectangle.  The colored rectangle should be filled with the latest color selected in the Color Wheel.  The default color is a mid blue.  Note that for simplicity, the interior and stroke line for the Rectangle are the same color.

12.    Circle Tool Sub-Menu.  Click-hold over the circle icon reveals 2 sub-options:  Empty Circle and Colored Circle.  The colored Circle should be filled with the latest color selected in the Color Wheel.  The default color is a mid blue.  Note that for simplicity, the interior and stroke line for the Circle are the same color.

13.    Text Tool Sub-Menu.  Click-hold over the line icon reveals 3 sub-options:  Small Text (current font size), Medium Text (current size + 2 font), and Large Text (current size +6 font).   Note that text interior and stroke are the same color.  The BACKGROUND color for text is always white.  If the user uses the Color Wheel for a text object, they change the color of the text, not the background.

14.    Remove Border from Text Objects.  Let's just have the text itself.  The user can draw a border around text if they want it.
Double-click on text objects brings up Edit box.  This is how most text tool work so we'll follow the defacto standard.

15. Interface Tooltips.  Add text tooltips when User hovers over an interface element for > .7 seconds

  • Arrow =   "Selection tool."    
  • Pencil  =  "Pencil tool.  Click and hold for options."
  • Line  =  "Line tool.  Click and hold for options."
  • Rectangle  =  "Rectangle tool.  Click and hold for options."
  • Circle  =  "Circle tool.  Click and hold for options."
  • Text  =  "Text tool.  Click and hold for options."
  • Stamp  =  "Stamp tool.  Click and hold for options."
  • Color Wheel  =  "Change the color of selected object(s)"
  • Delete = "Delete selected object(s)"        
  • Undo  = "Undo the latest action."   
  • Save  =  "Save current work."
  • Help  = "See WiseDraw help screen." 

16.  Save Button:  When User clicks this button, display text "Current Work Saved' appears in a pop up window (with CONTINUE button).

17.   Help Button:  When User clicks this button display the scrollable help screen in a pop-up window.  User can click CONTINUE button to close this pop-up and continue working.

18.    Simplify Color Wheel Pop-Up window.   Remove the HSB and RGB options - these are an unnecessary distraction for students.  And simplify the Preview box so that it just show one large square of color.   All the other text and confusing graphics can go.

19.    DISABLE TEXT-WRAP FOR TEXT OBJECTS. Let the user adjust the layout of text on the fly.

20.  Authoring Tool: Import Stamp Icons:  Allow user to import up to 10 stamp icons per WiseDraw Step.

  • [Sam will verify what the acceptable file types are]  Add advisory for author:  "Stamp images can be a the ?, ? , ? format."
  • User can also write a "Description" text string for each Stamp icon.  This description can be a maximum of 25 characters.  It shows up in the "Stamp Sub-Menu" shown to students.
  • Show all the currently imported Stamp icons for immediate review.

21.  Nix the "Options triangle" for text items.  It is inconsistent with how all other objects work.  The user can't change the size of a text object after creating it (but they can easily create a new text object).  The user changes the color in standard way (select object, then select color wheel).  User deletes a text object in the standard way (select object, then click Delete button).

22.  Implement pop-up menu for stamp icons: up to 10 stamp filenames can be presented.  See design doc.  The stamp stays set to a particular file name unless the user manual switches to another filename.

OVERVIEW

1.   We've decided to use Concord's CC Draw module as the foundation for the new WiseDraw 3.0 module.

2.   MILESTONES REVISED May 2007.  We've refocused the Milestones phases as follows:  1) JUNE '07: TELS Retreat Milestones   2) OCT '07: Code Update  3) JAN '08: Final Update.

3.  July 6 Update.

  • See the DESIGN CHANGES and BUG FIXES in the November 2007 section below.  These indicate the changes needed for WiseDraw by this Fall.
  • A new visual design document (VDD) has been created to reinforce these revisions. Check it out at: VDD Wise Draw 07.10.2007
  • New WISE 3.0 artwork is also available at:  http://www.telscenter.org/confluence/display/TCS/Artwork+-+WiseDraw+3.0
  • Have fun implementing and call me if you have any questions or need changes to the artwork.  - MattFish 510 205-7423 -

  • June '07 Milestones:  TELS Retreat   (Highest Priority)

- easy
- medium
- hard
- really hard

  1. Tool Icon Sequence v1.0:  Icon artwork to be created.  This longer list includes variant versions of the tools.  We'll update this to a shorter sequence (with pop-up sub-menus in v2.0).
                  Sequence =  Selection icon, Pencil icon, Regular Line icon, Outline Rectangle icon, Outline Circle icon, Text icon,Color Picker icon, Stamp icons 1-10 (10 max)
  2. Selection Tool as Default:  This tool is selected by default when WISE Draw 3 is activated.
  3. Selection Tool Functionality:  Overall behavior is similar to Photoshop.  Show a dotted-border selection area as user click-drags. All objects touched by the selection area are selected. Note that objects do NOT have to be completely surrounded in order to be selected.
  4. Eliminate the Tool On/Off Metaphor. User should not be able to turn a button Off -- they can only select a different button. The default selected button is the Selection Tool.  If User clicks on an already active Tool button, there's no change -- the same tool stays active.
    • need more clarity on this one, currently the same pencil object is added to each time you draw more, until you switch off pencil tool. Does "over the object" mean inside of the object's rectangle, or just ontop of an actual line. How would they draw a line let the mouse up, and then continue this line?
    • Addendum:  Yes, ""over the object" means over the rectangle border of the object.  Basically, the Pencil tool should act like the Rectangle/Circle tools, allowing user to create an object and then either reposition it (by hovering over object to get Selection Tool) or quickly create a new object using same tool (by hovering elsewhere)
    • But how do you draw a line let up the mouse and then continue the line? If you click on the end of the line to try to continue it you will move it instead.
    • Let's discuss this via phone.  The goal is easy repositioning or creation of a new object using current tool.  User won't be able to continue drawing an object after MouseUp.
  5. Stamp Tool Functionality:  After a Stamp is placed, the stamp tool should stay active (currently it turns itself off)
  6. Move/Create Cursors during for Stamp Tool:  After a Stamp Object is created, show Selection Arrow cursor when hovering over object, but show Stamp cursor when hovering over the workspace.
  7. ALL tools should use the dual-cursor functionality after an object is created.  Ex:  Create an empty circle.  When Mouseup the circle stays selected.  If cursor is over the circle border we see a Hand icon (User can move the circle).  If cursor over other workspace area we see the Circle-Draw icon (User can create a new object which now becomes the highlighted object).
  8. Text Tool functionality: use current CCDraw functionality
    • Addendum:  I know this one might seem petty, but I've heard a huge number of complaints about the Pop-Up window in Wise Draw 2.0.
      • Ok, I've implemented a minor change which makes adding text much nicer: adding text the moment the box is added, instead of needing to reclick the corner every time. (Also added better interaction with new selection tool). Double-clicking to add text right inside the box might take a little longer, though.
      • OK, this is good enough fix for now.  Let's focus on other issues  (MattFish).
  9. Revised Text Buttons:  The following text buttons should appear in the bottom left edge of the interface.               
    • SAVE        [saves current state and displays "Current Work Saved"#** why not save the work automatically? That is what we did in teemss.
      • Addendum: yes, we should be saving the work automatically.  But users want reassurance that their work has been saved.  Giving them a button to click and a "Current Work Saved!" response will greatly lessen uncertainty (and reduce repetitious questions to the classroom teacher about how to save work). 
      • Ok so for Oct. there will be a button that simply shows the popup. It won't actually do anyting else.
      • Yes, let's just put a small "Save" button on the right side below (and separated from) the toolbar  (MattFish)
    • DELETE      [deletes the object(s) currently selected.  This functionality already exists.]
  10. 1 Level of UNDO.   Plus a text button that says "Undo" above the "Save"     MOVED
  11. Deletion via Delete Button:   If user selects one or more objects, then presses the Delete Selected button -- POOF, delete them.
  12. Deletion move to right.
    • Delete tool is now represented by a trashcan icon on the bottom right. It is still on the lower toolbar, however, to keep it separate. If it ought to be on the right toolbar with all the other buttons, this can be changed.
  13. Color selection should persist.
  14.   Multi-select & Multi-Move.  If multiple objects are selected and User tries to move them, they should all move together.  Currently only one of the selected objects moves.
  15. Current Object deselected if user selects any Tool on Toolbar (including currently selected tool).  This ensures that a User does draw a huge object (like a large color-filled box) and then can't move the cursor off the object in order to create a new object.
    • This has been implemented, but NOT if the user selects the currently selected tool. With the current metaphor, a tool's button remains selected after an object is drawn. It does not seem to make sense to expect the user to re-click an already clicked button, and it does not seem to make sense for an already clicked button to perform an action when clicked yet not change its state. (Sam)
  16. Selection Tool Details:  
    • The following items are selected by clicking on the object border:  Freehand line, Straight Line, Empty Rectangle, Empty Circle
    • The following items are selected by clicking anywhere on the object (border or interior):  Text box, Stamp icons, Filled Rectangle (pending), Empty Rectangle (pending)
  17. Selected Tool Stays Active until Another Tool Selected.  Any selected tool should stay active unless the User intentionally selects a different tool.  Currently, if the User draws a Text object they are then switched back into ArrowSelection mode automatically.  The Text tool should stay active unless the User switches to another tool.
  18. MOVED --Deletion Confirmation Screen:  Let's get rid of the deletion confirmation screens.  The Undo feature is a more streamlined solution for User.  I'll gather feedback from Users.  We can always add it back in later if needed.   This happens to me often (MattFish). MOVED to NOVEMBER
  19. Save Confirmation Screen:  After User clicks SAVE button let's put up an alert screen that says "Latest Work Saved"  with CLOSE button.
  20. Bug Fix: Selection Icon doesn't always become active after being selected in toolbar.    This happens to me often (MattFish).
    • The latest bug fix corrects the error whereby selection tool, though correctly selected, occasionally draws shapes. I assume that this is the bug you are referring to? (Sam)
      (Note: the keyboard command issues have been deferred for now). Stamp Tool Functionality:  After a Stamp is placed, the stamp tool should stay active (currently it turns itself off)

Oct '07 Milestones:  Code Update   

  1. Revised Codebase.  We will evaluate whether a new codebase is required in order to effectively integrate the full range of features anticipated for this tool over the long term.   This evaluation should bear in mind three long-term goals for the functionality of this tool.
    • Basic toolset includes a range of quick and efficient drawing tools, allowing student to quickly sketch out their ideas.
    • Graphing toolset includes special graphing-specific tools which allow for creation of graphs, quick manipulation of graph data, and analysis of some basic properties of graph data.  This toolset can also make use of the data-sets that can be created in the Data From Step-Type.
    • Concept-mapping toolset (spring 2008) includes some additional tools that facilitate the creation of concept-map illustrations.  This will include three basic objects shapes with magnetic corners, and three types of magnetic connector lines with text boxes.  These objects allow a user to create conceptual connection and move the objects and text around the screen at will with automatic adjustment of the connecting lines.

Nov '07 Milestones:  Final Features

DESIGN CHANGES

  1. 1 Level of UNDO.  When user clicks the curved Undo icon, we'll undo the latest action.
  2. Deletion Confirmation Screen:  Let's get rid of the deletion confirmation screens.  The Undo feature is a more streamlined solution for User.  I'll gather feedback from Users.  We can always add it back in later if needed.   This happens to me often (MattFish).
  3. New Tool Icons.  Please implement NEW Tool Icon artwork.  The Tool Icons include both an inactive and active (yellow background state).  The tool icons are:
    • Selection Arrow
    • Pencil Tool  (click-hold to see submenu of options)
    • Line Tool  (click-hold to see submenu of options)
    • Rectangle Tool  (click-hold to see submenu of options)
    • Circle Tool  (click-hold to see submenu of options)
    • Text Tool  (click-hold to see submenu of options)
    • Stamp Tool  (click-hold to see submenu of options)
  4. New Action Icons.  Please implement NEW Action Icons.  The Action icons have only one visual state.  When clicked the matching action occurs.
    • Color Wheel
    • Delete/Trash
    • Undo
    • Save
    • Help
  5. Keyboard controls
    • Delete key should delete selected objects
    • Shift + Mouse Click should select multiple objects
  6. Pencil Tool Sub-Menu.  If User clicks-holds over the pencil icon, a pop-up sub menu appears.  It offers two options:  Regular Pencil (current width) and Wide Pencile (current width + 2 pixels).   The currently selected sub-option is indicated via a checkmark.
  7. Line Tool Sub-Menu.  Click-hold over the line icon reveals 4 sub-options:  Plain Line (current width), Thick Line (current +2 pixels), 1 Arrow Head (current width with an arrowhead on end end), 2 Arrowhead line (current width with two arrowheads).
  8. Rectangle Tool Sub-Menu.  Click-hold over the rectangle icon reveals 2 sub-options:  Empty Rectangle and Colored Rectangle.  The colored rectangle should be filled with the latest color selected in the Color Wheel.  The default color is a mid blue.  Note that for simplicity, the interior and stroke line for the Rectangle are the same color.
  9. Circle Tool Sub-Menu.  Click-hold over the circle icon reveals 2 sub-options:  Empty Circle and Colored Circle.  The colored Circle should be filled with the latest color selected in the Color Wheel.  The default color is a mid blue.  Note that for simplicity, the interior and stroke line for the Circle are the same color.
  10. Text Tool Sub-Menu.  Click-hold over the line icon reveals 3 sub-options:  Small Text (current font size), Medium Text (current size + 2 font), and Large Text (current size +6 font).   Note that text interior and stroke are the same color.  The BACKGROUND color for text is always white.  If the user uses the Color Wheel for a text object, they change the color of the text, not the background.
  11. Remove Border from Text Objects.  Let's just have the text itself.  The user can draw a border around text if they want it.
  12. Double-click on text objects brings up Edit box.  This is how most text tool work so we'll follow the defacto standard.
  13. Interface Tooltips.  Add text tooltips when User hovers over an interface element for > .7 seconds
    • Arrow =   "Selection tool."    
    • Pencil  =  "Pencil tool.  Click and hold for options."
    • Line  =  "Line tool.  Click and hold for options."
    • Rectangle  =  "Rectangle tool.  Click and hold for options."
    • Circle  =  "Circle tool.  Click and hold for options."
    • Text  =  "Text tool.  Click and hold for options."
    • Stamp  =  "Stamp tool.  Click and hold for options."
    • Color Wheel  =  "Change the color of selected object(s)"
    • Delete = "Delete selected object(s)"        
    • Undo  = "Undo the latest action."   
    • Save  =  "Save current work."
    • Help  = "See WiseDraw help screen."  
  14. Save Button:  When User clicks this button, display text "Current Work Saved' appears in a pop up window (with CONTINUE button).
  15. Help Button:  When User clicks this button display the scrollable help screen in a pop-up window.  User can click CONTINUE button to close this pop-up and continue working.
  16. Simplify Color Wheel Pop-Up window.   Remove the HSB and RGB options - these are an unnecessary distraction for students.  And simplify the Preview box so that it just show one large square of color.   All the other text and confusing graphics can go.

BUG FIXES

  1. PENCIL OBJECTS UNMOVEABLE.  Create a pencil objects.  Then try to move it.  You can't.  Needs to match the behavior of the other tools.
  2. DISABLE TEXT-WRAP FOR TEXT OBJECTS.  When User creates a text string the text should always appear in just one line (no auto wrapping).  Either that or the User needs to be able to adjust the width of a text box via the adjustment corner.  We should avoid auto-wrapping as this may force line-returns that the User does not want.
  3. MULTI-OBJECT MOVES DON'T ALWAYS WORK.  Click-drag with Selection arrow to select several objects.  Then try to move them.  Sometimes they all move together smoothly.  Sometimes only one moves.  I can't find a pattern to which groupings stay together and which don't.  This is a low priority issue buy it would good to try and figure out why it's inconsistent.

AUTHORING TOOL

The following items should be implemented for the Project Editor Tool used by teachers/researchers. 

  1. Working Area Pop-Up:  Allow author to specify the working area. Default to current settings. Also allow some larger settings (drop-down menu)
  2. Import Background Image:  Allow author to easily select an image as the background image.
  3. Directions Panel:  Author can click a checkbox stating they'd like to have a Directions Panel appear at first time-use of the WISE draw step.  The user can enter an unlimited amount of HTML-formatted text into a data entry box.
  4. Import Stamp Icons:  Allow user to import up to 10 stamp icons per WiseDraw Step.
    • Should include Advisory telling User specification needed for the file.  Suggest: "Stamp images can be a maximum size of 60x60 pixels, in JPG or PNG file format."
    • User can also write a "Description" text string for each Stamp icon.  This description can be a maximum of 25 characters.  It shows up in the "Stamp Sub-Menu" shown to students.
    • Show all the currently imported Stamp icons for immediate review
    • Include Delete button so Author can toss icons they don't want.
    • Ideally, we should include a Pop-Up window showing pre-made Stamps that the author can use.
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.