Skip to content

Zoom and Playback sliders with value #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 27, 2018
Merged

Zoom and Playback sliders with value #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1023019
Put text value on zoom and playback speed sliders.
wolkesson Jun 20, 2018
abd2861
Updated toolbar expansion
wolkesson Jun 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 51 additions & 56 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,110 +73,94 @@ 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 {
display: none !important;
}
}

@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;
}
Expand Down Expand Up @@ -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 {
Expand Down
8 changes: 2 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,16 +332,14 @@ <h4>Speed</h4>
<div class="pull-right">
<div class="panel-body">
<div class="playback-rate-control btn-group btn-group-vertical"></div>
<input type="text" class="form-control playback-rate-text" value="1.0" size="5" data-toggle="tooltip" title="Directly set the playback speed"/>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="playback-rate-expanded">
<div class="playback-rate-control btn-group btn-group-vertical"></div>
<input type="text" class="form-control playback-rate-text" value="1.0" size="5" data-toggle="tooltip" title="Directly set the playback speed">
<div class="playback-rate-control btn-group btn-group-vertical" data-toggle="tooltip" title="Directly set the playback speed"></div>
</div>
</div>
</div>
Expand All @@ -361,16 +359,14 @@ <h4>Zoom</h4>
<div class="pull-right">
<div class="panel-body">
<div class="graph-zoom-control btn-group btn-group-vertical"></div>
<input type="text" class="form-control graph-zoom small-screen" value="-" size="6" data-toggle="tooltip" title="Directly set the zoom level"/>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="graph-zoom-expanded">
<div class="graph-zoom-control btn-group btn-group-vertical"></div>
<input type="text" class="form-control graph-zoom small-screen" value="-" size="6" data-toggle="tooltip" title="Directly set the zoom level">
<div class="graph-zoom-control btn-group btn-group-vertical" data-toggle="tooltip" title="Directly set the zoom level"></div>
</div>
</div>
</div>
Expand Down
53 changes: 34 additions & 19 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,17 +471,23 @@ function BlackboxLogViewer() {
}
}

function setPlaybackRate(rate) {
function setPlaybackRate(rate, updateUi) {
if (rate >= PLAYBACK_MIN_RATE && rate <= PLAYBACK_MAX_RATE) {
playbackRate = rate;

if (video) {
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;
}
Expand All @@ -494,6 +500,12 @@ function BlackboxLogViewer() {
invalidateGraph();
}
}

if (updateUi) {
$(".graph-zoom-control").val(graphZoom);
}

$(".graph-zoom-control .noUi-handle").text(graphZoom + '%');
}

function showConfigFile(state) {
Expand Down Expand Up @@ -590,7 +602,7 @@ function BlackboxLogViewer() {
updateCanvasSize();

setGraphState(GRAPH_STATE_PAUSED);
setGraphZoom(graphZoom);
setGraphZoom(graphZoom, true);
}

function loadFileMessage(fileName) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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%*/);
}
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -1832,17 +1841,15 @@ 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);
}
e.preventDefault();
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);
}
Expand Down Expand Up @@ -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,
Expand All @@ -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');
Expand Down