Online Engineering Calculator Volta-2011, Design Notes

Online Engineering Calculator VOLTA-2011 (hereinafter–Calculator) is implemented as rich internet application (RIA), utilizing the latest features introduced by emerging Internet standards, namely: HTML5 and CSS3. The computation engine is utilizing client-side scripting technique: jQuery/Javascript. Calculator application could run in any major web browsers on various platforms: desktop/notebook/tablet PC and smart phones (Apple iPhone™, iPad, iPod Touch, Blackberry™, Google Android™, etc).

Application architecture

Calculators [1,2] implemented as “thin client” web applications require the “live” Internet connection; there are certain pros and cons in such approach. Pure “thin client” web applications are platform/OS independent with “zero-installable” part, which make them almost universally portable, capable of running within any major web browser (it’s relevant to mention, that web browsers are rapidly becoming de facto a “virtual OS”, kind of substitute for real OS in regards to the web applications and services). But the need for open Internet connection is certainly a disadvantage in many cases; thus, it would be highly desirable to design the web application, capable of running in off-line mode as well.

Possible solution is to implement the application utilizing just client-scripting, primarily Javascript code, which is compatible with practically any major existing web browser. Such web application could either run in online mode as usual, or it could be downloaded and cached on the client’s platform, available in offline mode as well. There are several core requirements to such “universal” web solutions:

It must be platform/OS independent, capable of running within all major browsers (Mozilla Firefox, Internet Explorer from Microsoft, Google Chrome and Apple Safari )
Installation process must be simple and straightforward just as “copy-paste”
It should have small “digital footprint” considering the limited memory in portable devices

Adherence to the above mentioned design principle would ensure the high portability of web applications and its compliance with the majority of available mobile/stationary computational platforms.

Implementation details

Entire Calculator application consists of the following files:

•   Volta.htm: main file, containing HTML content and all includes
•   BellVolta2011.css: cascading style sheet file (CSS include)
•   BellVolta2011.js: computational engine and screen events handling file (Javascript include)
•   BellVolta2011Ref.js: reference file, containing global vars and functions (Javascript include)
•   ESeries.xml: XML file containing the E-Series values

Computation engine is implemented by jQuery: in addition to the standard scientific operations [3,4], it features special functions, pertinent to Electrical Engineering (EE) domain [2,5]

HTML 5/CSS 3 coding techniques

The most innovative coding technique, dramatically improving the aesthetic appeal of the web applications, is demonstrated below:

Listing 1: CSS 3 code snippet used to add the shadows to the screen objects
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);

Listing 2: CSS 3 code snippet used to implement the rounded corners
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Listing 3: CSS 3 code snippet used to create the color gradient (does not work in IE8 and all previous versions)
/* WebKit */
background: -webkit-gradient(linear, left top, right top from(#ffffcc), to(#ffffff));
/* Mozilla/Gecko */
background: -moz-linear-gradient(left top, #ffffcc, #ffffff);

Web Browsers compatibility

Scientific Calculator was tested and found fully compatible with following major Web Browsers:
•   Mozilla Firefox, v.4.0 and higher
•   Google Chrome, v. 10.0 and higher
•    Internet Explorer 9.0 and higher
•   Apple Safari 5.0 and higher

Afterword

The Online Scientific Calculator VOLTA-2011 was started as an educational project, intended to demonstrate the power of emerging Internet standards and, namely: HTML 5 and CSS 3, accompanied by increasingly popular jQuery (extension to JavaScript). Calculator is implemented as rich internet application (RIA) with extremely small digital footprint (less that 60kb). It does not use any graphic files: all aesthetic enhancements, like color gradients, rounded corners, box shadows, etc. are achieved via new features available in HTML5/CSS 3, thus dramatically simplifying the page layout design and ensuring fast application load.

Reference

Disclaimer. The content of this article and external links, including the applications, graphic and textual materials, are provided on ‘AS IS’ basis for demonstration/educational purpose only without warranty of any kind. Commercial use of the calculator VOLTA 2011 is strictly prohibited.