From SAM
Jump to: navigation, search

A Dashboard provides a brief overview about individual information. Often, it is a single summary page which contains several dedicated widgets. These widgets represent information in a compact visual way. The selection of the information depends on KPIs (Key Performance Indicators) which are different from business to business. A dashboard can be aligned strategic, analytical, operational or informational. Every widget represents a KPI on its own way. Common ways are charts, tables or small texts.


Dashboard Example

A dashboard is most often an overall-information-overview. It connects different sources to retrieve the suitable information which will be presented in one view. The displayed Widgets are adaptable, so the user decides which information will be displayed and how it will be displayed. It is intended to display the appropriate information to the suitable user. The main focus of a dashboard is to transfer important information with minimum distractions. The core information should be reachable quickly and easily from the amount of information. Furthermore, the information is shown, supports the organized business with meaning and useful data. It allows responsible employees to react quickly for critical signs. At least a dashboard makes it possible to visualize overarching processes and to ensure transparency to all employees, who have access to it.

Relevance to SAM

A dashboard element, which is called Generic Dashboard, will be used in SAM for displaying the video element on the 1st Screen (Task T7.3 SAM 1st Screen Media Interaction) and additional information on the 2nd Screen (Task T7.2 SAM 2nd Screen Media Interaction). The task T7.4 SAM Multi-Device Dashboard will implement the Generic Dashboard component as a layer which not only contains different widgets using the Widget Manager, but also manages configurations of different devices and contents for the user. Therefore a Configuration Device Manager will be implemented, which includes the backbone models SAM Settings, User Profile, Device Specifications and GPS Coordinates. While the Configuration Device Manager communicates with the Identity and Security Services component, the Widget Manager communicates with Social Components, and the Syndicator component.

This approach will be supported by the Multi-Device Representation component, which will provide information so content can be displayed aligned to the current device. The Generic Dashboard will be implemented using HTML5, CSS and JavaScript technologies with the support of the frameworks AngularJS and Bootstrap.

State of the Art Analysis

GUI Elements

The most common GUI Elements to represent data are used in Widgets are charts, tables and small texts. Each single element describes and visualizes a KPI. It is crucial to choose the right graphical representation to interpret the element fast.


Charts are an easy way to visualize complex statistics, processes or similar occurrences. The observing user is capable to perceive the important information fast and allows him to react early for critical signs. Examples for a chart a histograms, bar charts, pie charts, line charts. They all can be used for individual data representation in their own context of use. Mostly clear charts are used, because they are quickly recognizable and interpretable.


Tables are often used to bring data in an order to get the strengths and weaknesses quickly. Tables consists of rows and columns. The first row and column are called header row or header column. They are describing the content of the following cells (e.g. currency or another unit of measurement). To create a better overview, every second row (alternative row) should have another background colour. In general it is recommended to use colour to delimit the data for the human eye.

Small Text

Small texts are used for small status updates or customer feedback (e.g. social media). Text blocks should only be used if there is no other opportunity to visualize information but are too important to ignore. A text block needs more perception than other visualization methods to get the required information, therefore it is necessary to keep the text short. It is not recommended to use more than 2 text boxes in one Dashboard.

Related Projects


Geckoboard is a business dashboard service which integrates many different widgets.[1]


Statusboard is a dashboard app for iOS which also delivers different information in a compact manner. [2]

SAM Approach

As a dashboard the Generic Dashboard component provides the End User with a Graphical User Interface for the interaction with the SAM platform. This component provides two modes: One mode for the 1st Screen, where this component displays the video element and one mode for the 2nd Screen, where it displays additional information in the context of the current video.

Architecture and Dependencies

  • The Generic Dashboard holds a collection of common elements that the 1st and 2nd Screen components will use. Everything defined in Generic Dashboard can be used on either of the screens.
  • Through the Dashboard Control and the Widget Manager, metadata is distributed to the appropriate widgets.
  • The Generic Dashboard interacts with the Social Components, the Syndicator, the Identity and Security Services and an external video source.


Implementation and Technologies

The Generic Dashboard subcomponents have been implemented as AngularJS services and controllers. Widgets can use these services for messaging, receiving content and social components communication. The communication between Widgets and Syndicator or Social Components is handled by the Widget Manager service. The communication between Widgets, present either on the same Generic Dashboard or across 1st and 2nd Screen devices, is handled by Dashboard Control service.


A summary of the tasks carried out for each subcomponent of the first version of the prototype is shown in the following table.:

Subcomponent Task
Video Viewer Obtaining list of available streams from video source, selection and streaming of video.
Dashboard Control Provide JavaScript interfaces for communication.
Widget Display and control user interface widgets on the Dashboard.
Widget Manager Provide JavaScript interfaces for updating widgets content.
Widget Workspace Manager Display and control support of the Widgets. Display of SAM settings.
Configuration Device Manager Provide JavaScript interfaces for device information.

Functionality and UI Elements

The Generic Dashboard component has two modes: 1st Screen and 2nd Screen. Both will be introduced in the next subsections.

1st Screen

The 1st Screen mode will be used to show the video element. If you start the SAM app on a Smart TV, the 1st Screen mode is activated automatically. The End User can control the video as normal for a video element in a browser.

1st Screen screenshot1.png

2nd Screen

The 2nd Screen Mode provides the following features:

  • Additional information based on the video element
  • Social Media interaction
    • Consuming Twitter and Facebook posts
    • Creating new Tweets or Facebook posts (Social Media accounts needs to be linked to the SAM app)
  • Remote control of the video element

Latest Developments

The following features have been added to the Generic Dashboard component:

  • Two-tabbed design providing related content on one side and SAM Dynamic Communities on the other side.
  • Preloading of related content before the video starts
  • Providing suggested content based on the Context Control component in a separate tab
  • Providing different widget types like the Product widget, the Wikipedia widget or the Discover widget.
  • QR code providing connection details


  1. Geckoboard - http://www.geckoboard.com/
  2. Statusboard - https://panic.com/statusboard/