Download - Code Pad
![Page 1: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/1.jpg)
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
![Page 2: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/2.jpg)
Visualization: Introducing a new species into an environment.
ECOSYSTEMS
![Page 3: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/3.jpg)
SUCCESSFUL INTRODUCTIONS…
RICH INTERACTION IN ENVIRONMENT
How do I survive in the wild?
![Page 4: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/4.jpg)
SOFTWARE DEVELOPMENT
ECOSYSTEM?
Resource-starved and isolated
![Page 5: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/5.jpg)
Programming
Team/SocialCognitive
Planning/Task
Engineering
ISLANDS OFACTIVITY
![Page 6: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/6.jpg)
Scribble on code.
Keep its items in a mental workspace.
Share and interact with others.
WHY CAN’T WE….
![Page 7: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/7.jpg)
INTRODUCINGCODE PAD
A platform first, a device second.
Outline• Design• Examples• Implementation• Future
![Page 8: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/8.jpg)
DESIGNContent
Actions
Programming activities Secondary activities
Automaticor
Manual
![Page 9: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/9.jpg)
WHY NOT ANOTHER DISPLAY?
• Social Mobility and Sharing (collaboration, meetings, hand-off)
• Alternate Modality (pen, multi-touch)
• Spatial Affordances (push aside, stacking)
![Page 10: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/10.jpg)
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
![Page 11: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/11.jpg)
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
![Page 12: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/12.jpg)
EXAMPLE: REFACTORING
Scenario:
Developer wants to extract a set of methods scattered throughout code to form new classes…
![Page 13: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/13.jpg)
Developer sees candidate, send!
![Page 14: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/14.jpg)
Main development task…
Now, enough snippets to get started!
![Page 15: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/15.jpg)
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);}
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);}
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!
![Page 16: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/16.jpg)
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
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
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:
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:89
1
2
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:89
OTHER EXAMPLES
• Handing off a task to another developer.
• Navigation support.
See paper!.
![Page 17: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/17.jpg)
IMPLEMENTATION
From vision to platform.
Lessons learned.
![Page 18: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/18.jpg)
ActivityApp
Code PadEvents
IDE Notificatio
nService
Code PadActions
IDECommand
Service
IDE
Code PadServices
(Gestures, History)
Code PadView Manager
PLATFORM DESIGN
![Page 19: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/19.jpg)
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();
}
![Page 20: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/20.jpg)
Raw input Resample Templates
GESTURES (SHAPED)
Match?
.59
.30
.90
![Page 21: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/21.jpg)
OTHER FORM FACTORS…
![Page 22: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/22.jpg)
TOMORROW'S INTERACTIONS
![Page 23: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/23.jpg)
Code Canvas, DeLine, ICSE 2010
Code Bubbles, Bragdon ICSE/CHI 2010
![Page 24: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/24.jpg)
Your app?
CONCLUSION
![Page 25: Code Pad](https://reader036.vdocument.in/reader036/viewer/2022062320/55909bb71a28ab01088b45ef/html5/thumbnails/25.jpg)
QUESTIONS?
Your app?
Task vs. ActivityOther Devices
Missing Affordances
Multiple Pads Divided Attention
Platform Design