Merge branch 'richard-jm/appearance' into devel
Gina Häußge
commit
bd28c73bc5
|
|
@ -336,6 +336,10 @@ def getSettings():
|
|||
[movementSpeedX, movementSpeedY, movementSpeedZ, movementSpeedE] = s.get(["printerParameters", "movementSpeed", ["x", "y", "z", "e"]])
|
||||
|
||||
return jsonify({
|
||||
"appearance": {
|
||||
"name": s.get(["appearance", "name"]),
|
||||
"color": s.get(["appearance", "color"])
|
||||
},
|
||||
"printer": {
|
||||
"movementSpeedX": movementSpeedX,
|
||||
"movementSpeedY": movementSpeedY,
|
||||
|
|
@ -369,6 +373,10 @@ def setSettings():
|
|||
data = request.json
|
||||
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 "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"])
|
||||
|
|
|
|||
|
|
@ -48,6 +48,10 @@ old_default_settings = {
|
|||
|
||||
default_settings = old_default_settings.copy()
|
||||
default_settings.update({
|
||||
"appearance": {
|
||||
"name": "OctoPrint",
|
||||
"color": "white"
|
||||
},
|
||||
"controls": [],
|
||||
"printerParameters": {
|
||||
"movementSpeed": {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,77 @@ body {
|
|||
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-container .tab-content {
|
||||
|
|
@ -46,6 +117,12 @@ body {
|
|||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
.print-control .btn {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
|
||||
/** Tables */
|
||||
|
||||
table {
|
||||
|
|
@ -221,6 +298,10 @@ ul.dropdown-menu li a {
|
|||
height: 30px;
|
||||
}
|
||||
|
||||
/** Settings dialog */
|
||||
#settings_dialog {
|
||||
width: 650px;
|
||||
}
|
||||
/** General helper classes */
|
||||
|
||||
.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) {
|
||||
var self = this;
|
||||
|
||||
|
|
@ -1045,6 +1053,12 @@ function GcodeViewModel() {
|
|||
function SettingsViewModel() {
|
||||
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_movementSpeedY = ko.observable(undefined);
|
||||
self.printer_movementSpeedZ = ko.observable(undefined);
|
||||
|
|
@ -1083,6 +1097,9 @@ function SettingsViewModel() {
|
|||
}
|
||||
|
||||
self.fromResponse = function(response) {
|
||||
self.appearance_name(response.appearance.name);
|
||||
self.appearance_color(response.appearance.color);
|
||||
|
||||
self.printer_movementSpeedX(response.printer.movementSpeedX);
|
||||
self.printer_movementSpeedY(response.printer.movementSpeedY);
|
||||
self.printer_movementSpeedZ(response.printer.movementSpeedZ);
|
||||
|
|
@ -1106,6 +1123,10 @@ function SettingsViewModel() {
|
|||
|
||||
self.saveData = function() {
|
||||
var data = {
|
||||
"appearance" : {
|
||||
"name": self.appearance_name(),
|
||||
"color": self.appearance_color()
|
||||
},
|
||||
"printer": {
|
||||
"movementSpeedX": self.printer_movementSpeedX(),
|
||||
"movementSpeedY": self.printer_movementSpeedY(),
|
||||
|
|
@ -1218,6 +1239,7 @@ $(function() {
|
|||
var connectionViewModel = new ConnectionViewModel();
|
||||
var printerStateViewModel = new PrinterStateViewModel();
|
||||
var settingsViewModel = new SettingsViewModel();
|
||||
var appearanceViewModel = new AppearanceViewModel(settingsViewModel);
|
||||
var temperatureViewModel = new TemperatureViewModel(settingsViewModel);
|
||||
var controlsViewModel = new ControlsViewModel();
|
||||
var speedViewModel = new SpeedViewModel();
|
||||
|
|
@ -1238,6 +1260,16 @@ $(function() {
|
|||
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
|
||||
|
||||
$("#job_print").click(function() {
|
||||
|
|
@ -1390,6 +1422,8 @@ $(function() {
|
|||
ko.applyBindings(speedViewModel, document.getElementById("speed"));
|
||||
ko.applyBindings(gcodeViewModel, document.getElementById("gcode"));
|
||||
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");
|
||||
if (webcamElement) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='img/apple-touch-icon-114x114.png') }}">
|
||||
|
|
@ -23,13 +23,13 @@
|
|||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div id="navbar" class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner" data-bind="css: color">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,9 +74,11 @@
|
|||
<div class="bar" id="job_progressBar" data-bind="style: { width: progress() + '%' }"></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>
|
||||
<button class="btn" id="job_pause" data-bind="css: {active: isPaused}"><i class="icon-pause"></i> <span>Pause</span></button>
|
||||
<button class="btn" id="job_cancel"><i class="icon-stop"></i> Cancel</button>
|
||||
<div class="row-fluid print-control">
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<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_temperature" data-toggle="tab">Temperature</a></li>
|
||||
<li><a href="#settings_appearance" data-toggle="tab">Appearance</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
|
@ -159,6 +160,23 @@
|
|||
</div>
|
||||
</form>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -393,8 +393,8 @@ class MachineCom(object):
|
|||
self._changeState(self.STATE_OPERATIONAL)
|
||||
elif time.time() > timeout:
|
||||
self.close()
|
||||
elif self._state == self.STATE_OPERATIONAL:
|
||||
#Request the temperature on comm timeout (every 2 seconds) when we are not printing.
|
||||
elif self._state == self.STATE_OPERATIONAL or self._state == self.STATE_PAUSED:
|
||||
#Request the temperature on comm timeout (every 5 seconds) when we are not printing.
|
||||
if line == '':
|
||||
self._sendCommand("M105")
|
||||
tempRequestTimeout = time.time() + 5
|
||||
|
|
|
|||
Loading…
Reference in New Issue