Individual Programming Assignment 1

From CS160: User Interface Design Sp12

Jump to: navigation, search

Due: by 2pm on Mon Jan 30

20 points - Individual Programming


Contents

Overview

There are a few videos and a few songs you always listen to, and you want to be able to access them on your TV. Being a programmer, you decide to implement a custom menu that would work well on your TV. In this assignment, you will create a hierarchical menu designed for use with a large display (such as a TV).

Instructions

First, set up your tools and development environment as described below.

Construct a hierarchical menu with at least two options, each of which must contain at least two options. For example, the following menu minimally satisfies this condition: 

 *  Zola Jesus - Conatus
    * Swords
    * Avalanche
 * King Creosote & Jon Hopkins - Diamond Mine
   * Your Young Voice
   * First Watch

 * Movies
    * Monty Python and the Holy Grail
    * Helvetica
 * TV shows
    * Arrested Development
    * Community

For this menu, there will be a total of ‘’six’’ screens: one showing the “Music” options, one showing “Zola Jesus”, one showing “King Creosote & Jon Hopkins”, one showing “Videos”, one showing “Movies”, and finally one showing “TV shows”.

At minimum, your program must:

  1. Show the root menu at application start,
  2. Enable users to select one of the options; if this option opens a submenu, show the submenu; otherwise, show a message that the option was successfully selected, then automatically return to the root of the menu after a short delay,
  3. Enable users to go backward in the menu, and
  4. Give users an indication of where they are in the menu hierarchy (e.g., through a breadcrumb trail).

Technical note: We strongly recommend you use the Canvas element as your layout panel. It will make Assignment 3 easier when it comes time to combine your menu with Kinect input. If you choose a different layout panel, we'll be unable to offer support. See Tips for details.

Grading Criteria

Full credit (20 points) will be given if your application compiles, runs, contains the functionality as detailed in the instructions.

Up to 5 extra points will be given if you implement additions that make the application more usable or more aesthetically pleasing. For example, you can implement the following:

  1. Smooth animation between menus
  2. Item previews (e.g., play music or video, or show pictures).
  3. Showing cover art for media

Deliverables

You will need to submit:

Computers

You can use the PCs in 125 Cory to work on this assignment, or your own laptop.

Development environment

Plan to spend at least one day on getting your development environment up and running. Get started early!

In order to ensure Kinect SDK compatibility, you'll need Windows 7 and Visual Studio 2010. You can get VS 2010 from DreamSpark (https://www.dreamspark.com/default.aspx) and Windows from the MSNDAA (http://msdnaa.eecs.berkeley.edu/) or through Berkeley (http://stc.berkeley.edu/downloads.htm). You should also install the Kinect SDK from DreamSpark. You won't need most of the technologies in VS 2010, but make sure you install Visual C#.

MSDNAA notes

You'll need a day or two to get access to MSNDAA, so don't delay!

DreamSpark notes

When signing up for DreamSpark, you may need to be connected to the campus network. Select "University of California, Berkeley" as your school; the other UC Berkeley choices have been causing problems for some students.

Installing Visual Studio without burning to DVD

Visual Studio is delivered from DreamSpark as an image file (.iso). If you don't want to burn a DVD, you can use disk mounting software such as Daemon Tools Lite.

For Mac users:

If you do not want to use the Microsoft SDK, there are alternate, open Kinect libraries. However, we will not be supporting these packages. If you do choose to take this approach you may find the following libraries useful:

Screen Recording

You can use the free version of Screencast-O-Matic on many platforms. On OS X, you can use a free trial version of iShowU HD or create a screen recording with Quicktime X. On Windows, you can use the free Cam Studio. Linux users can use recordmydesktop, which is usually packaged by the same name.

Useful resources

Tips

You will be using the Kinect to control this menu in Assignment 3, so you should use the Canvas layout for your UI elements. With the Canvas layout, you can retrieve UI element locations without needing to query the layout manager for the absolute coordinates of elements. This approach will make it easier to control the menu using the Kinect later on. However, you may use another layout manager if you so choose.

Solution Example

This is by no means a brilliant design. We encourage you to produce your own designs with the required functionality.

QuickStart Guide

Creating a new Project

Follow the step-by-step instructions mentioned here: http://msdn.microsoft.com/en-us/library/bb546958.aspx

Submission Instructions

Create a Wiki Page for this assignment

Begin by creating a new wiki page for this assignment. Go to your user page that you created when you made your account. You can get to it by typing the following URL into your browser:

http://vis.berkeley.edu/courses/cs160-sp12/wiki/index.php/User:FirstName_LastName

Replace FirstName and LastName with your real first and last names. This will take you to the page you created for yourself when you created your wiki account. If you have trouble accessing this page, please check that you created your wiki account properly.

Edit your user page to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[ProgrammingAssignment1-FirstName_LastName|Programming Assignment 1]]

Again replace FirstName and LastName with your name. Look at my user page for an example. Then click on the link and enter the information about your assignment. You should upload one file (described below) and in the wiki page, describe any extra credit functionality you implemented and want us to review.

Upload Project

Create & Upload Screencast Video

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it at the bottom of the page with your full name as the link text. The wiki syntax will look like this: *[[ProgrammingAssignment1-FirstName_LastName|FirstName LastName]]. Hit the edit button for the last section to see how I created the link for my name.

Links to Finished Assignments

Add your submission below this line:


[add comment]
Retrieved from "http://vis.berkeley.edu/courses/cs160-sp12/wiki/index.php/Individual_Programming_Assignment_1"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox
GROUPS