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


Google+ Facebook Twitter LinkedIn Dzone Reddit Digg Blogger Hacker News Addthis

By Markus Sprunck; Revision: 1.0; Status: final; Last Content Change: May 16, 2013;

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 Results

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

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

Change History

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

Google+ Comments

You may press the +1 button to share and/or comment