feature: allows flipping the webcam horizontally and vertically

.gitignore

@@ -0,0 +1,12 @@
+node_modules
+.DS_Store
+design
+*.log
+packages/test
+dist
+temp
+.vuerc
+.version
+.versions
+.changelog
+package-lock.json

src/components/panels/Settings/WebcamPanel.vue

@@ -1,7 +1,5 @@
 <style>
-    .webcamImage {
+    .content { overflow: hidden; }
-        width: 100%;
-    }
 </style>
 
 <template>
@@ -13,18 +11,27 @@
             </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-card-text class="px-0 pt-3 content">
             <v-row>
                 <v-col class="px-10 py-0">
                     <v-text-field
                         v-model="webcamUrl"
+                        hide-details
                         label="Webcam URL"
                     ></v-text-field>
-                </v-col>
+
-            </v-row>
+                    <v-row v-if="rotationEnabled">
-            <v-row>
+                        <v-col sm="auto">
-                <v-col class="px-10 py-0">
+                            <v-switch v-model="rotate" hide-details label="Rotate"></v-switch>
-                    <v-switch v-model="boolNavi" label="Show in Navigation"></v-switch>
+                        </v-col>
+                        <v-col>
+                            <v-select :items="[{ text: '90 degrees', value: 90 }, { text: '270 degrees', value: 270 }]" v-model="rotateDegrees" hide-details></v-select>
+                        </v-col>
+                    </v-row>
+                    
+                    <v-switch v-model="flipX" hide-details label="Flip webcam horizontally"></v-switch>
+                    <v-switch v-model="flipY" hide-details label="Flip webcam vertically"></v-switch>
+                    <v-switch v-model="boolNavi" hide-details label="Show in navigation"></v-switch>
                 </v-col>
             </v-row>
         </v-card-text>
@@ -38,24 +45,56 @@
         },
         data: function() {
             return {
-
+                rotationEnabled: false
             }
         },
         computed: {
             webcamUrl: {
                 get() {
-                    return this.$store.state.webcam.url;
+                    return this.$store.state.gui.webcam.url;
                 },
-                set(newWebcamUrl) {
+                set(url) {
-                    return this.$store.dispatch('setSettings', { webcam: { url: newWebcamUrl } });
+                    return this.$store.dispatch('setSettings', { gui: { webcam: { url } } });
+                }
+            },
+            flipX: {
+                get() {
+                    return this.$store.state.gui.webcam.flipX;
+                },
+                set(flipX) {
+                    return this.$store.dispatch('setSettings', { gui: { webcam: { flipX } } });
+                }
+            },
+            flipY: {
+                get() {
+                    return this.$store.state.gui.webcam.flipY;
+                },
+                set(flipY) {
+                    return this.$store.dispatch('setSettings', { gui: { webcam: { flipY } } });
+                }
+            },
+            rotate: {
+                get() {
+                    return this.$store.state.gui.webcam.rotate;
+                },
+                set(rotate) {
+                    return this.$store.dispatch('setSettings', { gui: { webcam: { rotate } } });
+                }
+            },
+            rotateDegrees: {
+                get() {
+                    return this.$store.state.gui.webcam.rotateDegrees;
+                },
+                set(rotateDegrees) {
+                    return this.$store.dispatch('setSettings', { gui: { webcam: { rotateDegrees } } });
                 }
             },
             boolNavi: {
                 get() {
                     return this.$store.state.gui.webcam.bool;
                 },
-                set(bool) {
+                set(showNav) {
-                    return this.$store.dispatch('setSettings', { gui: { webcam: { bool: bool } } });
+                    return this.$store.dispatch('setSettings', { gui: { webcam: { bool: showNav } } });
                 }
             },
         },

src/components/panels/WebcamPanel.vue

@@ -14,7 +14,7 @@
         </v-list-item>
         <v-divider class="my-2"></v-divider>
         <v-card-text class="px-0 py-0 content">
-            <img :src="webcamUrl" class="webcamImage" />
+            <img :src="webcamConfig.url" class="webcamImage" :style="webcamStyle" />
         </v-card-text>
     </v-card>
 </template>
@@ -25,19 +25,29 @@
     export default {
         components: {
 
-        },
-        data: function() {
-            return {
-
-            }
         },
         computed: {
             ...mapState({
-                webcamUrl: state => state.webcam.url,
+                'webcamConfig': state => state.gui.webcam
-            })
+            }),
+            webcamStyle() {
+                var transforms = '';
+                if (this.webcamConfig.flipX) {
+                    transforms += ' scaleX(-1)'
+                }
+                if (this.webcamConfig.flipY) {
+                    transforms += ' scaleY(-1)'
+                }
+                if (this.webcamConfig.rotate && this.webcamConfig.rotateDegrees) {
+                    transforms += ` rotate(${this.webcamConfig.rotateDegrees}deg)`
+                }
+                if (transforms.trimLeft().length) {
+                    return {
+                        transform: transforms.trimLeft(),
+                    }
+                }
+                return '';
+            }
         },
-        methods: {
-
-        }
     }
 </script>

src/pages/Webcam.vue

@@ -12,8 +12,6 @@
     </div>
 </template>
 <script>
-    import { mapState } from 'vuex';
-
     export default {
         data () {
             return {
@@ -21,9 +19,7 @@
             }
         },
         computed: {
-            ...mapState({
+
-                webcamUrl: state => state.webcam.url,
-            }),
         },
         methods: {
 

src/store/getters.js

@@ -255,7 +255,7 @@ export default {
     },
 
     showDashboardWebcam: state => {
-        return (state.webcam.url !== "" && state.gui.dashboard.boolWebcam);
+        return (state.gui.webcam.url !== "" && state.gui.dashboard.boolWebcam);
     },
 
     getCurrentExtruder: state => {

src/store/index.js

@@ -24,9 +24,6 @@ export default new Vuex.Store({
             loadingSaveGuiConfig: false,
             loadingEndstopStatus: false,
         },
-        webcam: {
-            url: ""
-        },
         gui: {
             general: {
                 printername: "",
@@ -39,6 +36,11 @@ export default new Vuex.Store({
                 hiddenTempChart: [],
             },
             webcam: {
+                url: "",
+                rotate: false,
+                rotateDegrees: 90,
+                flipX: false,
+                flipY: false,
                 bool: false,
             },
             gcodefiles: {