Design
In our project we created an Android application called Robo-Monitor. Android applications consist of a number of activities, where each activity has its own GUI. The Robo-monitor consists of 3 activities:
Channels overview screen
This is the initial screen which opens when the user opens the application. It shows all channels for which there is data arriving, with some statistics about the data like bandwidth, frequency, and values.
Since there could be many channels, the user can "star" certain channels and hide all the rest.
TODO screenshots
Graph overview screen
This screen presents a graph widget which allows the user to observe how data has changed over time.
It allows the user to use touch gestures to scroll and zoom. We also provided "Track" functionality so that they can watch the data stream as it appears in real time.
TODO screenshots
Graph traces selection
The graph widget can display multiple graphs at the same time (see screenshots).
We provide a utility for the user to select which traces are shown and easily change that
TODO screenshots
Implementation
We used a combination of standard and custom widgets. We based our main visualization tool - the graph widget on a open source calculator app called Arity. We added our improvements on top of their widget and in the process fixed several bugs in it. We plan to submit a patch upstream and contribute back. We improved the scrolling and zooming of the graph and added multiple graphs to it. The graph widget is implemented as a canvas screen which is redrawn periodically depending on a software timer. TODO Andy can you confirm this?
Our channel overview screen contains star widgets. They are implemented by an ImageView and a corresponding boolean variable. Their functionality is almost identical to checkboxes, and it was easier to create this functionality that to modify the checkbox layout and integrate with expandable lists.
Expandable lists: in channel overview screens, and "Add Trace" TODO
Backend : asynchronously getting data TODO explain
Updating GUI periodically: asynchronous task again.
TODO star bolding
TODO graph labels size
Evaluation
We tested our interface with 3 robotics researches from MIT. All of them were possessed Android phones. We think this is important, so that they are familiar with Android's app conventions (such as using the menu button to explore what you can do).
Briefing
Since the users have the background knowledge that channels are dependent on the robot, and since we had fake data we had the following briefing:
"We have built an interface for visualization of LCM streaming data. We support only few types of channel data structures: those, which have only one layer of sub-components which take float values. Try using the app in order to explore the data stream."
We didn't create very specific tasks - instead we wanted to see which parts of the app the users will discover and depending on that we gave them few high-level directions (in case they didn't try it on their own):
- Use the stars.
- Explore a channel.
- Get multiple graphs to show.
User 1:
We estimate this user's initial Android skills as HIGH:
Observations:
The user didn't use stars right away, but rather selected a channel component and started looking at the graph. He commented that the graph seems very intuitive, and liked the zoom out and track ideas. He mentioned that clicking on a component and getting the graph immediately is a very direct way to observe the data and liked that it feels fast. He explored the menu in the graph which allowed him to select traces to be shown in the graph. We didn't observe any difficulty for him when he added traces.
When he returned to the main screen he wasn't really sure what the stars are for. He commented that it would be nice if there was a way to add traces using the star functionality. He also suggested that one can hold-tap over a channel to see possible options (such as plotting all components, or starring all components, etc.)
Interpretation:
User 2:
We estimate this user's initial Android skills as MEDIUM:
Observations:
This user spent more time than the first one on the channel overview screen. He noticed the channel statistics and the component values and tried opening and closing different channels. He was starting to cycle through his actions and asked us if there is a way to plot some of the data in 3D when he clicked on a channel component (called "x") and that brought him to the graph. He used the buttons to track the graph and to zoom-in / zoom-out. He also moved the graph up and down but didn't discover that it is possible to use multitouch to zoom in and out.
Interpretations: