Skip to content

Commit

Permalink
🎨 Show information vertically
Browse files Browse the repository at this point in the history 
Show information vertically instead of horizontal.
When a user has alot of information then the bar would
grow very big. This way we can show alot of information
without interfering with the image

Fixes #14
  • Loading branch information
@BillyBlaze
BillyBlaze committed Apr 27, 2020
1 parent 2bbaa20 commit 534498c
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 55 deletions.
72 changes: 51 additions & 21 deletions octoprint_fullscreen/static/css/fullscreen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,46 +98,76 @@ _:-ms-lang(x), _:-webkit-full-screen, .fullscreen img {
width: 100vh;
}
.fullscreen + #fullscreen-bar {
display: block;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
#fullscreen-bar,
#fullscreen-tool-info,
#fullscreen-tool-info .temp,
#fullscreen-print-info .estimated {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#fullscreen-bar {
pointer-events: all;
display: none;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
font-size: 85%;
color: #fff;
padding: 10px 20px 10px;
}
#fullscreen-bar * {
display: inline-block;
padding: 10px;
}
#fullscreen-cancel,
#fullscreen-cancel .user-buttons,
#fullscreen-cancel button {
float: right;
#fullscreen-buttons .user-buttons {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
margin: 5px 0;
}
#fullscreen-cancel button {
#fullscreen-bar #fullscreen-buttons button {
width: auto;
margin: 0 0 0 10px;
-webkit-border-radius: 10px !important;
-ms-border-radius: 10px !important;
border-radius: 10px !important;
}
#fullscreen-tool-info p,
#fullscreen-print-info p {
text-align: right;
line-height: 10px;
margin: 2px 0;
}
#fullscreen-bar #fullscreen-tool-info p span,
#fullscreen-bar #fullscreen-print-info p > span {
margin: 0;
background: rgba(0, 0, 0, 0.25);
padding: 5px 10px;
display: inline-block;
line-height: 20px;
-webkit-border-radius: 10px !important;
-ms-border-radius: 10px !important;
border-radius: 10px !important;
overflow: hidden;
}
#fullscreen-cancel p,
#fullscreen-info .temp p {
line-height: 30px;
margin: 0 10px 0 0;
}
#fullscreen_progressBar {
position: absolute;
#fullscreen-progress-bar {
position: fixed;
left: 0;
width: 100%;
height: 5px;
border-radius: 0;
background: transparent;
background: transparent !important;
bottom: 0;
margin: 0;
-webkit-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
}
.inlineFullscreen {
overflow: hidden;
Expand Down
32 changes: 17 additions & 15 deletions octoprint_fullscreen/static/js/fullscreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@ $(function() {
}

self.tempModel = parameters[0];
self.printer = parameters[2];
self.settings = parameters[1];
self.printer = parameters[1];
self.printer.fsp = {};

self.printer.printLayerProgress = ko.observable('');
self.printer.hasLayerProgress = ko.observable(false);
self.printer.fsp.printLayerProgress = ko.observable('');
self.printer.fsp.hasLayerProgress = ko.observable(false);

self.printer.isFullscreen = ko.observable(false);
self.printer.fullscreen = function() {
self.printer.fsp.isFullscreen = ko.observable(false);
self.printer.fsp.fullscreen = function() {
$fullscreenContainer.toggleFullScreen();
}

Expand All @@ -46,18 +46,18 @@ $(function() {
touchtime = new Date().getTime();
$webcam.trigger("click");
onceOpenInlineFullscreen = false;
}, 0);
}, 100);
}
}

self.onDataUpdaterPluginMessage = function (plugin, data) {
if (plugin.indexOf('DisplayLayerProgress') !== -1) {
if (!self.printer.hasLayerProgress()) {
self.printer.hasLayerProgress(true);
if (!self.printer.fsp.hasLayerProgress()) {
self.printer.fsp.hasLayerProgress(true);
}

if (data.currentLayer && data.totalLayer) {
self.printer.printLayerProgress(data.currentLayer + ' / ' + data.totalLayer);
self.printer.fsp.printLayerProgress(data.currentLayer + ' / ' + data.totalLayer);
}
}
};
Expand Down Expand Up @@ -90,7 +90,7 @@ $(function() {
}
}

if(self.printer.isFullscreen()) {
if(self.printer.fsp.isFullscreen()) {
$fullscreenContainer.toggleFullScreen();
}
touchtime = 0;
Expand All @@ -101,19 +101,21 @@ $(function() {
});

$(document).bind("fullscreenchange", function() {
self.printer.isFullscreen($(document).fullScreen());
self.printer.fsp.isFullscreen($(document).fullScreen());
});

$info.insertAfter($container);
$(".print-control #job_pause").clone().appendTo("#fullscreen-bar .user-buttons").attr('id', 'job_pause_clone');

ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-cancel").get(0));
ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-print-info").get(0));
ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-buttons").get(0));
ko.applyBindings(self.printer, $("#fullscreen-bar #fullscreen-progress-bar").get(0));
}

OCTOPRINT_VIEWMODELS.push({
construct: FullscreenViewModel,
dependencies: ["temperatureViewModel", "settingsViewModel", "printerStateViewModel"],
dependencies: ["temperatureViewModel", "printerStateViewModel"],
optional: [],
elements: ["#fullscreen-info"]
elements: ["#fullscreen-tool-info"]
});
});
46 changes: 27 additions & 19 deletions octoprint_fullscreen/templates/fullscreen.jinja2
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,39 @@
<div id="fullscreen-bar">

<!-- ko allowBindings: false -->
<div id="fullscreen-info">
<div class="temp">
<!-- ko foreach: tempModel.tools -->
<p data-bind="template: { name: 'tempFullscreenTemplate' }"></p>
<!-- /ko -->
<p data-bind="template: { name: 'tempFullscreenTemplate', data: tempModel.bedTemp }, visible: tempModel.hasBed"></p>
</div>
<div id="fullscreen-tool-info">
<div class="temp">
<!-- ko foreach: tempModel.tools -->
<p data-bind="template: { name: 'tempFullscreenTemplate' }"></p>
<!-- /ko -->
<p data-bind="template: { name: 'tempFullscreenTemplate', data: tempModel.bedTemp }, visible: tempModel.hasBed"></p>
</div>
</div>
<!-- /ko -->


<!-- ko allowBindings: false -->
<div id="fullscreen-cancel">
<div class="estimated">
<p>{{ _('Print Time') }}: <strong data-bind="text: printTimeString"></strong></p>
<p>{{ _('Print Time Left') }}: <strong data-bind="text: printTimeLeftString"></strong></p>
<p data-bind="visible: hasLayerProgress">{{ _('Layer') }}: <strong data-bind="text: printLayerProgress"></strong></p>
</div>
<div class="progress" id="fullscreen_progressBar">
<div class="bar" data-bind="style: { width: progressString() + '%' }"></div>
</div>
<div id="fullscreen-print-info">
<div class="estimated">
<p><span>{{ _('Print Time') }}: <span data-bind="text: printTimeString"></span></span></p>
<p><span>{{ _('Print Time Left') }}: <span data-bind="text: printTimeLeftString"></span></span></p>
<p data-bind="visible: fsp.hasLayerProgress"><span>{{ _('Layer') }}: <span data-bind="text: fsp.printLayerProgress"></span></span></p>
</div>
</div>
<!-- /ko -->

<button class="btn" id="fullscreen-toggle" data-bind="click: fullscreen"><i class="icon-resize-full" aria-hidden="true" data-bind="css: { 'icon-resize-small': isFullscreen(), 'icon-resize-full': !isFullscreen() }"></i></button>
<div class="user-buttons" data-bind="visible: loginState.isUser">
</div>
<!-- ko allowBindings: false -->
<div id="fullscreen-buttons">
<div class="user-buttons" data-bind="visible: loginState.isUser">
<button class="btn" id="fullscreen-toggle" data-bind="click: fsp.fullscreen"><i class="icon-resize-full" aria-hidden="true" data-bind="css: { 'icon-resize-small': fsp.isFullscreen(), 'icon-resize-full': !fsp.isFullscreen() }"></i></button>
</div>
</div>
<!-- /ko -->

<!-- ko allowBindings: false -->
<div id="fullscreen-progress-bar" class="progress">
<div class="bar" data-bind="style: { width: progressString() + '%' }"></div>
</div>
<!-- /ko -->

</div>
Expand Down

0 comments on commit 534498c

Please sign in to comment.