Metrics and lighting implementation (#116)

Implements metrics and lighting control.

photon-client/src/App.vue

@@ -38,9 +38,9 @@
           </v-list-item-content>
         </v-list-item>
         <v-list-item
+          ref="camerasTabOpener"
           link
           to="cameras"
-          ref="camerasTabOpener"
           @click="switchToDriverMode()"
         >
           <v-list-item-icon>
@@ -53,6 +53,7 @@
         <v-list-item
           link
           to="settings"
+          @click="switchToSettingsTab()"
         >
           <v-list-item-icon>
             <v-icon>mdi-settings</v-icon>
@@ -118,7 +119,7 @@
       >
         <v-layout>
           <v-flex>
-            <router-view v-on:switch-to-cameras="switchToDriverMode" />
+            <router-view @switch-to-cameras="switchToDriverMode" />
           </v-flex>
         </v-layout>
       </v-container>
@@ -246,6 +247,9 @@ import Logs from "./views/LogsView"
                     this.handleInputWithIndex('currentPipeline', this.previouslySelectedIndex || 0);
                 }
                 this.previouslySelectedIndex = null;
+            },
+            switchToSettingsTab() {
+                this.axios.post('http://' + this.$address + '/api/sendMetrics', {})
             }
         }
     };

photon-client/src/store/index.js

@@ -127,6 +127,14 @@ export default new Vuex.Store({
             patternHeight: 7,
             boardType: 0, // Chessboard, dotboard
         },
+        metrics: {
+            cpuTemp: "N/A",
+            cpuUtil: "N/A",
+            cpuMem: "N/A",
+            gpuMem: "N/A",
+            ramUtil: "N/A",
+            gpuMemUtil: "N/A",
+        }
     },
     mutations: {
         compactMode: set('compactMode'),
@@ -135,6 +143,7 @@ export default new Vuex.Store({
         selectedOutputs: set('selectedOutputs'),
         settings: set('settings'),
         calibrationData: set('calibrationData'),
+        metrics: set('metrics'),
         logString: (state, newStr) => {
             const str = state.logMessages;
             str.push(newStr)
@@ -182,8 +191,12 @@ export default new Vuex.Store({
                     Vue.set(state, 'pipelineResults', payload[key])
                 }
             }
+        },
 
-
+        mutateEnabledLEDPercentage(state, payload)  {
+            const settings = state.settings;
+            settings.lighting.brightness = payload;
+            Vue.set(state, "settings", settings);
         },
 
         mutateCalibrationState: (state, payload) => {

photon-client/src/views/SettingsView.vue

@@ -8,32 +8,19 @@
         cols="12"
         style="max-width: 1400px"
       >
-        <v-form
-          ref="form"
-          v-model="valid"
+        <v-card
+          v-for="item in tabList"
+          :key="item.name"
+          dark
+          class="mb-3 pr-6 pb-3"
+          style="background-color: #006492;"
         >
-          <v-card
-            v-for="item in tabList"
-            :key="item.name"
-            dark
-            class="mb-3 pr-6 pb-3"
-            style="background-color: #006492;"
-          >
-            <v-card-title>{{ item.name }}</v-card-title>
-            <component
-              :is="item"
-              class="ml-5"
-            />
-          </v-card>
-          <v-btn
-            color="accent"
-            style="color: black; width: 100%;"
-            :disabled="!valid"
-            @click="sendGeneralSettings()"
-          >
-            Save
-          </v-btn>
-        </v-form>
+          <v-card-title>{{ item.name }}</v-card-title>
+          <component
+            :is="item"
+            class="ml-5"
+          />
+        </v-card>
       </v-col>
     </v-row>
     <v-snackbar
@@ -61,7 +48,6 @@
         data() {
             return {
                 selectedTab: 0,
-                valid: true, // Are all settings valid
                 snack: false,
                 snackbar: {
                   color: "accent",
@@ -86,28 +72,6 @@
                 }
             }
         },
-        methods: {
-            sendGeneralSettings() {
-                this.axios.post("http://" + this.$address + "/api/settings/general", this.settings).then(
-                    function (response) {
-                        if (response.status === 200) {
-                            this.snackbar = {
-                                color: "success",
-                                text: "Settings updated successfully"
-                            };
-                            this.snack = true;
-                        }
-                    },
-                    function (error) {
-                        this.snackbar = {
-                            color: "error",
-                            text: (error.response || {data: "Couldn't save settings"}).data
-                        };
-                        this.snack = true;
-                    }
-                )
-            },
-        }
     }
 </script>
 

photon-client/src/views/SettingsViews/General.vue

@@ -1,14 +1,21 @@
 <template>
   <div>
-    <span>Version: {{ settings.version }}</span>
-    &mdash;
-    <div v-if="settings.hardwareModel !== ''">
-      <span>Hardware model: {{ settings.hardwareModel }}</span>
-      &mdash;
+    <v-row class="pa-4">
+      <span>{{ infoTabs.join('  —  ') }}</span>
+    </v-row>
+
+    <div v-if="metrics.cpuUtil !== 'N/A'">
+      <v-row class="pa-4">
+        <span>CPU Usage: {{ metrics.cpuUtil.replace(" ", "") }}%</span>
+        &nbsp;&ndash;&nbsp;
+        <span>CPU Temp: {{ parseInt(metrics.cpuTemp) }}&deg;&nbsp;C</span>
+        &nbsp;&ndash;&nbsp;
+        <span>CPU Memory Usage: {{ metrics.ramUtil.replace(" ", "") }}MB of {{ metrics.cpuMem }}MB</span>
+        &ndash;
+        <span>GPU Memory Usage: {{ metrics.gpuMemUtil }}MB of {{ metrics.gpuMem }}MB</span>
+      </v-row>
     </div>
-    <span>Platform: {{ settings.hardwarePlatform }}</span>
-    &mdash;
-    <span>GPU Acceleration: {{ settings.gpuAcceleration ? "Enabled" : "Unsupported" }}{{ settings.gpuAcceleration ? " (" + settings.gpuAcceleration + " mode)" : "" }}</span>
+      
     <v-row>
       <v-col
         cols="12"
@@ -21,7 +28,8 @@
         >
           <v-icon left>
             mdi-download
-          </v-icon> Export Settings
+          </v-icon>
+          Export Settings
         </v-btn>
       </v-col>
       <v-col
@@ -35,7 +43,8 @@
         >
           <v-icon left>
             mdi-upload
-          </v-icon> Import Settings
+          </v-icon>
+          Import Settings
         </v-btn>
       </v-col>
       <v-col
@@ -48,7 +57,8 @@
         >
           <v-icon left>
             mdi-restart
-          </v-icon> Restart Photon
+          </v-icon>
+          Restart Photon
         </v-btn>
       </v-col>
       <v-col
@@ -61,7 +71,8 @@
         >
           <v-icon left>
             mdi-restart
-          </v-icon> Restart Device
+          </v-icon>
+          Restart Device
         </v-btn>
       </v-col>
     </v-row>
@@ -108,6 +119,21 @@ export default {
     computed: {
         settings() {
             return this.$store.state.settings.general;
+        },
+        infoTabs() {
+            let ret = [];
+            let idx = 0;
+            ret[idx++] = `Version: ${this.settings.version}`;
+            if (this.settings.hardwareModel !== '') {
+                ret[idx++] = `Hardware model: ${this.settings.hardwareModel}`;
+            }
+            ret[idx++] = `Platform: ${this.settings.hardwarePlatform}`;
+            ret[idx++] = `GPU Acceleration: ${this.settings.gpuAcceleration ? "Enabled" : "Unsupported"}${this.settings.gpuAcceleration ? " (" + this.settings.gpuAcceleration + " mode)" : ""}`
+
+            return ret;
+        },
+        metrics() {
+            return this.$store.state.metrics;
         }
     },
     methods: {

photon-client/src/views/SettingsViews/Lighting.vue

@@ -1,14 +1,13 @@
 <template>
   <div>
     <CVslider
-      v-model="settings.brightness"
+      v-model="enabledLEDPercentage"
       class="pt-2"
       slider-cols="12"
       name="Brightness"
       min="0"
       max="100"
-      @input="handleData('accuracy')"
-      @rollback="e => rollback('accuracy', e)"
+      @input="handleData('enabledLEDPercentage')"
     />
   </div>
 </template>
@@ -22,6 +21,14 @@
             CVslider,
         },
         computed: {
+            enabledLEDPercentage: {
+                get() {
+                    return this.settings.brightness
+                },
+                set(value) {
+                    this.$store.commit("mutateEnabledLEDPercentage", value)
+                }
+            },
             isDHCP() {
                 return this.settings.connectionType === 0;
             },

photon-client/src/views/SettingsViews/Networking.vue

@@ -1,36 +1,50 @@
 <template>
   <div>
-    <CVnumberinput
-      v-model="settings.teamNumber"
-      name="Team Number"
-      :rules="[v => (v > 0) || 'Team number must be greater than zero', v => (v < 10000) || 'Team number must have fewer than five digits']"
-      class="mb-4"
-    />
-    <CVSwitch
-      v-model="settings.runNTServer"
-      name="Run NetworkTables Server"
-      tooltip="If enabled, this device will create a NT server. This is useful for home debugging, but should be disabled on-robot."
-    />
-    <template v-if="$store.state.settings.networkSettings.supported">
-      <CVradio
-        v-model="settings.connectionType"
-        :list="['DHCP','Static']"
+    <v-form
+      ref="form"
+      v-model="valid"
+    >
+      <CVnumberinput
+        v-model="settings.teamNumber"
+        :disabled="settings.runNTServer"
+        name="Team Number"
+        :rules="[v => (v > 0) || 'Team number must be greater than zero', v => (v < 10000) || 'Team number must have fewer than five digits']"
+        class="mb-4"
       />
-      <template v-if="!isDHCP">
-        <CVinput
-          v-model="settings.staticIp"
-          :input-cols="inputCols"
-          :rules="[v => isIPv4(v) || 'Invalid IPv4 address']"
-          name="IP"
+      <CVSwitch
+        v-model="settings.runNTServer"
+        name="Run NetworkTables Server"
+        tooltip="If enabled, this device will create a NT server. This is useful for home debugging, but should be disabled on-robot."
+      />
+      <template v-if="$store.state.settings.networkSettings.supported">
+        <CVradio
+          v-model="settings.connectionType"
+          :list="['DHCP','Static']"
         />
+        <template v-if="!isDHCP">
+          <CVinput
+            v-model="settings.staticIp"
+            :input-cols="inputCols"
+            :rules="[v => isIPv4(v) || 'Invalid IPv4 address']"
+            name="IP"
+          />
+        </template>
       </template>
-    </template>
-    <CVinput
-      v-model="settings.hostname"
-      :input-cols="inputCols"
-      :rules="[v => isHostname(v) || 'Invalid hostname']"
-      name="Hostname"
-    />
+      <CVinput
+        v-model="settings.hostname"
+        :input-cols="inputCols"
+        :rules="[v => isHostname(v) || 'Invalid hostname']"
+        name="Hostname"
+      />
+    </v-form>
+    <v-btn
+      color="accent"
+      style="color: black; width: 100%;"
+      :disabled="!valid"
+      @click="sendGeneralSettings()"
+    >
+      Save
+    </v-btn>
   </div>
 </template>
 
@@ -61,7 +75,8 @@
                     text: ""
                 },
                 snack: false,
-                isLoading: false
+                isLoading: false,
+                valid: true, // Are all settings valid
             }
         },
         computed: {
@@ -99,7 +114,27 @@
                 }
               }
               return true;
-            }
+            },
+            sendGeneralSettings() {
+                this.axios.post("http://" + this.$address + "/api/settings/general", this.settings).then(
+                    function (response) {
+                        if (response.status === 200) {
+                            this.snackbar = {
+                                color: "success",
+                                text: "Settings updated successfully"
+                            };
+                            this.snack = true;
+                        }
+                    },
+                    function (error) {
+                        this.snackbar = {
+                            color: "error",
+                            text: (error.response || {data: "Couldn't save settings"}).data
+                        };
+                        this.snack = true;
+                    }
+                )
+            },
         },
     }
 </script>