Université Paris-Sud 11 HCID 101 / M1 Informatique
Programming of
Interactive Systems

Lectures: Room B212, building 640 (PUIO)

Anastasia Bezerianos
Lectures web site

TA: Rooms C106 (HCID) and E202 (M1), building 640 (PUIO)

David Bonnet (HCID)
Cedric Fleury (M1)

  1. Friday, September 27, 4pm-6pm Java (Swing)
  2. Friday, October 4, 2pm-6pm
  3. Friday, October 18, 2pm-6pm Java (SwingStates)
  4. Friday, October 25, 4pm-6pm
  5. Friday, November 8, 4pm-6pm
  6. Friday, November 22, 2pm-6pm JavaScript (jQuery)
  7. Friday, November 29, 2pm-4pm
  8. Friday, December 6, 4pm-6pm
  9. Friday, December 13, 2pm-6pm Project presentation

TA 1 — Friday, September 27, 2013

Eclipse

Eclipse is an IDE (Integrated Development Environment) tailored for writing programs in Java. If you haven't done it yet, install it. Below are some useful menu items in Eclipse that you should consider using:

Also, the shortcut ctrl+space gives you an auto-complete menu.


Layout managers, labels, text boxes and buttons

The aim of this exercise is to create a temperature converter containing:

  1. Download the TempConverter.java file.
  2. Complete the function init() in the file TempConverter.java by using the class JPanel and layout managers of your choice to make the resulting window look like the one pictured above.
  3. Make sure the widgets are aligned and that their location remains consistent while resizing the window as in the following picture:
  4. The textFieldCListener reads a floating value in the Celsius text box when the user press "enter", convert it from Celsius to Fahrenheit, and write the result in the Fahrenheit text box. Associate this listener to the text box of the Celsius value.
  5. Fill in the textFieldFListener in order to do the conversion from Fahrenheit to Celsius. Associate it with the text box of the Fahrenheit value.
  6. The buttonCloseListener closes the window. Associate it to the close button.
  7. Fill in the buttonResetListener in order to empty both text boxes. Associate it to the reset button.
  8. The temperature conversion occurs when the user presses enter. Use a KeyListener (that you attach with JTextField.addKeyListener) instead of an ActionListener. The KeyListener will be notified at each key press.

Solution


All the following exercises are originally made by Nicolas Roussel and are translated here in english version for convenience.

Linked variables: a color chooser

The aim of this second exercise is to build a color chooser which enables users to:

The current color is previewed in a rectangular area. The whole window looks like this:

  1. Download the ColorChooser.java file.
  2. Complete the function init() in the ColorChooser.java file by using the class JPanel to make the resulting window look like the one pictured above.
  3. Make sure that all widgets are linked:
    • when using one of the sliders, the text field next to this slider, the color preview area and the text field on top of it should be updated accordingly ;
    • when changing the value in one of the text-fields, the other widgets should be updated accordingly.
  4. Instead of using an ActionListener or a KeyListener for the JTextField, use a DocumentListener that you can attach this way: JTextField.getDocument().addDocumentListener. What do you observe?

You can use the methods Color.getRGB, Integer.toHexString and String.substring to convert a color into an hexvalue and the method Color.decode to do the conversion in reverse.

Solution

Note that Swing provides a class, JColorChooser, that allows to easily choose a color.

TA 2 — Friday, October 4, 2013

Homework

Finish the second exercise (the one about the color chooser). You can look at the solution of the first exercise which is posted right after the instructions.


Pop-up menus and lists: a file chooser

The aim of this third exercise is to build a file chooser similar to the one pictured below:

File selector

The scrollable list in the middle of the window shows the content of the current folder; sub-folder names are followed by a slash (/). The pop-up menu at the top contains a list of all parent folders of the current folder.

  1. Download the FileSelector.java file.
  2. Change the FileSelector.java file by using the classes JComboBox, JList, JScrollPane and JButton to build the dialog box pictured above. Make sure that the location of the widgets remains consistent when resizing the window.
  3. Make sure that, when choosing a parent folder, both the scroll list and the pop-up menu are updated to reflect the newly selected folder.
  4. Check that the "Open" button is only usable (active) when a file or a folder is selected in scroll list.
  5. Make sure that clicking on the Cancel button or the Open button while a file is selected closes the dialog box.
  6. Make sure that when clicking the Open button on a selected folder updates both the scroll list and the pop-up menu.
  7. Make sure that double-clicking on a file or a folder inside the scroll list is identical to selecting the file and clicking on the Open button.

Note that Swing provides a class, JfileChooser, that allows to easily choose a file or a folder.

Solution


Structured drawing: a simple drawing app

The aim of this exercise is to build a drawing application in order to get familiar with 2D drawing:

  1. Download the package containing the classes for this exercise:
    • GraphicalEditor.java is the graphical interface.
    • PersistentCanvas.java is a persistent canvas which stores the created items.
    • CanvasItem.java is the abstraction of one item of the canvas.
    • RectangleItem.java is the rectangle item class (inherited from the abstract class CanvasItem.java.
  2. Modify the GraphicalEditor class to enable mode selection: when the user clicks on a radio button, it should change the mode and update the window title accordingly.
  3. Modify the GraphicalEditor class to enable shape selection: when the "Select/Move" mode is active, when the user clicks on the canvas, the shape directly under the cursor should be selected. You will also have to implement the PersistentCanvas.getItemAt(Point p) method that handles the picking of a shape at a location p on the 2D canvas.
  4. Set the appropriate actions for the Delete and Clone buttons so that the user can delete or clone (and translate a bit) the selected shape.
  5. Modify the MouseMotionListener in the GraphicalEditor class to let users move shapes in the canvas.
  6. Enable the color setters that set the fill and stroke color of the currently selected shape and also future shapes. Also, make sure that when the user selects a shape, the color setters should be updated to reflect the fill and stroke colors of this shape.
  7. Add the support of other shapes by creating the EllipseItem, LineItem and PathItem classes. They should support the same features: move, delete, color change, etc. For the path, you can use the class java.awt.geom.GeneralPath.

Solution

TA 3 — Friday, October 18, 2013

Homework

SwingStates

To use the SwingStates toolkit

Resources

First state machine on a canvas

The aim of this exercise is to use the Canvas and a state machine from SwingStates in order to create a button.

  1. Get the SimpleButton.java file. This code creates a SimpleButton and shows it on a Canvas. For now, only the button label is drawn on the Canvas (through the use of a CText object) and it has no associated behavior.
  2. Create a rectangle around the label. Make sure that it is below the label (use CElement.below(CElement after)) and that the label moves with the rectangle when calling SimpleButton.getShape().translateBy(30,30) (use CElement.setParent(CShape parent)).
  3. Create a state machine (using CStateMachine) that defines the behavior and appearance of the button when the cursor is:
    • outside of the button (white background, thin border)
    • inside the button (white background, thick border)
    • pressing the button (yellow background, thick border)
    • leaving the button while pressing (yellow background, thin border)
  4. Make sure that the associated action (SimpleButton.action()) is triggered only if the pointer presses then releases the button while inside of it.
  5. Use the SimpleButton.showStateMachine() function to show the state machine created at the previous step.
  6. Make the button draggable (use SimpleButton.setDraggable()) by completing the dragger state machine and uncommenting the appropriate line in the main() function. Note that, once this is operational, any shape in the canvas with a tag named "draggable" can be dragged with the right mouse button pressed.
  7. Create different SimpleButton instances with various behaviors (e.g., toggling the dragging state) and different required modifier keys (e.g., pressing while holding the shift key).
  8. Change the state machine by using the armTimer and the transitions TimeOut in order to detect dwelling (pressing the mouse button and not moving for x millisecond), click-and-a-half (clicking then dwelling) and double click events.

Solution

TA 4 — Friday, October 25, 2013

Homework

Finish the first state machine on a canvas exercise.

Drawing on a canvas

The aim of this exercise is to use the Canvas and a state machine from SwingStates in order to create a simple drawing application.

  1. Download the archive containing the four files that provide the necessary code allowing to draw and drag rectangles with the mouse while holding the shift key. Also, download the icons used for the toolbar.
  2. Create three new state machines similar to RectangleTool.java in order to create ellipses, segments and strokes (use the classes CEllipse, CSegment et CPolyLine du Canvas of SwingStates).
  3. Add on the canvas a toolbox that allow to choose the current tool. Make sure that this panel can be moved and that it always remains on top of the drawn objects. The zip archive contains the icons in PNG shown on the screen-shot above.
  4. Edit the SelectionTool to allow selection of multiple objects. Add selection marks to selected objects (see figure) and make sure that those object can be moved, duplicated or deleted altogether.

Solution

TA 5 — Friday, November 8, 2013

Homework

Submit the first part of your project (assignment 1B).

TA 6 — Friday, November 22, 2013

JavaScript

Editors

There are many editors dedicated to HTML/CSS/JavaScript:

You can also use online services such as JSFiddle.

Running and debugging

To run your webapp, simply use your browser. We recommend the following browsers:

All three have built-in debugging tools and a JavaScript console in which you can type instructions to try out things:

Resources

HTML5 demos


JavaScript libraries

First, download the archive containing the JavaScript libraries that will be used throughout the JavaScript exercises. The libraries are:

Temperature converter

The temperature converter is similar to the previous Swing exercise.

  1. Download the temperature converter files and put them in a folder that contains the js folder holding the required libraries.
  2. Modify the css file so that the layout matches the screenshot above (you will add the slider later on).
  3. Edit the script section of the html file to add the expected behavior: when typing a temperature value in either text field, the other text field should update itself with the appropriate value.
    Note: Here is how you convert a Celsius value to Fahrenheit: (celsius * 1.8) + 32.
    Tip: Use $(inputSelector).val() to retrieve or set the value of an input element. Use parseFloat(string) to convert a string to a float and isNaN(value) to check if the value was successfully converted.
  4. Edit the code so that the values are rounded to one decimal (e.g., 15.7 should be displayed instead of 15.66666).
    Tip: Use the Math.round(number) and Math.pow(number, power) functions.
  5. Add a slider that changes the celsius temperature, either with an input element by setting the type attribute to range or by using jQueryUI sliders. Make sure that all interface elements (slider and input text fields) are synchronized.

Solution

TA 7 — Friday, November 29, 2013

Simple drawing application

The goal of this exercise is to add missing features to a simple web-based drawing application.

  1. Download the drawing app files and put them in a folder that contains the js folder holding the required libraries.
  2. Right now, only arbitrary shapes can be drawn. Edit the listeners on the canvas to handle the creation of rectangles, circles and lines (see the section dedicated to the creation/deletion of shapes in the script located in the header of the html file).
  3. Add a keyboard shortcut for each tool (e.g., pressing the S key selects the Selector tool) by editing the section dedicated to keyboard shortcuts. Make sure that the shortcut appears in the tooltip by editing the title attribute in the html section.
  4. Change the keyup listener to let arrow keys nudge the selected shapes (i.e. translate them in the arrow direction by one pixel). Also, when pressing the arrow keys while holding down the shift key, the selected shapes should translate by 10 pixels (instead of just 1 pixel).
  5. Add a button to the toolbar that duplicates selected shapes (use the button html element). Also add a shortcut to it (e.g. pressing the D key duplicates the selected shapes) and make sure that the tooltip mentions that shortcut. Make sure that the delete and duplicate buttons are disabled (use the disabled button attribute) when no shape is selected and enabled again when a new selection is made.
  6. Make the styling inspector visible (see the body part of the html document) and edit its behavior so that it reflects and edits the selected objects. When selecting several shapes, the styling inspector should show the common values (e.g., if all selected shapes have the same background color, then this should be shown in the inspector). See this demo to find the right events to listen for on the canvas and the documentation of the jQuery Simple Color plugin.

Solution

TA 8 — Friday, December 6, 2013

This session is about getting feedback and tips for the ongoing smart home projects.

TA 9 — Friday, December 13, 2013

Project presentation

Complete instructions about assignment 2 and project presentation are available here.

Project

Assignment 1

As homes are becoming more and more equipped with interconnected devices, the goal is to implement a simple version of an interface to manage the behavior of a smart home. This interface will be extended in the second assignment.

Requirements

About smart homes

A smart home is [a home] equipped with lighting, heating, and electronic devices that can be controlled remotely by smartphone or computer: you can contact your smart home on the Internet to make sure the dinner is cooked, the central heating is on, the curtains are drawn, and a gas fire is roaring in the grate when you get home. “ Oxford dictionary

To control a smart home you need an interface to program its behavior, running on a mobile, the web or on a panel at home.

Proposed topic

Our assumption is that the control interface will run on a panel inside your smart home. As it is difficult to build a complete system on one go, here are the recommended functionalities for this assignment:

  1. A graphical representation of the house.
  2. The ability to program in detail at least 2 aspects of the house (e.g. temperature and light). Users should be able to do this for a specific room or for the entire house.
  3. At least one drag-and-drop interaction (it is up to you what/where).
  4. Undo/redo functionality for all actions (your “history“ can be limited to the last 20 actions)

You can use any interactions your can think of for doing the above actions (the only requirements is the existence of one drag-and-drop interaction). Everything else is up to you. We are interested in how everything fits together in your system, and how creative you are in your interactions. To get a very good mark we expect you to go beyond the above recommended functionalities, with at least 3 extensions: they will be judged by their complexity and how they fit overall with your prototype).

Possible extension examples include: more parameters to control, add note-taking, complex programmable behavior (e.g. different rules based on conditions outside the house), saving your parameters, etc.

Advices

Submission 1-A To do by October 18, 2013

Create a storyboard of the tool you plan to create as one or more images:

Examples of interaction storyboards as sketches can be found here If you want to learn more about storyboards than what we cover in class you can have a look here

Give your storyboard to your instructor in class, or scan it and email it before class. Make sure your full name is clearly visible on the storyboard.

Submission 1-B To do by November 7, 2013

Create an archive (zip or tar.gz) named first-last-name.zip or first-last-name.tar.gz that includes:

  1. A text file with a brief description of your result: what functionalities you implemented and what simplifications you made (bullet points are ok).
  2. Your code: both the source code and an executable version (in java a .jar), or your eclipse project. Add any necessary instructions for running your project.
  3. Your code documentation that should be automatically generated (in Java using Javadoc).

Send your compressed archive by Friday, November 7, 2013 at 23:00 the latest to your instructor, David or Cedric and put Anastasia in copy. Use the subject [IS] Assignment 1 in your email.

Assignment 2

Complete instructions about assignment 2 are available here.