Teamsketch

Institute of Information Systems and Computer Media (IICM)

1

Michael Spitzer Graz, 2015/01/22 Teamsketch

Teamsketch

Master’s Thesis Presentation

Michael Spitzer


2


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


Introduction

Teamsketch •  Sketch app for iPad

•  2-4 drawers

•  One sketch together simultaneously


4


Motivation

•  Train collaboration •  Develop and improve team skills

Collaboration: “A group of people tries to learn something together” [Dillenbourg, 1999]

Teamwork


5


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


Project environment

User management SOAP

Teamsketch SOAP


7


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


Frameworks

Environment: xCode 6 / Swift

Frameworks: •  Foundation Framework (HTTP connections, XML

parser, …)

•  Multipeer Connectivity Framework (Network communication)

•  UIKit / Core Graphics (Graphic related APIs)


9


Architecture

Main screen Login

Join sketch New sketch

Browser

Drawing

Store sketch Abort sketch


10


Architecture – user management

Main screen Login


Browser

Drawing



11


Architecture – multi peer connection

Main screen Login


Browser

Drawing



12


Multi peer connection

Advertiser •  Wants to join a

session

•  Accepts/declines invitations

Browser •  Browses all nearby

advertising devices

•  Invites to session


13


Architecture – sketch screen

Main screen Login


Browser

Drawing



14


Sketch screen

•  12 colors

•  2 stroke widths

•  Zoom (2x)

•  Line guides


15


Drawing Algorithms

Shown on the blackboard

Shapes: •  One touch circle (touchesBegan – touchesEnded)

•  Stroke (touchesBegan – touchesMoved – touchesEnded) •  Bezier Segment – cubic Bezier curve


16


Video demonstration


17


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


Frameworks / architecture

•  LAMP

•  PHP with SOAP extension

•  WSDL


19


Web interface

•  PHP •  SOAP client with WSDL

•  HTML

•  Smarty template engine (PHP) •  presentation layer •  Compiled (cache) •  Open source


20


Web interface •  Profile picture

(thumbnail)

•  Sketches

•  Thumbnail •  High resolution

download


21


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


Test setting

x

x


23


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


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


Sketch examples


26


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


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


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


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


End

Thank you!

References Dillenbourg, Pierre (1999). Collaborative learning: cognitive and computational approaches. 2nd Revised Edition. Emerald Group Publishing Limited.

Teamsketch

Education

Transcript of Teamsketch