Skip to content
Snippets Groups Projects

Add Lobby Display to Website

Merged William Roberts requested to merge wroberts/MetObsSite:develop into develop

I added a "look a like" lobby display to aoss/tower/lobby.

The way that tower/lobby is distinguished from tower/meteorogram programmatically is via plotInfo.isLobbyDisplay which is set to true via site_configs_lobby.js. The rest of the code structure is the same at meteorogram, but checks if plotInfo.isLobbyDisplay is true along the way, and acts accordingly.

Notes:

  1. The background color is changed every 1 second by setInterval, which changes the background-color attributes in tower/lobby (using hsl color scheme). The initial color is set via --starting-hue which defaults to 0.

  2. Units change every 5 seconds: Both the current values and the y-axis values.

Requested and assisted by @davidh

Edited by William Roberts

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
10 10 // Our storage of the plotly data/traces being plotted right now
11 11 dataCache: [],
12 12
13 initMeteorogram: function(plot_div, plotOrder) {
13 initMeteorogram: function(plot_div, plotOrder, isLobbyDisplay) {
14 14 this.hasGraph = true;
15 15 this.plotDiv = plot_div || this.plotDiv;
16 this.dataCache.isLobbyDisplay = isLobbyDisplay
  • 67 76 var step = 1 / nshowing;
    68 77 var domain;
    69 78 var x_anchor = axis_number;
    70 var trace_kwargs = ['color', 'mode', 'zmin', 'zmax', 'y',
    71 'contours', 'line', 'colorscale', 'showscale', 'colorbar', 'tick0', 'dtick', 'hovermode'];
    72 var axis_kwargs = ['nticks', 'range', 'autorange', 'zeroline', 'showgrid',
    73 'tickmode', 'ticktext', 'tickvals'];
    74 for (var plot_idx=0; plot_idx < plotOrder.length; plot_idx++) {
    79 var trace_kwargs = ['marker', 'color', 'mode', 'zmin', 'zmax', 'y', 'contours', 'line', 'colorscale', 'showscale', 'colorbar', 'tick0', 'dtick', 'hovermode'];
    80 var axis_kwargs = ['nticks', 'range', 'autorange', 'zeroline', 'showgrid', 'tickmode', 'ticktext', 'tickvals'];
  • William Roberts changed the description

    changed the description

  • William Roberts unmarked as a Work In Progress

    unmarked as a Work In Progress

  • 31 31 var layout = {
    32 32 title: plotsInfo.title,
    33 33 showlegend: false,
    34 height: DEFAULT_PLOT_HEIGHT * nshowing + 180,
    34 height: DEFAULT_PLOT_HEIGHT * nshowing + 180
    35 35 };
    36 if (dataCache.isLobbyDisplay) {
    37 delete layout['height'];
    38 layout['autosize'] = true;
    39 layout['margin'] = {t:0, l:0, r:0, b:0}
    40 layout['font'] = { color: 'white' };
    41 layout['paper_bgcolor'] = 'rgba(0,0,0,0)';
    42 layout['plot_bgcolor'] = 'rgba(0,0,0,0)';
    43 layout['annotations'] = [];
  • 274 text: 'Data values updated every 2 minutes -- Trend graphs show 6 hour history [2 minute average]',
    275 font: {
    276 'size': 14
    277 },
    278 showarrow: false,
    279 align: 'center',
    280 x: .5,
    281 y: .94, //position in y domain
    282 xref: 'paper',
    283 yref: 'paper',
    284 // Makes text centered.
    285 showarrow: true,
    286 arrowhead: 0,
    287 ax: 0,
    288 ay: 0,
    289 });
  • David Hoese
  • 36 var tickvals;
    37 var layoutUpdates = {}
    38 var curr_date = dataCache[0]['x'][dataCache[0]['x'].length - 1];
    39 var date_local = new Date(curr_date + ' UTC');
    40 var date_utc = new Date(curr_date);
    41 // Add 2 minutes since data on display is from 2 minutes before it's updated.
    42 date_local.setMinutes(date_local.getMinutes() + 2);
    43 date_utc.setMinutes(date_utc.getMinutes() + 2);
    44 date_local = date_local.toString();
    45 var dateParts = date_local.split(' ');
    46 var hour = Number(dateParts[4].split(':')[0]);
    47 var period = hour >= 12 ? ' PM' : ' AM';
    48 hour -= hour > 12 ? 12 : 0;
    49 var localTime = hour + ':' + dateParts[4].split(':')[1] + ':' + dateParts[4].split(':')[2] + period;
    50 // Make the screen go black between 1 and 5 am.
    51 if (period == ' AM' && hour > 0 && hour < 5) {
  • 106 182 tracesToExtend.push(traceIndex + index);
    107 183 // scatter plots, assume the y data is the data being updated
    108 184 _.each(traceInfo.var_names, function (var_name) {
    185 if (dataCache.isLobbyDisplay) {
  • 155 276 removeOldPoints(dataCache, dataCache[0].x.length - maxPoints);
    156 277 }
    157 278
    279 if (dataCache.isLobbyDisplay) {
  • David Hoese
  • added 1 commit

    • dbad3ce8 - Add comments, and rearrange properties/variables to better locations

    Compare with previous version

  • added 1 commit

    • 26b040a5 - Move large chunks of logic strictly for lobby display to new functions

    Compare with previous version

  • added 1 commit

    • 487a9fe4 - Fix init layout for regular display

    Compare with previous version

  • added 1 commit

    Compare with previous version

  • added 1 commit

    • 0bfff026 - Fix cardinal direction tick text not working correctly

    Compare with previous version

  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Please register or sign in to reply
    Loading