Skip to content

Commit

Permalink
add interface settings and save gui.json on virtual_sdcard
Browse files Browse the repository at this point in the history
  • Loading branch information
meteyou committed Apr 13, 2020
1 parent 572fbd7 commit bb18992
Show file tree
Hide file tree
Showing 19 changed files with 448 additions and 91 deletions.
16 changes: 1 addition & 15 deletions public/config.json
Original file line number Diff line number Diff line change
@@ -1,22 +1,8 @@
{
"socket": {
"hostname": "kossel.local",
"hostname": "voron250.local",
"port": 8080,
"reconnectInterval": 3000,
"reconnectAttempts": 1000
},
"webcam": {
"url": "http://192.168.0.210/webcam/?action=stream"
},
"gui": {
"dashboard": {
"boolWebcam": true,
"hiddenMacros": [
"M600", "FLASH_YES", "FLASH_NO", "TESTMOVE_A", "TESTMOVE_B", "TESTMOVE_X", "TESTMOVE_Y", "M141", "CANCEL", "M120", "M121", "CANCEL_PRINT", "PRINT_START", "PRINT_END", "RESTORE_LIGHT", "M355"
]
},
"gcodefiles": {
"countPerPage": 15
}
}
}
28 changes: 7 additions & 21 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@
<v-toolbar-title>{{ hostname }}</v-toolbar-title>
</div>
<ul class="navi" :expand="$vuetify.breakpoint.mdAndUp">
<li v-for="(category, index) in routes" :key="index" :prepend-icon="category.icon" :class="[category.path !== '/' && currentPage.includes(category.path) ? 'active' : '', 'nav-item']" :value="true">
<router-link slot="activator" class="nav-link" exact :to="category.path" @click.prevent>
<li v-for="(category, index) in routes" :key="index" :prepend-icon="category.icon"
:class="[category.path !== '/' && currentPage.includes(category.path) ? 'active' : '', 'nav-item']"
:value="true">
<router-link slot="activator" class="nav-link" exact :to="category.path" @click.prevent v-if="(category.title === 'Webcam' && boolNaviWebcam) || category.title !== 'Webcam'">
<v-icon>mdi-{{ category.icon }}</v-icon>
<span class="nav-title">{{ category.title }}</span>
<v-icon class="nav-arrow" v-if="category.children && category.children.length > 0">mdi-chevron-down</v-icon>
Expand Down Expand Up @@ -82,26 +84,9 @@ export default {
routes: routes
}),
created () {
this.$vuetify.theme.dark = true,
this.$vuetify.theme.dark = true;
this.$socket.onOpen = () => {
this.$socket.sendObj('get_printer_info', {}, 'getKlipperInfo');
this.$socket.sendObj('get_printer_objects', {}, 'getObjectInfo');
this.$socket.sendObj('get_printer_status', { heater: [] }, 'getObjectInfo');
this.$socket.sendObj('get_printer_status', { configfile: ['config'] }, 'getPrinterConfig');
this.$socket.sendObj('post_printer_subscriptions', {
gcode: [],
toolhead: [],
virtual_sdcard: [],
heater: [],
heater_bed: [],
extruder: ["temperature", "target"],
fan: [],
pause_resume: [],
idle_timeout: [],
});
this.$socket.sendObj('get_printer_files', {}, 'getFileList');
this.$socket.sendObj('get_printer_gcode_help', {}, 'getHelpList');
}
},
computed: {
Expand All @@ -116,6 +101,7 @@ export default {
isConnected: state => state.socket.isConnected,
isConnecting: state => !state.socket.isConnected,
progress: state => state.printer.virtual_sdcard.progress,
boolNaviWebcam: state => state.gui.webcam.bool,
}),
...mapGetters([
'getTitle'
Expand Down
58 changes: 58 additions & 0 deletions src/components/panels/Settings/DashboardPanel.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@

<template>
<v-card>
<v-list-item>
<v-list-item-avatar color="grey"><v-icon dark>mdi-view-dashboard</v-icon></v-list-item-avatar>
<v-list-item-content>
<v-list-item-title class="headline">Dashboard</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="my-2"></v-divider>
<v-card-text class="px-0 pb-0 pt-3 content">
<v-row>
<v-col class="px-10 py-0">
<v-switch v-model="boolShowWebcamOnDashboard" label="Webcam"></v-switch>
</v-col>
</v-row>
<v-row>
<v-col class="px-10 py-0">
<v-switch v-model="boolShowTempchartOnDashboard" label="Tempchart"></v-switch>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>

<script>
export default {
components: {
},
data: function() {
return {
}
},
computed: {
boolShowWebcamOnDashboard: {
get() {
return this.$store.state.gui.dashboard.boolWebcam;
},
set(status) {
return this.$store.dispatch('setSettings', { gui: { dashboard: { boolWebcam: status } } });
}
},
boolShowTempchartOnDashboard: {
get() {
return this.$store.state.gui.dashboard.boolTempchart;
},
set(status) {
return this.$store.dispatch('setSettings', { gui: { dashboard: { boolTempchart: status } } });
}
},
},
methods: {
}
}
</script>
49 changes: 49 additions & 0 deletions src/components/panels/Settings/MacrosPanel.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@

<template>
<v-card>
<v-list-item>
<v-list-item-avatar color="grey"><v-icon dark>mdi-code-tags</v-icon></v-list-item-avatar>
<v-list-item-content>
<v-list-item-title class="headline">Macros</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="my-2"></v-divider>
<v-card-text class="px-0 pb-3 pt-3 content">
<div v-for="(macro, index) in getAllMacros" v-bind:key="index">
<v-row>
<v-col class="px-10 py-0">
<settings-macro-switch :name="macro.name"></settings-macro-switch>
</v-col>
</v-row>
</div>
</v-card-text>
</v-card>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import SettingsMacroSwitch from "../../../inputs/SettingsMacroSwitch";
export default {
components: {
SettingsMacroSwitch
},
data: function() {
return {
}
},
computed: {
...mapState({
hiddenMacros: state => state.gui.dashboard.hiddenMacros,
}),
...mapGetters([
'getAllMacros',
])
},
methods: {
}
}
</script>
66 changes: 66 additions & 0 deletions src/components/panels/Settings/WebcamPanel.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<style>
.webcamImage {
width: 100%;
}
</style>

<template>
<v-card>
<v-list-item>
<v-list-item-avatar color="grey"><v-icon dark>mdi-webcam</v-icon></v-list-item-avatar>
<v-list-item-content>
<v-list-item-title class="headline">Webcam</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="my-2"></v-divider>
<v-card-text class="px-0 pb-0 pt-3 content">
<v-row>
<v-col class="px-10 py-0">
<v-text-field
v-model="webcamUrl"
label="Webcam URL"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col class="px-10 py-0">
<v-switch v-model="boolNavi" label="Show in Navigation"></v-switch>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>

<script>
export default {
components: {
},
data: function() {
return {
}
},
computed: {
webcamUrl: {
get() {
return this.$store.state.webcam.url;
},
set(newWebcamUrl) {
return this.$store.dispatch('setSettings', { webcam: { url: newWebcamUrl } });
}
},
boolNavi: {
get() {
return this.$store.state.gui.webcam.bool;
},
set(bool) {
return this.$store.dispatch('setSettings', { gui: { webcam: { bool: bool } } });
}
},
},
methods: {
}
}
</script>
13 changes: 13 additions & 0 deletions src/components/panels/Settings/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Vue from 'vue'

import WebcamPanel from './WebcamPanel.vue'
import DashboardPanel from "./DashboardPanel";
import MacrosPanel from "./MacrosPanel";

Vue.component('settings-webcam-panel', WebcamPanel);
Vue.component('settings-dashboard-panel', DashboardPanel);
Vue.component('settings-macros-panel', MacrosPanel);

export default {

}
5 changes: 3 additions & 2 deletions src/components/panels/ToolsPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
</v-col>
</v-row>
</div>
<v-divider class="my-2"></v-divider>
<v-row>
<v-divider class="my-2" v-if="boolTempchart"></v-divider>
<v-row v-if="boolTempchart">
<v-col>
<line-chart :chart-data="chartdata" v-if="loaded"></line-chart>
</v-col>
Expand Down Expand Up @@ -84,6 +84,7 @@
...mapState({
labels: state => state.temperaturChart.labels,
datasets: state => state.temperaturChart.datasets,
boolTempchart: state => state.gui.dashboard.boolTempchart,
}),
...mapGetters([
'heaters',
Expand Down
2 changes: 1 addition & 1 deletion src/components/panels/WebcamPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<template>
<v-card>
<v-list-item>
<v-list-item-avatar color="grey"><v-icon dark>fa-camera</v-icon></v-list-item-avatar>
<v-list-item-avatar color="grey"><v-icon dark>mdi-webcam</v-icon></v-list-item-avatar>
<v-list-item-content>
<v-list-item-title class="headline">Webcam</v-list-item-title>
</v-list-item-content>
Expand Down
3 changes: 2 additions & 1 deletion src/components/panels/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Peripherie from "./PeripheriePanel";
import MacrosPanel from "./MacrosPanel";
import LimitsPanel from "./LimitsPanel";
import WebcamPanel from "./WebcamPanel";
import Settings from "./Settings/";

Vue.component('status-panel', StatusPanel);
Vue.component('tools-panel', ToolsPanel);
Expand All @@ -19,5 +20,5 @@ Vue.component('limits-panel', LimitsPanel);
Vue.component('webcam-panel', WebcamPanel);

export default {
StatusPanel,
Settings
}
46 changes: 46 additions & 0 deletions src/inputs/SettingsMacroSwitch.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<style>
.settings_macro_switch .v-messages {
display: none;
}
</style>

<template>
<v-switch v-model="value" :label="name.toUpperCase()" @change="setValue" class="settings_macro_switch mt-0"></v-switch>
</template>


<script>
import { mapState } from 'vuex';
export default {
data: function() {
return {
value: false
}
},
props: {
name: String,
},
computed: {
...mapState({
hiddenMacros: state => state.gui.dashboard.hiddenMacros
}),
},
methods: {
setValue() {
if (this.value) {
let index = this.hiddenMacros.indexOf(this.name);
if (index > -1) this.hiddenMacros.splice(index, 1);
} else this.hiddenMacros.push(this.name);
}
},
watch: {
hiddenMacros: function() {
this.value = !this.hiddenMacros.includes(this.name);
}
},
created() {
this.value = !this.hiddenMacros.includes(this.name);
}
}
</script>
Loading

0 comments on commit bb18992

Please sign in to comment.