Metrics and lighting implementation (#116)

Implements metrics and lighting control.

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>