From 10230198868fd657ef119f504314e2bf1c677813 Mon Sep 17 00:00:00 2001 From: Henrik Wolkesson Date: Wed, 20 Jun 2018 12:24:52 +0200 Subject: [PATCH 1/2] Put text value on zoom and playback speed sliders. Removed textboxes Fixed double click to restore default --- css/main.css | 22 +++++++++++++++------- index.html | 8 ++------ js/main.js | 53 +++++++++++++++++++++++++++++++++------------------- 3 files changed, 51 insertions(+), 32 deletions(-) diff --git a/css/main.css b/css/main.css index 3d7b786f..34498d7e 100644 --- a/css/main.css +++ b/css/main.css @@ -109,8 +109,8 @@ a.disabled { @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 + html.has-video .playback-rate-expanded, + html.has-video .graph-zoom-expanded { display: none!important;} } @@ -169,14 +169,12 @@ a.disabled { @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 + html:not(.has-video) .playback-rate-expanded, + html:not(.has-video) .graph-zoom-expanded { display: none!important;} } /*** end toolbar expansion ***/ -input.playback-rate-text, -input.graph-zoom, input.video-offset { width: 65px!important; } @@ -718,6 +716,15 @@ html:not(.has-analyser) .view-analyser-fullscreen { visibility:hidden; } +.noUi-handle{ + text-align: center; + padding: 5px; +} + +.noUi-handle:after,.noUi-handle:before { + visibility: hidden; +} + .video-top-controls > li { display:inline-block; margin-right: 17px; @@ -821,8 +828,9 @@ 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; } .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'); From abd2861d097025e7b342f8d7b7d632c9d19576ff Mon Sep 17 00:00:00 2001 From: Henrik Wolkesson Date: Wed, 20 Jun 2018 17:01:53 +0200 Subject: [PATCH 2/2] Updated toolbar expansion --- css/main.css | 111 +++++++++++++++++++++++---------------------------- 1 file changed, 49 insertions(+), 62 deletions(-) diff --git a/css/main.css b/css/main.css index 34498d7e..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, - html.has-video .graph-zoom-expanded - { 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,25 +146,18 @@ 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, - html:not(.has-video) .graph-zoom-expanded - { display: none!important;} +@media (max-width: 971px) { + html:not(.has-video) .log-chart-time-panel { + display: none!important; + } } /*** end toolbar expansion ***/ @@ -716,15 +702,6 @@ html:not(.has-analyser) .view-analyser-fullscreen { visibility:hidden; } -.noUi-handle{ - text-align: center; - padding: 5px; -} - -.noUi-handle:after,.noUi-handle:before { - visibility: hidden; -} - .video-top-controls > li { display:inline-block; margin-right: 17px; @@ -833,6 +810,16 @@ html.has-log:not(.has-table-overlay) .log-field-values { 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 { width: 33%; padding-bottom: 8px;