diff --git a/css/main.css b/css/main.css
index 3d7b786f..2c750b08 100644
--- a/css/main.css
+++ b/css/main.css
@@ -73,79 +73,72 @@ a.disabled {
/* With video */
-@media (max-width: 950px) {
- /* hidden when width is 1200px or less */
- html.has-video .view-buttons-expanded
- { display: none!important;}
+@media (max-width: 969px) {
+ html.has-video .view-buttons-expanded {
+ display: none!important;
+ }
}
-@media (min-width: 951px) {
- /* hidden when width is 1200px or less */
- html.has-video .view-buttons
- { display: none!important;}
+@media (min-width: 970px) {
+ html.has-video .view-buttons {
+ display: none!important;
+ }
}
-@media (max-width: 1150px) {
- /* Hide if smaller than 1150px */
+@media (max-width: 1223px) {
html.has-video .playback-rate-expanded,
html.has-video .graph-zoom-expanded,
html.has-video .log-sync-expanded {
display: none !important;
}
}
-@media (min-width: 1151px) {
- /* Hide if larger than 1150px */
+
+@media (min-width: 1224px) {
html.has-video .playback-rate,
html.has-video .zoom-menu,
- html.has-video .sync-menu
- {display: none!important;}
-}
-
-@media (max-width: 1285px) {
- /* Hide if smaller than 1285px */
- html.has-video .log-chart-time-panel
- { display: none!important;}
+ html.has-video .sync-menu {
+ display: none!important;
+ }
}
-@media (max-width: 1420px) {
- /* Hide if smaller than 1500px */
- html.has-video .playback-rate-expanded input.playback-rate-text,
- html.has-video .graph-zoom-expanded input.graph-zoom
- { display: none!important;}
+@media (max-width: 1370px) {
+ html.has-video .log-chart-time-panel {
+ display: none!important;
+ }
}
/* Without video */
-@media (max-width: 750px) {
+@media (max-width: 827px) {
/* hide titles when width is 500px or less */
.video-top-controls * h4 {
display: none!important;
}
+
.video-top-controls {
height: 50px;
padding-top: 10px;
}
+
.graph-row,
- .log-field-values {
+ .log-field-values {
top: 30px!important;
}
}
-
-@media (max-width: 650px) {
- /* hidden when width is 1200px or less */
- html:not(.has-video) .view-buttons-expanded
- { display: none!important;}
+@media (max-width: 706px) {
+ html:not(.has-video) .view-buttons-expanded {
+ display: none!important;
+ }
}
-@media (min-width: 651px) {
- /* hidden when width is 1200px or less */
- html:not(.has-video) .view-buttons
- { display: none!important;}
+@media (min-width: 707px) {
+ html:not(.has-video) .view-buttons {
+ display: none!important;
+ }
}
-@media (max-width: 750px) {
- /* Hide if smaller than 750px */
+@media (max-width: 827px) {
html:not(.has-video) .playback-rate-expanded,
html:not(.has-video) .graph-zoom-expanded,
html:not(.has-video) .log-sync-expanded {
@@ -153,30 +146,21 @@ a.disabled {
}
}
-@media (min-width: 751px) {
- /* Hide if larger than 750px */
+@media (min-width: 828px) {
html:not(.has-video) .playback-rate,
html:not(.has-video) .zoom-menu,
- html:not(.has-video) .sync-menu
- {display: none!important;}
-}
-
-@media (max-width: 900px) {
- /* Hide if smaller than 900px */
- html:not(.has-video) .log-chart-time-panel
- { display: none!important;}
+ html:not(.has-video) .sync-menu {
+ display: none!important;
+ }
}
-@media (max-width: 1050px) {
- /* Hide if smaller than 1050px */
- html:not(.has-video) .playback-rate-expanded input.playback-rate-text,
- html:not(.has-video) .graph-zoom-expanded input.graph-zoom
- { display: none!important;}
+@media (max-width: 971px) {
+ html:not(.has-video) .log-chart-time-panel {
+ display: none!important;
+ }
}
/*** end toolbar expansion ***/
-input.playback-rate-text,
-input.graph-zoom,
input.video-offset {
width: 65px!important;
}
@@ -821,8 +805,19 @@ html.has-log:not(.has-table-overlay) .log-field-values {
.playback-rate-control,
.graph-zoom-control {
- width: 100px;
+ width: 130px;
margin-right: 13px;
+ margin-top: 6px;
+}
+
+.noUi-horizontal .noUi-handle{
+ text-align: center;
+ padding: 3px;
+ width: fit-content;
+}
+
+.noUi-handle:after,.noUi-handle:before {
+ visibility: hidden;
}
.override-button-group button {
diff --git a/index.html b/index.html
index f82a66db..d9edaacd 100755
--- a/index.html
+++ b/index.html
@@ -332,7 +332,6 @@ Speed
@@ -340,8 +339,7 @@ Speed
@@ -361,7 +359,6 @@ Zoom
@@ -369,8 +366,7 @@ Zoom
diff --git a/js/main.js b/js/main.js
index 729d421c..efd796ca 100644
--- a/js/main.js
+++ b/js/main.js
@@ -471,7 +471,7 @@ function BlackboxLogViewer() {
}
}
- function setPlaybackRate(rate) {
+ function setPlaybackRate(rate, updateUi) {
if (rate >= PLAYBACK_MIN_RATE && rate <= PLAYBACK_MAX_RATE) {
playbackRate = rate;
@@ -479,9 +479,15 @@ function BlackboxLogViewer() {
video.playbackRate = rate / 100;
}
}
+
+ if (updateUi) {
+ $(".playback-rate-control").val(playbackRate);
+ }
+
+ $(".playback-rate-control .noUi-handle").text(playbackRate + '%');
}
- function setGraphZoom(zoom) {
+ function setGraphZoom(zoom, updateUi) {
if (zoom == null) { // go back to last zoom value
zoom = lastGraphZoom;
}
@@ -494,6 +500,12 @@ function BlackboxLogViewer() {
invalidateGraph();
}
}
+
+ if (updateUi) {
+ $(".graph-zoom-control").val(graphZoom);
+ }
+
+ $(".graph-zoom-control .noUi-handle").text(graphZoom + '%');
}
function showConfigFile(state) {
@@ -590,7 +602,7 @@ function BlackboxLogViewer() {
updateCanvasSize();
setGraphState(GRAPH_STATE_PAUSED);
- setGraphZoom(graphZoom);
+ setGraphZoom(graphZoom, true);
}
function loadFileMessage(fileName) {
@@ -717,7 +729,7 @@ function BlackboxLogViewer() {
video.src = videoURL;
// Reapply the last playbackRate to the new video
- setPlaybackRate(playbackRate);
+ setPlaybackRate(playbackRate, true);
}
function videoLoaded(e) {
@@ -1585,15 +1597,13 @@ function BlackboxLogViewer() {
if($(e.target).attr('id') == 'graphCanvas') { // we are scrolling the graph
if (delta < 0) { // scroll down (or left)
if (e.altKey || e.shiftKey) {
- setGraphZoom(graphZoom - 10.0 - ((e.altKey) ? 15.0 : 0.0));
- $(".graph-zoom").val(graphZoom + "%");
+ setGraphZoom(graphZoom - 10.0 - ((e.altKey) ? 15.0 : 0.0), true);
} else {
logJumpBack(0.1 /*10%*/);
}
} else { // scroll up or right
if (e.altKey || e.shiftKey) {
- setGraphZoom(graphZoom + 10.0 + ((e.altKey) ? 15.0 : 0.0));
- $(".graph-zoom").val(graphZoom + "%");
+ setGraphZoom(graphZoom + 10.0 + ((e.altKey) ? 15.0 : 0.0), true);
} else {
logJumpForward(0.1 /*10%*/);
}
@@ -1780,8 +1790,7 @@ function BlackboxLogViewer() {
newGraphConfig(lastGraphConfig);
}
} else {
- (graphZoom==GRAPH_MIN_ZOOM)?setGraphZoom(null):setGraphZoom(GRAPH_MIN_ZOOM);
- $(".graph-zoom").val(graphZoom + "%");
+ (graphZoom==GRAPH_MIN_ZOOM)?setGraphZoom(null, false):setGraphZoom(GRAPH_MIN_ZOOM, false);
}
} catch(e) {
console.log('Workspace toggle feature not functioning');
@@ -1832,8 +1841,7 @@ function BlackboxLogViewer() {
break;
case 37: // left arrow (normal scroll, shifted zoom out)
if (e.shiftKey) {
- setGraphZoom(graphZoom - 10.0 - ((e.altKey)?15.0:0.0));
- $(".graph-zoom").val(graphZoom + "%");
+ setGraphZoom(graphZoom - 10.0 - ((e.altKey)?15.0:0.0), true);
} else {
logJumpBack(null, e.altKey);
}
@@ -1841,8 +1849,7 @@ function BlackboxLogViewer() {
break;
case 39: // right arrow (normal scroll, shifted zoom in)
if (e.shiftKey) {
- setGraphZoom(graphZoom + 10.0 + ((e.altKey)?15.0:0.0));
- $(".graph-zoom").val(graphZoom + "%");
+ setGraphZoom(graphZoom + 10.0 + ((e.altKey)?15.0:0.0), true);
} else {
logJumpForward(null, e.altKey);
}
@@ -1894,13 +1901,18 @@ function BlackboxLogViewer() {
'50%': [ PLAYBACK_DEFAULT_RATE, PLAYBACK_RATE_STEP ],
'max': [ PLAYBACK_MAX_RATE, PLAYBACK_RATE_STEP ]
},
+ tooltips: percentageFormat,
format: percentageFormat
})
.on("slide change set", function() {
- setPlaybackRate(parseFloat($(this).val()));
+ setPlaybackRate(parseFloat($(this).val()), false);
})
- .Link("lower").to($(".playback-rate-text"));
-
+ .dblclick(function() {
+ $(this).val(100);
+ });
+
+ $(".playback-rate-control .noUi-handle").text( playbackRate + '%');
+
$(".graph-zoom-control")
.noUiSlider({
start: graphZoom,
@@ -1911,12 +1923,15 @@ function BlackboxLogViewer() {
'50%': [ GRAPH_DEFAULT_ZOOM, GRAPH_ZOOM_STEP ],
'max': [ GRAPH_MAX_ZOOM, GRAPH_ZOOM_STEP ]
},
+ tooltips: true,
format: percentageFormat
})
.on("slide change set", function() {
- setGraphZoom(parseFloat($(this).val()));
+ setGraphZoom(parseFloat($(this).val()), false);
})
- .Link("lower").to($(".graph-zoom"));
+ .dblclick(function() {
+ $(this).val(100);
+ });
$('.navbar-toggle').click(function(e) {
$('.navbar-collapse').collapse('toggle');