Engineering Calculator VOLTA-2013

Introduction

Engineering Calculator VOLTA-2012 is implemented as HTML 5 web application project that adheres to software paradigm of separation of programming concerns, namely:

• Content: HTML5
• Presentation: CSS3
• Functionality: Javascript/jQuery

Entire project is encapsulated in a single text file with extremely small digital footprint (less than 10kB). It does not require any graphic files, like .jpg or .png, etc. All aesthetic enhancements, like: rounded corners, color gradients, borders and shadows are achieved exclusively via CSS3 styling, thus resulting in small application footprint and very fast web page load.

Note: this project is submitted to The Windows 8* & Ultrabook™ App Innovation Contest.

Category 1: Productivity

Category 2: Education

Platform: Windows 8 desktop

Ultrabook-specific features

• Touch-screen and standard PC mouse operation  modes
• GPS/Geolocation-based Find Job application extension (Jobrica-2013)

Proposed solution should be able to run in Desktop/Metro modes .

Background  

Engineering Calculator VOLTA-2013 extends the capability and application scope of its predecessor, previously published online [1,2] and partially described on Codeproject [3].

Volta-2011

Volta-2013

Volta-2013 is updated desktop version of Electrical Engineering calculator. It's installer was generated using Intel AppUp encapsulator [4]. Online User Manual [1] covers use cases pertinent to the previous model (Volta-2011) and current one. Sample screenshots follows, demonstrating various styling options, namely: rounded corners, High/Low contrast, light background.

Fig 2: Engineering Calculator Volta-2013 for Win 8 desktop

Fig 3: Calculator Volta-2013 with rounded corner

Fig 4: Calculator Volta-2013 with 'Light' background

Fig 5: Calculator Volta-2013 app icon

Using the code 

The code base of existing Calculator VOLTA-2011 has been documented, commented and discussed online [2]. Dynamic styling was added to current version using jQuery and CSS3 include files, as shown in the following example pertinent to toggle rounded corners On/Off:

Listing 1. Round Corners Style (CSS3)  

div#eeMain,
div#keyPad button,
div#keyPad input,
div#eeMain div.eeStyleControl,
div#eeMain div#eeRounded,
div#eeModel,
div#eeExtControl,
div#eeExtPanel,
div#eeStackControl,
div#eeStackRegister
{
    -moz-border-radius: 10px<span class="code-none">;
    -webkit-border-radius<span class="code-none">: 10px<span class="code-none">;
    border-radius<span class="code-none">: 10px<span class="code-none">;
<span class="code-none">} </span></span></span></span></span></span>

Listing 2. jQuery code snippet to toggle Round Corners On/Off 

// ROUNDED CORNER On/Off ********************
$("div#eeRounded").click(function () {
   //get all stylesheets
   var styleSheets = document.styleSheets;
   // toggle stylesheet identified by href
   var href = 'RoundedCorner.css';
   for (var i = 0; i < styleSheets.length; i++) {
       if (styleSheets[i].href.toString().indexOf(href) >= 0) {
            styleSheets[1].disabled = !(styleSheets[1].disabled);
            break;
       }
   }
});

Similar jQuery technique was used for dynamic load/unload of CSS3 files related to Low/High contrast and backround selection (see the snippets following)

Listing 3. CSS stylesheet file pertinent to 'Light' background palette

/******************************************************************************
Project          :  Engineering Calculator VOLTA-2013
Module           :  Light.css
Description      :  CSS3 color properties to produce 'Light' background
******************************************************************************
Author           :  Alexander Bell
Copyright        :  2011-12 Infosoft International Inc
******************************************************************************
DISCLAIMER: This Application is provide on AS IS basis without any warranty
You can use it at your sole risk.
******************************************************************************
TERMS OF USE     :  This module is copyrighted.
******************************************************************************/

div#eeMain {  background-color: #dedede<span class="code-none">; <span class="code-none">}

div#eeModel,
div#eeExtControl, 
div#eeStackControl,
div#eeStackRegister,
div#eeExtPanel, 
div.voltESeries <span class="code-none">{ background-color<span class="code-none">: #eaeaea<span class="code-none">;  <span class="code-none">}

input#keyPad_Mem  <span class="code-none">{ background-color<span class="code-none">: #f8f8f8<span class="code-none">;  <span class="code-none">}

button,
input,
div.eeCaption,
div.eeNotice,
div#eeExtControl,
div#eeStackControl,
div.eeSeriesTitle,
table.tabESeries <span class="code-none">{ color<span class="code-none">: #202020<span class="code-none">; <span class="code-none">}

div#eeModel <span class="code-none">{ color<span class="code-none">: #005500<span class="code-none">; <span class="code-none">}

button.keyPad_btnMemOp <span class="code-none">{  color<span class="code-none">: #005500<span class="code-none">;<span class="code-none">}

<span class="code-comment">/* BACKSPACE/CLEAR INPUT KEYS*/
div#keyPad button#keyPad_btnBack,
div#keyPad button#keyPad_btnClr,
div#keyPad button#keyPad_btnAllClr {color<span class="code-none">:red<span class="code-none">;<span class="code-none">}

input,
button,
div.voltESeries <span class="code-none">{ border<span class="code-none">: 1px solid #d0d0d0<span class="code-none">; <span class="code-none">}

button:hover <span class="code-none">{ background<span class="code-none">: #d9d9d9<span class="code-none">; <span class="code-none">}

button:active <span class="code-none">{	border<span class="code-none">: solid 2px #909090<span class="code-none">; <span class="code-none">}

<span class="code-comment">/* odd rows style */
table.tabESeries tr:nth-child(odd) { background-color<span class="code-none">: #f0f0f0<span class="code-none">; <span class="code-none">}

<span class="code-comment">/* even rows style */
table.tabESeries tr:nth-child(even) { background-color<span class="code-none">: #eaeaea<span class="code-none">; <span class="code-none">}

<span class="code-comment">/* Table hover style */
table.tabESeries tr:hover {background-color<span class="code-none">: #dadada<span class="code-none">; color<span class="code-none">: #101010<span class="code-none">;<span class="code-none">}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Listing 4.jQuery code snippet to select High/Low contrast and background

// SELECT COLOR PALETTE ************************
$("div.eeStyleControl").click(function () {

        // disable all color styles
        $('link[rel=stylesheet][href~="Style/ContrastNormal.css"]').remove();
        $('link[rel=stylesheet][href~="Style/Light.css"]').remove();
        $('link[rel=stylesheet][href~="Style/ContrastHigh.css"]').remove();

        // add appropriate color style
        switch (this.id) {
            case 'eeNContrast': $('head').append('<link type="text/css" href="Style/ContrastNormal.css" rel="stylesheet" />'); break;
            case 'eeHContrast': $('head').append('<link type="text/css" href="Style/ContrastHigh.css" rel="stylesheet" />'); break;
            case 'eeLight': $('head').append('<link type="text/css" href="Style/Light.css" rel="stylesheet" />'); break;
            default: break;
        }
    });

Jobrica-2013

Jobrica-2013 is Windows 8 desktop/Ultrabooks application extension using GPS/Geolocation service in order to find Job Agencies in a search area nearby. It implements dedicated web page powered by Microsoft Bing technology [6] and desktop installable app, that allows obtaining geo-coordinates in real-time mode (in case geo-location service is enabled) and composing a web-query to the said page (see the sample screenshots following):

Fig 6: Jobrica-2013 desktop app for Win8/Ultrabooks, sample screenshot

Fig 7: Interactive map shows Job Agencies nearby, sample screenshot

Points of Interest

Jobrica-2013 implements multi-modal Voice-enhanced User Interface utilizing Windows 8 Speech object library, in particular, TTS (Text-to-Speech) options.

History 

• HTML5 web application Engineering Calculator VOLTA-2011 has been released in the year 2011 [1,2] and tested in all major web browsers on PC platform
• Calculator VOLTA-2011 has been tested on new Apple iPad version (a.k.a. iPad 3) [5].
• Engineering Calculator VOLTA-2013 desktop version 8.1.2 was developed, submitted and approved for publishing in Intel's AppUp  

References 

1. Online Engineering Calculator Volta-2011, User Manual[^]
2. Online Engineering Calculator Volta-2011, Design Notes[^]
3. Engineering Calculator VOLTA-2011
4. Intel AppUp encapsulator
5. New iPad 3 is here: quick notes from Apple store on Fifth (Mar 17, 2012)
6. Jobrica-2013 interactive geo-map