Friday, May 13, 2016

Mars Mission (Part One)

Inspired by Björn Goerke's "Bring Him Home" presentation at SAP TechEd and also DSAG Technology Days, i thought it would be time for a new mission cockpit.

Bring Him Home SCN Link 

This is the best presentation over the last years to deliver to new SAP spirit and technologies and worth to be seen.

In the last month i was thinking about how to present interesting stuff for my blog with some examples beyond the core UI5 features. After watching the movie and start to read the book, the idea was born to design a HUD like user interface.

Mission Cockpit

This projects can be seen as a best practise guide to get a staring point for different topics and technology areas. It is build with the SAP WebIDE trial and also hosted on SAP HCP. It is fully based on OpenUI5 and needed Components have been build as custom controls.

Mission on iPhone 6
This is currently a technology preview and not everything is currently production ready, but i think the current state is good enough to be shown and i am still working on the cockpit in the future to make it better and have some new topics for my blog.


Launch Mission


The highlights of the demo are:
  • animated boot loading splash screen with blending into app
  • custom build cache buster to avoid issues on iOS Homescreen apps (sadly HCP does not support App CacheBuster)
  • animated star background with warp effect, stars are moving to side on router slides and on touch devices you can control starflow with motion sensor
  • background sound playing with cancas web audio animation using spectrum analysis
  • custom radial chart control using svg to display values the martian way
  • embedding svg chart control from Alexander Graebe and expanding it a little bit ;-)
  • wavesurfer.js based sound player with speed change
  • signature.js control to allow writing signature for testing my new apple pencil with export to image and svg. The control still has some resize issues i am working on.
  • using svg for icons
  • ...
During the project i ran into some issues that are hard to be fixed (opening also some tickets).
  • Using OData with the MockServer kill the used web audio examples. I think the mockserver manipulates XMLHTTPRequests and does not proper handle/prototype specific context types. For this reason i fallback using a JSONModel instead till the bug is fixed.
  • The Web IDE allows the usage of the App CacheBuster during development and test, but the deployed HCP HTML5 app does not ;-(   I had to develop a custom CacheBuster to control the caching especially for iOS Homescreen usage.
If you have good ideas, feedback and so on, i would like to hear from you on twitter.

Currently i am not using a dedeicated GIT but you can inspect the source inside the chrome developer tool. There will be follow up blogs on concrete topics to get into more detail.

Special thanks goes to Andreas Kunz and Peter Müssig for helping me to find answers for some core issues.

Maybe the Mars Mission will bring some fun to you.

The Project is also available on my github repo!

Update 18.05.2016: Even my eclipse is now based on Mars ;-)

No comments:

Post a Comment

Thank you for your comment!

The comment area is not intended to be used for promoting sites!
Please do not use such links or your comment will be deleted.

Holger

Note: Only a member of this blog may post a comment.