Scientific Calculator ZENO-5000: Design Notes

Online Scientific Calculator ZENO-5000

Calculator software applications are extremely powerful tools, currently complementing and even replacing their hardware counterparts. Calculators implemented as the web “thin client” type of application require the “live” Internet connection. There are certain pros and cons in such approach. Tremendous advantage of “thin client” web applications are “zero-installable” and platform/OS independence, 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). The need for open Internet connection is certainly a disadvantage in many cases, thus it would be highly desirable to have the calculator 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” OSC solutions:

OSC must be platform/OS independent, capable of running within 4 major browsers (Mozilla Firefox, Internet Explore from Microsoft, Google Chrome and Apple Safari )
Installation process must be simple and straightforward, just as “copy-paste”
OSC should have extremely small “digital footprint” considering the potential memory space limitations on the portable devices

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

Application architecture

Online Scientific Calculator ZENO-5000 (hereinafter – ZENO) is implemented as rich internet application, utilizing the latest features presented in emerging Internet standards (HTML5/CSS3) and client-side scripting (jQuery/Javascript). It could run in major web browsers in either online, or offline modes: to utilize the latter, application files must be downloaded and stored on the client’s computer [3]. These files include:

Zeno.htm: main file, containing HTML content and all includes
oscZeno.css: cascading style sheet file (CSS include)
oscZeno.js: computational engine and screen events handling file (Javascript include)
oscZenoRef.js: reference file, containing global vars and functions (Javascript include)

Implementation details

Binary operations involve the “stack” memory register (variable stackValue), storing the first operand. Another variable opCode stores the operation code:
0-no operation
1-Addition
2-Subtraction
3-Multiplication
4-Division
5-power (y^x)
6-percent

The operations are performed on the content of the stack and numeric value entered into the input box.
Auxiliary register (var boolClear) provides “clear input box before next data entry” functionality: its stores the Boolean value, forcing the code to clear the input register before another numeric value could be entered.

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.3.6.12 and higher
Google Chrome, v. 7.0 and higher
Apple Safari™, including the mobile version included in iPod Touch™, 3g

ZENO-5000 could also run in Internet Explorer 8.0, though the major graphic enhancements pertinent to HTML 5/CSS 3 will not be rendered properly. The full compatibility mode is expected in recently released by Microsoft IE 9 (still in Beta stage at the time of this article published), which expected to support HTML 5/CSS3 core features.

Afterword

The Online Scientific Calculator ZENO-5000 (or simply ZENO) 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). ZENO is implemented as rich internet application (RIA) with extremely small digital footprint: entire application contains several text files accounting for less than 20kb total. 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.
Project ZENO provides deep insight into web applications coding technique utilizing rich java scripting math library. Though intended primarily for the didactic purpose, it could be well suited and customized for many practical computational tasks.

References

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 ZENO-5000 is strictly prohibited.