Version 2.0.0-RC1

Performance improvements and bug fixes
Duet3D · Dec 25, 2018 · 9c714ab · 9c714ab
1 parent d49853c
commit 9c714ab
Show file tree

Hide file tree

Showing 34 changed files with 515 additions and 250 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "file-saver": "^2.0.0",
     "izitoast": "^1.4.0",
     "jszip": "^3.1.5",
+    "piecon": "^0.5.0",
     "roboto-fontface": "*",
     "three": "^0.99.0",
     "three-orbitcontrols": "^2.99.1",
@@ -30,7 +31,7 @@
     "babel-plugin-transform-builtin-extend": "^1.1.2",
     "compression-webpack-plugin": "^2.0.0",
     "core-js": "^2.6.1",
-    "eslint": "^5.8.0",
+    "eslint": "^5.11.0",
     "eslint-plugin-vue": "^5.0.0-0",
     "material-design-icons-iconfont": "^3.0.3",
     "rimraf": "^2.6.2",

diff --git a/public/index.html b/public/index.html
@@ -5,11 +5,11 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<meta name="viewport" content="width=device-width,initial-scale=1.0">
 		<link rel="icon" href="<%= BASE_URL %>favicon.ico">
-		<title>Duet Web Control</title>
+		<title>Duet Web Control 2</title>
 	</head>
 	<body>
 		<noscript>
-			<strong>We're sorry but duetwebcontrol doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+			<strong>We're sorry but Duet Web Control does not work properly without JavaScript enabled. Please enable it to continue.</strong>
 		</noscript>
 		<div id="app"></div>
 		<!-- built files will be auto injected -->

diff --git a/src/App.vue b/src/App.vue
@@ -20,19 +20,18 @@
 }
 
 .global-control.theme--light {
-	background-color: #E0E0E0 !important;
+	background-color: #F5F5F5 !important;
 }
 #global-container .v-card.theme--light {
 	background-color: #F5F5F5 !important;
 }
 .global-control.theme--dark {
-	background-color: #616161 !important;
+	background-color: #515151 !important;
 }
 #global-container .v-card.theme--dark {
 	background-color: #515151 !important;
 }
 
-
 input[type='number'] {
     -moz-appearance: textfield;
 }
@@ -73,7 +72,7 @@ a:not(:hover) {
 			</v-list>
 		</v-navigation-drawer>
 
-		<v-toolbar app clipped-left>
+		<v-toolbar ref="appToolbar" app clipped-left>
 			<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
 			<v-toolbar-title>
 				<!-- TODO: Optional OEM branding -->
@@ -120,7 +119,7 @@ a:not(:hover) {
 
 			<v-divider v-show="!hideGlobalContainer || $vuetify.breakpoint.mdAndUp"></v-divider>
 
-			<v-container fluid class="container">
+			<v-container fluid id="page-container" class="container">
 				<router-view></router-view>
 			</v-container>
 		</v-content>
@@ -129,10 +128,6 @@ a:not(:hover) {
 			TODO Add quick access / component list here in design mode
 		</v-navigation-drawer>-->
 
-		<v-footer app>
-			<span class="ml-3">&copy; 2018 Christian Hammacher for Duet3D</span>
-		</v-footer>
-
 		<connect-dialog></connect-dialog>
 		<connection-dialog></connection-dialog>
 		<messagebox-dialog></messagebox-dialog>
@@ -142,6 +137,7 @@ a:not(:hover) {
 <script>
 'use strict'
 
+import Piecon from 'piecon'
 import { mapState, mapGetters, mapActions } from 'vuex'
 
 import { Routing } from './routes'
@@ -151,11 +147,14 @@ export default {
 		...mapState({
 			isLocal: state => state.isLocal,
 			globalShowConnectDialog: state => state.showConnectDialog,
+
+			isPrinting: state => state.machine.model.state.isPrinting,
 			name: state => state.machine.model.network.name,
+
 			darkTheme: state => state.settings.darkTheme,
 			webcam: state => state.settings.webcam
 		}),
-		...mapGetters('machine/model', ['board', 'isPrinting'])
+		...mapGetters('machine/model', ['board', 'jobProgress'])
 	},
 	data() {
 		return {
@@ -184,6 +183,13 @@ export default {
 				return category.pages.some(page => page.path === route.path);
 			}
 			return true;
+		},
+		updateTitle() {
+			const jobProgress = this.jobProgress;
+			const title = ((jobProgress > 0 && this.isPrinting) ? `(${(jobProgress * 100).toFixed(1)}%) ` : '') + this.name;
+			if (document.title !== title) {
+				document.title = title;
+			}
 		}
 	},
 	mounted() {
@@ -199,26 +205,43 @@ export default {
 		this.load();
 
 		// Validate navigation
-		const checkMenuCondition = this.checkMenuCondition;
+		const that = this;
 		this.$router.beforeEach((to, from, next) => {
-			if (Routing.some(group => group.pages.some(page => page.path === to.path && !checkMenuCondition(page.condition)))) {
+			if (Routing.some(group => group.pages.some(page => page.path === to.path && !that.checkMenuCondition(page.condition)))) {
 				next('/');
 			} else {
 				next();
 			}
 		});
 
 		const route = this.$route;
-		if (Routing.some(group => group.pages.some(page => page.path === route.path && !checkMenuCondition(page.condition)))) {
+		if (Routing.some(group => group.pages.some(page => page.path === route.path && !this.checkMenuCondition(page.condition)))) {
 			this.$router.push('/');
 		}
+
+		// Set up Piecon
+		Piecon.setOptions({
+			color: '#00f',			// Pie chart color
+			background: '#bbb',		// Empty pie chart color
+			shadow: '#fff',			// Outer ring color
+			fallback: false			// Toggles displaying percentage in the title bar (possible values - true, false, 'force')
+		});
 	},
 	watch: {
 		isPrinting(to) {
 			if (to) {
 				// Go to Job Status when a print starts
 				this.$router.push('/Job/Status');
 			}
+		},
+		name() { this.updateTitle(); },
+		jobProgress(to) {
+			if (to === undefined || to == 1) {
+				Piecon.reset();
+			} else {
+				Piecon.setProgress(to * 100);
+			}
+			this.updateTitle();
 		}
 	}
 }

diff --git a/src/components/charts/LayerChart.vue b/src/components/charts/LayerChart.vue
@@ -48,79 +48,6 @@ export default {
 	data() {
 		return {
 			chart: null,
-			options: {
-				elements: {
-					line: {
-						tension: 0
-					}
-				},
-				legend: {
-					display: false
-				},
-				maintainAspectRatio: false,
-				scales: {
-					xAxes: [
-						{
-							gridLines: {
-								color: 'rgba(0,0,0,0.2)',
-								display: true
-							},
-							ticks: {
-								minor: {
-									fontColor: 'rgba(0,0,0,0.87)',
-									fontFamily: 'Roboto,sans-serif'
-								},
-								major: {
-									fontColor: 'rgba(0,0,0,0.87)',
-									fontFamily: 'Roboto,sans-serif'
-								},
-								beginAtZero: true,
-								maxRotation: 0,
-								stepSize: 5
-							}
-						}
-					],
-					yAxes: [
-						{
-							gridLines: {
-								color: 'rgba(0,0,0,0.87)',
-								zeroLineColor: 'rgba(0,0,0,0.2)',
-								display: true
-							},
-							ticks: {
-								minor: {
-									fontColor: 'rgba(0,0,0,0.87)',
-									fontFamily: 'Roboto,sans-serif'
-								},
-								major: {
-									fontColor: 'rgba(0,0,0,0.87)',
-									fontFamily: 'Roboto,sans-serif'
-								},
-								beginAtZero: true,
-								suggestedMax: 30,
-								callback: function(value) {
-									return displayTime(value, false);
-								}
-							}
-						}
-					]
-				},
-				tooltips: {
-					displayColors: false,
-					callbacks: {
-						title: tooltipItems => `Layer ${tooltipItems[0].index + 1}`,
-						label(tooltipItem) {
-							const layer = layers[tooltipItem.index];
-							let result = [`Duration: ${displayTime(layer.duration, false)}`];
-							if (layer.height) { result.push(`Layer Height: ${displayZ(layer.height)}`); }
-							if (layer.filament) { result.push(`Filament Usage: ${display(layer.filament, 1, 'mm')}`); }
-							if (layer.fractionPrinted) { result.push(`File Progress: ${display(layer.fractionPrinted * 100, 1, '%')}`); }
-							return result;
-						}
-					}
-				}
-				// panning and zooming is not supported until the panning feature of chartjs-plugin-zoom is fixed
-			},
 			showAllLayers: false
 		}
 	},
@@ -155,6 +82,82 @@ export default {
 		}
 	},
 	mounted() {
+		// Create new chart options. Don't use data for the following because it should not be reactive
+		this.options = {
+			elements: {
+				line: {
+					tension: 0
+				}
+			},
+			legend: {
+				display: false
+			},
+			maintainAspectRatio: false,
+			scales: {
+				xAxes: [
+					{
+						gridLines: {
+							color: 'rgba(0,0,0,0.2)',
+							display: true
+						},
+						ticks: {
+							minor: {
+								fontColor: 'rgba(0,0,0,0.87)',
+								fontFamily: 'Roboto,sans-serif'
+							},
+							major: {
+								fontColor: 'rgba(0,0,0,0.87)',
+								fontFamily: 'Roboto,sans-serif'
+							},
+							beginAtZero: true,
+							maxRotation: 0,
+							stepSize: 5
+						}
+					}
+				],
+				yAxes: [
+					{
+						gridLines: {
+							color: 'rgba(0,0,0,0.87)',
+							zeroLineColor: 'rgba(0,0,0,0.2)',
+							display: true
+						},
+						ticks: {
+							minor: {
+								fontColor: 'rgba(0,0,0,0.87)',
+								fontFamily: 'Roboto,sans-serif'
+							},
+							major: {
+								fontColor: 'rgba(0,0,0,0.87)',
+								fontFamily: 'Roboto,sans-serif'
+							},
+							beginAtZero: true,
+							suggestedMax: 30,
+							callback: function(value) {
+								return displayTime(value, false);
+							}
+						}
+					}
+				]
+			},
+			tooltips: {
+				displayColors: false,
+				callbacks: {
+					title: tooltipItems => `Layer ${tooltipItems[0].index + 1}`,
+					label(tooltipItem) {
+						const layer = layers[tooltipItem.index];
+						let result = [`Duration: ${displayTime(layer.duration, false)}`];
+						if (layer.height) { result.push(`Layer Height: ${displayZ(layer.height)}`); }
+						if (layer.filament) { result.push(`Filament Usage: ${display(layer.filament, 1, 'mm')}`); }
+						if (layer.fractionPrinted) { result.push(`File Progress: ${display(layer.fractionPrinted * 100, 1, '%')}`); }
+						return result;
+					}
+				}
+			}
+			// panning and zooming is not supported until the panning feature of chartjs-plugin-zoom is fixed
+		};
+
+		// Create the chart
 		this.chart = Chart.Line(this.$refs.chart, {
 			options: this.options,
 			data: {