Gasworks, redux.

The majority of what I spent my time on this weekend was finishing up some outstanding contract work that desperately needed to be completed. The project in particular is called 'Gasworks', for Energy Operations Management (EOM). They are a privately-owned natural gas transmission line company. What this means is, let's say you have some property that has natural gas deposits. You've drilled, and there is actually natural gas there. That's great, but what do you do now? That is where EOM comes in. They build and manage pipelines from natural gas wells to the market, either by connecting to a utilities transmission line, or directly to a customer (Normally a power plant or refinery).

EOM has a SCADA system that monitors their real-time natural gas flow rates and pressures throughout all the pipelines they manage. Gasworks is a web application that ties into EOM's SCADA system, and offers up that real-time data to EOM's customers. I designed the original Gasworks back in 2005, and have been updating and revising it ever since. Most recently, they were due for a complete overhaul. They needed a better design, better mobile/tablet support, and a robust administration section, where their staff could add Locations and Data points to the system, as well as manage customer logins and permissions.

I utilized the CodeIgniter MVC Framework for the site, using their default css for the administration side, and using jQuery Mobile for the customer side. I made a significant change this time around. All the data a customer sees when they log in is pulled from XML (generated via CodeIgniter). The main page is generated with jQuery, based on the XML. It's pretty fast, and lets customers refresh their page without a total page reload. It also added the capability to have customers pull their XML, and integrate it into their own SCADA systems.

On to the screenshots! I can't really show the administration half, since the data is confidential.

[caption id="attachment_200" align="aligncenter" width="645"] The XML data that is generated via CodeIgniter[/caption]

[caption id="attachment_201" align="aligncenter" width="300"] The main view the customer sees when they log in. Systems and locations are all dependent on user permissions. [/caption]

[caption id="attachment_202" align="aligncenter" width="300"] Systems expand to show locations within. Notice how it relates to the generated XML[/caption]

[caption id="attachment_203" align="aligncenter" width="300"] When user clicks on specific location, they see realtime charts. Layout different depending on device used. Mobile users will have charts vertical for spacing issues.[/caption]

And for those who are interested, here is an example of some of the js I wrote. This is the js function I use to parse the XML and print out the main view of Gasworks.

function parseXml(xml)
{
    var html='\n';
    html+='\t
\n';

    $(xml).find("system").each(function() {
        html+='\t
\n';
        html+='\t\t
'+$(this).attr('name')+'
\n\n';          
        
        html+='\t\t
\n';
        $(this).children('location').each(function() {
            var location_html='';
            var latest_poll=new Date('January 1, 2000'););
            var a_or_b=true;
            $(this).children('tag').each(function() {
                
                if($(this).attr('date'))
                {
                    date_string = $(this).attr('date');
                    var this_date = new Date(date_string.replace(/-/g,'/'));
                    if(latest_poll"+$(this).attr('name')+''+the_time+'\n';
            html+=location_html;
                
        });
        html+='\t\t
 \n';

        html+='\t
 \n';
            
    });
    html+='\t
 \n';
        
    $('#loading').hide();
    $('#accordion_content').text('');
    $('#accordion_content').append(html).trigger('create');

    $('#accordion_content').show();
}

I'm proud of how this came out. It helped me become very familiar with the jQuerymobile framework, and definitely leveled up my XML manipulation skills.