By Markus Sprunck; Revision: 1.0; Status: final; Last Content Change: May 16, 2013;
This works on mobile devices (see Figure 1 and 2).
The example application demonstrates the implementation of a minimal Finite Element Method (FEM) Simulation running in a web browser and uses device orientation signals.
You may find the application under http://mobile-fem-example.appspot.com. The implementation is based on paper.js and Google Web Toolkit. It has been developed with GWT 2.5 and App Engine SDK 1.7.3. It's tested with Chrome Browser under iOS and Android.
Web applications on different mobile devices with different browsers are a real mess. There are dozens of different layouts and case differentiations needed. This example application focus on Chrome as browser. In this case the device orinentation is quite easy. Especially on Android every browser behaves a little bit different.
Figure 1: Chrome Android
Figure 2: Chrome iOS
You may also test the application in a desktop browser. In this case a small gui enables the manual input of the device orientation. In figure 3 the control is marked in red color.
Figure 3: Chrome Desktop rotate X-Axis or Y-Axis
- Although Chrome for Windows is very fast, the implementation for iPad is noticeable slower than the Safari browser.
- Web applications on different mobile devices with different browsers are difficult to handle. There are dozens of different layouts and case differentiations needed.
- The rendering on canvas is quite slow. A better solution would be WebGL, but the support on mobile devices is still poor.
Please, do not hesitate to contact me if you have any ideas for improvement and/or you find a bug in the example code.
Find Code on GitHub
|| May 16, 2013
|| Markus Sprunck
|| first version
You may press the +1 button to share and/or comment