Skip to content

Commit de3781d

Browse files
mikellermikeller
authored
Merge pull request #212 from wolkesson/UI-slider
Zoom and Playback sliders with value
2 parents 9a18eef + abd2861 commit de3781d

File tree

3 files changed

+87
-81
lines changed

3 files changed

+87
-81
lines changed

‎css/main.css‎

Lines changed: 51 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -73,110 +73,94 @@ a.disabled {
7373

7474
/* With video */
7575

76-
@media (max-width: 950px) {
77-
/* hidden when width is 1200px or less */
78-
html.has-video .view-buttons-expanded
79-
{ display: none!important;}
76+
@media (max-width: 969px) {
77+
html.has-video .view-buttons-expanded {
78+
display: none!important;
79+
}
8080
}
8181

82-
@media (min-width: 951px) {
83-
/* hidden when width is 1200px or less */
84-
html.has-video .view-buttons
85-
{ display: none!important;}
82+
@media (min-width: 970px) {
83+
html.has-video .view-buttons {
84+
display: none!important;
85+
}
8686
}
8787

88-
@media (max-width: 1150px) {
89-
/* Hide if smaller than 1150px */
88+
@media (max-width: 1223px) {
9089
html.has-video .playback-rate-expanded,
9190
html.has-video .graph-zoom-expanded,
9291
html.has-video .log-sync-expanded {
9392
display: none !important;
9493
}
9594
}
96-
@media (min-width: 1151px) {
97-
/* Hide if larger than 1150px */
95+
96+
@media (min-width: 1224px) {
9897
html.has-video .playback-rate,
9998
html.has-video .zoom-menu,
100-
html.has-video .sync-menu
101-
{display: none!important;}
102-
}
103-
104-
@media (max-width: 1285px) {
105-
/* Hide if smaller than 1285px */
106-
html.has-video .log-chart-time-panel
107-
{ display: none!important;}
99+
html.has-video .sync-menu {
100+
display: none!important;
101+
}
108102
}
109103

110-
@media (max-width: 1420px) {
111-
/* Hide if smaller than 1500px */
112-
html.has-video .playback-rate-expanded input.playback-rate-text,
113-
html.has-video .graph-zoom-expanded input.graph-zoom
114-
{ display: none!important;}
104+
@media (max-width: 1370px) {
105+
html.has-video .log-chart-time-panel {
106+
display: none!important;
107+
}
115108
}
116109

117110
/* Without video */
118111

119-
@media (max-width: 750px) {
112+
@media (max-width: 827px) {
120113
/* hide titles when width is 500px or less */
121114
.video-top-controls * h4 {
122115
display: none!important;
123116
}
117+
124118
.video-top-controls {
125119
height: 50px;
126120
padding-top: 10px;
127121
}
122+
128123
.graph-row,
129-
.log-field-values {
124+
.log-field-values {
130125
top: 30px!important;
131126
}
132127
}
133128

134-
135-
@media (max-width: 650px) {
136-
/* hidden when width is 1200px or less */
137-
html:not(.has-video) .view-buttons-expanded
138-
{ display: none!important;}
129+
@media (max-width: 706px) {
130+
html:not(.has-video) .view-buttons-expanded {
131+
display: none!important;
132+
}
139133
}
140134

141-
@media (min-width: 651px) {
142-
/* hidden when width is 1200px or less */
143-
html:not(.has-video) .view-buttons
144-
{ display: none!important;}
135+
@media (min-width: 707px) {
136+
html:not(.has-video) .view-buttons {
137+
display: none!important;
138+
}
145139
}
146140

147-
@media (max-width: 750px) {
148-
/* Hide if smaller than 750px */
141+
@media (max-width: 827px) {
149142
html:not(.has-video) .playback-rate-expanded,
150143
html:not(.has-video) .graph-zoom-expanded,
151144
html:not(.has-video) .log-sync-expanded {
152145
display: none !important;
153146
}
154147
}
155148

156-
@media (min-width: 751px) {
157-
/* Hide if larger than 750px */
149+
@media (min-width: 828px) {
158150
html:not(.has-video) .playback-rate,
159151
html:not(.has-video) .zoom-menu,
160-
html:not(.has-video) .sync-menu
161-
{display: none!important;}
162-
}
163-
164-
@media (max-width: 900px) {
165-
/* Hide if smaller than 900px */
166-
html:not(.has-video) .log-chart-time-panel
167-
{ display: none!important;}
152+
html:not(.has-video) .sync-menu {
153+
display: none!important;
154+
}
168155
}
169156

170-
@media (max-width: 1050px) {
171-
/* Hide if smaller than 1050px */
172-
html:not(.has-video) .playback-rate-expanded input.playback-rate-text,
173-
html:not(.has-video) .graph-zoom-expanded input.graph-zoom
174-
{ display: none!important;}
157+
@media (max-width: 971px) {
158+
html:not(.has-video) .log-chart-time-panel {
159+
display: none!important;
160+
}
175161
}
176162

177163
/*** end toolbar expansion ***/
178-
input.playback-rate-text,
179-
input.graph-zoom,
180164
input.video-offset {
181165
width: 65px!important;
182166
}
@@ -821,8 +805,19 @@ html.has-log:not(.has-table-overlay) .log-field-values {
821805

822806
.playback-rate-control,
823807
.graph-zoom-control {
824-
width: 100px;
808+
width: 130px;
825809
margin-right: 13px;
810+
margin-top: 6px;
811+
}
812+
813+
.noUi-horizontal .noUi-handle{
814+
text-align: center;
815+
padding: 3px;
816+
width: fit-content;
817+
}
818+
819+
.noUi-handle:after,.noUi-handle:before {
820+
visibility: hidden;
826821
}
827822

828823
.override-button-group button {

‎index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -332,16 +332,14 @@ <h4>Speed</h4>
332332
<div class="pull-right">
333333
<div class="panel-body">
334334
<div class="playback-rate-control btn-group btn-group-vertical"></div>
335-
<input type="text" class="form-control playback-rate-text" value="1.0" size="5" data-toggle="tooltip" title="Directly set the playback speed"/>
336335
</div>
337336
</div>
338337
</li>
339338
</ul>
340339
</div>
341340
</div>
342341
<div class="playback-rate-expanded">
343-
<div class="playback-rate-control btn-group btn-group-vertical"></div>
344-
<input type="text" class="form-control playback-rate-text" value="1.0" size="5" data-toggle="tooltip" title="Directly set the playback speed">
342+
<div class="playback-rate-control btn-group btn-group-vertical" data-toggle="tooltip" title="Directly set the playback speed"></div>
345343
</div>
346344
</div>
347345
</div>
@@ -361,16 +359,14 @@ <h4>Zoom</h4>
361359
<div class="pull-right">
362360
<div class="panel-body">
363361
<div class="graph-zoom-control btn-group btn-group-vertical"></div>
364-
<input type="text" class="form-control graph-zoom small-screen" value="-" size="6" data-toggle="tooltip" title="Directly set the zoom level"/>
365362
</div>
366363
</div>
367364
</li>
368365
</ul>
369366
</div>
370367
</div>
371368
<div class="graph-zoom-expanded">
372-
<div class="graph-zoom-control btn-group btn-group-vertical"></div>
373-
<input type="text" class="form-control graph-zoom small-screen" value="-" size="6" data-toggle="tooltip" title="Directly set the zoom level">
369+
<div class="graph-zoom-control btn-group btn-group-vertical" data-toggle="tooltip" title="Directly set the zoom level"></div>
374370
</div>
375371
</div>
376372
</div>

‎js/main.js‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -471,17 +471,23 @@ function BlackboxLogViewer() {
471471
}
472472
}
473473

474-
function setPlaybackRate(rate) {
474+
function setPlaybackRate(rate, updateUi) {
475475
if (rate >= PLAYBACK_MIN_RATE && rate <= PLAYBACK_MAX_RATE) {
476476
playbackRate = rate;
477477

478478
if (video) {
479479
video.playbackRate = rate / 100;
480480
}
481481
}
482+
483+
if (updateUi) {
484+
$(".playback-rate-control").val(playbackRate);
485+
}
486+
487+
$(".playback-rate-control .noUi-handle").text(playbackRate + '%');
482488
}
483489

484-
function setGraphZoom(zoom) {
490+
function setGraphZoom(zoom, updateUi) {
485491
if (zoom == null) { // go back to last zoom value
486492
zoom = lastGraphZoom;
487493
}
@@ -494,6 +500,12 @@ function BlackboxLogViewer() {
494500
invalidateGraph();
495501
}
496502
}
503+
504+
if (updateUi) {
505+
$(".graph-zoom-control").val(graphZoom);
506+
}
507+
508+
$(".graph-zoom-control .noUi-handle").text(graphZoom + '%');
497509
}
498510

499511
function showConfigFile(state) {
@@ -590,7 +602,7 @@ function BlackboxLogViewer() {
590602
updateCanvasSize();
591603

592604
setGraphState(GRAPH_STATE_PAUSED);
593-
setGraphZoom(graphZoom);
605+
setGraphZoom(graphZoom, true);
594606
}
595607

596608
function loadFileMessage(fileName) {
@@ -717,7 +729,7 @@ function BlackboxLogViewer() {
717729
video.src = videoURL;
718730

719731
// Reapply the last playbackRate to the new video
720-
setPlaybackRate(playbackRate);
732+
setPlaybackRate(playbackRate, true);
721733
}
722734

723735
function videoLoaded(e) {
@@ -1585,15 +1597,13 @@ function BlackboxLogViewer() {
15851597
if($(e.target).attr('id') == 'graphCanvas') { // we are scrolling the graph
15861598
if (delta < 0) { // scroll down (or left)
15871599
if (e.altKey || e.shiftKey) {
1588-
setGraphZoom(graphZoom - 10.0 - ((e.altKey) ? 15.0 : 0.0));
1589-
$(".graph-zoom").val(graphZoom + "%");
1600+
setGraphZoom(graphZoom - 10.0 - ((e.altKey) ? 15.0 : 0.0), true);
15901601
} else {
15911602
logJumpBack(0.1 /*10%*/);
15921603
}
15931604
} else { // scroll up or right
15941605
if (e.altKey || e.shiftKey) {
1595-
setGraphZoom(graphZoom + 10.0 + ((e.altKey) ? 15.0 : 0.0));
1596-
$(".graph-zoom").val(graphZoom + "%");
1606+
setGraphZoom(graphZoom + 10.0 + ((e.altKey) ? 15.0 : 0.0), true);
15971607
} else {
15981608
logJumpForward(0.1 /*10%*/);
15991609
}
@@ -1780,8 +1790,7 @@ function BlackboxLogViewer() {
17801790
newGraphConfig(lastGraphConfig);
17811791
}
17821792
} else {
1783-
(graphZoom==GRAPH_MIN_ZOOM)?setGraphZoom(null):setGraphZoom(GRAPH_MIN_ZOOM);
1784-
$(".graph-zoom").val(graphZoom + "%");
1793+
(graphZoom==GRAPH_MIN_ZOOM)?setGraphZoom(null, false):setGraphZoom(GRAPH_MIN_ZOOM, false);
17851794
}
17861795
} catch(e) {
17871796
console.log('Workspace toggle feature not functioning');
@@ -1832,17 +1841,15 @@ function BlackboxLogViewer() {
18321841
break;
18331842
case 37: // left arrow (normal scroll, shifted zoom out)
18341843
if (e.shiftKey) {
1835-
setGraphZoom(graphZoom - 10.0 - ((e.altKey)?15.0:0.0));
1836-
$(".graph-zoom").val(graphZoom + "%");
1844+
setGraphZoom(graphZoom - 10.0 - ((e.altKey)?15.0:0.0), true);
18371845
} else {
18381846
logJumpBack(null, e.altKey);
18391847
}
18401848
e.preventDefault();
18411849
break;
18421850
case 39: // right arrow (normal scroll, shifted zoom in)
18431851
if (e.shiftKey) {
1844-
setGraphZoom(graphZoom + 10.0 + ((e.altKey)?15.0:0.0));
1845-
$(".graph-zoom").val(graphZoom + "%");
1852+
setGraphZoom(graphZoom + 10.0 + ((e.altKey)?15.0:0.0), true);
18461853
} else {
18471854
logJumpForward(null, e.altKey);
18481855
}
@@ -1894,13 +1901,18 @@ function BlackboxLogViewer() {
18941901
'50%': [ PLAYBACK_DEFAULT_RATE, PLAYBACK_RATE_STEP ],
18951902
'max': [ PLAYBACK_MAX_RATE, PLAYBACK_RATE_STEP ]
18961903
},
1904+
tooltips: percentageFormat,
18971905
format: percentageFormat
18981906
})
18991907
.on("slide change set", function() {
1900-
setPlaybackRate(parseFloat($(this).val()));
1908+
setPlaybackRate(parseFloat($(this).val()), false);
19011909
})
1902-
.Link("lower").to($(".playback-rate-text"));
1903-
1910+
.dblclick(function() {
1911+
$(this).val(100);
1912+
});
1913+
1914+
$(".playback-rate-control .noUi-handle").text( playbackRate + '%');
1915+
19041916
$(".graph-zoom-control")
19051917
.noUiSlider({
19061918
start: graphZoom,
@@ -1911,12 +1923,15 @@ function BlackboxLogViewer() {
19111923
'50%': [ GRAPH_DEFAULT_ZOOM, GRAPH_ZOOM_STEP ],
19121924
'max': [ GRAPH_MAX_ZOOM, GRAPH_ZOOM_STEP ]
19131925
},
1926+
tooltips: true,
19141927
format: percentageFormat
19151928
})
19161929
.on("slide change set", function() {
1917-
setGraphZoom(parseFloat($(this).val()));
1930+
setGraphZoom(parseFloat($(this).val()), false);
19181931
})
1919-
.Link("lower").to($(".graph-zoom"));
1932+
.dblclick(function() {
1933+
$(this).val(100);
1934+
});
19201935

19211936
$('.navbar-toggle').click(function(e) {
19221937
$('.navbar-collapse').collapse('toggle');

0 commit comments

Comments
 (0)