Engineering Calculator VOLTA-2013

Introduction

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 Agency' application extension ("Jobrica-2013")

Core application "Volta-2013" can run in Windows 7/8 in touch-screen or mouse/keyboard standard desktop mode. Application extension "Jobrica-2013" can also run in Windows 7/8, but its real-time geolocation features are available only in Ultrabooks/Win8. 

Background  

Engineering Calculator VOLTA-2013 extends the capability and application scope of its predecessor ("VOLTA-2011") previously published online [1,2] and discussed on Codeproject [3]. 

Original Calculator 'VOLTA-2011' was implemented as HTML5 web application adhering to modrn software paradigm of separation of programming concerns, namely:  

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

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

Working Demo of Engineering Calculator VOLTA-2011 implemented as HTML5/CSS3/jQuery web application is available online: click on the snapshot image shown below to open fully-functional calculator demo page:

Fig 1: HTML5 web application 'Volta-2011', sample screenshot 

Volta-2013

Volta-2013 is an updated desktop version of Electrical Engineering Calculator "VOLTA-2011". It's installer was generated using Intel AppUp encapsulator [4], which allows to convert web app in Windows desktop installables. Online User Manual [1] covers all essential use cases, pertinent to the previous and a current models. Following sample screenshots demonstrates various styling options, namely: Rounded corners, High/Low contrast, and 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"><span class="code-none">;
    -webkit-border-radius<span class="code-none"><span class="code-none">: 10px<span class="code-none">;
    border-radius<span class="code-none"><span class="code-none">: 10px<span class="code-none">;
<span class="code-none">} 
</span> </</span></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
Date Created     :  01/20/2011
Last Modified    :  11/14/2012
******************************************************************************
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 either in real-time mode (in case geo-location service is enabled) or manual entry, and, correspondingly, composing a web-query to the said page (see the sample screenshots following):

Sample coding solution: Numeric WPF TextBox  

Restricting WPF TextBox entry to just numbers and selected special characters is not a trivial task. Unlike its counterpart in Win Forms, which expose KeyCode (accessible as e.KeyCode in, for example, KeyDown event handle), WPF ones provides only e.Key property, which, if converted to String, returns, for example, something like "D0", "Back" or "OemPeriod". Quick workaround was found as shown in the following Listing 5. Solution allows entering in WPF TextBoxes numbers 0...9 and special keys: backspace, delete, period and minus sign. Relevant to mention that it could be extended by adding more 'allowed' cases with || operator, and also intercepting the combination of "Shift" + {Key}, but detailed coverage of this coding technique goes beyond the reasonable boundaries of this particular article. Just to notice, that even in the 'worst-case' scenario, provided that some invalid charactes has been entered into the Textbox, then on "Find Job Agency" button-click event the validation logic will throw exception and notify User of erroneous input either via TTS (Voice messaging), or standard message box (if TTS is disabled).

Listing 5. Numeric TextBox WPF

private void txtBox_PreviewKeyDown(object sender, KeyEventArgs e)
{
    // allow "Backspace", "Delete", "Period" and "Minus" keys;
    // the list can be extended, for e.g. with OemComma
    if ( e.Key.ToString() == "Back" ||
            e.Key.ToString() == "Delete" ||
            e.Key.ToString() == "OemPeriod" ||
            e.Key.ToString() == "OemMinus")  return;
            
    // cast e.Key to int
    int _key = (int)e.Key;

    // restrict any key except for numerics: 0...9
    e.Handled = _key > 43 || _key < 34;
}

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.  It utilizes real-time GPS/Geolocation features available in GPS-equipped Ultrabooks.

Even though the application is potentially capable of automated style selection, for example switching between Hign/Low contrast stylesheets based upon the input from ambient light sensor (i.e. ALS, included in some high-end Ultrabooks), but upon serious design consideration and prototype testing, this feature was found unnecessary in these type of business application. "Style jitter" in such fully-automated solution can potentially cause  annoyance/eye-irritation, thus degrading the overal user experience, raher than improving it. Alternatively, the style selection feature was implement as simple manual 'single-click' operation.

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 online