Click here to Skip to main content
13,045,285 members (77,766 online)
Click here to Skip to main content
Add your own
alternative version


8 bookmarked
Posted 23 Apr 2013

Azure-Volta 2013 Engineering Calculator is up and running!

, 17 Feb 2015
Rate this:
Please Sign up or sign in to vote.
Migration from VS2010->VS2012->Azure cloud computing: practical and didactic aspects

Editorial Note

This article is an entry in our Windows Azure Developer Challenge. Articles in this sub-section are not required to be full articles so care should be taken when voting. Create your free Azure Trial Account to Enter the Challenge.


AZZURRO !!!!!!!!!

by Adriano Celentano

Azzurro by A. Celentano

Video Player powered by the best
YouTube API for ASP.NET [4]
(#1 on Goog for several years)


The article is an entry to Windows Azure Developer Challenge, addressing both practical and didactic aspects of Azure project development.

1.     First Challenge: Getting Started. Done

Note:  Creating Azure account with existing '' id was rather simple and straightforward process

2.     Second Challenge: Build a website. Done 

As FYI: fully-functional web site has been developed and deployed to Windows Azure cloud

Note: Web site has been originally created with VS2010, then the project was migrated to VS2012 for Web (Express edition), and revised/updated. Deployment via standard 'Publish Web Site' option was flawless and rather efficient. Important notice: don't forget to check the button 'File Publish Options' ->'Remove additional files at destination'. Those files may cause the conflict with newly uploaded (e.g. ambiguous class names), so it better to keep the web directory clean.

Fig.1. CSS3 style corresponding to normal ("Dark") background



3.     Third Challenge: Using SQL on Azure. On schedule 
4.     Fourth Challenge: Virtual Machines.
On schedule 
5.     Fifth Challenge: Mobile access. 
On schedule 




Potential benefits of migration to Windows Azure are listed below

  • From a Web developer perspective, it's like a web hosting service, but a really good one. I found web deployment and change management to be rather straightforward and reliable process.
  • Scalability would be another potential benefit of migration to Azure cloud. 
  • Intrinsic modularity of Azure platform is adding huge value to web development, and future project enhancements/upscaling.
  • Multiple web project integration on Azure seems to be relatively easy process due to modularity (mentioned in the previous line item 3) and efficient resource sharing.
  • Data Layer is of particular interest to me. There has been an issue with my current host service provider when I tried to find reliable/simple SQL server backup/restore/migration procedure pertinent to my multiple remote DB. I hope that Azure team has properly addressed that quintessential issue. In particular, I would like to have installed multiple file-based DB (like "good-old" Microsoft Access .mdb, or the latest newcomer SQL Server 2012 Express edition .mdf files), which I can simply copy-paste to another web app upon necessity with minimal DB-connectivity headache. 


a). Staring with a project migration from Visual Studio 2010 to 2012. The project itself (award-winning application VOLTA 2013 [1]) implemented as HTML5 web application adheres to software paradigm of separation of programming concerns:  

  • Content: HTML5 
  • Presentation: CSS3
  • Functionality: jQuery (2.0) 

Bear in mind that those 3 items are not precisely orthogonal as some overlapping area exists. For example, CSS3 could be used to implement some basic functionality while jQuery code can implement dynamic formatting , e.g. dynamically load stylesheets (this technique has been used in current app).  

Data layer functionality implemented using XML data storage and non-blocking asynchronous AJAX data access technique. In future release, SQL database should replace XML file-based data storage.

Detailed project migration to VS 2012 has been described in [8]. I was satisfied by the process simplicity and clarity. No any major issue found.

b). Creating trial Account (90 days) on Windows Azure and subsequently, creating the first Azure Web were both rather satisfying experiences. And so was a deployment of my locally-developed web site (currently in proto stage) to Azure platform. I've got my first fully-functional online engineering Calculator VOLTA-2013 on Azure in a matter of couple hours or less (refer to the link [1] and also see the sample screenshots at the end of the article). 

Slightly disappointing was a lack of FPSE (Front-Page Server Extensions); this technology has been around for more than a decade, so I get used to it, especially in a context of VS Web development. That would be nice to find a sort of substitute for this functionality, in particular, to be able to see both local/remote webs residing in to contiguous on-screen areas with tree views related to file management (as it was in case of using FPSE).

c) Web site change management was also mostly pleasant experience. For the practice purpose adding several Web User Controls (.ascx) to the default page; that increased it's functionality (see "My IP" and "Check Browser" options added to the page footer). After success with that auxiliary parts, I have have converted entire Calculator project into Web User Control and added it to the default page. Now the project exists in a modular form, with increased readability and clear architecture. More web items will be added soon.

This section will be continuously updated as the project evolves.



Knockin‘ on Heavens Door
by Guns N‘ Roses

"Mama, put my guns in the ground
I can't shoot them anymore.
That long black CLOUD is comin' down
I feel like I'm knockin' on heaven's door..."
-Bob Dylan

and CLOUD Number 9| Bryan Adams




Since the day I got my first electronic calculator (kinda antics from last millennium) and up until now it’s really hard to resist the temptation to divide by zero and see what happen. Even more exciting is to enter 0/0 and curiously expecting the little piece of technology to reveal the answer to that quintessential math enigma. Indeed, it’s even better than popping the bubble wrap from the fresh delivered UPS package with brand new "Intel inside". Yeah, the instant joy of dividing by zero in “do-it-yourself” calculator apps is really hard to overvalue...

Calculator app was chosen due to my traditional approach of “litmus-testing” any novel technology set by coding calculator software from the scratch.  For over two decades of my programming experience with Microsoft development tools and variety of open source web technologies this pragmatic approach has been very productive. Instead of that notorious apps built around almost omnipresent greetings to the world (“Hello, cruel world”) I am usually practicing with 3 fundamental types of software applications listed below, which cover the lion share of real-life use cases:

  1. Data-centric apps (e.g. phone book)
  2. Algorithm-centric apps (e.g. calculators)
  3. Mixed type apps with balanced complexity of data and algorithms (e.g. calculator with reference data operations)

This simple applications taxonomy also exists in a huge variety of different terminological constructs, but I stick to this one due to its clarity. For the purpose of practicing with that high-decibel buzzing sounds of “water vapors” (aka Cloud computing) I have selected my popular engineering calculator Volta, previously developed with HTML5, CSS3 and jQuery [1]).


Beyond division by zeros, online Calculator Volta-2013 allows performing basic arithmetic and extended scientific operations, plus a set of specific electrical engineering computations. It also includes reference tables of standard E-Series (this corresponds to the data layer operations mentioned above).


Using the code 

Great deal of app's functionality and sample coding technique has been discussed in the previously published articles at [1-3]. Following code snippet reflects an important revision: Data access layer modification using AJAX for non-blocking page execution.


In the previous version, data load function (standard E-Series ref tables) was implemented in rather straightforward synchronous manner at the page load event. This may cause potential page blocking in case of data access failure. New version implements non-blocking asynchronous data load via AJAX as shown in the following code snippet 

// E-SERIES OPERATIONS BUTTON  EVENTS **********************
$("div#keyPad button.keyPad_btnESeries").click(function () {

    var _tab = $("#refTabESeries");
    switch ( {
        case 'keyPad_btnE6': BuildTableE("E6", _tab); break;
        case 'keyPad_btnE12': BuildTableE("E12", _tab); break;
        case 'keyPad_btnE24': BuildTableE("E24", _tab); break;
        case 'keyPad_btnE48': BuildTableE("E48", _tab); break;
        case 'keyPad_btnE96': BuildTableE("E96", _tab); break;
        case 'keyPad_btnE192': BuildTableE("E192", _tab); break;
        case 'keyPad_btnCe': ClearTableE(_tab); break;
        default: break;

function BuildTableE(xmlTag, tabOut)
    // max columns in E-Series table
    var _maxCol = 24;
    var _url = "Data/ESeries.xml"

        // load E-Series XML doc from file using AJAX
            type: "GET",
            url: _url,
            dataType: "xml",
            success: function (xmlDoc)
                // get particular E-Series elements by its tag from XML doc
                var arrSeries = xmlDoc.getElementsByTagName(xmlTag);

                // get standard values for E-Series
                var arrItems = arrSeries[0].getElementsByTagName('value');

                // clear table

                // add table header showing selected E-Series
                tabOut.last().append("<tr><th>" + xmlTag + "</th></tr>");

                // populate table by rows
                for (i = 0; i < arrItems.length; i++)
                    // actual column number
                    var _col = Math.min(_maxCol, arrItems.length);

                    // temp string to add row
                    var _str = "<tr>";

                    // populate row with standard values
                    for (j = 0; j < _col; j++)
                        _str += "<td>"+arrItems[i*_col+j].childNodes[0].nodeValue + "</td>";
                    _str += "</tr>";

                    // append row to the table

                    // optional animation
    catch (ex) { }

// Clear E-Series Table
function ClearTableE(tabOut)
    // optional animation

Points of Interest 

1. TIME FOR jQUERY 2 IS NOW and I don't care much about IE 6/7/8:

<script src=""></script>


This award-winning application is probably looking familiar to many Codeproject members and occasional readers (refer to [1], and also [2,3] for more details of coding technique w/HTML5, CSS3 and jQuery).

1. 04/26/2013: The application was upgraded to run under Visual Studio 2012 and deployed on Azure platform [6] (see sample screenshots shown below using 'light' background style):

Fig.2. CSS3 style corresponding to "Light" background (jQuery code snippet takes care of switching between styles)

2. 04/27/2013 "Web project migration from Visual Studio 2010 to VS 2012", illustrated developer's guide published online. 

3. 05/05/2013 Fully-functional web site deployed to Azure cloud. 

4. As the world turns, Engineering Calculator VOLTA-2014P for Windows 7/8 has been released on 05/19/2013


  1. Engineering Calculator VOLTA-2013
  2. Scientific Calculator ZENO-5000
  3. HTML5/CSS3 graphic enhancement: buttons, inputs
  4. YouTube™ API for ASP.NET


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


About the Author

President Infosoft International Inc
United States United States
Dr. Alexander Bell is a seasoned full-stack Software Engineer (Win/Web/Mobile). He holds PhD in EE/IT, authored 37 inventions and published 300+ technical articles. Currently focused on HTML5/CSS3, Javascript, .NET/WPF/C#, Angular.js, SQL, 'Big Data', Machine Learning, AI, IoT. Alex participated in App Innovation Contests (AIC 2102/2013) with multiple winning submissions. Portfolio samples:

  1. Real-time NY Bus Tracking Web App (IoT)

  2. Integrated Sensors Hub (IMU) Testing Web Page

  3. Semaphon™ semantic phone num-to-text converter

  4. Educational Web Portal

  5. Free Online NY Payroll Tax Calculator

  6. WebTV powered by YouTube Player powered by .NET API (#1 on Google)

  7. Top-50 Digital Cameras (by iMark-DCAM rating engine)

  8. Pure CSS3 Slide Show

  9. Inflation Calculator

  10. Multilingual Geocoder with Interactive Map

  11. Online Semantic Analyzer (Concordance Calculator)

  12. Advanced CSS3 Table Formatting

You may also be interested in...


Comments and Discussions

QuestionMaybe I'm missing something here? Pin
2374114-Nov-15 1:20
member2374114-Nov-15 1:20 
AnswerRe: Maybe I'm missing something here? Pin
2374114-Nov-15 1:22
member2374114-Nov-15 1:22 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 17 Feb 2015
Article Copyright 2013 by DrABELL
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid