iGot: Visualizing the GteborgsVarvet half marathon

3D map and interactive software for large touch screen displays

Robert Sebescen
Chalmers University of Technology
sebescen@student.chalmers.se

Er Luo
Chalmers University of Technology
erlu@student.chalmers.se

Xiaochen Zhang
Chalmers University of Technology
xiaochen@student.chalmers.se

John Luc
Chalmers University of Technology
lujohn@student.chalmers.se

Leontios Sakellis
Chalmers University of Technology
leontios@student.chalmers.se

ABSTRACT
Visualization of real-time data has become an increasingly important topic for large sporting events such as the G oteborgsVarvet half marathon race. This project attempts to provide an experience with a booth set up for spectators in such events. Current products are primarily based on the usage of mobile networks, such as apps and websites. Because of the large amount of phone calls and text messages that get sent during the race, this is not a viable option for real-time visualization. The proposed solution is to invite interested audience members to an information booth, set up near the start and nish areas of the races. The booth consists of a number of computers connected to touch-screen monitors. The computers are set to run our software application iGot, which includes a 3D map maneuverable by touch gestures on the screen, as well as real-time information about the race. The main advantage of this solution is that it circumvents the problem of the mobile network by using the existing local area network (LAN) of G oteborgsVarvet. It is also a viable option to use in other sporting events, and the GUI may be enhanced or diminished depending on needs of the clients. One drawback of this solution is that the number of checkpoints for the runners must be increased for better predictions of positional locations and estimated arrival times. Another is that there needs to be a unied interface for handling events of multitouch monitors.

1.

INTRODUCTION

G oteborgsVarvet[1] is a major annual sporting event in the city of Gothenburg, Sweden. The main event is a half marathon race, but there are also smaller events hosted during the event week. During the main marathon, nearly a hundred thousand spectators crowd along the streets to see and cheer for their favorite runners. As a vast amount of visitors are expected to come every year, the mobile networks tends to be overloaded and are therefore deemed not reliable as a tool to deliver information. Various attempts have been done to solve this problem, but a feasible solution is unlikely to come in next few years. Organizers themselves claim that G oteborgsVarvet is Europes best running event which contributes to better health and a festive atmosphere for both runners and audience. In order to do this, they constantly ll the event area with dierent side activities[2]. As a member of the audience, it might not be easy to keep track of what is going on in the event area, both on and o the track. The goal of this project is to identify needs of the audience in order to gather information about runners, as well as events occuring elsewhere. A secondary goal is to provide information about the city and promote less known areas to non-local visitors. The solution must be within some constraints the that designers identied.

Keywords
3D map, information visualization, multi-touch gestures, G oteborgsVarvet

As mentioned earlier, the solution must not rely on the mobile network, such as mobile application or website for end-users. The nal product will make use of G oteborgsVarvets own Local Area Network (LAN) for gathering of real-time data. Runners should not be required to wear any extra equipment. The current RFID tag readers should sufce. End users of the product, i.e. members of the audience should have a familiar and intuitive way of interacting with it, and gather their requested information as quickly as possible. The process should take no longer than a few minutes.

2.

METHOD/PROCESS

The ideation process lead to a proposed solution of having a booth set up with some equipment that allows interaction for members of the audience in some way. The concept with the booth remained during both iterations of the project, albeit with changes of what activities the end users actually perform. Having a booth with interactive software set up adheres to the constraints of network usage, provided that organizers can supply local internet access. It also acts as a natural crowd-gathering area, which means extra opportunities for sponsors to advertise, and this in turn brings extra income to the organizers.

ics pipeline for normal DirectX/OpenGL programming, as well as having capabilities to export binaries for most major operating systems [7].

3.

RESULT

The result of this project is a functional prototype which serves to deliver information about the current status of the race, activities around the track, and well-known buildings in the city. Given the limited time of the project, all components of the software were not nalized. However, the prototype that the authors present is in a functional condition for the client, dubbed iGot, short for Interactive G oteborgsVarvet. As previously mentioned, the solution involves setting up booths containing computers connected to touch-screen monitors. These are intended be set up to run the nal version of the software, which consists of the following components, map and interface.

2.1

First iteration

In the rst iteration of the project, a concept of a booth with two Microsoft Kinect system was developed during the ideation process. The rst system is used as a game platform where participants can play and get a high score, and then go to another to record a cheer for a friend or family member participating in the race. This would help the G oteborgsVarvet organizers by having a natural lter for which cheers would be chosen to appear on the big screens as runners pass by the checkpoints. The end result would be that the audience would have the opportunity to watch their chosen runner as they pass by their cheer. During the ideation phase, a survey was conducted using the G oteborgsVarvet Facebook group and other similar sporting groups. The client disapproved of this method because they wanted to use their data of participants and spectators of the race. On the authors side, this lead to lack of belief to bring a good design that provides an interaction solution between audience and runners for this large concept. As this idea poses some ambiguity over which interaction part should have more priority for the users, it became necessary to narrow the idea further.

3.1

Map

The default view of the iGot software is a 3D interactive map of the event area in G oteborg City. The user can use standard touch-screen gestures in order to interact with the map in the following ways: Panning: Holding and moving one nger on the screen will pan the map in that direction. Zooming: Holding one nger while pinching another in and out will zoom the map in and out, respectively. A gesture for rotating the map using the standard two nger rotational gesture (holding one nger while moving the other in the desired direction) was implemented in the early stages of the software. However, it was discarded due to performance issues, as the underlying operation is algorithmically expensive. Despite this leaving the rotation out also makes the map interface simpler to use as it doesnt require users to reorient themsleves (provided that users are familiar with a north-up display of maps). As these gestures are standard for most map applications for smartphones, it is believed that users should feel the interface is intuitive and natural. Should they feel unfamiliar with this kind of interface, there is a help button in the menu. A 3D map was chosen for the visualization instead of a 2D one as it allows users to locate themselves more easily and have a better spatial frame of reference. It can thus be said that the 3D visualization aids in situational awareness for the user.

2.2

Second iteration

The second iteration of the idea kept the main concept of having a booth set up, but this time focusing on an individual of the audience and their interaction with the event. This resulted in a concept about visualizing the information about runners in real-time as the event progresses. Combining this with a touch-screen interfacee would yield a new interactive experience for members of the audience. Early mockups of the idea were done using the Google Maps API [3] as well as WebGL (using the Javascript 3D library three.js [4] library). Internal specications revealed however that it is necessary to make a 3D model of the race, as well as an intuitive, custom-built interface in order to access and lter data (further explained in the Results section). For these reasons, a prototype model of G oteborg city was created in 3DS Max along with layers of important data, such as the track and important buildings. For programming the touch interface, the authors decided to use the Unity 3D Game Engine. Unity has the advantage of abstracting or simplifying many steps in the graph-

3.2

Interface

The iGot map uses grayscale color coding rather than full coloring. Initially a full color model was exptected to bring a more vivid interaction experience for users. However the abscence of colors indicated a more focused attention on the track and highlighted buildings instead. Ware[5] claims that a good visualization should allow users to drill down and

Figure 1: The standard map screen, showing G oteborg city overlaid with the track of G oteborgsVarvet.

Figure 2: Runners were found through their names using the search interface with an on-screen keyboard. The found runner is highlighted with an arrow oating above their avatar.

3.2.2
nd more data about anything that seems important and be capable of displaying more information when needed. This identies specied objects like the track, runners and important buildings from background with dierent colors. As seen in gure 1 above, the GUI was expanded to include a menu bar on the bottom with some basic information about News, Photos, Progress, Statistics, Sponsors and Help with the event. In the top right of the application lies some functions which interact directly with the map or components of it. These are Find Runner, Filter, Quick Lookup in order to nd out more about particular things they would like to know during this event.

Filter

A Filter tab was included in the interface in order to allow users to customize the maps apperance according to their preferences. It was created to provide more interesting and practical services for the users. Users could easily lter the map to reveal checkpoints and depoes, places of the sponsors buildings as well as other activities by simply checking the appropriate checkboxes.

3.2.3

Information for events

3.2.1

Information about runners

Certain people in the audience could be interested in the various events held in areas around the track. The map could be used to acquire information about these events and get a grasp of where they are located in the city. These events have the purpose of promoting the marathon race, whereas marking well-known buildings on the map is providing information about the city.

As runners approach checkpoints during the race, the users of the software can see the runners progressing on the map by overlaying the track. As G oteborgsVarvet does not track its runners in real-time but rather only note the time they pass through a certain amount of checkpoints, it would seem impossible to track runners of the race on the map. A proposed solution for this is to have virtual runners running at an approximated pace, and recalculating their speed every time they pass a checkpoint. Thus, if G oteborgsVarvet would be willing to set up more checkpoints, this data would become more accurate. In order to distinguish individual runners more easily, the iGot user can tap on the Find Runner tab to bring up a search box, where they can nd current position and times of any runner after typing in their names (as shown in gure 2) or numbers in the race. The current prototype version of iGot generates runners programatically that follow the track in a sped-up manner. No data from G oteborgsVarvet is gathered for this simulation. In order to maximize accuracy for the nal software, the G oteborgsVarvet organizers will be recommended to place more checkpoints around the track in order for the RFID tags to register times. The current checkpoints are set up only at ve kilometer intervals, which means that information about slow runners may cause delays up to 30 minutes.

3.2.4

Information for tourists

In order for the iGot software to be usable even after big events such as the G oteborgsVarvet race, the interactive map can be used for tourists. If the software gets provided with information about buildings and other tourist attractions, the model can be updated so that when users may tap on these buildings to nt out more about them. In the prototype interactive buildings are highlighted in a light blue color.

4.

DISCUSSION

While iGot doesnt bring any revolutionary new ideas to the table, the group is satised with it as a concept. It solves the problem of providing real-time information that is easily retainable, while being in the constraints of the domain. The interface of iGot is easy to use, and having the 3D map interaction in a touch screen is going to be entertaining as well as informative to use. The authors would like to back these statements up with user tests and feedback from the client. As mentioned earlier, the main advantage of having the setup with the booth is that it draws the attention of people, and this in turn means that sponsors can take advantage of the space for advertising, thus bringing income to the event

organizers. If iGot should be used in production however, it needs to be supplied with more frequent data about the runners. From the information provided of the client, this could be a plausible enhancement of the race in the future. On the technical side, the booth needs to run on the organizers own local area network (LAN) because of the mobile network usage spiking during the main event. There is however another drawback with the solution if we were to develop it for mobile devices. Although Unity can export binaries into iOS and Android devices, our interface is more suitable for large displays or displays with high resolution. Furthermore, it is also crucial that for larger touchscreens running on standard PC operating systems that there is a uniform programming interface for handling touch events. The monitor we used for testing out with, a Dell ST2220T model, sends touch input to the computer via USB as mouse movement. This has the advantage that it is possible to simulate touches using simple mouse detection events in Unity. There was however no public API for detecting multitouch events natively, and this poses a problem for maintenance of code. The interface of iGot is highly exible and can be enhanced with more features such as integration with live feeds form course cameras or Twitter. The colors and fonts can be adapted for client needs. The map can be remodelled to t locations of more activities or if the city skyline changes. The track is also a separate layer of the city model, which means that should the track change, the model doesnt necessarily change with it.

as entertaining, and poses many advantages over traditional means of visualization from dierent aspects. Although the current version of iGot is far from nal in many aspects, it does provide a new way of displaying the information for spectators. It also helps users overcome the diculty by providing real-time information of the event. This 3D information map was developed in a sustainable way. The map itself could be easily reused as all the elements placed on it were developed separately thus they are not dependent on each other. Replacing the runners with other kinds of objects and changing the functionality that currently exist in the system then would not need too much eort. Making this map as a frame for other events should probably be quite easy for the designers.

6.

ACKNOWLEDGMENTS

The authors would like to thank Peter Ljungstrand for lending us testing equipment, Staan Bj ork and Josef Widestr om for project supervision and Johan P alshammar from G oteborgsVarvet for supplying us with event information.

7.

REFERENCES

4.1

Future work

There is a lot of work left to be done in order to make the iGot project richer and more practical in the future. More data shoule be involved into this project to make it more realistic. Designers can take the opportunity of discussing needs with the client and developers to reveal concrete specications. Naturally, the product needs to be integrated with current event information and having runners showing up at their correct locations instead of running with dynamically set speed around the track, as simulated in our prototype. iGot also needs to be user tested to verify ease of use, as well as seeing any practical problems. It might be also possible to look into the performance requirements of the code to see if its possible to run it more smoothly on PCs with cheaper hardware. Designers can also choose to add other components to the booth to match our previous idea with the cheering. This is not necessary for the iGot project in itself, but can be thought about as solving the interaction problem between audience and runners, as well as increasing the festive atmosphere according to the clients wishes.

[1] G oteborgsVarvet www.goteborgsvarvet.se, Retrieved 2013-10-10 [2] Josef Widestr om 2013, Event presentations Project ideas Good examples [3] Google Developers - Maps API https://developers.google.com/maps/ Retrieved 2013-10-10 [4] three.js - JavaScript 3D library http://threejs.org/ Retrieved 2013-10-10 [5] Ware, C. (2012) Information Visualization: Perception for Design, 3rd ed. Elsevier [6] AutoDesk 3DS Max http://www.autodesk.se/ products/autodesk-3ds-max/overview Retrieved 2013-10-10 [7] Unity - Game Engine http://www.unity3d.com Retrieved 2013-10-10

5.

CONCLUSIONS

The role of information visualization during large events like the G oteborgsVarvet is an important eld of study, and we have presented iGot as a solution. It is informative as well