Masterpresentation at Graz University of Technology, January 2015

1. Institute of Information Systems and Computer Media (IICM)
1
Michael Spitzer Graz, 2015/01/22 Teamsketch
Teamsketch
Master’s Thesis Presentation
Michael Spitzer

2. Institute of Information Systems and Computer Media (IICM)
2
Michael Spitzer Graz, 2015/01/22 Teamsketch
Overview
• Introduction
• Motivation
• Research goal
• Project environment
• iPad App
• Web Service
• Web Interface for students and teachers
• Field study at a primary school
• Conclusion

3. Institute of Information Systems and Computer Media (IICM)
3
Michael Spitzer Graz, 2015/01/22 Teamsketch
Introduction
Teamsketch
• Sketch app for iPad
• 2-4 drawers
• One sketch together simultaneously

4. Institute of Information Systems and Computer Media (IICM)
4
Michael Spitzer Graz, 2015/01/22 Teamsketch
Motivation
• Train collaboration
• Develop and improve team skills
Collaboration:
“A group of people tries to learn something together” [Dillenbourg, 1999]
Teamwork

5. Institute of Information Systems and Computer Media (IICM)
5
Michael Spitzer Graz, 2015/01/22 Teamsketch
Research goal
• Prototype drawing app for iPad
• One real-time sketch, 2-4 drawers simultaneously
• Observation of collaborative learning capabilities
• Field test at a primary school

6. Institute of Information Systems and Computer Media (IICM)
6
Michael Spitzer Graz, 2015/01/22 Teamsketch
Project environment
User management SOAP
Teamsketch SOAP

7. Institute of Information Systems and Computer Media (IICM)
7
Michael Spitzer Graz, 2015/01/22 Teamsketch
iPad app
Requirements:
• No WiFi infrastructure necessary
• No server - multi peer infrastructure
• Bluetooth support
• Real-time sketch update
• Line smoothing, curve fitting algorithms
• 2-4 drawers simultaneously
• User management (optional)
• Sketch up- and download (optional)

8. Institute of Information Systems and Computer Media (IICM)
8
Michael Spitzer Graz, 2015/01/22 Teamsketch
Frameworks
Environment: xCode 6 / Swift
Frameworks:
• Foundation Framework (HTTP connections, XML
parser, …)
• Multipeer Connectivity Framework (Network
communication)
• UIKit / Core Graphics (Graphic related APIs)

9. Institute of Information Systems and Computer Media (IICM)
9
Michael Spitzer Graz, 2015/01/22 Teamsketch
Architecture
Main screen Login
Join sketch New sketch
Browser
Drawing
Store sketchAbort sketch

10. Institute of Information Systems and Computer Media (IICM)
10
Michael Spitzer Graz, 2015/01/22 Teamsketch
Architecture – user management
Main screen Login
Join sketch New sketch
Browser
Drawing
Store sketchAbort sketch

11. Institute of Information Systems and Computer Media (IICM)
11
Michael Spitzer Graz, 2015/01/22 Teamsketch
Architecture – multi peer connection
Main screen Login
Join sketch New sketch
Browser
Drawing
Store sketchAbort sketch

12. Institute of Information Systems and Computer Media (IICM)
12
Michael Spitzer Graz, 2015/01/22 Teamsketch
Multi peer connection
Advertiser
• Wants to join a
session
• Accepts/declines
invitations
Browser
• Browses all nearby
advertising devices
• Invites to session

13. Institute of Information Systems and Computer Media (IICM)
13
Michael Spitzer Graz, 2015/01/22 Teamsketch
Architecture – sketch screen
Main screen Login
Join sketch New sketch
Browser
Drawing
Store sketchAbort sketch

14. Institute of Information Systems and Computer Media (IICM)
14
Michael Spitzer Graz, 2015/01/22 Teamsketch
Sketch screen
• 12 colors
• 2 stroke widths
• Zoom (2x)
• Line guides

15. Institute of Information Systems and Computer Media (IICM)
15
Michael Spitzer Graz, 2015/01/22 Teamsketch
Drawing Algorithms
Shown
on the
blackboard
Shapes:
• One touch circle (touchesBegan – touchesEnded)
• Stroke (touchesBegan – touchesMoved – touchesEnded)
• Bezier Segment – cubic Bezier curve

16. Institute of Information Systems and Computer Media (IICM)
16
Michael Spitzer Graz, 2015/01/22 Teamsketch
Video demonstration

17. Institute of Information Systems and Computer Media (IICM)
17
Michael Spitzer Graz, 2015/01/22 Teamsketch
Web service
Requirements:
• Authentication against already existent user
management
• Students - Sketch up- and download
• 1 profile picture (2 resolutions)
• 3 sketches (2 resolutions)
• Teacher – Sketch access (students in class)

18. Institute of Information Systems and Computer Media (IICM)
18
Michael Spitzer Graz, 2015/01/22 Teamsketch
Frameworks / architecture
• LAMP
• PHP with SOAP extension
• WSDL

19. Institute of Information Systems and Computer Media (IICM)
19
Michael Spitzer Graz, 2015/01/22 Teamsketch
Web interface
• PHP
• SOAP client with WSDL
• HTML
• Smarty template engine (PHP)
• presentation layer
• Compiled (cache)
• Open source

20. Institute of Information Systems and Computer Media (IICM)
20
Michael Spitzer Graz, 2015/01/22 Teamsketch
Web interface
• Profile picture
(thumbnail)
• Sketches
• Thumbnail
• High resolution
download

21. Institute of Information Systems and Computer Media (IICM)
21
Michael Spitzer Graz, 2015/01/22 Teamsketch
Field test
Primary school – 3rd grade
Test setting:
• Teams with 2,3 or 4, members selected by the teacher
• All team members at one big desk (face-to-face communication)
• Heterogenic device network (iPad 2,3,4 and iPad Air)

22. Institute of Information Systems and Computer Media (IICM)
22
Michael Spitzer Graz, 2015/01/22 Teamsketch
Test setting
x
x

23. Institute of Information Systems and Computer Media (IICM)
23
Michael Spitzer Graz, 2015/01/22 Teamsketch
Test procedure
• Short introduction
• Group of four è two groups of two
• Sketch topic
• Drawing
• Groups of two merged to group of four
• Sketch topic
• Drawing
• Reflection

24. Institute of Information Systems and Computer Media (IICM)
24
Michael Spitzer Graz, 2015/01/22 Teamsketch
Field test evaluation
Video:
Sketch video (groups of 2,3)
Macbook joined active session è video recording
Images:
Screenshots of the finished sketches
Audio:
Transcription of children’s discussions while drawing
Children’s and teacher’s feedback:
Questionnaire

25. Institute of Information Systems and Computer Media (IICM)
25
Michael Spitzer Graz, 2015/01/22 Teamsketch
Sketch examples

26. Institute of Information Systems and Computer Media (IICM)
26
Michael Spitzer Graz, 2015/01/22 Teamsketch
Field test - lessons learned
• Collaboration
• Some children did not like drawing together
• Felt pen switching process was not intuitive
• Felt pen color change too sensitive
• White felt pen VS rubber
• Zoom function was not used
• Clear sketch issue

27. Institute of Information Systems and Computer Media (IICM)
27
Michael Spitzer Graz, 2015/01/22 Teamsketch
Conclusion - challenges
• App programming with new language (beta)
• Literature
• Experience
• Performance
• Time critical multi-threading programming with
heterogenic device support (iPad 3)
• Programming for outdated infrastructures
• Interface app çè web service
• User interface for children

28. Institute of Information Systems and Computer Media (IICM)
28
Michael Spitzer Graz, 2015/01/22 Teamsketch
Conclusion – Summary
þ Collaborative iPad sketch app for 2-4 players with
real-time screen updates
þ No network infrastructure needed
þ Collaborative learning, team work capabilities
confirmed during field test

29. Institute of Information Systems and Computer Media (IICM)
29
Michael Spitzer Graz, 2015/01/22 Teamsketch
Conclusion - what’s next ?
• Improvement of the app (feedback from field test)
• Presentation at the EdMedia 2015 - World
Conference on Educational Media and
Technology in Montréal, Québec, Canada (June
2015)
• Development of a commercial collaborative sketch
application aimed at designers.

30. Institute of Information Systems and Computer Media (IICM)
30
Michael Spitzer Graz, 2015/01/22 Teamsketch
End
Thank you!
References
Dillenbourg, Pierre (1999). Collaborative learning: cognitive and computational approaches.
2nd Revised Edition. Emerald Group Publishing Limited.