Animated Linked Lists

1
Animated Linked Lists
2
Goal

• Visualization and Animations are used to
  demonstrate the operations of Linked Lists

3
Objectives

• Build Single Linked Lists
• Deleting a Node
• Inserting a Node
• Adding a Node to the End
• Assigning a field value in the Node.
• Show the traversal of the Linked List during
  insertion and deletion.
• Option of Visualizing a node
• As a Button
• As a Block displaying the values of the Fields
  stored in the Node.

4
Proposed Single Linked ListsGUI
View
Head
N1
N2
X
Add Node at End
Insert As is a list giving the positions of nodes
and goes up to the last position in the current
list. Head is the header. Its not one of the
list elements. Its the pointer pointing to the
first node in the list.
5
(No Transcript)
6
(No Transcript)
7
UML Diagrams-Design of S/W
8
JApplet
JPanel
paintComponent(Graphics)
LinkedList
NodeView
init() disablebuttons() menuAction(String) addLast
Node(String) addLastNodeThread (String) addFirstNo
de(String) deletenode(int) deletenodeThread(int) a
ddnode(String, int) addnodeThread(String,
int) int listSize(Node) showAbout() getAppletInfo(
) setActions(boolean, boolean) setSpinnerValues(in
t)
NodeView(String) resetValues() markerreset() chang
eState(String) changeComponents() setNewNode(Node)
Node getNewNode() setStart(Node) Node
getStart() moveright(int) resetright() boolean
isfirstNode(boolean) addButtonView() update(Graphi
cs) paintComponent(Graphics)
Node
Node(String, Node) String getElement(Node) setElem
ent(String) Node getNext() setNext(Node)
9
State Diagrams for Repainting Add a Node
INITIAL
Add the first Node
NV/FIRST/BV
MOVE
Adding anywhere else
Adding Last
SETFIRSTPOINTER
SETLAST
SETSECONDPOINTER
SETALL
SETLASTX
10
State Diagrams for Repainting-Delete a Node
NV/FIRST/BV
MOVEDOWN
RESETFIRSTPOINTER
RESETSECONDPOINTER
No Nodes?
RESETALL
No and Deleted Node moves down.
Yes
11
Features of the Application Program

• A JSpinner is used instead of a JList/JComboBox.
  
• JSpinner displays only one value. No pull down
  menu. If the number of nodes is increased a pull
  down menu hides the GUI under it.
• Spinner model has a SpinnerNumberModel which
  when given a maximum value generates numbers from
  the specified minimum to the maximum(inclusive).
  This is useful for my application.
• Animations are not run in the Event Handling
  Thread. But in a separate thread.
• When the application is running all the user
  interface is disabled as clicking on any
  other buttons will affect the current operation
  performed on the linked list.
• While viewing the list as buttons the proposal
  said that a Dialog would pop-up showing the
  value stored in the Node, when clicked. But in
  the actual application every button has a
  JToolTip Text showing what the node stores.
• The linked list actually shows which node was
  newly inserted by filling the Node in Red color.
• For the convenience of a user there is a
  checkbox called tutorial.
• If tutorial is checked, then the traversal of
  nodes during deletion/addition are shown.
• If tutorial is not checked then during
  addition/deletion no traversal is shown.

12
Node
13
Drawing the Linked List

• ngetStart()
• canvas.drawRect(x, y, wd, ht)
• String label "Head"
• canvas.drawString(label, x5, y20)
• canvas.drawLine(x(wd-10),y, x(wd-10), yht)
• canvas.drawLine(xwd-5,yht/2,xwdgap, yht/2 )
• xxwdgap
• yy10
• while(n ! null)
• canvas.drawRect(x, y, wd, ht)
• label n.getElement()
• canvas.drawString(label, x5, y20)
• canvas.drawLine(x(wd-10),y, x(wd-10),
  yht)
• canvas.drawLine(xwd-5,yht/2,xwdgap,
  yht/2 )
• xxwdgap
• nn.getNext()
• canvas.drawLine(x, yht/2, x, yht)

14
Animation

• //Animation when the NODE moves to the correct
  position
• while(j ! 10)
• nodalview.changeState("MOVE")
• nodalview.repaint()
• synchronized (this) wait (200)
• j
• //Animation when the markers move to find a node.
• nodalview.changeState("SEARCH")
• while(marker2 ! null)
• i_insert
• marker1 marker2
• marker2 marker1.getNext()
• //Animation
• while(j ! 10)
• nodalview.repaint()
• synchronized (this) wait (200)
• j

15
AddLastNodeThread
16
Repaint-Searching for a node
17
Repainting - SETLAST / SETLASTX