Merge branch 'richard-jm/appearance' into devel
commit
bd28c73bc5
|
@ -336,6 +336,10 @@ def getSettings():
|
||||||
[movementSpeedX, movementSpeedY, movementSpeedZ, movementSpeedE] = s.get(["printerParameters", "movementSpeed", ["x", "y", "z", "e"]])
|
[movementSpeedX, movementSpeedY, movementSpeedZ, movementSpeedE] = s.get(["printerParameters", "movementSpeed", ["x", "y", "z", "e"]])
|
||||||
|
|
||||||
return jsonify({
|
return jsonify({
|
||||||
|
"appearance": {
|
||||||
|
"name": s.get(["appearance", "name"]),
|
||||||
|
"color": s.get(["appearance", "color"])
|
||||||
|
},
|
||||||
"printer": {
|
"printer": {
|
||||||
"movementSpeedX": movementSpeedX,
|
"movementSpeedX": movementSpeedX,
|
||||||
"movementSpeedY": movementSpeedY,
|
"movementSpeedY": movementSpeedY,
|
||||||
|
@ -369,6 +373,10 @@ def setSettings():
|
||||||
data = request.json
|
data = request.json
|
||||||
s = settings()
|
s = settings()
|
||||||
|
|
||||||
|
if "appearance" in data.keys():
|
||||||
|
if "name" in data["appearance"].keys(): s.set(["appearance", "name"], data["appearance"]["name"])
|
||||||
|
if "color" in data["appearance"].keys(): s.set(["appearance", "color"], data["appearance"]["color"])
|
||||||
|
|
||||||
if "printer" in data.keys():
|
if "printer" in data.keys():
|
||||||
if "movementSpeedX" in data["printer"].keys(): s.setInt(["printerParameters", "movementSpeed", "x"], data["printer"]["movementSpeedX"])
|
if "movementSpeedX" in data["printer"].keys(): s.setInt(["printerParameters", "movementSpeed", "x"], data["printer"]["movementSpeedX"])
|
||||||
if "movementSpeedY" in data["printer"].keys(): s.setInt(["printerParameters", "movementSpeed", "y"], data["printer"]["movementSpeedY"])
|
if "movementSpeedY" in data["printer"].keys(): s.setInt(["printerParameters", "movementSpeed", "y"], data["printer"]["movementSpeedY"])
|
||||||
|
|
|
@ -48,6 +48,10 @@ old_default_settings = {
|
||||||
|
|
||||||
default_settings = old_default_settings.copy()
|
default_settings = old_default_settings.copy()
|
||||||
default_settings.update({
|
default_settings.update({
|
||||||
|
"appearance": {
|
||||||
|
"name": "OctoPrint",
|
||||||
|
"color": "white"
|
||||||
|
},
|
||||||
"controls": [],
|
"controls": [],
|
||||||
"printerParameters": {
|
"printerParameters": {
|
||||||
"movementSpeed": {
|
"movementSpeed": {
|
||||||
|
|
|
@ -4,6 +4,77 @@ body {
|
||||||
padding-top: 60px;
|
padding-top: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* This would be far simpler using .less */
|
||||||
|
#navbar .navbar-inner.white {
|
||||||
|
background-color: #FAFAFA; /* fallback color if gradients are not supported */
|
||||||
|
background-image: -webkit-linear-gradient(top, #FFFFFF, #F2F2F2); /* For Chrome and Safari */
|
||||||
|
background-image: -moz-linear-gradient(top, #FFFFFF, #F2F2F2); /* For old Fx (3.6 to 15) */
|
||||||
|
background-image: -ms-linear-gradient(top, #FFFFFF, #F2F2F2); /* For pre-releases of IE 10*/
|
||||||
|
background-image: -o-linear-gradient(top, #FFFFFF, #F2F2F2); /* For old Opera (11.1 to 12.0) */
|
||||||
|
background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2); /* Standard syntax; must be last */
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar .navbar-inner.red {
|
||||||
|
background-color: #F22828; /* fallback color if gradients are not supported */
|
||||||
|
background-image: -webkit-linear-gradient(top, #FFFFFF, #F22828); /* For Chrome and Safari */
|
||||||
|
background-image: -moz-linear-gradient(top, #FFFFFF, #F22828); /* For old Fx (3.6 to 15) */
|
||||||
|
background-image: -ms-linear-gradient(top, #FFFFFF, #F22828); /* For pre-releases of IE 10*/
|
||||||
|
background-image: -o-linear-gradient(top, #FFFFFF, #F22828); /* For old Opera (11.1 to 12.0) */
|
||||||
|
background-image: linear-gradient(to bottom, #FFFFFF, #F22828); /* Standard syntax; must be last */
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar .navbar-inner.orange {
|
||||||
|
background-color: #F27728; /* fallback color if gradients are not supported */
|
||||||
|
background-image: -webkit-linear-gradient(top, #FFFFFF, #F27728); /* For Chrome and Safari */
|
||||||
|
background-image: -moz-linear-gradient(top, #FFFFFF, #F27728); /* For old Fx (3.6 to 15) */
|
||||||
|
background-image: -ms-linear-gradient(top, #FFFFFF, #F27728); /* For pre-releases of IE 10*/
|
||||||
|
background-image: -o-linear-gradient(top, #FFFFFF, #F27728); /* For old Opera (11.1 to 12.0) */
|
||||||
|
background-image: linear-gradient(to bottom, #FFFFFF, #F27728); /* Standard syntax; must be last */
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar .navbar-inner.yellow {
|
||||||
|
background-color: #F2DE28; /* fallback color if gradients are not supported */
|
||||||
|
background-image: -webkit-linear-gradient(top, #FFFFFF, #F2DE28); /* For Chrome and Safari */
|
||||||
|
background-image: -moz-linear-gradient(top, #FFFFFF, #F2DE28); /* For old Fx (3.6 to 15) */
|
||||||
|
background-image: -ms-linear-gradient(top, #FFFFFF, #F2DE28); /* For pre-releases of IE 10*/
|
||||||
|
background-image: -o-linear-gradient(top, #FFFFFF, #F2DE28); /* For old Opera (11.1 to 12.0) */
|
||||||
|
background-image: linear-gradient(to bottom, #FFFFFF, #F2DE28); /* Standard syntax; must be last */
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar .navbar-inner.green {
|
||||||
|
background-color: #77FF28; /* fallback color if gradients are not supported */
|
||||||
|
background-image: -webkit-linear-gradient(top, #FFFFFF, #77FF28); /* For Chrome and Safari */
|
||||||
|
background-image: -moz-linear-gradient(top, #FFFFFF, #77FF28); /* For old Fx (3.6 to 15) */
|
||||||
|
background-image: -ms-linear-gradient(top, #FFFFFF, #77FF28); /* For pre-releases of IE 10*/
|
||||||
|
background-image: -o-linear-gradient(top, #FFFFFF, #77FF28); /* For old Opera (11.1 to 12.0) */
|
||||||
|
background-image: linear-gradient(to bottom, #FFFFFF, #77FF28); /* Standard syntax; must be last */
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar .navbar-inner.blue {
|
||||||
|
background-color: #2877FF; /* fallback color if gradients are not supported */
|
||||||
|
background-image: -webkit-linear-gradient(top, #FFFFFF, #2877FF); /* For Chrome and Safari */
|
||||||
|
background-image: -moz-linear-gradient(top, #FFFFFF, #2877FF); /* For old Fx (3.6 to 15) */
|
||||||
|
background-image: -ms-linear-gradient(top, #FFFFFF, #2877FF); /* For pre-releases of IE 10*/
|
||||||
|
background-image: -o-linear-gradient(top, #FFFFFF, #2877FF); /* For old Opera (11.1 to 12.0) */
|
||||||
|
background-image: linear-gradient(to bottom, #FFFFFF, #2877FF); /* Standard syntax; must be last */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Colors too close together in RGB to tell apart clearly - so no indigo I'm afraid */
|
||||||
|
|
||||||
|
#navbar .navbar-inner.violet {
|
||||||
|
background-color: #7728FF; /* fallback color if gradients are not supported */
|
||||||
|
background-image: -webkit-linear-gradient(top, #FFFFFF, #7728FF); /* For Chrome and Safari */
|
||||||
|
background-image: -moz-linear-gradient(top, #FFFFFF, #7728FF); /* For old Fx (3.6 to 15) */
|
||||||
|
background-image: -ms-linear-gradient(top, #FFFFFF, #7728FF); /* For pre-releases of IE 10*/
|
||||||
|
background-image: -o-linear-gradient(top, #FFFFFF, #7728FF); /* For old Opera (11.1 to 12.0) */
|
||||||
|
background-image: linear-gradient(to bottom, #FFFFFF, #7728FF); /* Standard syntax; must be last */
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar .navbar-inner .brand, #navbar .navbar-inner .nav>li>a {
|
||||||
|
/* color: black; /* need a color that suits all backgrounds, removed for now */
|
||||||
|
text-shadow: none; /* shadow stands out too much on colored backgrounds */
|
||||||
|
}
|
||||||
|
|
||||||
/** OctoPrint application tabs */
|
/** OctoPrint application tabs */
|
||||||
|
|
||||||
.octoprint-container .tab-content {
|
.octoprint-container .tab-content {
|
||||||
|
@ -46,6 +117,12 @@ body {
|
||||||
padding: 0px 15px;
|
padding: 0px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.print-control .btn {
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/** Tables */
|
/** Tables */
|
||||||
|
|
||||||
table {
|
table {
|
||||||
|
@ -221,6 +298,10 @@ ul.dropdown-menu li a {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Settings dialog */
|
||||||
|
#settings_dialog {
|
||||||
|
width: 650px;
|
||||||
|
}
|
||||||
/** General helper classes */
|
/** General helper classes */
|
||||||
|
|
||||||
.text-right {
|
.text-right {
|
||||||
|
|
|
@ -202,6 +202,14 @@ function PrinterStateViewModel() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function AppearanceViewModel(settingsViewModel) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
self.name = settingsViewModel.appearance_name;
|
||||||
|
self.color = settingsViewModel.appearance_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function TemperatureViewModel(settingsViewModel) {
|
function TemperatureViewModel(settingsViewModel) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
@ -1045,6 +1053,12 @@ function GcodeViewModel() {
|
||||||
function SettingsViewModel() {
|
function SettingsViewModel() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
self.appearance_name = ko.observable(undefined);
|
||||||
|
self.appearance_color = ko.observable(undefined);
|
||||||
|
|
||||||
|
/* I did attempt to allow arbitrary gradients but cross browser support via knockout or jquery was going to be horrible */
|
||||||
|
self.appearance_available_colors = ko.observable(["white", "red", "orange", "yellow", "green", "blue", "violet"]);
|
||||||
|
|
||||||
self.printer_movementSpeedX = ko.observable(undefined);
|
self.printer_movementSpeedX = ko.observable(undefined);
|
||||||
self.printer_movementSpeedY = ko.observable(undefined);
|
self.printer_movementSpeedY = ko.observable(undefined);
|
||||||
self.printer_movementSpeedZ = ko.observable(undefined);
|
self.printer_movementSpeedZ = ko.observable(undefined);
|
||||||
|
@ -1083,6 +1097,9 @@ function SettingsViewModel() {
|
||||||
}
|
}
|
||||||
|
|
||||||
self.fromResponse = function(response) {
|
self.fromResponse = function(response) {
|
||||||
|
self.appearance_name(response.appearance.name);
|
||||||
|
self.appearance_color(response.appearance.color);
|
||||||
|
|
||||||
self.printer_movementSpeedX(response.printer.movementSpeedX);
|
self.printer_movementSpeedX(response.printer.movementSpeedX);
|
||||||
self.printer_movementSpeedY(response.printer.movementSpeedY);
|
self.printer_movementSpeedY(response.printer.movementSpeedY);
|
||||||
self.printer_movementSpeedZ(response.printer.movementSpeedZ);
|
self.printer_movementSpeedZ(response.printer.movementSpeedZ);
|
||||||
|
@ -1106,6 +1123,10 @@ function SettingsViewModel() {
|
||||||
|
|
||||||
self.saveData = function() {
|
self.saveData = function() {
|
||||||
var data = {
|
var data = {
|
||||||
|
"appearance" : {
|
||||||
|
"name": self.appearance_name(),
|
||||||
|
"color": self.appearance_color()
|
||||||
|
},
|
||||||
"printer": {
|
"printer": {
|
||||||
"movementSpeedX": self.printer_movementSpeedX(),
|
"movementSpeedX": self.printer_movementSpeedX(),
|
||||||
"movementSpeedY": self.printer_movementSpeedY(),
|
"movementSpeedY": self.printer_movementSpeedY(),
|
||||||
|
@ -1218,6 +1239,7 @@ $(function() {
|
||||||
var connectionViewModel = new ConnectionViewModel();
|
var connectionViewModel = new ConnectionViewModel();
|
||||||
var printerStateViewModel = new PrinterStateViewModel();
|
var printerStateViewModel = new PrinterStateViewModel();
|
||||||
var settingsViewModel = new SettingsViewModel();
|
var settingsViewModel = new SettingsViewModel();
|
||||||
|
var appearanceViewModel = new AppearanceViewModel(settingsViewModel);
|
||||||
var temperatureViewModel = new TemperatureViewModel(settingsViewModel);
|
var temperatureViewModel = new TemperatureViewModel(settingsViewModel);
|
||||||
var controlsViewModel = new ControlsViewModel();
|
var controlsViewModel = new ControlsViewModel();
|
||||||
var speedViewModel = new SpeedViewModel();
|
var speedViewModel = new SpeedViewModel();
|
||||||
|
@ -1238,6 +1260,16 @@ $(function() {
|
||||||
gcodeViewModel
|
gcodeViewModel
|
||||||
);
|
);
|
||||||
|
|
||||||
|
//~~ Show settings - to ensure centered
|
||||||
|
$('#navbar_show_settings').click(function() {
|
||||||
|
$('#settings_dialog').modal()
|
||||||
|
.css({
|
||||||
|
width: 'auto',
|
||||||
|
'margin-left': function() { return -($(this).width() /2); }
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
})
|
||||||
|
|
||||||
//~~ Print job control
|
//~~ Print job control
|
||||||
|
|
||||||
$("#job_print").click(function() {
|
$("#job_print").click(function() {
|
||||||
|
@ -1390,6 +1422,8 @@ $(function() {
|
||||||
ko.applyBindings(speedViewModel, document.getElementById("speed"));
|
ko.applyBindings(speedViewModel, document.getElementById("speed"));
|
||||||
ko.applyBindings(gcodeViewModel, document.getElementById("gcode"));
|
ko.applyBindings(gcodeViewModel, document.getElementById("gcode"));
|
||||||
ko.applyBindings(settingsViewModel, document.getElementById("settings_dialog"));
|
ko.applyBindings(settingsViewModel, document.getElementById("settings_dialog"));
|
||||||
|
ko.applyBindings(appearanceViewModel, document.getElementById("navbar"));
|
||||||
|
ko.applyBindings(appearanceViewModel, document.getElementsByTagName("head")[0]);
|
||||||
|
|
||||||
var webcamElement = document.getElementById("webcam");
|
var webcamElement = document.getElementById("webcam");
|
||||||
if (webcamElement) {
|
if (webcamElement) {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>OctoPrint</title>
|
<title data-bind="text: name">OctoPrint</title>
|
||||||
|
|
||||||
<link rel="shortcut icon" href="{{ url_for('static', filename='img/tentacle-32x32.png') }}">
|
<link rel="shortcut icon" href="{{ url_for('static', filename='img/tentacle-32x32.png') }}">
|
||||||
<link rel="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='img/apple-touch-icon-114x114.png') }}">
|
<link rel="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='img/apple-touch-icon-114x114.png') }}">
|
||||||
|
@ -23,13 +23,13 @@
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar navbar-fixed-top">
|
<div id="navbar" class="navbar navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner" data-bind="css: color">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="brand" href="#"><img src="{{ url_for('static', filename='img/tentacle-20x20.png') }}"> OctoPrint</a>
|
<a class="brand" href="#"><img src="{{ url_for('static', filename='img/tentacle-20x20.png') }}"> <span data-bind="text: name">OctoPrint</span></a>
|
||||||
<div class="nav-collapse">
|
<div class="nav-collapse">
|
||||||
<ul class="nav pull-right">
|
<ul class="nav pull-right">
|
||||||
<li><a class="pull-right" href="#settings_dialog" data-toggle="modal"><i class="icon-wrench"></i> Settings</a></li>
|
<li><a id="navbar_show_settings" class="pull-right" href="#settings_dialog"><i class="icon-wrench"></i> Settings</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -74,9 +74,11 @@
|
||||||
<div class="bar" id="job_progressBar" data-bind="style: { width: progress() + '%' }"></div>
|
<div class="bar" id="job_progressBar" data-bind="style: { width: progress() + '%' }"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="btn btn-primary" data-bind="enable: isOperational() && isReady() && !isPrinting() && !isPaused()" id="job_print"><i class="icon-print icon-white"></i> <span>Print</span></button>
|
<div class="row-fluid print-control">
|
||||||
<button class="btn" id="job_pause" data-bind="css: {active: isPaused}"><i class="icon-pause"></i> <span>Pause</span></button>
|
<button class="btn btn-primary span4" data-bind="enable: isOperational() && isReady() && !isPrinting(), css: {'btn-danger': isPaused()}" id="job_print"><i class="icon-print icon-white"></i> <span data-bind="text: (isPaused() ? 'Restart' : 'Print')">Print</span></button>
|
||||||
<button class="btn" id="job_cancel"><i class="icon-stop"></i> Cancel</button>
|
<button class="btn span4" id="job_pause" data-bind="css: {active: isPaused}"><i class="icon-pause"></i> <span>Pause</span></button>
|
||||||
|
<button class="btn span4" id="job_cancel"><i class="icon-stop"></i> Cancel</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
<li><a href="#settings_features" data-toggle="tab">Features</a></li>
|
<li><a href="#settings_features" data-toggle="tab">Features</a></li>
|
||||||
<li><a href="#settings_folder" data-toggle="tab">Folder</a></li>
|
<li><a href="#settings_folder" data-toggle="tab">Folder</a></li>
|
||||||
<li><a href="#settings_temperature" data-toggle="tab">Temperature</a></li>
|
<li><a href="#settings_temperature" data-toggle="tab">Temperature</a></li>
|
||||||
|
<li><a href="#settings_appearance" data-toggle="tab">Appearance</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
|
@ -159,6 +160,23 @@
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tab-pane" id="settings_appearance">
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<div class="control-group">
|
||||||
|
<label class="control-label" for="settings-appearanceName">Title</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-block-level" data-bind="value: appearance_name" id="settings-appearanceName">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group">
|
||||||
|
<label class="control-label" for="settings-appearanceColor">Color</label>
|
||||||
|
<div class="controls">
|
||||||
|
<select id="settings-appearanceColor" data-bind="value: appearance_color, options: appearance_available_colors">
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -393,8 +393,8 @@ class MachineCom(object):
|
||||||
self._changeState(self.STATE_OPERATIONAL)
|
self._changeState(self.STATE_OPERATIONAL)
|
||||||
elif time.time() > timeout:
|
elif time.time() > timeout:
|
||||||
self.close()
|
self.close()
|
||||||
elif self._state == self.STATE_OPERATIONAL:
|
elif self._state == self.STATE_OPERATIONAL or self._state == self.STATE_PAUSED:
|
||||||
#Request the temperature on comm timeout (every 2 seconds) when we are not printing.
|
#Request the temperature on comm timeout (every 5 seconds) when we are not printing.
|
||||||
if line == '':
|
if line == '':
|
||||||
self._sendCommand("M105")
|
self._sendCommand("M105")
|
||||||
tempRequestTimeout = time.time() + 5
|
tempRequestTimeout = time.time() + 5
|
||||||
|
|
Loading…
Reference in New Issue