SMS WhiteBoard

Chris Wallace, September 2005, September 2008

Introduction

This application is designed to explore the value of a simple collaborative white board based on a Web Browser with input from mobile phones via SMS. It is also a demonstration of dynamic DOM update and client-server interaction using the so-called AJAX style using the XMLHTTPRequest class of JavaScript, and of update and retrieval from a relational database.

Function

This application provides one or more instances of an electronic white board. Messages are sent to a board from a mobile phone by texting a message prefixed by a code allocated to each board. On receipt, the message is placed in a database of messages.

Pointing a browser to the white board viewer will display these messages as tiles on a surface. The viewer refreshes the display at intervals to keep the latency at an acceptable level. Much of the delay between sending and display will be in the SMS system.

Displayed tiles may be moved around the display, perhaps to allow the tutor to categorise messages. Messages can also be removed by dragging to a waste basket area. When a tile is selected, the upper part of the screen displays further information about the tile: part of the mobile phone number, the name (if known) of the sender and the full text of the message. The form allows the operator to reply to the message. This reply is added to the board, and may also be sent back to the originator.

Use Cases

Brainstorming class

A tutor is running a brain storming session with a group of twenty students. All have mobile phones. The room is equipt with a data project and an computer attached to the internet. The tutor hands out a guidance sheet which explains how the session will work, the phone number of the system and the prefix to use on messages to the board. The notes suggest that this number be keyed into the phone address book in anticipation. The student may even create a template with the prefix already typed. It is suggested that they first send a ME message to register a name or Nickname which will identify any further messages from that phone.

The tutor locates the board which he has previously created using the admin interface. She explains the issue to be brainstormed, and requests suggestions from the class. After some private thought, students text a suggestion. Messages begin to appear on the board as they are sent. They initially appear randomly in the area and the tutor drags overlapping ones into free space. As the discussion progresses, areas of the white board are used to classify the messages. Where a message is long, only the first few words are displayed but the full text, and the nickname of the sender if available, or the last 4 digits of the mobile phone number if not, is displayed when the tile is selected. Tiles which are similar can be overlapped; tiles which are redundant can be deleted.

When the discussion is exhausted, the tutor can request a printout of the board. This generates a page showing the full messages and the originator, and their location on the board which can then be saved or printed.

The board can then be cleaned ready for a new discussion, or answers to a chosen question.

Architecture

Database

The database comprises three tables: Board (for the layout of the Board and its SMS prefix), Tile (for the messages and their position on the display) and Person (for the Mobile Phone number and name of contributors). The database is implemented in MySQL.

SMS input

PHP scripts receive SMS messages received by the IS School SMS server. Two kinds of message are supported:

prefix message

the board with this prefix is located, and the message is randomly placed on the display. If new, a new Person is created holding the mobile phone number. (toBoard.php)

ME name

A new Person is created, with the sender’s name and mobilePhone number (toPerson.php)

Whiteboard display

The script to create and maintain an instance of a display of a board is display.php. This script generates an HTML page on which Javascript provides the functionality to create the layout of tiles, to update the display from the server periodically and to fetch and display the form for interaction with the board.

Communication with the server uses AJAX, wrapped up in a slightly modified CPaint interface from Boolean Systems, Inc. - www.booleansystems.com.

Tiles can be dragged around the display. This functionality uses the dob-drag libary from Aaron Boodman of http://youngpup.net. When a tile’s position is updated, the tile id and its coordinates are sent back to the server using AJAXt to invoke a function within the PHP script to update the position of the tile in the database.

When a tile is selected at the start of dragging, a request is sent to the server for an HTML fragment to show the full text of the tile, its sender and a form to allow the user to respond. The form data is sent back to the server, again with AJAX, a new tile created and if requested, an SMS message set back to the originator.

Tiles dragged to the waste basket area are deleted from the display and from the database.

Since updates to the Board in the database are being made concurrently by incoming SMS messages and by users on other displays, it is necessary to refresh the display at frequent intervals. A compressed text representation of the tiles in tile id order is requested by the client and these tiles are collated with the tiles in the DOM, updating matching tiles, inserting new tiles and deleting tiles in the DOM no longer on the server.