Finite Element Method Simulation Running in the Browser and Uses Device Orientation

BY MARKUS SPRUNCK

The example application demonstrates the implementation of a minimal Finite Element Method (FEM) Simulation running in a web browser and uses device orientation signals. This works on mobile devices (see Figure 1 and 2).

You may find the application under http://mobile-fem-example.appspot.comThe 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.

Expected Result

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 orientation 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

Lessons Learned

  • 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. 

Find Code on GitHub

Change History

 Revision  Date  Author  Description
 1.0  May 16, 2013  Markus Sprunck   first version

Sponsored Link