Mavigex parla al #WhyMCA 2012 e presenta l'architettura del sistema #SkyMedia. Un gruppo di aziende provenienti da tutta Europa sta mettendo a punto un sistema tecnologicamente innovativo per dare una marcia in più agli eventi sportivi, combinando tecnologie all'avanguardia come droni volanti, schermi immateriali, telecamere 3D, applicazioni mobili per iPhone iPad e Android e tracciamento delle prestazioni degli atleti in tempo reale. Tutte queste tecnologie sono combinate assieme per fornire ad atleti e spettatori una visione a 360 gradi dell'evento, con una prospettiva mai vista fino ad ora. Le prime dimostrazioni delle potenzialità di questo sistema sono state messe a disposizione della Maratona di Torino gia' dall'edizione 2011. Una peculiarità è la potenziale versatilità di tale sistema e la sua applicabilità a diversi scenari sportivi. Altri sport infatti potrebbero trarre vantaggio da queste tecnologie, quali il ciclismo, l'arrampicata sportiva e lo sci. Il talk illustrerà l'architettura e i componenti del sistema, e come sia stato possibile rendere accessibili al grande pubblico tecnologie fino ad ora limitate all'ambito di ricerca. Maggiori informazioni sul progetto al sito http://ict-skymedia.eu/skymedia/

1. Internet
UAV
Co-
localized
Multi-view
Operating
centre
SkyMedia – La tecnologia al servizio dell'intrattenimento
Massimo Neri & Claudio Bertozzi - Mavigex S.r.l.

2. The “SkyMedia” Project
 ICT Priority: 1.5 (Networked and Electronic Media)
 Project type: STREP
 Project start: Jan 1, 2010
 Project duration: 36 months
 8 European Partners
Website – www.ict-skymedia.eu
 Key Concepts:
• Augmented live event with immersive user experience
• 3D/HD Multimedia captured from Unmanned Aerial Vehicles (UAVs)
• Fusion with sensor information and ground-based capturing
• Innovative applications for the mobile eco-system

3. SkyMedia – Architecture Overview
3

4. 4
SkyMedia Experiences

5. 5
Pre-tests & Demonstrations
 Turin Marathon 2011 (Nov 2011)
• 25th anniversary, large participation
• Three-day event taking place over the weekend.
• Multiple events are co-located in the city of Turin:
• Multiple sport events (full marathon, half marathon, etc.)
• Evening concert
• Bands/streed artists
• Social network (Facebook page) already in place and active.
• --> First set of pre-tests
 “Tuttadritta” (April 2012)
• --> Specific set of integrated functionalities demonstrated
 Turin Marathon 2012 (Nov 2012)
• Large participation (overall 20k considering all events)
• SkyMedia Public final demonstration

6. Pictures from past events...

7. 7
Mobile application for runners
Setting up the equipment
SkyMedia Proprietary

8. 8
Checking 3D capturing and mobile applications
SkyMedia Proprietary

9. Amateur runners interested in the
Audience interested in Proprietary
SkyMedia demonstrations
interactive application
SkyMedia

10. Amateur runners interested in the
interactive application
SkyMedia Proprietary

11. 11
Instructing SkyMedia amateur runners
SkyMedia Proprietary

12. 12
12
10
8
Column 1
6 Column 2
Column 3
4
2
0
Row 1 Row 2 Row 3 Row 4
Live runner performance tracking
SkyMedia Proprietary

13. 13
Integrating UAV ground station
and Multimedia Service Platform
SkyMedia Proprietary

14. 14
QR code scan

15. 15
Mobile application to track runners
performance

16. Touristic sites web apps

17. 17
SkyMedia – Interactive Application

18. SkyMedia: i limiti imposti dall'architettura
• Acquisizione video da telecamere digitale e produzione
di stream video per dispositivi iPhone e iPad
• Acquisizione di dati di performance e geolocalizzazione
dei corridori
• Architettura dell'intero sistema precedentemente
progettata
• Uso di schermi touch screen da 46''

19. Streaming video
●
Dynamic HTTP
●
La scelta di HTML5
●
L'obbligo di Osx e Safari
●
Quicktime
●
Fullscreen di una web-app su Safari@OSx: “hacking” OSx

20. Streaming video
IPhone & iPad
Dynamic HTTP
Interactive
Application
●
Apple's Dynamic HTTP – HTTP Live Streaming
●
MPEG2 – TS → H264
●
Differenti bitrate, ottimizzazione della banda
●
Come visualizziamo un flusso video per iOS?
●
Quicktime X
●
<video> tag di HTML5.....solo su Safari@OSx

21. Fullscreen on OSx?

22. Fullscreen! con COCOA
Eseguire bundle COCOA come plugin di SIMBL (SIMple Bundle Loader)
•“Megazoomer” plugin (http://github.com/ianh/megazoomer)
Command + Invio

23. La definizione dell'app
●
Definizione delle funzionalità
●
Fruizione degli streams video live dalle telecamere
●
Visualizzazione dei corridori inquadrati dalla telecamera
selezionata
●
Visualizzazioni delle informazioni real time di
performance del corridore selezionato (battito cardiaco,
calorie consumate, km percorsi, …)
●
Visualizzazione dei corridori sulla mappa in real time

24. La definizione dell'app
●
Progettazione del layout grafico

25. Il backend
●
API REST lato server
●
Interrogazione polling da parte dei client
●
Restituzione di dati riguardanti:
●
Tempo atmosferico
●
Dettagli dei corridori
●
Performance in real time dei corridori
●
Numero e posizione delle telecamere
●
Identificativi dei corridori inquadrati ad un determinato
istante da una particolare camera

26. Il backend
Il formato dei dati
●
JSON vs XML
●
Importante ridurre la quantità di dati scambiati quando le
richieste sono tante per soddisfare l'esigenza di un quasi-
real time
●
Una tipica risposta XML è il doppio piu pesante della stessa
risposta in JSON:
356 B 745 B

27. Il backend
ISO timestamps
●
●
Standardizzare il formato in cui viene passata
l'informazione temporale tra tutti i
sottosistemi
●
Utilizzare un formato facilmente manipolabile
in javascript da “quasi tutti” i browser
●
ISO 8601:YYYY-MM-DDThh:mm:ss.sZ
(new Date('2012-05-25T11:00:00Z')).toString()
"Fri May 25 2012 13:00:00 GMT+0200 (CEST)"

28. Cross-scripting: JSONP? No Way!
• Il server sul quale gira l'applicazione non è lo stesso sul quale gira l'applicazione
di backend che fornisce i dati
• Javascript non consente il recupero dei dati da domini diversi
• JSONP? Non possibile perche il formato JSON di restituzione dei dati era gia stato
precedentemente definito
• Soluzione: proxy PHP “fatto in casa” con CURL, integrato nell'applicazione:
– Per ogni chiamata all'API remota x.x.x.x/firstApi?..... esiste una sottocartella “firstApi”
nella document root con dentro un file “index.php” così fatto:
<?php
$serverDomain = 'x.x.x.x';
$ch = curl_init();
// some manipulation on the request string
curl_setopt($ch, CURLOPT_URL, "http://$serverDomain".substr($_SERVER[REQUEST_URI], 0, n);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, false);
curl_setopt($ch, CURLOPT_FRESH_CONNECT, true);
curl_setopt($ch, CURLOPT_CRLF, true);
header('Cache-Control: no-cache, must-revalidate');
header('Content-Type: application/json');
curl_exec($ch);
curl_close($ch);
?>
Ora le chiamate “x.x.x.x/firstApi” possono essere fatte a “/firstApi” e
non verranno piu bloccate

29. Il framework: Sencha Touch
●
Framework altamente compatibile con Safari
●
Semplice gestione del layout di pagina e delle
animazioni
●
Gestione nativa delle chiamate Ajax e dei dati
prelevati dal server
●
Uso integrato di Sencha Chart per la creazione dei
grafici di visualizzazione dei dati di performance
●
Integrazione nativa dei video (<video> tag di
HTML5) e delle Google Maps©

30. Il framework: Sencha Touch
Semplice gestione nativa degli overlay:
SkyMedia.views.Meteo = new Ext.Panel({
width: 400,
height: 130,
layout: 'hbox',
floating: true,
hideOnMaskTap: false,
…..

31. Il framework: Sencha Touch
Gestione nativa delle chiamate Ajax e dei dati prelevati dal
server
Ext.regModel('Detection', {
fields: [
{name: 'macAddress', mapping: 'id', type: 'string'}
[ ]
{ });
"id": "44A7CF28CE88"
}, SkyMedia.models.CameraDetection = new Ext.data.Store({
{ autoLoad: false,
"id": "B407F926A245" model: 'Detection',
}, proxy: {
{ type: 'ajax',
"id": "c8aa21ad3909" noCache: false,
limitParam: undefined,
}
reader: {
]
type: 'json'
}
}
});

32. Il framework: Sencha Touch
Uso integrato di Sencha Chart
chartpanel.add ({
xtype: 'chart',
theme: 'Skymedia',
autoSize: true,
shadow: true,
id: 'chart',
store: runnerStore,
axes:
[...],
series:
[...]

33. Il framework: Sencha Touch
Uso integrato di video e Google Maps©
items: [
{
xtype : 'video',
id : 'myVideo',
width : 1280,
height : 720,
cls: 'video',
autoPause : false,
autoResume : false,
enableControls: false,
…....

34. Il framework: Sencha Touch
Uso integrato di video e Google Maps©
items: [
{
xtype: 'map',
id: 'geomap_map',
width: 580,
height: 635,
useCurrentLocation: false,
…...

35. Sencha Touch e la grafica
●
Il progetto richiedeva un layout grafico
customizzato in tutte le sue parti
●
Ricordiamo che l'applicazione non nasce come una
applicazione web mobile (che sono i target naturali
di applicazioni fatte utilizzando Sencha Chart)
Ridisegnare interamente il layout di ogni elemento del framework

36. Sencha Touch e la grafica
●
Sencha consente di specificare una classe CSS
aggiuntiva in ogni elemento:
SkyMedia.views.Meteo = new Ext.Panel({ .meteoInformation {
width: 400, left: 1200px;
height: 130, top: -140px;
layout: 'hbox', border: solid white 1px;
floating: true, border-radius: 15px !important;
hideOnMaskTap: false, background-color: rgba(0, 0, 0, 0.4) !important;
cls: 'meteoInformation', box-shadow: none !important;
}

37. Work in progress
Polling o Websocket?
●
var socket = new WebSocket('ws://x.x.x.x');
if (socket!=null) {
socket.onopen = function() {
document.getElementById("response").innerHTML='';
};
socket.onmessage = function (evt) {
console.log(evt.data);
}
}

38. Grazie dell'attenzione