Your SlideShare is downloading. ×
0
Angelo Coccettini – September 2013
The Ostia Antica Park is one of the largest and most important archaeological
sites of ...
Angelo Coccettini – September 2013
An Archaeological Guide for Android devices
The main menu of the app for Android smartp...
Angelo Coccettini – September 2013
Specifications
• 3 Languages: english, french and italian selectable within the App
• 4...
Angelo Coccettini – September 2013
Application Architecture
The app uses a unified interface that adapts to screen resolut...
Angelo Coccettini – September 2013
Application Architecture for Tablets
For large Smartphones or Tablet the application us...
Angelo Coccettini – September 2013
Layouts
The application offers 4 different layouts for a optimal contrast in darkness o...
Angelo Coccettini – September 2013
Layout Implementation
Layout have been implemented using the Android Theme functionalit...
Angelo Coccettini – September 2013
Layout Implementation
Angelo Coccettini – September 2013
Custom HTML Tags
The app uses standard HTML to display content. Nevertheless, we want t...
Angelo Coccettini – September 2013
Custom HTML Tags
In this class we find the method showImage that take a String argument...
Angelo Coccettini – September 2013
Custom HTML Tags
In the HTML we can now define a Javascript function as follow. When th...
Angelo Coccettini – September 2013
Custom Image Tag
This snipplet displays a img tag using a call to the Javascript linked...
Angelo Coccettini – September 2013
Languages
The application offers the possibility to switch instantly between English, F...
Angelo Coccettini – September 2013
Itineraries
The TabBar at the botton of the Site Listview can be used to switch between...
Angelo Coccettini – September 2013
Navigation
Disclosure indicator.
When this element is
present, users know they
can tap ...
Angelo Coccettini – September 2013
Menu Ostia Antica
It describes the Archaeological Park of Ostia Antica, the ancient har...
Angelo Coccettini – September 2013
Menu Information
It gives access a submenu with useful information about the Archaeolog...
Angelo Coccettini – September 2013
Menu History
It describes the history of Ostia, from the origins till IX century A.D.
Angelo Coccettini – September 2013
Menu ‘The Site’
It gives access to the description and images of the monuments of the s...
Angelo Coccettini – September 2013
Menu ‘The Site’
The view Pictures lists all the Computer Graphics Reconstruction of the...
Angelo Coccettini – September 2013
Menu ‘The Site’
Google Map is used to display the geographic location of the monument o...
Angelo Coccettini – September 2013
Menu Gallery
This view offers a categorized list of all Computer Graphic Reconstruction...
Angelo Coccettini – September 2013
Menu Options
It is used to select the layout type and the language of the application.
Angelo Coccettini – September 2013
Menu Acknowledgements
Display info on the team that has worked for this version of the ...
Angelo Coccettini – September 2013
Options
The language selection is indipendent from the device settings. It is possible ...
Angelo Coccettini – September 2013
Expansion Files
The size of an application for Google Play is 50 MB. After that limits ...
Angelo Coccettini – September 2013
Virtual Devices
The virtual devices installed with the SDK are too slow. Even when they...
Angelo Coccettini – September 2013
Artwork
I have produces all the Artwork of the application. Here some example of
artwor...
Angelo Coccettini – September 2013
Artwork
Interface
Angelo Coccettini – September 2013
Computer Reconstructions
I have reconstructed the whole town with Computer Graphics sof...
Angelo Coccettini – September 2013
Workflow
HUB
Export Wavefront
OBJ, MTL
PoserFusion
Layout Modeler
Angelo Coccettini – September 2013
Reconstructions
I have modeled the whole town with a uniform level of details. This mea...
Angelo Coccettini – September 2013
Google Play
The Apps are published and available on Google Play
https://play.google.com...
Upcoming SlideShare
Loading in...5
×

Archeological guide for Android devices

285

Published on

This is a presentation of my archaeological app for Android devices. This presentation describes the architecture, the design and shows few implementation details of the app.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
285
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Archeological guide for Android devices"

  1. 1. Angelo Coccettini – September 2013 The Ostia Antica Park is one of the largest and most important archaeological sites of ancient Rome. With its fifty hectares, its buildings and its streets, it testifies the development of a large urban and commercial center during the imperial age. Ostia was the most important port of the antiquity, the gate of Rome on the Mediterranean sea. This document describes the development of an archeological guide for Android devices. At the time of the writing these Apps are the only digital guides of Ostia Antica for Android devices. An Archaeological Guide for Android devices
  2. 2. Angelo Coccettini – September 2013 An Archaeological Guide for Android devices The main menu of the app for Android smartphone and tablets
  3. 3. Angelo Coccettini – September 2013 Specifications • 3 Languages: english, french and italian selectable within the App • 4 layouts with different color scheme selectable withing the App • Listview architecture for small smartphone • Master detail architecture for large smartphone and tablets • Unified application for Android marketplace • Content in HTML • Picture Gallery • Suggestion of three different itineraries • Monuments geolocalization • Custom Artwork • Zoom full screen for images • Rotation support
  4. 4. Angelo Coccettini – September 2013 Application Architecture The app uses a unified interface that adapts to screen resolution. This has been implemented using Android Configuration Qualifiers
  5. 5. Angelo Coccettini – September 2013 Application Architecture for Tablets For large Smartphones or Tablet the application uses the Landscape mode in Master/Detail configuration. On the left side of the screen a Listview displays the items, while the detail of the selected item is displayed on the Right side of the screen.
  6. 6. Angelo Coccettini – September 2013 Layouts The application offers 4 different layouts for a optimal contrast in darkness or strong lightning. The layouts can be switched directly from the interface. Black Elegance Modern Touch Pompei Style Roman Era
  7. 7. Angelo Coccettini – September 2013 Layout Implementation Layout have been implemented using the Android Theme functionality. The Theme allows developers to customize any elements of the interface and even to change the Theme runtime. The theme definition is stored in the file theme.xml located in the values folder. Each theme define, for a given property name (e.g. textColor) a different value stored in the styles.xml file. So, if the Theme.Black_Elegance is selected, the textColor point to the value defined in textColor_be stored in the file styles.xml
  8. 8. Angelo Coccettini – September 2013 Layout Implementation
  9. 9. Angelo Coccettini – September 2013 Custom HTML Tags The app uses standard HTML to display content. Nevertheless, we want to intercept the click event to allow zooming images in a different Activity. This can be done by enabling the JavaScript execution for the webview. The jsInterface is an instance of JavaScriptInterface, a custom class that can be used to define the methods that can be called via javascript.
  10. 10. Angelo Coccettini – September 2013 Custom HTML Tags In this class we find the method showImage that take a String argument as parameter.
  11. 11. Angelo Coccettini – September 2013 Custom HTML Tags In the HTML we can now define a Javascript function as follow. When the webview encountrer a javascript call to JSIntefacte, Android will dispatch the request to the Java method showImage of the class JavaScriptInterface. <script type="text/javascript"> function showImage(image) { JSInterface.showImage(image); } </script>
  12. 12. Angelo Coccettini – September 2013 Custom Image Tag This snipplet displays a img tag using a call to the Javascript linked to the class JavaScriptInterface. This tag display an image in the HTML code. When the user click on the image, the event is intercepted by the Javascript function showImage that in turn calls JSInterface.showImage(image), passing the control to the java method showImage(String image) in the class JavaScriptInterface. <img align='right' onClick="showImage(‘overview_from_necropolis_h.jpg')" class='imgright' src=‘overview_from_necropolis_l.jpg'/>
  13. 13. Angelo Coccettini – September 2013 Languages The application offers the possibility to switch instantly between English, French and Italian. The language switching impacts the contents as well every element of the application interface.
  14. 14. Angelo Coccettini – September 2013 Itineraries The TabBar at the botton of the Site Listview can be used to switch between three suggested itineraries. The first item of the list describes the itinerary, while the second item will show a map with the monuments that you select. It is possible to zoom the map for a better viewing.
  15. 15. Angelo Coccettini – September 2013 Navigation Disclosure indicator. When this element is present, users know they can tap anywhere in the row to see the next level in the hierarchy or the choices associated with the list item. Detail disclosure button. Users tap this element to see detailed information about the list item.
  16. 16. Angelo Coccettini – September 2013 Menu Ostia Antica It describes the Archaeological Park of Ostia Antica, the ancient harbour of Rome
  17. 17. Angelo Coccettini – September 2013 Menu Information It gives access a submenu with useful information about the Archaeological Park
  18. 18. Angelo Coccettini – September 2013 Menu History It describes the history of Ostia, from the origins till IX century A.D.
  19. 19. Angelo Coccettini – September 2013 Menu ‘The Site’ It gives access to the description and images of the monuments of the site. It can be used also to select the monument based on the 3 itineraries. Each monument has 3 submenus to display text, images and geographic location.
  20. 20. Angelo Coccettini – September 2013 Menu ‘The Site’ The view Pictures lists all the Computer Graphics Reconstruction of the monument.
  21. 21. Angelo Coccettini – September 2013 Menu ‘The Site’ Google Map is used to display the geographic location of the monument of interest.
  22. 22. Angelo Coccettini – September 2013 Menu Gallery This view offers a categorized list of all Computer Graphic Reconstructions of the town of Ostia
  23. 23. Angelo Coccettini – September 2013 Menu Options It is used to select the layout type and the language of the application.
  24. 24. Angelo Coccettini – September 2013 Menu Acknowledgements Display info on the team that has worked for this version of the application
  25. 25. Angelo Coccettini – September 2013 Options The language selection is indipendent from the device settings. It is possible to switch between English, French and Italian at runtime. The content and the interface switch instantly.
  26. 26. Angelo Coccettini – September 2013 Expansion Files The size of an application for Google Play is 50 MB. After that limits an application must use Extension Packages to store artwork and resources. Ostia Antica uses one Expansion Package to store the high resolution version of all images. HTML and low resolution images are stored in the asset folder.
  27. 27. Angelo Coccettini – September 2013 Virtual Devices The virtual devices installed with the SDK are too slow. Even when they use the hardware accelerator , they are quite slow and difficult to manage. In addition, on these virtual devices, it is not possible to use the Google services hence the Mapview is not working. In orde to debug Google Maps on virtual devices it is possible to use Genymotion suite that implements fully functional virtual devices based on Oracle VM Virtualbox. http://www.genymotion.com/
  28. 28. Angelo Coccettini – September 2013 Artwork I have produces all the Artwork of the application. Here some example of artwork for both applications. Map tags Map Pins
  29. 29. Angelo Coccettini – September 2013 Artwork Interface
  30. 30. Angelo Coccettini – September 2013 Computer Reconstructions I have reconstructed the whole town with Computer Graphics software: • LightWave from Newtek • CityEngine from ESRI • Poser from SmithMicro
  31. 31. Angelo Coccettini – September 2013 Workflow HUB Export Wavefront OBJ, MTL PoserFusion Layout Modeler
  32. 32. Angelo Coccettini – September 2013 Reconstructions I have modeled the whole town with a uniform level of details. This mean that it is possible to move the digital camera in any place and to produce high detailed images. The polygon count of the whole scene (building, actors, props and stage) is around 15.000.000 of polygons.
  33. 33. Angelo Coccettini – September 2013 Google Play The Apps are published and available on Google Play https://play.google.com/store/apps/details?id=com.betasoft.ostia.main&hl=en angelo.coccettini@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×