Add lobby display to website

content/js/meteorogram/controller.js

@@ -10,9 +10,10 @@ function API(div, controlDiv, plotsInfo) {
         // Our storage of the plotly data/traces being plotted right now
         dataCache: [],
 
-        initMeteorogram: function(plot_div, plotOrder) {
+        initMeteorogram: function(plot_div, plotOrder, isLobbyDisplay) {
             this.hasGraph = true;
             this.plotDiv = plot_div || this.plotDiv;
+            this.dataCache.isLobbyDisplay = isLobbyDisplay
             //start with only the selected plots showing, reveal others only if their data is requested
             myDispatcher.dispatch({
                 'status': 'initPlot',

content/js/meteorogram/dispatcher.js

@@ -7,6 +7,7 @@ var Plot = require('./plot/init.js');
 var Table = require('./plot/table.js');
 var dataAccess = require('./plot/data.js');
 var loading = require('./ui/loading.js');
+var updatePlot = __webpack_require__(/*! ./update.js */ "./plot/update.js");
 
 function getDispatcher() {
     var myDispatcher = new Flux.Dispatcher();
@@ -26,6 +27,33 @@ function getDispatcher() {
         }
     }
 
+    function dispatchChangeUnits(unitCount) {
+        return function() {
+            unitCount = (unitCount + 1) % 2
+            //dispatch update message to plotStore
+            myDispatcher.dispatch({'status': 'changeUnits', 'emit': 'plotEmitter', 'unitCount': unitCount});
+        }
+    }
+
+    function changeBackgroundColor(hue) {
+        var dim = 0;
+        var bright = 360;
+//        hue += .05
+        // .05 at factors of 60, .1 halfway between two factors of 60. "Boosts through worse colors".
+        hue += (Math.min(60 - hue % 60, hue % 60) / 60 / 20 + .05)
+        // Loops around the color circle.
+        if (hue > bright) {
+            hue = dim
+        }
+        // Make the brighter colors more grey to match the darker colors above them.
+        document.getElementById('row1').style.backgroundColor = 'hsl(' + hue + ',' + 100 + '%,' + 15 + '%)';
+        document.getElementById('row2').style.backgroundColor = 'hsl(' + hue + ',' + 75 + '%,' + 30 + '%)';
+        document.getElementById('row3').style.backgroundColor = 'hsl(' + hue + ',' + 50 + '%,' + 45 + '%)';
+        window.requestAnimationFrame(function () {
+            changeBackgroundColor(hue);
+        });
+    }
+
     //creates checkbox store
     var checkboxEmitter = ee({
         visible: {},
@@ -82,6 +110,9 @@ function getDispatcher() {
                 }
 
                 if (action.status == 'get_since_now') {
+                    if (this.dataCache.isLobbyDisplay) {
+                        action.time = '-6:00:00'
+                    }
                     this.emit(
                         action.status,
                         action.time,
@@ -118,6 +149,8 @@ function getDispatcher() {
                         this.plotsInfo);
                 } else if (action.status == 'update') {
                     this.emit(action.status, this.div, this.plotsInfo, this.dataCache, action.startTime);
+                } else if (action.status == 'changeUnits') {
+                    this.emit(action.status, this.div, this.plotsInfo, this.dataCache, action.unitCount);
                 } else {
                     //adds parameter for user information in custom plot
                     // console.debug("Emitting user information message: {action.status} : {action.userInfo}");
@@ -128,14 +161,16 @@ function getDispatcher() {
     });
 
 
-    function stopUpdate(plotsInfo) {
+    function stopUpdate(plotsInfo, isLobbyDisplay) {
         if(!plotsInfo.progress)
             plotsInfo.progress = {};
         if(plotsInfo.progress.validID){
             var id = plotsInfo.progress.id[0];
             clearInterval(id);
+            if (isLobbyDisplay) {
+                clearInterval(plotsInfo.progress.lobbyID);
+            }
             plotsInfo.progress.validID = false;
-
         }
     }
 
@@ -147,11 +182,11 @@ function getDispatcher() {
     };
 
 
-    function startUpdate(startTime, interval, plotsInfo) {
+    function startUpdate(startTime, interval, plotsInfo, isLobbyDisplay) {
         // stop any previous updates
         if(!plotsInfo.progress)
             plotsInfo.progress = {};
-        stopUpdate(plotsInfo);
+        stopUpdate(plotsInfo, isLobbyDisplay);
 
         // resume update operations
         if (startTime === undefined) {
@@ -163,6 +198,11 @@ function getDispatcher() {
 
         // every 30 seconds, rings update alarm
         var intervalID = setInterval(dispatchUpdate(startTime), updateInterval[interval]);
+        if (isLobbyDisplay) {
+            var startingHue = getComputedStyle(document.getElementById("color")).getPropertyValue('--starting-hue')
+            changeBackgroundColor(Number(startingHue))
+            plotsInfo.progress.lobbyID = setInterval(dispatchChangeUnits(0), 5000);
+        }
         // save alarm id
         plotsInfo.progress.id = [intervalID, startTime, interval];
         plotsInfo.progress.validID = true;
@@ -182,13 +222,13 @@ function getDispatcher() {
     plotEmitter.on('initPlot', function(div, plotOrder, plotsInfo, dataCache) {
         //initialize checkbox store
         checkboxEmitter.setPlots(plotsInfo);
-        Plot.initPlot(dataCache, div, plotOrder, plotsInfo);
+        Plot.initPlot(dataCache, div, plotOrder, plotsInfo, dataCache.isLobbyDisplay);
     });
 
     plotEmitter.on("get_since_now", function(time, plotsInfo, dataCache, div) {
         var interval = dataAccess.requestPlotUpdate(dataCache, div, plotsInfo, time,
             undefined, undefined, undefined, stopUpdate);
-        startUpdate(time, interval, plotsInfo);
+        startUpdate(time, interval, plotsInfo, dataCache.isLobbyDisplay);
     });
 
     plotEmitter.on("get_between_dates",function(start, end, interval, plotsInfo, dataCache, div) {
@@ -198,7 +238,11 @@ function getDispatcher() {
 
     //when store recieves signal, update component
     plotEmitter.on('update', function(div, plotsInfo, dataCache, startTime) {
-        dataAccess.requestPlotUpdate(dataCache, div, plotsInfo, startTime, undefined, undefined, true);
+        dataAccess.requestPlotUpdate(dataCache, div, plotsInfo, startTime, undefined, undefined, true, undefined);
+    });
+
+    plotEmitter.on('changeUnits', function(div, plotsInfo, dataCache, unitCount) {
+        updatePlot.changeUnits(dataCache, document.getElementById(div), plotsInfo, unitCount)
     });
 
     plotEmitter.on("checking_custom", function()

content/js/meteorogram/package.json

@@ -17,7 +17,7 @@
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
     "babel-preset-es2015": "^6.24.1",
-    "jsdoc": "^3.5.5",
+    "jsdoc": "^3.6.2",
     "npm-run-all": "^4.1.5",
     "npm-watch": "^0.6.0",
     "raw-loader": "^2.0.0",

content/js/meteorogram/plot/init.js

@@ -31,9 +31,17 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
     var layout = {
         title: plotsInfo.title,
         showlegend: false,
-        height: DEFAULT_PLOT_HEIGHT * nshowing + 180,
+        height: DEFAULT_PLOT_HEIGHT * nshowing + 180
     };
-
+    if (dataCache.isLobbyDisplay) {
+        delete layout['height'];
+        layout['autosize'] = true;
+        layout['margin'] = {t:0, l:0, r:0, b:0}
+        layout['font'] = { color: 'white' };
+        layout['paper_bgcolor'] = 'rgba(0,0,0,0)';
+        layout['plot_bgcolor'] = 'rgba(0,0,0,0)';
+        layout['annotations'] = [];
+    } else {
         layout['xaxis'] = {
             //domain affects size of x axis
             //this made room for the legend
@@ -55,6 +63,7 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
             showgrid: false,
             tickformat: '%Y-%m-%d %H:%MZ'
         };
+    }
 
     var axis_number = 0;
     var axis_info;
@@ -67,18 +76,20 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
     var step = 1 / nshowing;
     var domain;
     var x_anchor = axis_number;
-    var trace_kwargs = ['color', 'mode', 'zmin', 'zmax', 'y',
-        'contours', 'line', 'colorscale', 'showscale', 'colorbar', 'tick0', 'dtick', 'hovermode'];
-    var axis_kwargs = ['nticks', 'range', 'autorange', 'zeroline', 'showgrid',
-        'tickmode', 'ticktext', 'tickvals'];
+    var trace_kwargs = ['marker', 'color', 'mode', 'zmin', 'zmax', 'y', 'contours', 'line', 'colorscale', 'showscale', 'colorbar', 'tick0', 'dtick', 'hovermode'];
+    var axis_kwargs = ['nticks', 'range', 'autorange', 'zeroline', 'showgrid', 'tickmode', 'ticktext', 'tickvals'];
+    var y0;
     for (var plot_idx = 0; plot_idx < plotOrder.length; plot_idx++) {
         plot_key = plotOrder[plot_idx];
         plot_info = plotsInfo.plots[plot_key];
         axis_number += 1;
         x_anchor = axis_number;
         axis_info = plot_info.yaxis;
-        domain = [(plotOrder.length - 1 - plot_idx) * step * 1.03,
-            1 - plot_idx * step * 1.05];
+        domain = [(plotOrder.length - 1 - plot_idx) * step * 1.03, 1 - plot_idx * step * 1.05];
+        if (dataCache.isLobbyDisplay) {
+            // Leaves 8% for the header, then divides the rest into thirds with 10% height above and below each graph.
+            domain = [.82 - 8 / 75 - (.2 + 8 / 75) * Math.floor(plot_idx / 3), .82 - (.2 + 8 / 75) * Math.floor(plot_idx / 3)];;
+        }
 
         // Create the necessary traces (lines)
         for (var trace_info_idx = 0; trace_info_idx < plot_info.traces.length; trace_info_idx++) {
@@ -98,8 +109,11 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
                 anc_variables: trace_info['anc_variables'],
                 anc_data: [],
                 plot_name: plot_key,
-                trace_index: trace_info_idx,
+                trace_index: trace_info_idx
             };
+            if (dataCache.isLobbyDisplay) {
+                trace_config['xaxis'] = 'x' + axis_number;
+            }
 
             // when we have a second trace that is purely there to make the
             // second y-axis appear, we do this to point the trace to the
@@ -129,11 +143,70 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
             title: axis_info['title'],
             zeroline: false,
             // where on the canvas does this axis belong
-            domain: [
-                (plotOrder.length - 1 - plot_idx) * step * 1.03,
-                1 - plot_idx * step * 1.05
-            ],
+            domain: domain
+        };
+        if (dataCache.isLobbyDisplay) {
+            y0 = domain[1]
+            layout['xaxis' + axis_number] = {
+                tickvals: [-1, 2.5, 6],
+                ticktext: ['-6h', '-3h', 'Now'],
+                showline: true,
+                linecolor: 'white',
+                // 1 is the far right of the plot, 0 is the far left
+                anchor: 'y' + axis_number,
+                // Space the x-axis with the 10% of window width on each side. The bottom row has no middle graph,
+                // which is why we multiply by (1 + Math.floor(plot_idx / 6)).
+                domain: [.1 + 1 / 3 * (plot_idx % 3) * (1 + Math.floor(plot_idx / 6)), 14 / 60 + 1 / 3 * (plot_idx % 3) * (1 + Math.floor(plot_idx / 6))],
+                //xaxis doesn't show its lines
+                zeroline: false,
+                //hide grid
+                showgrid: false
             };
+            // This is the text for the current value above each graph.
+            layout['annotations'].push({
+                font: {
+                    'size': 48
+                },
+                showarrow: false,
+                align: 'center',
+                // Middle of each x-axis domain.
+                x: 1/6 + 1 / 3 * (plot_idx % 3) * (1 + Math.floor(plot_idx / 6)), //position in x domain
+                y: y0 + .04, //position in y domain
+                xref: 'paper',
+                yref: 'paper',
+                //Makes text centered
+                showarrow: true,
+                arrowhead: 0,
+                ax: 0,
+                ay: 0,
+              });
+            // This is the text for the name of each graph.
+            layout['annotations'].push({
+                text: trace_info['name'],
+                font: {
+                    'size': 14
+                },
+                showarrow: false,
+                align: 'center',
+                x: 1/6 + 1 / 3 * (plot_idx % 3) * (1 + Math.floor(plot_idx / 6)), //position in x domain
+                y: y0 + .085, //position in y domain
+                xref: 'paper',
+                yref: 'paper',
+                //Makes text centered
+                showarrow: true,
+                arrowhead: 0,
+                ax: 0,
+                ay: 0,
+              });
+            // Removes title from yaxis.
+            delete axis_config['title']
+            axis_config['showgrid'] = false;
+            axis_config['showticklabels'] = true;
+            // Give each subgraph its own y-axis.
+            axis_config['anchor'] = 'x' + axis_number;
+            axis_config['showline'] =  true;
+            axis_config['linecolor'] = 'white';
+        }
 
         for (idx = 0; idx < axis_kwargs.length; idx++) {
             key = axis_kwargs[idx];
@@ -147,7 +220,7 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
         // Process second y-axis config
         // Skip if specified meaning this configuration is only parsed
         // for additional hover/probe information (custom MetObs thing, not Plotly)
-        if ('yaxis2' in plot_info && !plot_info.yaxis2.skip) {
+        if (!dataCache.isLobbyDisplay && 'yaxis2' in plot_info && !plot_info.yaxis2.skip) {
             axis_number += 1;
             axis_info = plot_info.yaxis2;
             axis_config = getSecondAxisConfig(axis_number, plot_info, axis_info, axis_kwargs);
@@ -161,6 +234,60 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
         //     layout['probe' + axis_number] = axis_config;
         // }
     }
+    // Header text providing data about the display.
+    if (dataCache.isLobbyDisplay) {
+        layout['annotations'].push({
+            text: 'Rooftop Instrument Group (RIG) - Current Readings',
+            font: {
+                'size': 24
+            },
+            showarrow: false,
+            align: 'center',
+            x: .5,
+            y: .985, //position in y domain
+            xref: 'paper',
+            yref: 'paper',
+            // Makes text centered.
+            showarrow: true,
+            arrowhead: 0,
+            ax: 0,
+            ay: 0,
+        });
+        layout['annotations'].push({
+            text: 'Updated at: 2019-04-22 14:56:37Z [Apr 22, 2019 9:56:37 AM Local]          RIG Elevation = 327.5 meters',
+            font: {
+                'size': 16
+            },
+            showarrow: false,
+            align: 'center',
+            x: .5,
+            y: .96, //position in y domain
+            xref: 'paper',
+            yref: 'paper',
+            // Makes text centered.
+            showarrow: true,
+            arrowhead: 0,
+            ax: 0,
+            ay: 0,
+        });
+        layout['annotations'].push({
+            text: 'Data values updated every 2 minutes      --      Trend graphs show 6 hour history [2 minute average]',
+            font: {
+                'size': 14
+            },
+            showarrow: false,
+            align: 'center',
+            x: .5,
+            y: .94, //position in y domain
+            xref: 'paper',
+            yref: 'paper',
+            // Makes text centered.
+            showarrow: true,
+            arrowhead: 0,
+            ax: 0,
+            ay: 0,
+        });
+    } else {
         // xaxis only shows on the bottom most plot
         layout['xaxis']['anchor'] = 'y' + x_anchor;
 
@@ -173,7 +300,7 @@ function initPlot(dataCache, div_id, plotOrder, plotsInfo) {
             'displayModeBar': true,
             'responsive': true
         };
-
+    }
     //creates new graph
     Plotly.plot(div_id, dataCache, layout, toolbar);
     loading.loading();

content/js/meteorogram/plot/ticks.js

@@ -60,6 +60,12 @@ function getAccumMillimeter(val) {
 }
 
 
+function getPressureLymin(val) {
+    // convert Watts per square meter to Langley per min
+    return val / (11.622 * 60);
+}
+
+
 function cardinalWDir(degrees){
     
     return ['N','NNE','NE','ENE',
@@ -84,6 +90,7 @@ var CONVERSION_FUNCTIONS = {
     getPresInHg: getPresInHg,
     getSpeedMPH: getSpeedMPH,
     getAccumMillimeter: getAccumMillimeter,
+    getPressureLymin: getPressureLymin,
     cardinalWDir: cardinalWDir,
     getSpeedKTS:getSpeedKTS
 };

content/js/meteorogram/plot/update.js

@@ -22,6 +22,73 @@ function removeOldPoints(dataCache, removeCount) {
 }
 
 
+function changeUnits(dataCache, graphDiv, plotsInfo, unitCount) {
+    // Note: unitCount alternates between 0 and 1.
+    var i;
+    var j;
+    var plotName;
+    var plotInfo;
+    var currData;
+    var tick_dates;
+    // This changes the graphDiv y-axis we are getting.
+    var axis_number;
+    var converted_tickvals;
+    var tickvals;
+    var layoutUpdates = {}
+    var curr_date = dataCache[0]['x'][dataCache[0]['x'].length - 1];
+    var date_local = new Date(curr_date + ' UTC');
+    var date_utc = new Date(curr_date);
+    // Add 2 minutes since data on display is from 2 minutes before it's updated.
+    date_local.setMinutes(date_local.getMinutes() + 2);
+    date_utc.setMinutes(date_utc.getMinutes() + 2);
+    date_local = date_local.toString();
+    var dateParts = date_local.split(' ');
+    var hour = Number(dateParts[4].split(':')[0]);
+    var period = hour >= 12 ? ' PM' : ' AM';
+    hour -= hour > 12 ? 12 : 0;
+    var localTime = hour + ':' + dateParts[4].split(':')[1] + ':' + dateParts[4].split(':')[2] + period;
+    // Make the screen go black between 1 and 5 am.
+    if (period == ' AM' && hour > 0 && hour < 5) {
+        document.getElementById("overlay").style.opacity = 1;
+        return
+    } else {
+        document.getElementById("overlay").style.opacity = 0;
+    }
+    // This changes the plotInfo y-axis we are getting, which switches between units every time changeUnits is called.
+    var yaxis = unitCount == 0 ? 'yaxis' : 'yaxis2';
+    var elevation = unitCount == 0 ? '327.5 meters' : '1074.5 feet';
+    date_utc = date_utc.getFullYear() + '-' + (date_utc.getMonth() + 1) + '-' + date_utc.getDate() + ' ' + date_utc.toString().split(' ')[4] + 'Z';
+    // day of the week, month, date, year, local time.
+    date_local = dateParts[0] + ', ' + dateParts[1] + ' ' + dateParts[2] + ', ' + dateParts[3] + ' ' + localTime;
+    layoutUpdates['annotations.' + (graphDiv.layout['annotations'].length - 2) + '.text'] = 'Updated at: ' + date_utc + ' [' + date_local + ' Local]          RIG Elevation = ' + elevation;
+    // Update  each subgraph's displayed y-axis and current data values.
+    for (i = 0; i < dataCache.length; i++) {
+        axis_number = i == 0 ? '' : i + 1;
+        tick_dates = dataCache[i]['x'];
+        // Prevents '-6h' from falling off x-axis.
+        layoutUpdates['xaxis' + axis_number + '.tickvals'] = [ tick_dates[0], tick_dates[Math.round(tick_dates.length / 2)], tick_dates[tick_dates.length - 1]]
+        plotName = dataCache[i].plot_name;
+        plotInfo = plotsInfo.plots[plotName];
+        // Convert data to the correct units.
+        currData = ticktext.getTickText([dataCache[i]['y'][dataCache[i]['y'].length - 1]], plotInfo[yaxis])[0];
+        layoutUpdates['annotations[' + 2 * i + '].text'] = currData + '' + plotInfo[yaxis]['units']
+        tickvals = graphDiv.layout['yaxis' + axis_number]['tickvals']
+        // Doesn't change Relative Humidity and Wind Direction ticks.
+        if (tickvals != undefined) {
+            converted_tickvals = []
+            for (j = 0; j < tickvals.length; j++) {
+                converted_tickvals.push(ticktext.getTickText([tickvals[j]], plotInfo[yaxis]))
+            }
+            layoutUpdates['yaxis' + axis_number + '.ticktext'] = converted_tickvals
+        }
+    }
+    // Updates everything at once to save time.
+    Plotly.relayout(graphDiv, layoutUpdates);
+}
+
+module.exports.changeUnits = changeUnits;
+
+
 function replaceData(dataCache, graphDiv, plotsInfo, dataObj, update, maxPoints) {
     var dates = dataObj.dates;
     var plotName;
@@ -49,6 +116,15 @@ function replaceData(dataCache, graphDiv, plotsInfo, dataObj, update, maxPoints)
     };
 
     var traceIndex = 0;
+
+    if (dataCache.isLobbyDisplay) {
+        var layoutUpdates = {};
+        var spread;
+        var bottom;
+        var top;
+        var axis_number;
+        var tick0;
+    }
     /**
      *
      * If we are updating the plots instead of replacing them, then try
@@ -106,6 +182,51 @@ function replaceData(dataCache, graphDiv, plotsInfo, dataObj, update, maxPoints)
                 tracesToExtend.push(traceIndex + index);
                 // scatter plots, assume the y data is the data being updated
                 _.each(traceInfo.var_names, function (var_name) {
+                    if (dataCache.isLobbyDisplay) {
+                        axis_number = i == 0 ? '': i + 1;
+                        // Set the range of each graph if applicable.
+                        if (var_name != 'aoss.tower.rel_hum' && var_name != 'aoss.tower.wind_direction') {
+                            // dataObj[var_name] will only contain new data. Thus we must keep track of old mins/maxs.
+                            if (dataCache[i]['y'].length == 0) {
+                                // dataCache[i]['y'] gets overridden somewhere.
+                                dataCache[i].yMin = Math.min(...dataObj[var_name])
+                                dataCache[i].yMax = Math.max(...dataObj[var_name])
+                            } else {
+                                dataCache[i].yMin = Math.min(...dataObj[var_name], dataCache[i].yMin)
+                                dataCache[i].yMax = Math.max(...dataObj[var_name], dataCache[i].yMax)
+                            }
+                            spread = dataCache[i].yMax - dataCache[i].yMin;
+                            bottom = dataCache[i].yMin - spread;
+                            top = var_name == 'aoss.tower.solar_flux' ? dataCache[i].yMax : dataCache[i].yMax + spread;
+                            // Make graph visible if flat line: Add a margin equal to 10% of the value if non-zero,
+                            // else scale from 0 to 1.
+                            if (spread == 0) {
+                                // Note: top == bottom since spread == 0.
+                                if (top > 0) {
+                                    top = top * 1.1
+                                    bottom = bottom * .9
+                                } else if (top < 0) { // Only applies to air_temp and dewpoint.
+                                    top = top * .9
+                                    bottom = bottom * 1.1
+                                } else {
+                                    top = 1
+                                    bottom = 0
+                                }
+                            }
+                            // Used to lower bottom so that the graph can be seen if it is 0.
+                            tick0 = bottom
+                            // If bottom < 0: Make the bottom 0 since values cannot be negative,
+                            // and lower the bottom to see 0.
+                            if (var_name != 'aoss.tower.air_temp' && var_name != 'aoss.tower.dewpoint' && bottom <= 0) {
+                                bottom = -.05 * spread - .05;
+                                tick0 = 0;
+                            }
+                            layoutUpdates['yaxis' + axis_number + '.tickvals'] = [tick0, tick0 + (top - tick0) / 4, tick0 + 2 * (top - tick0) / 4, tick0 + 3 * (top - tick0) / 4, top]
+                            layoutUpdates['yaxis' + axis_number + '.range'] = [bottom, top]
+                        } else {
+                            layoutUpdates['yaxis' + axis_number + '.tickvals'] = plotInfo['yaxis2']['tickvals']
+                        }
+                    }
                     // push the entire new data array as one element to update
                     extendData.y.push(dataObj[var_name]);
 
@@ -155,13 +276,20 @@ function replaceData(dataCache, graphDiv, plotsInfo, dataObj, update, maxPoints)
         removeOldPoints(dataCache, dataCache[0].x.length - maxPoints);
     }
 
+    if (dataCache.isLobbyDisplay) {
+        // Updates everything at once to save time. Should be done after all dataCache manipulations.
+        Plotly.relayout(graphDiv, layoutUpdates);
+        // The first time through, call changeUnits to display current data.
+        if (!update) {
+            changeUnits(dataCache, graphDiv, plotsInfo, 0);
+        }
+    }
     if (forceRedraw) {
         Plotly.redraw(graphDiv);
     }
 }
 
 
-
 function updatePlot(dataCache, graphDiv, plotsInfo, dataObj, update, maxPoints) {
     replaceData(dataCache, graphDiv, plotsInfo, dataObj, update, maxPoints);
 }

content/js/meteorogram/site_configs_lobby.js

+/*Config options for different sites*/
+var siteConfigs = {
+    'aoss.tower': {
+        defaultPlots: ['air_temp', 'dewpoint', 'rel_hum', 'wind_direction', 'wind_speed', 'accum_precip', 'solar_flux', 'pressure'],
+        plots: {
+            air_temp: {
+                traces: [
+                    {
+                        name: 'Temperature',
+                        var_names: ['aoss.tower.air_temp'],
+                        line: {
+                            color: 'white',
+                            width: 1.5
+                        },
+                    },
+                ],
+                yaxis: {
+                    title: 'Temp (°C)',
+                    convert_value: null,
+                    units: '°C',
+                    precision: 0,
+                },
+                yaxis2: {
+                    title: 'Temp (°F)',
+                    convert_value: 'getF',
+                    units: '°F',
+                    precision: 0,
+                },
+            },
+            dewpoint: {
+                traces: [
+                    {
+                        // Dewpoint
+                        name: 'Dew Point',
+                        var_names: ['aoss.tower.dewpoint'],
+                        line: {
+                            color: 'white',
+                            width: 1.5
+                        },
+                    },
+                ],
+                yaxis: {
+                    title: 'Dew Point (°C)',
+                    convert_value: null,
+                    units: '°C',
+                    precision: 0,
+                },
+                yaxis2: {
+                    title: 'Dew Point (°F)',
+                    convert_value: 'getF',
+                    units: '°F',
+                    precision: 0,
+                },
+            },
+            pressure: {
+                traces: [
+                    {
+                        name: 'Pressure',
+                        var_names: ['aoss.tower.pressure'],
+                        line: {
+                            color: 'white',
+                            width: 1.5
+                        },
+                    },
+                ],
+                yaxis: {
+                    title: 'Pressure (hpa)',
+                    convert_value: null,
+                    units: 'hPa',
+                    precision: 1,
+                },
+                yaxis2: {
+                    title: 'Pressure (inHg)',
+                    convert_value: 'getPresInHg',
+                    units: 'inHg',
+                    precision: 2,
+                },
+            },
+            rel_hum: {
+                traces: [
+                    {
+                        name: 'Relative Humidity',
+                        var_names: ['aoss.tower.rel_hum'],
+                        line: {
+                            color: 'white',
+                            width: 1.5
+                        },
+                    },
+                ],
+                yaxis: {
+                    title: 'Relative Humidity (%)',
+                    range: [-0.5, 105.0],
+                    tickvals: [0, 20, 40, 60, 80, 100],
+                    ticktext: ['0', '20', '40', '60', '80', '100'],
+                    convert_value: null,
+                    units: '%',
+                    precision: 0,
+                },
+                yaxis2: {
+                    title: 'Relative Humidity (%)',
+                    range: [-0.5, 105.0],
+                    tickvals: [0, 20, 40, 60, 80, 100],
+                    ticktext: ['0', '20', '40', '60', '80', '100'],
+                    convert_value: null,
+                    units: '%',
+                    precision: 0,
+                },
+            },
+            wind_speed: {
+                traces: [
+                    {
+                        name: 'Wind Speed',
+                        var_names: ['aoss.tower.wind_speed'],
+                        line: {
+                            color: 'white',
+                            width: 1.5
+                        },
+                    },
+                ],
+                yaxis: {
+                    title: 'Wind Speed (kt)',
+                    convert_value: 'getSpeedKTS',
+                    units: 'kt',
+                    precision: 0,
+                },
+                yaxis2: {
+                    title: 'Wind Speed (mph)',
+                    convert_value: 'getSpeedMPH',
+                    units: 'mph',
+                    precision: 0,
+                }
+            },
+            wind_direction: {
+                traces: [
+                    {
+                        name: 'Wind Direction',
+                        var_names: ['aoss.tower.wind_direction'],
+                        line: {
+                            color: 'white'
+                        },
+                        mode: 'markers',
+                        marker: {size: 3}
+                    },
+                ],
+                yaxis: {
+                    title: 'Wind Direction (°)',
+                    range: [-20, 380],
+                    tickvals: [0, 90, 180, 270, 360],
+                    convert_value: null,
+                    units: '°',
+                    precision: 0,
+                },
+                yaxis2: {
+                    title: 'Wind Direction',
+                    range: [-20, 380],
+                    tickvals: [0, 90, 180, 270, 360],
+                    ticktext: ['N', 'E', 'S', 'W', 'N'],
+                    convert_value: 'cardinalWDir',
+                    units:'',
+                    precision: 0,
+                },
+            },
+            accum_precip: {
+                traces: [
+                    {
+                        name: 'Accumulated Precipitation',
+                        short_name:'Accum. Precip.',
+                        var_names: ['aoss.tower.accum_precip'],
+                        line: {
+                            color: 'white',
+                            width: 1.5
+                        },
+                    },
+                ],
+                yaxis: {
+                    title: 'Accum Precip (mm)',
+                    convert_value: 'getAccumMillimeter',
+                    units: 'mm',
+                    precision: 1,
+                },
+                yaxis2: {
+                    title: 'Accum Precip (inches)',
+                    convert_value: null,
+                    units: 'in',
+                    precision: 2,
+                },
+            },
+            solar_flux: {
+                traces: [
+                    {
+                        name: 'Solar Flux',
+                        var_names: ['aoss.tower.solar_flux'],
+                        line: {
+                            color: 'white',
+                            width: 1.5
+                        },
+                    },
+                ],
+                yaxis: {
+                    title: 'Solar Flux (W/m^2)',
+                    convert_value: null,
+                    units: 'W/m^2',
+                    precision: 0,
+                },
+                yaxis2: {
+                    title: 'Solar Flux (Ly/min)',
+                    convert_value: 'getPressureLymin',
+                    units: 'Ly/min',
+                    precision: 2,
+                },
+            },
+        },
+    },
+};
\ No newline at end of file

content/pages/lobby_meteorogram.html

+<html>
+<head>
+    <title>AOSS Tower Meteorogram</title>
+
+    <meta name="url" content="aoss/tower/meteorogram$lobby-display/">
+    <meta name="save_as" content="aoss/tower/meteorogram$lobby-display/index.html">
+    <meta name="category" content="data" />
+    <meta name="summary" content="Real-time Data Dashboard" />
+    <meta name="template" content="lobby_base_meteorogram" />
+
+</head>
+<body>
+<!----starting-hue is what hsl color the background will start at.-->
+<div id="color" style="z-index: 1; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; --starting-hue: 0; color: 120">
+    <div id="header" style="height: 8%; width: 100%;  background-color: grey"></div>
+    <div id="row1" style="height: calc(92%/3); width: 100%"></div>
+    <div id="row2" style="height: calc(92%/3); width: 100%"></div>
+    <div id="row3" style="height: calc(92%/3); width: 100%"></div>
+</div>
+<div id="graph" style="z-index: 2; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%"><div>
+<div id="overlay" style="z-index: 3; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-color: black; opacity: 1"><div>
+<script type="text/javascript" src="/js/meteorogram/meteorogram.js"></script>
+<script type="text/javascript" src="/js/meteorogram/site_configs_lobby.js"></script>
+<script type="text/javascript">
+    var met = MeteorogramController('graph', 'control-container', siteConfigs['aoss.tower']);
+    met.initMeteorogram(undefined, undefined, true);
+    met.initMeteorogramControls();
+    met.displayRealTime();
+</script>
+</body>
+</html>

themes/rain-theme/templates/lobby_base.html

+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <!--Page title-->
+    <title>{% block title %}{% endblock %} - RAIN | SSEC @ UW-Madison</title>
+    <!--Javascript includes -->
+    {% include "header.html" %}
+    <!-- Populate javascript environment variables from conf-->
+    <script>
+       {% for key,val in JS_CONF_VARS.items() %}
+         var {{key}} = '{{val}}';
+       {% endfor %}
+    </script>
+    <!--Page Header-->
+    {% block header %}{% endblock %}
+
+</head>
+
+<body>
+    <!--Page Content-->
+    {% block content %}{% endblock %}
+</body>
+</html>

themes/rain-theme/templates/lobby_base_meteorogram.html

+{% extends "lobby_page.html" %}
+{% block header %}
+    {{super()}}
+
+    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">-->
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.10/jquery.timepicker.min.css" type="text/css">
+    <link rel="stylesheet" href="{{ SITE_URL }}/theme/css/meteorogram_style.css">
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
+    <!--<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>-->
+{% endblock %}

themes/rain-theme/templates/lobby_page.html

+{% extends "lobby_base.html" %}
+{% block title %}{{ page.title }}{% endblock %}
+{% block content %}
+    {% include page.url[:-1] + "_header.html" ignore missing %}
+    {{page.content}}
+{% endblock %}