Click here to Skip to main content
Click here to Skip to main content

Engineering Calculator VOLTA-2013

, 6 Oct 2013
Rate this:
Please Sign up or sign in to vote.
Productivity software package VOLTA-2013 developed as HTML5 web application and converted into desktop installable one using Intel’s AppUp encapsulator. Application extension Jobrica-2013 utilizes geolocation/GPS service and Bing map technology to find Job Agencies in search area.

Please note

This article is an entry in our AppInnovation Contest. Articles in this sub-section are not required to be full articles so care should be taken when voting.

Announcement

For a limited time, Codeproject members can download and install a copy of the full production version of Engineering Calculator VOLTA-814D (latest release [10]), that implements novel borderless WPF window and resizing technique (see the following sample demo screenshot): please refer to the Download section containing 2 digitally-signed setup modules (Volta814D.msi and setup.exe)

Demo screenshot: Latest release of Calculator Volta-814D implements novel borderless WPF window and control box

Introduction 

This application software package was submitted to The Windows 8* & Ultrabook™ App Innovation Contest.

Category 1: Productivity

Category 2: Education

Platform: Windows 8 desktop (any edition)

Ultrabook-specific features

  • Touch-screen and standard PC mouse operation modes
  • GPS/Geolocation-based 'Find Job Agency' application extension ("Jobrica-2013")
  • ALS auto-selection of color scheme (optional - see design notes in "Points of Interest" section)

Entire package (software "bundle") contains the core application, namely: Engineering Calculator "Volta-2013", and application extension "Jobrica-2013" that allows finding the Job Agencies in particular search areas, either specified by the User manually, or by using real-time geolocation services.  

Core application Volta-2013 is Windows 7/8 compatible and can run in touch-screen or standard mouse/keyboard desktop mode. It can be downloaded free of charge from Intel's AppUp store [1] (published on 11/27/2012). User Manual is available at [2]. 

Application extension "Jobrica-2013" can also run in Windows 7/8, but its real-time geolocation features are available only in Ultrabooks/Win8; it implements multi-modal User Interface providing Voice messaging via TTS technology. It's corresponding web page utilizes Microsoft Bing mapping technology and search engine, extended with Company's (Infosoft International Inc, NY) proprietary database of more than 200 Job Agencies in the US, mostly in hi-tech area.  The application is available free of charge on Intel's AppUp store; (published on 11/29/2012 [8]).

Background

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

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

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

Entire project was encapsulated in a single text file of rather small digital footprint (less than 10kB). It did not use 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.

Volta-2014P

Fig 1: Recently released Calculator VOLTA-201P for Win 7/8  (Professional Edition)

Volta-2013

Engineering Calculator Volta-2013 was implemented as a desktop version of online Calculator "VOLTA-2011". It's installer was generated using Intel AppUp encapsulator [5], which allows to convert HTML5 web app into Windows desktop installables. Online User Manual [2] covers essential use cases, pertinent to the previous and current models. Following sample screenshots demonstrate various styling options available in Volta-2013, 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 well documented and discussed online [3,4]. Several options have been added to new version VOLTA-2013, including dynamic styling using jQuery and CSS3 include files; dynamic style selection can be potentially linked to ambient light sensor output. Following example (Listing 1 and 2) demonstrates coding technique of rounded corners toggle 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<span class="code-none"><span class="code-none">: 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"><span class="code-none"><span class="code-none">;
    border-radius<span class="code-none"><span class="code-none"><span class="code-none">: 10px<span class="code-none"><span class="code-none"><span class="code-none">;
<span class="code-none"><span class="code-none"><span class="code-none">}</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;
       }
   }
});

Another jQuery technique was used for dynamic loading/unloading of CSS3 files related to Low/High contrast and background selection (see code snippets in the following Listing. 3 and 4)

Listing 3. CSS stylesheet file corresponding to 'Light' background color scheme
div#eeMain {  background-color<span class="code-none"><span class="code-none">: #dedede<span class="code-none"><span class="code-none">; <span class="code-none"><span class="code-none">}

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

input#keyPad_Mem  <span class="code-none"><span class="code-none"><span class="code-none">{ background-color<span class="code-none"><span class="code-none"><span class="code-none">: #f8f8f8<span class="code-none"><span class="code-none"><span class="code-none">;  <span class="code-none"><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"><span class="code-none"><span class="code-none">{ color<span class="code-none"><span class="code-none"><span class="code-none">: #202020<span class="code-none"><span class="code-none"><span class="code-none">; <span class="code-none"><span class="code-none"><span class="code-none">}

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

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

<span class="code-comment"><span class="code-comment"><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"><span class="code-none"><span class="code-none">:red<span class="code-none"><span class="code-none"><span class="code-none">;<span class="code-none"><span class="code-none"><span class="code-none">}

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

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

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

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

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

<span class="code-comment"><span class="code-comment"><span class="code-comment">/* Table hover style */
table.tabESeries tr:hover {background-color<span class="code-none"><span class="code-none"><span class="code-none">: #dadada<span class="code-none"><span class="code-none"><span class="code-none">; color<span class="code-none"><span class="code-none"><span class="code-none">: #101010<span class="code-none"><span class="code-none"><span class="code-none">;<span class="code-none"><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></</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 dynamically switch between High/Low contrast and Light background  (can be linked to ALS sensor data feed)
// 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 [7] and desktop installable app, that obtains geographical coordinates in real-time mode if geo-location service is available/enabled, and also allows manual entry of the search area central point, sending corresponding encoded web-query to the said page (see sample screenshots following):

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

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

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} and arbitrary "copy-pasted" text, 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 characters has been entered into Textbox, then input validation implemented in "Find Agency" button click event handle will throw exception and notify User of erroneous input either via TTS (Voice messaging), or standard message box (if TTS feature 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;
}
 

Points of Interest

DEMO

Working Demo of Engineering Calculator VOLTA-2011 implemented as HTML5/CSS3/jQuery web application is available online

Speech Technology

Application extension Jobrica-2013 implements multi-modal Voice-enhanced User Interface utilizing Windows 8 Speech object library, in particular, TTS (Text-to-Speech) options.  It provides Voice instructions and error messaging to User. This option can be turned On/Off; if disabled, standard message boxes will take place and carry the messages.

Geolocation/GPS

Application extension Jobrica-2013 utilizes real-time GPS/Geolocation features available in GPS-equipped Ultrabooks, providing the option to "Find Job Agency" in the search area provided by User either manually, or via real-time geolocation service.

Speech Technology

Application extension Jobrica-2013 implements multi-modal Voice-enhanced User Interface, utilizing Microsoft Speech object library, in particular, TTS (Text-to-Speech) technology set, providing Voice instructions and error messaging to the User. This option can be turned On/Off; if disabled, standard message boxes will take place and carry the messages. As found in actual testing, TTS greatly benefits from Ultrabooks high internal data rate (due to sophisticated duo SSD/SATA), noticeably reducing the Voice response latency and increasing overall UI responsiveness.

ALS Sensor use-case

Core applications VOLTA-2013 is potentially capable of automated style selection, for example switching between High/Low contrast color scheme based upon data feed from the ambient light sensor (ALS), included in some high-end Ultrabooks. The possible implementation will require some sort of programmatic equivalent of "comparator w/hysteresis" (well- known in Electrical Engineering) observing ALS data stream and automatically switching between styles based upon some predefined luminance threshold(s). Upon serious design consideration and partial prototype testing, such automatic control feature was found unnecessary in this type of applications: "irrational exuberance", i.e. artificial overstretching of sensors use-cases can potentially result in continuous "styles jitter", thus increasing the annoyance/eye-irritation and degrading the overall user experience rather than improving it. Alternatively, style selection feature was implemented as a simple manual 'single-click' operation.

Using Intel's AppUp encapsulator 

Core application VOLTA-2013 has been developed originally as HTML5 web application, utilizing CSS3 (styling) and jQuery (functionality) technology set, and later converted into Windows desktop installable application using Intel's AppUp encapsulator [5].

History

  • HTML5 web application VOLTA-2011 has been released [3,4]
  • VOLTA-2011 has been tested on new Apple iPad version (a.k.a. iPad 3) [6].
  • Engineering Calculator VOLTA-2013 (v. 8.1.2) has been published on Intel's AppUp store [1]
  • Application extension Jobrica-2013 (v. 8.1.1.) has been published on Intel's AppUp store  [8]

References

  1. Engineering Calculator Volta-2013 for Windows, Download from Intel AppUp store
  2. Engineering Calculator Volta-2013, User Manual 
  3. Online Engineering Calculator Volta-2011, Design Notes
  4. Engineering Calculator VOLTA-2011
  5. Intel AppUp encapsulator
  6. New iPad 3 is here: quick notes from Apple store on Fifth Ave (Mar 17, 2012)
  7. Jobrica-2013 interactive geo-map online, powered by Microsoft Bing
  8. Jobrica-2013 for Win8/Ultrabooks, Download from Intel's AppUp store

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience. He is Win/Web veteran, published 200+ articles and authored 37 inventions, currently focused on: Windows 7/8, HTML5, CSS3, jQuery, SQL, .NET, ASP.NET, WPF, C#, Speech Technology and Mobile apps. He's been among recent App submission winners (The Windows 8* & Ultrabook™ App Innovation Contest 2012). Sample pubs:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. HTML5 Best Practices: Table formatting via CSS3
  4. Edumatter-M12 for Windows, app overview
  5. Engineering Calculator VOLTA-814D
  6. CoolPhone: phone numbers-to-text converter
  7. SQL generates large data sequence
  8. Aggregate Product function extends SQL
  9. Top-50 Digital Cameras
  10. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
Dr. Bell is personally credited for 10+ Enterprise level projects (Finance/Investment, Engineering, Edu) w/total code base exceeding 250k lines; doing consulting in NYC for 20 yrs.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinmemberJan Steyn5-Oct-12 2:23 
GeneralRe: My vote of 5 PinmemberDrABELL5-Oct-12 2:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140709.1 | Last Updated 6 Oct 2013
Article Copyright 2013 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid