Add Lobby Display to Website
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:
-
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.
-
Units change every 5 seconds: Both the current values and the y-axis values.
Requested and assisted by @davidh
Merge request reports
Activity
added Enhancement label
added 1 commit
- f4874cec - Fix meteorogram.js production not working and improve color transitions
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 changed this line in version 3 of the diff
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']; changed this line in version 3 of the diff
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'] = []; changed this line in version 3 of the diff
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 }); All the annotations above this line really seem like something that should be defined somewhere else (the site config?). Is that possible without being annoying to implement?
Edited by David Hoesechanged this line in version 3 of the diff
- Resolved by 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) { changed this line in version 6 of the diff
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) { changed this line in version 3 of the diff
155 276 removeOldPoints(dataCache, dataCache[0].x.length - maxPoints); 156 277 } 157 278 279 if (dataCache.isLobbyDisplay) { changed this line in version 3 of the diff
- Resolved by David Hoese
added 1 commit
- dbad3ce8 - Add comments, and rearrange properties/variables to better locations
added 1 commit
- 26b040a5 - Move large chunks of logic strictly for lobby display to new functions
added 1 commit
- 0bfff026 - Fix cardinal direction tick text not working correctly