Fancy controls
This commit is contained in:
parent
8e999cee1b
commit
a426a6afa2
@ -192,7 +192,36 @@ h3 {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#big-graph-controls {
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#big-graph-controls a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-bottom: 1px dashed #FFF;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#big-graph-controls a:hover {
|
||||||
|
border-bottom: 1px dashed transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
/* Basic elements */
|
/* Basic elements */
|
||||||
.button {
|
.button {
|
||||||
|
background: #3498db;
|
||||||
|
border-radius: 2px;
|
||||||
|
text-shadow: 0 0 0 #000;
|
||||||
|
width: 85px;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background: #ecf0f1;
|
||||||
|
color: #3498db;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
@ -35,12 +35,29 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="big-graph"></div>
|
<div id="big-graph"></div>
|
||||||
<div id="big-graph-controls">
|
|
||||||
|
|
||||||
<div id="big-graph-checkboxes"></div>
|
|
||||||
|
|
||||||
<button onclick="setAllGraphVisibility(true);">Show All</button>
|
<div id="big-graph-controls" style="display: none;">
|
||||||
<button onclick="setAllGraphVisibility(false);">Hide All</button>
|
|
||||||
|
<span style="text-align: center; display: block;">
|
||||||
|
|
||||||
|
<a onclick="toggleControlsDrawer();">Click to toggle graph controls</a>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div id="big-graph-controls-drawer" style="display: none;">
|
||||||
|
|
||||||
|
<div id="big-graph-checkboxes"></div>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<span style="text-align: center; display: block; margin-bottom: 15px;">
|
||||||
|
|
||||||
|
<span onclick="setAllGraphVisibility(true);" class="button">Show All</span>
|
||||||
|
<span onclick="setAllGraphVisibility(false);" class="button">Hide All</span>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -215,6 +215,12 @@ function setAllGraphVisibility(visible) {
|
|||||||
historyPlot.draw();
|
historyPlot.draw();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleControlsDrawer() {
|
||||||
|
var div = $('#big-graph-controls-drawer');
|
||||||
|
|
||||||
|
div.css('display', div.css('display') !== 'none' ? 'none' : 'block');
|
||||||
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
var socket = io.connect({
|
var socket = io.connect({
|
||||||
reconnect: true,
|
reconnect: true,
|
||||||
@ -246,8 +252,10 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
$('#server-container').html('');
|
$('#server-container').html('');
|
||||||
$('#quick-jump-container').html('');
|
$('#quick-jump-container').html('');
|
||||||
|
|
||||||
$('#big-graph').html('');
|
$('#big-graph').html('');
|
||||||
$('#big-graph-checkboxes').html('');
|
$('#big-graph-checkboxes').html('');
|
||||||
|
$('#big-graph-controls').css('display', 'none');
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on('historyGraph', function(rawData) {
|
socket.on('historyGraph', function(rawData) {
|
||||||
@ -277,6 +285,7 @@ $(document).ready(function() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$('#big-graph-checkboxes').append(html + '</tr></table>');
|
$('#big-graph-checkboxes').append(html + '</tr></table>');
|
||||||
|
$('#big-graph-controls').css('display', 'block');
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on('updateHistoryGraph', function(rawData) {
|
socket.on('updateHistoryGraph', function(rawData) {
|
||||||
|
Loading…
Reference in New Issue
Block a user