Ctrl+K

A2: Roll Your Own - Toolkit

A2: Roll Your Own - Toolkit#

Overview#

Now that you have had a chance to familiarize yourself with our SVG.js based graphical toolkit framework by building a button widget, it’s time to expand your toolkit to include some additional widgets.

Assignment Details#

The details for this assignment are the same as assignment 1. Rather than download a new repository, simply continue building your toolkit alongside your button widget.

Assignment Requirements#

Your toolkit must include the following 4 new widgets (visit Wikipedia’s Graphical widget page detailed descriptions):

  • Check Box

  • Radio Button

  • Scroll Bar

  • Progress Bar

  • Custom

Each widget must continue to make use of the state machine that you used to support state changes in your button widget. You are free to add as many features to your widgets as you like. In addition to matching the basic rules of these widgets (e.g., a button depresses, a scroll thumb slides, etc), to receive full credit your widgets must support the following features:

Check Box

Visually support checked and unchecked states.

Expose a custom label property to set the text that appears to the right of the check box.

Expose an event handler that notifies consuming code when the checked state has changed.

Radio Button

Visually support checked and unchecked states.

Support 2 to n number of buttons, where n is set by the consuming code, with minimum of two, positioned vertically.

Ensure that only one button can be checked at a time.

Expose a custom label property to set the text that appears to the right of each button.

Expose an event handler that notifies consuming code when the checked state has changed and which n has been checked.

Scroll Bar

Include up and down buttons on either end of the scroll track that move the scroll thumb when clicked.

Support clicking the scroll track to move the scroll thumb. When clicked, the scroll thumb should jump to the clicked position.

Expose a custom property to set the height of the scroll bar.

Expose a custom property to get the position of the scroll thumb.

Expose an event handler that notifies consuming code when the scroll thumb has moved and in which direction.

Progress Bar

Expose a custom property to set the width of the progress bar.

Expose a custom property to set the increment value of the progress bar.

Expose a custom property to get the increment value of the progress bar.

Expose a custom method to increment the value of the progress bar. The method should support an arbitrary numerical value from 0-100.

Expose an event handler that notifies consuming code when the progress bar has incremented.

Expose an event handler that notifies consuming code when the widget state has changed.

Custom (your choice)

There are no requirements for this widget. You are free to create anything you want. Model your custom widget after something that already exists or design something novel. However, note in the grading rubric that we will be applying a ‘unique or novel’ score to your custom widget. Widgets that are variations on the required widgets or commonplace in most UI’s will likely get a lower score than something that suprises us. Feel free to inquire with the instructors if you are uncertain!

In addition to the features listed above, ALL widgets must implement the abstract methods required by the Widget class in the ui.ts file. For example, after implementing the move method, your widget should be positionable by consuming code (e.g., a programmer should be able to add your widget to a document and specify using X and Y coordinates where on the document it should be placed).

Additional Requirements#

Theme#

You must create and apply a consistent theme to your toolkit. Your widgets, when rendered in the browser, should visually appear as if they belong together. Your design does not have to be groundbreaking! Your design skills are not going to be evaluated in this class, however, we are looking to see that you have thoughtfully applied the core principles of user centered design that you have been learning in your Informatics coursework. Spend some time to get to know the ins and outs of SVG.js. Learn its capabilities (pretty much anything you can do with vectors can be done with SVG.js) and decide what you want your theme to look like.

Demo Program#

Once your toolkit is complete, you will assemble all of your widgets into a single UI using the index.ts file included in your repository from assignment 1. This UI does not have to do anything in particular, it just needs to enable us to interact with your widgets. Your demo program should listen to all the exposed event handlers that you created for your widgets and output the information they pass to the browser console. When we grade your assignment, we will open the console and look for these messages to assess whether or not the feature has been implemented.

For Your Consideration

There is a lot of work to complete here! Although things may look easy at first, pay attention to the details. To complete this assignment there are many small tasks that you must take into account. Get started early, and make incremental progress on your work every day. You have a lot of time to complete this assignment because we want you to be thoughtful in how you implement the required features. A task that appears obvious at first glance will likely give you trouble as you work on it, so even though you have a lot of time, do not wait until the last week.

Extra Credit#

In addition to the requirements described above, there are two extra credit opportunities worth an additional 1.5 points. To earn credit for either extra credit requirement they must be completed in full and function as described. Partial credit will not be given.

Text Input Widget#
Text Box

Visually support a caret | that informs the user about the position of the cursor. The caret should only be visually present when the widget has hover focus.

Expose a custom property to set default text.

Expose a custom property to get the text entered by the user.

Expose an event handler that notifies consuming code when the text has changed.

Implement the GridLayout#

To earn extra credit for implementing the GridLayout layout manager, simply layout all of your custom toolkit widgets using the GridLayout code discussed in class on 4/18.

Submission#

For this assignment you will submit the following items as a zip file to Canvas:

  1. Your completed widget .ts files along with the rest of the starter code as a zip file to Canvas.

  2. A revised index.ts that instantiates and arranges all of your widgets so they can be interacted with by a user.

  3. A screenshot of your widgets and UI as it is rendered in the browser. Name your screenshot toolkit_demo.png (or .jpg, .gif, etc) and place it in the root of your project folder.

Remember to delete all generated files during the setup process (e.g., node_modules) to keep your file size small.

For Your Consideration

A good practice to make habit is to regularly commit your code to a source control system like GitHub as you make progress. You are free to use your github repository as often as you like as you work on the assignment, however, if you need assistance from the course instructors we will ask that you provide us with a link to your GitHub repository and a running instance of your program first.

Grading#

Your assignment will be given an overall grade that is based on the completeness of the following items:

  • All materials submitted correctly with documentation: 0.25 pts

    • Is a screenshot of the widget and UI included?

  • Demo: 0.25 pts

    • Is the index.ts page completed so that a full demonstration of all widgets is available?

  • Theme: 2 pts

    • Do all the widgets fit into a coherent visual theme?

  • Completeness of each widget : 7.5 pts (1.5 pt per widget)

    • Are all required widget features complete?

Extra Credit#

  • Text Input Widget: 1 pt

  • Implementation of GridLayout layout manager: 0.5 pt

Total: 11.5/10 pts

Contents