code pad

CODE PAD: INTERACTIVE SPACES FOR MAINTAINING CONCENTRATION IN PROGRAMMING

ENVIRONMENTS

Chris Parnin Georgia Institute of TechnologyCarsten Görg, UC Denver

Spencer Rugaber, Georgia Institute of Technology

Visualization: Introducing a new species into an environment.

ECOSYSTEMS

SUCCESSFUL INTRODUCTIONS…

RICH INTERACTION IN ENVIRONMENT

How do I survive in the wild?

SOFTWARE DEVELOPMENT

ECOSYSTEM?

Resource-starved and isolated

Programming

Team/SocialCognitive

Planning/Task

Engineering

ISLANDS OFACTIVITY

Scribble on code.

Keep its items in a mental workspace.

Share and interact with others.

WHY CAN’T WE….

INTRODUCINGCODE PAD

A platform first, a device second.

Outline• Design• Examples• Implementation• Future

DESIGNContent

Actions

Programming activities Secondary activities

Automaticor

Manual

WHY NOT ANOTHER DISPLAY?

• Social Mobility and Sharing (collaboration, meetings, hand-off)

• Alternate Modality (pen, multi-touch)

• Spatial Affordances (push aside, stacking)

TWO COMPETING DESIGNS

ChompPellets.cs

using System;using System.Collections;using System.Drawing;using System.Drawing.Drawing2D;

namespace Chomp{

public enum PelletType { RegularPellet = 0, PowerPellet = 1 }

public class Pellets {

private ArrayList _pellets;private ArrayList _powerPellets;

private PelletType _pelletType;private SolidBrush _brushPowerPellet;

public const int POWER_PELLET_POINTS = 50;public const int REGULAR_PELLET_POINTS = 10;

public delegate voidonPowerPelletEatenEventHandler (object Source, PelletEventArgs e);

public event onPowerPelletEatenEventHandler OnPelletEaten;

public Pellets() {

_brushPowerPellet = new SolidBrush(Color.FromArgb(255,194,159)); }

public int RegularPelletCount {

get {return _pellets.Count;} }

public int PowerPelletCount {

get {return _powerPellets.Count;} }

public void BlinkPowerPellet() {

if (_brushPowerPellet.Color == Color.Black) {

_brushPowerPellet.Color = Color.FromArgb(255,194,159); }

else { _brushPowerPellet.Color = Color.Black; } }

ChompPacman.cs

using System;using System.Drawing;using System.Drawing.Drawing2D;namespace Chomp{

public class PacmanCharacter : GameCharacter { Bitmap _bmpCharClosed; Bitmap _bmpCharOpenMidLeft; Bitmap _bmpCharOpenMidRight; Bitmap _bmpCharOpenMidUp; Bitmap _bmpCharOpenMidDown; Bitmap _bmpCharOpenAllLeft; Bitmap _bmpCharOpenAllRight; Bitmap _bmpCharOpenAllUp; Bitmap _bmpCharOpenAllDown;

public enum CharacterPosition { Closed = 0, OpenMidLow = 1, OpenMidHigh = 3, OpenAll = 4, }

private CharacterPosition _currentCharacterPosition;

public PacmanCharacter(GameBoard Board, Point CurrentLocation, int Width, int Height): base (Board, CurrentLocation, Width, Height) {

_currentCharacterPosition = CharacterPosition.Closed; }

public CharacterPosition Position {

get {return _currentCharacterPosition;}set {_currentCharacterPosition = value;}

}

public override sealed void Initialize() { GenerateCharacters(); }

public void AnimateDeath() {

}

public override sealed void Move() {

base.Move();

if (_currentCharacterState == CharacterState.Moving) _currentCharacterPosition = GetNextCharacterPosition(); }

Organize content by task Organize content by activity

CONTENT TYPEChomp

Pellets.csusing System;using System.Collections;using System.Drawing;using System.Drawing.Drawing2D;

namespace Chomp{

public enum PelletType { RegularPellet = 0, PowerPellet = 1 }

public class Pellets {

private ArrayList _pellets;private ArrayList _powerPellets;

private PelletType _pelletType;private SolidBrush _brushPowerPellet;

public const int POWER_PELLET_POINTS = 50;public const int REGULAR_PELLET_POINTS = 10;

public delegate voidonPowerPelletEatenEventHandler (object Source, PelletEventArgs e);

public event onPowerPelletEatenEventHandler OnPelletEaten;

public Pellets() {

_brushPowerPellet = new SolidBrush(Color.FromArgb(255,194,159)); }

public int RegularPelletCount {

get {return _pellets.Count;} }

public int PowerPelletCount {

get {return _powerPellets.Count;} }

public void BlinkPowerPellet() {

if (_brushPowerPellet.Color == Color.Black) {

_brushPowerPellet.Color = Color.FromArgb(255,194,159); }

else { _brushPowerPellet.Color = Color.Black; } }

File Overview

2

Name Valueaddress

City

State

Postcode 30332

null

{Name=”Atlanta”}

IDE WireframesSnippets

EXAMPLE: REFACTORING

Scenario:

Developer wants to extract a set of methods scattered throughout code to form new classes…

Developer sees candidate, send!

Main development task…

Now, enough snippets to get started!

REFACTORING WORKBENCH

Create new class!

public Point CenterPoint(Polyline line){ var first = line.Points.First(); var last = line.Points.Last(); return new Point((first.X + last.X) / 2, (first.Y + last.Y) / 2);}



Organize Generate!

Pellets.cs

13: public class Pellets42: public void BlinkPowerPellet()54: public void RemovePellet(Point Location)108: _powerPellets114: public void GeneratePellets()

GameBoard.cs

22: public class GameBoard54: public event PowerModeEventHandler62: public GameBoard(int Width, int Height,System.Windows.Forms.PictureBox PictureGameBoard)

wen=+netaEtellePnO.stellep_:66Pellets.onPowerPelletEatenEventHandler(PelletEaten);877:

//:388889: _powerMode

(fi:098(this, new EventArgs());891:892:

GameCharacter.cs

5:namespace Chomp13: public class Pellets19: _soundDevice=new Device();27: public abstract class GameCharacter35: protected int _moveInterval;215:CurrentCoordinate)

;++y:922;kaerb:032

256: {261:266:

esac:072.stelleP.draob_:172 GeneratePellets

274:;kaerb:772

282:

Pellets.cs


GameBoard.cs





GameCharacter.cs


;++y:922;kaerb:032

256: {261:266:


274:;kaerb:772

282:

Pellets.cs


GameBoard.cs





GameCharacter.cs


;++y:922;kaerb:032

256: {261:266:


274:;kaerb:772

282:

GameBoard.cs




(fi:098(this, new EventArgs());891:89

1

2

GameBoard.cs




(fi:098(this, new EventArgs());891:89

OTHER EXAMPLES

• Handing off a task to another developer.

• Navigation support.

See paper!.

IMPLEMENTATION

From vision to platform.

Lessons learned.

ActivityApp

Code PadEvents

IDE Notificatio

nService

Code PadActions

IDECommand

Service

IDE

Code PadServices

(Gestures, History)

Code PadView Manager

PLATFORM DESIGN

TOUCH

Manipulation

TouchDownTouchMoveTouchUp

id 1

id 2

Touch Actions Chomp

Pacman.cs

using System;using System.Drawing;using System.Drawing.Drawing2D;namespace Chomp{

public class PacmanCharacter : GameCharacter{

Bitmap _bmpCharClosed;Bitmap _bmpCharOpenMidLeft;Bitmap _bmpCharOpenMidRight;Bitmap _bmpCharOpenMidUp;Bitmap _bmpCharOpenMidDown;Bitmap _bmpCharOpenAllLeft;Bitmap _bmpCharOpenAllRight;Bitmap _bmpCharOpenAllUp;Bitmap _bmpCharOpenAllDown;

public enum CharacterPosition{

Closed = 0,OpenMidLow = 1,OpenMidHigh = 3,OpenAll = 4,

}

private CharacterPosition_currentCharacterPosition;

public PacmanCharacter(GameBoard Board, PointCurrentLocation, int Width, int Height): base (Board,CurrentLocation, Width, Height)

{_currentCharacterPosition =

CharacterPosition.Closed;}

public CharacterPosition Position{

get {return _currentCharacterPosition;}set {_currentCharacterPosition = value;}

}

public override sealed void Initialize(){

GenerateCharacters();}

public void AnimateDeath(){

}

public override sealed void Move(){

base.Move();

if (_currentCharacterState ==CharacterState.Moving) _currentCharacterPosition =GetNextCharacterPosition();

}

Raw input Resample Templates

GESTURES (SHAPED)

Match?

.59

.30

.90

OTHER FORM FACTORS…

TOMORROW'S INTERACTIONS

Code Canvas, DeLine, ICSE 2010

Code Bubbles, Bragdon ICSE/CHI 2010

http://www.cs.brown.edu/people/acb/

Your app?

CONCLUSION

QUESTIONS?

Your app?

Task vs. ActivityOther Devices

Missing Affordances

Multiple Pads Divided Attention

Platform Design

code pad

Technology

brushpowerpellet public

public class pellets

public void blinkpowerpellet

public int regularpelletcount

public int powerpelletcount

public void animatedeath

public void generatepellets

public enum pellettype