Skip to content

Commit

Permalink
Merge pull request #56 from j7126/master
Browse files Browse the repository at this point in the history 
Add option to use theme colors for fullscreen
  • Loading branch information
@StefanCohen
StefanCohen committed Sep 30, 2019
2 parents 67c937c + 3aa310c commit ff783ec
Show file tree
Hide file tree
Showing 4 changed files with 171 additions and 40 deletions.
1 change: 1 addition & 0 deletions octoprint_dashboard/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ def on_event(self, event, payload):
def get_settings_defaults(self):
return dict(
gaugetype="circle",
fullscreenUseThemeColors=False,
hotendTempMax="300",
bedTempMax="100",
chamberTempMax="50",
Expand Down
1 change: 1 addition & 0 deletions octoprint_dashboard/static/css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
width: auto;
height: 15px;
float: right;
-webkit-user-drag: none;
}

.dashboardSmall {
Expand Down
202 changes: 162 additions & 40 deletions octoprint_dashboard/static/js/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Author: Stefan Cohen
* License: AGPLv3
*/
$(function() {
$(function () {
function DashboardViewModel(parameters) {
var self = this;

Expand All @@ -16,7 +16,7 @@ $(function() {
self.displaylayerprogressViewModel = parameters[5];
self.controlViewModel = parameters[6];


self.totalLayer = ko.observable("-");
self.currentLayer = ko.observable("-");
self.currentHeight = ko.observable("-");
Expand All @@ -36,20 +36,20 @@ $(function() {
self.diskUsagePercent = ko.observable(0);
self.cpuTemp = ko.observable(0);


self.connectionMenu = ko.observableArray([
{ text: self.connectionModel.buttonText, action: self.connectionModel.connect }
]);
{ text: self.connectionModel.buttonText, action: self.connectionModel.connect }
]);

self.jobMenu = ko.observableArray([
{ text: 'Pause', action: self.printerStateModel.onlyPause },
{ text: 'Cancel', action: self.printerStateModel.cancel }
]);
{ text: 'Pause', action: self.printerStateModel.onlyPause },
{ text: 'Cancel', action: self.printerStateModel.cancel }
]);



//Notify user if displaylayerprogress plugin is not installed
self.DisplayLayerProgressAvailable = function() {
self.DisplayLayerProgressAvailable = function () {
if (self.settingsViewModel.settings.plugins.DisplayLayerProgress)
return;
else {
Expand All @@ -58,53 +58,175 @@ $(function() {
type: 'warning',
text: 'Can\'t get stats from <a href="https://plugins.octoprint.org/plugins/DisplayLayerProgress/"" target="_blank">DisplayLayerProgress</a>. This plugin is required and provides GCode parsing for Fan Speed, Layer/Height info and Average layer time. Is it installed, enabled and on the latest version?',
hide: false
});
return "Warning: Can't get stats from <a href='https://plugins.octoprint.org/plugins/DisplayLayerProgress/' target='_blank'>DisplayLayerProgress</a>. Is it installed, enabled and on the latest version?";
});
return "Warning: Can't get stats from <a href='https://plugins.octoprint.org/plugins/DisplayLayerProgress/' target='_blank'>DisplayLayerProgress</a>. Is it installed, enabled and on the latest version?";
}
};

// Toggle fullscreen
self.fullScreen = function() {
self.fullScreen = function () {
var elem = document.getElementById("dasboardContainer");
if (elem.requestFullscreen) {
if (!document.fullscreenElement) {
elem.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
} else if (elem.mozRequestFullScreen) { /* Firefox */
if (!document.mozFullscreenElement) {
elem.mozRequestFullScreen();
} else {
if (document.mozExitFullscreen) {
document.mozExitFullscreen();
}
if (document.mozExitFullscreen) {
document.mozExitFullscreen();
}
}
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
if (!document.webkitFullscreenElement) {
elem.webkitRequestFullscreen();
} else {
if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
} else if (elem.msRequestFullscreen) { /* IE/Edge */
if (!document.msFullscreenElement) {
elem.msRequestFullscreen();
} else {
if (document.msExitFullscreen) {
document.msExitFullscreen();
}
if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}

return
}

//getting fullscreen background color from theme
// TODO: make this less of a hack
document.onfullscreenchange = function (event) {
if (self.settingsViewModel.settings.plugins.dashboard.fullscreenUseThemeColors()) {
var elem = document.getElementById("dasboardContainer");
if (elem.requestFullscreen) {
if (!document.fullscreenElement) {
$('#dasboardContainer').css('background-color', '');
$('#dasboardContainer').css('color', '');
$('#tab_plugin_dashboard').css('background-color', '');
$('#tabs_content').css('background-color', '');
$('div.tabbable').css('background-color', '');
$('div.row').css('background-color', '');
$('div.octoprint-container').css('background-color', '');
$('div.page-container').css('background-color', '');
} else {
document.getElementById('dasboardContainer').style.setProperty('color', 'inherit', 'important');
$('#dasboardContainer').css('background-color', 'inherit');
$('#tab_plugin_dashboard').css('background-color', 'inherit');
$('#tabs_content').css('background-color', 'inherit');
$('div.tabbable').css('background-color', 'inherit');
$('div.row').css('background-color', 'inherit');
$('div.octoprint-container').css('background-color', 'inherit');
$('div.page-container').css('background-color', 'inherit');
}
} else if (elem.mozRequestFullScreen) { /* Firefox */
if (!document.mozFullscreenElement) {
$('#dasboardContainer').css('background-color', '');
$('#dasboardContainer').css('color', '');
$('#tab_plugin_dashboard').css('background-color', '');
$('#tabs_content').css('background-color', '');
$('div.tabbable').css('background-color', '');
$('div.row').css('background-color', '');
$('div.octoprint-container').css('background-color', '');
$('div.page-container').css('background-color', '');
} else {
document.getElementById('dasboardContainer').style.setProperty('color', 'inherit', 'important');
$('#dasboardContainer').css('background-color', 'inherit');
$('#tab_plugin_dashboard').css('background-color', 'inherit');
$('#tabs_content').css('background-color', 'inherit');
$('div.tabbable').css('background-color', 'inherit');
$('div.row').css('background-color', 'inherit');
$('div.octoprint-container').css('background-color', 'inherit');
$('div.page-container').css('background-color', 'inherit');
}
}
// webkit is not needed for fullscreen. see https://developer.mozilla.org/en-US/docs/Web/API/Document/onfullscreenchange#Browser_compatibility
}
};
document.onmozfullscreenchange = function (event) { /* firefox */
if (self.settingsViewModel.settings.plugins.dashboard.fullscreenUseThemeColors()) {
var elem = document.getElementById("dasboardContainer");
if (elem.requestFullscreen) {
if (!document.fullscreenElement) {
$('#dasboardContainer').css('background-color', '');
$('#dasboardContainer').css('color', '');
$('#tab_plugin_dashboard').css('background-color', '');
$('#tabs_content').css('background-color', '');
$('div.tabbable').css('background-color', '');
$('div.row').css('background-color', '');
$('div.octoprint-container').css('background-color', '');
$('div.page-container').css('background-color', '');
} else {
document.getElementById('dasboardContainer').style.setProperty('color', 'inherit', 'important');
$('#dasboardContainer').css('background-color', 'inherit');
$('#tab_plugin_dashboard').css('background-color', 'inherit');
$('#tabs_content').css('background-color', 'inherit');
$('div.tabbable').css('background-color', 'inherit');
$('div.row').css('background-color', 'inherit');
$('div.octoprint-container').css('background-color', 'inherit');
$('div.page-container').css('background-color', 'inherit');
}
} else if (elem.mozRequestFullScreen) { /* Firefox */
if (!document.mozFullscreenElement) {
$('#dasboardContainer').css('background-color', '');
$('#dasboardContainer').css('color', '');
$('#tab_plugin_dashboard').css('background-color', '');
$('#tabs_content').css('background-color', '');
$('div.tabbable').css('background-color', '');
$('div.row').css('background-color', '');
$('div.octoprint-container').css('background-color', '');
$('div.page-container').css('background-color', '');
} else {
document.getElementById('dasboardContainer').style.setProperty('color', 'inherit', 'important');
$('#dasboardContainer').css('background-color', 'inherit');
$('#tab_plugin_dashboard').css('background-color', 'inherit');
$('#tabs_content').css('background-color', 'inherit');
$('div.tabbable').css('background-color', 'inherit');
$('div.row').css('background-color', 'inherit');
$('div.octoprint-container').css('background-color', 'inherit');
$('div.page-container').css('background-color', 'inherit');
}
}
}
};
document.onMSfullscreenchange = function (event) { /* for IE */
if (self.settingsViewModel.settings.plugins.dashboard.fullscreenUseThemeColors()) {
var elem = document.getElementById("dasboardContainer");
if (elem.msRequestFullscreen) { /* IE/Edge */
if (!document.msFullscreenElement) {
$('#dasboardContainer').css('background-color', '');
$('#dasboardContainer').css('color', '');
$('#tab_plugin_dashboard').css('background-color', '');
$('#tabs_content').css('background-color', '');
$('div.tabbable').css('background-color', '');
$('div.row').css('background-color', '');
$('div.octoprint-container').css('background-color', '');
$('div.page-container').css('background-color', '');
} else {
document.getElementById('dasboardContainer').style.setProperty('color', 'inherit', 'important');
$('#dasboardContainer').css('background-color', 'inherit');
$('#tab_plugin_dashboard').css('background-color', 'inherit');
$('#tabs_content').css('background-color', 'inherit');
$('div.tabbable').css('background-color', 'inherit');
$('div.row').css('background-color', 'inherit');
$('div.octoprint-container').css('background-color', 'inherit');
$('div.page-container').css('background-color', 'inherit');
}
}
}
};

//Events from displaylayerprogress Plugin
self.onDataUpdaterPluginMessage = function(plugin, data) {
self.onDataUpdaterPluginMessage = function (plugin, data) {
if (plugin != "dashboard") {
return;
}
Expand All @@ -124,24 +246,24 @@ $(function() {
if (data.diskUsagePercent) { self.diskUsagePercent(data.diskUsagePercent); }
if (data.cpuTemp) { self.cpuTemp(data.cpuTemp); }
if (data.extrudedFilament) { self.extrudedFilament(data.extrudedFilament); }

}
};

self.embedUrl = function() {
self.embedUrl = function () {
if (self.settingsViewModel.settings.webcam && self.settingsViewModel.settings.plugins.dashboard.showWebCam) {
return self.settingsViewModel.settings.webcam.streamUrl();
return self.settingsViewModel.settings.webcam.streamUrl();
}
else return "";
};

self.getEta = function(seconds) {
self.getEta = function (seconds) {
dt = new Date();
dt.setSeconds( dt.getSeconds() + seconds )
dt.setSeconds(dt.getSeconds() + seconds)
return dt.toTimeString().split(' ')[0];
};

self.formatFanOffset = function(fanSpeed) {
self.formatFanOffset = function (fanSpeed) {
fanSpeed = fanSpeed.replace("%", "");
fanSpeed = fanSpeed.replace("-", 1);
fanSpeed = fanSpeed.replace("Off", 1);
Expand All @@ -151,34 +273,34 @@ $(function() {
else return 0;
};

self.formatProgressOffset = function(currentProgress) {
self.formatProgressOffset = function (currentProgress) {
if (currentProgress) {
return 339.292 * (1 - (currentProgress / 100));
}
else return "0.0";
};

self.formatTempOffset = function(temp, range) {
self.formatTempOffset = function (temp, range) {
if (temp) {
return 350 * (1 - temp / range);
}
else return 350;
else return 350;
};

self.formatConnectionstatus = function(currentStatus) {
self.formatConnectionstatus = function (currentStatus) {
if (currentStatus) {
return "Connected";
}
else return "Disconnected";
};
};
};

// view model class, parameters for constructor, container to bind to
OCTOPRINT_VIEWMODELS.push({
construct: DashboardViewModel,
dependencies: [ "temperatureViewModel", "printerStateViewModel", "printerProfilesViewModel", "connectionViewModel", "settingsViewModel", "displaylayerprogressViewModel", "controlViewModel" ],
optional: [ "displaylayerprogressViewModel" ],
elements: [ "#tab_plugin_dashboard" ]
dependencies: ["temperatureViewModel", "printerStateViewModel", "printerProfilesViewModel", "connectionViewModel", "settingsViewModel", "displaylayerprogressViewModel", "controlViewModel"],
optional: ["displaylayerprogressViewModel"],
elements: ["#tab_plugin_dashboard"]
});
});

Expand Down
7 changes: 7 additions & 0 deletions octoprint_dashboard/templates/dashboard_settings.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@
</label>
</div>
</div>
<div class="control-group">
<div >
<label class="checkbox">{{ _('Use theme colors for full screen') }}
<input type="checkbox" data-bind="checked: settings.plugins.dashboard.fullscreenUseThemeColors">
</label>
</div>
</div>

<legend>{{ _('Temperature Gauge Maximums') }}</legend>
<div class="control-group">
Expand Down

0 comments on commit ff783ec

Please sign in to comment.