Individual Programming Assignment 1
From CS160: User Interface Design Sp12
Due: by 2pm on Mon Jan 30
20 points - Individual Programming
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).
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:
- Show the root menu at application start,
- 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,
- Enable users to go backward in the menu, and
- 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.
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:
- Smooth animation between menus
- Item previews (e.g., play music or video, or show pictures).
- Showing cover art for media
You will need to submit:
- Source code
- An executable
- A demonstration video
You can use the PCs in 125 Cory to work on this assignment, or your own laptop.
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#.
You'll need a day or two to get access to MSNDAA, so don't delay!
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:
- We strongly recommend using Bootcamp. The Kinect SDK on a virtual machine is reportedly hard to setup, and we will be unable to support those setups.
- If you have partitioned your drive using Disk Utility, you might have to delete all partitions and repartition using Bootcamp.
- Make sure you allocate enough space to your Windows partition (>30GB). A complete Windows 7 install in itself will take around 16GB, and VS 2010 needs reasonable amount of space as well.
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:
- OpenKinect for Kinect interface (http://openkinect.org/wiki/Main_Page)
- OpenNI for gesture/skeleton recognition (http://openni.org/)
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.
- Intro to Windows Presentation Foundation (http://msdn.microsoft.com/en-us/library/ms754130.aspx)
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.
This is by no means a brilliant design. We encourage you to produce your own designs with the required functionality.
Creating a new Project
Follow the step-by-step instructions mentioned here: http://msdn.microsoft.com/en-us/library/bb546958.aspx
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:
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.
- Your submitted project must include all of the deliverables: source code, application, and video.
- Create a zip file of your project tree (the top-level folder that includes the Visual Studio project. Rename the zip file to firstname-lastname-ipa1.zip (e.g., maneesh-agrawala-ipa1.zip)
- Upload the zip file to the ProgrammingAssignment1-FirstNameLastName page you just created:
- Create a new file link like this: [[File:firstname-lastname-ipa1.zip]]
- Save the page, then click on the File link you just created to upload the zip file.
Create & Upload Screencast Video
- What your screencast should contain:
- Narrated walkthrough of the interface including all implemented interactions.
- Be CONCISE. Your video shouldn't be longer than 90 seconds.
- Be prepared to do multiple takes; plan and/or write out a script first.
- Your file should be in AVI, WMV, OGV, or MOV format, and no larger than 10MB.
- Rename your movie file to firstname-lastname-ipa1.<extension> (e.g., maneesh-agrawala-ipa1.<extension>)
- Upload the movie file to the ProgrammingAssignment1-FirstName_LastName page you just created:
- Create a new file link like this: [[File:firstname-lastname-ipa1.mov]]
- Save the page, then click on the File link you just created to upload the movie file.
- Alternately, you may instead elect to upload the video to a video sharing service and include the link in your submission. On the upside, a video posted to Youtube may have greater visibility, but on the downside, the class record will no longer have an archival copy.
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:
- Maneesh Agrawala
- Anuj Tewari
- Nicholas Kong
- Victor Kmita
- Timothy Zhu
- Kurtis Freedland
- Kenneth Do
- Pedro Tanaka
- Brennan Polley
- Robert Marks
- Eugenia Lee
- David Squeri
- Shu-Chen Chen
- Rohan Ramakrishnan
- Yuki O'Brien
- Chenkai Gao
- Lida Wang
- WenJie Zhou
- Benjamin Shapiro
- Huan Do
- Matthew Leung
- Jessica Miller
- Connie Guo
- Yian Shang
- Shuqun Zhang
- Sylvain Royer
- Andrew Wun
- Bei He
- Douglas Treadwell
- Whitney Lai
- Alvin Chang
- Joseph Schadlick
- Ken Yu
- Mark Peng
- Benjamin Le
- Erik Gui
- Kaiyuan Deng
- Christopher Nguyen
- Can Zhang
- Ashley Hsu
- Rohan Cribbs.
- Varad Kishore
- Tobit Narciso
- Raphael Townshend
- Lichen Han
- JinWoo Roh
- Ahmed Afifi
- Paige Dunn-Rankin
- Kenny Shiu
- Eric Mao
- Rosette Su
- Lu Cheng
- Xiaohan Zhang
- Kelvin Jie Lam
- Neel Rao
- Brandon Young
- Yu Gan
- Jonathan Sulistio
- Jessica Ho
- Bhavik Singh
- Danube Phan
- Camilo King
- Juan Banda
- Kate Greenwood
- Praneet Wadge
- Sherman Ng
- Jessica Chou
- Michael Greenwald
- Hywel Lo
- Omar Ali
- Benjamin Coleman
- Jacob Rashoff
- Samuel Zhu
- Matthew Chan
- Minzhi Zhao
- Sahana Rajasekar
- Jeffrey Yu
- Ritu Kiragi
- Sally Lee
- Tamzid Islam
- Darren Sue
- Danny Tan
- Bernard Julve
- Arturo_Wu-Zhou LATE
- Peter Beardshear
- Adam Braman
- Adib Kashem