Skip to content

Commit

Permalink
Add team number dialog, NT connected chip (PhotonVision#313)
Browse files Browse the repository at this point in the history 
Makes NT connection status visible from the UI
  • Loading branch information
@mcm001
mcm001 authored Nov 25, 2021
1 parent 822811c commit a151f23
Show file tree
Hide file tree
Showing 9 changed files with 302 additions and 28 deletions.
106 changes: 84 additions & 22 deletions photon-client/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,25 +91,51 @@
</v-list-item-content>
</v-list-item>

<v-list-item style="position: absolute; bottom: 0; left: 0;">
<v-list-item-icon>
<v-icon v-if="$store.state.backendConnected">
mdi-wifi
</v-icon>
<v-icon
v-else
class="pulse"
style="border-radius: 100%;"
>
mdi-wifi-off
</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ $store.state.backendConnected ? "Connected" : "Trying to connect..." }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<div style="position: absolute; bottom: 0; left: 0;">
<v-list-item>
<v-list-item-icon>
<v-icon v-if="$store.state.settings.networkSettings.runNTServer">mdi-server</v-icon>
<img v-else-if="$store.state.ntConnectionInfo.connected" src="@/assets/robot.svg" alt="">
<img v-else class="pulse" style="border-radius: 100%" src="@/assets/robot-off.svg" alt="">
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="text-wrap" v-if="$store.state.settings.networkSettings.runNTServer">
NetworkTables server running for {{$store.state.ntConnectionInfo.clients ? $store.state.ntConnectionInfo.clients : 'zero'}} clients!
</v-list-item-title>
<v-list-item-title class="text-wrap" v-else-if="$store.state.ntConnectionInfo.connected && $store.state.backendConnected">
Robot connected! {{$store.state.ntConnectionInfo.address}}
</v-list-item-title>
<v-list-item-title class="text-wrap" v-else>
Not connected to robot!
</v-list-item-title>
<a
href="/#/settings"
style="color:#FFD843"
>{{"Team: " + $store.state.settings.networkSettings.teamNumber}}</a>
</v-list-item-content>
</v-list-item>

<v-list-item>
<v-list-item-icon>
<v-icon v-if="$store.state.backendConnected">
mdi-wifi
</v-icon>
<v-icon
v-else
class="pulse"
style="border-radius: 100%;"
>
mdi-wifi-off
</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="text-wrap">
{{ $store.state.backendConnected ? "Backend Connected" : "Trying to connect..." }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</div>

</v-list>
</v-navigation-drawer>
<v-main>
Expand All @@ -132,13 +158,35 @@
>
<logs />
</v-dialog>
<v-dialog
v-model="needsTeamNumberSet"
width="500"
dark
persistent
>
<v-card
dark
color="primary"
flat
>
<v-card-title>No team number set!</v-card-title>
<v-card-text>
PhotonVision cannot connect to your robot! Please
<a
href="/#/settings"
style="color:#FFD843"
>head to the settings page</a> and set your team number.
</v-card-text>
</v-card>
</v-dialog>
</v-app>
</template>

<script>
import Logs from "./views/LogsView"
// import {mapState} from "vuex";
export default {
export default {
name: 'App',
components: {
Logs
Expand All @@ -147,8 +195,16 @@ import Logs from "./views/LogsView"
// Used so that we can switch back to the previously selected pipeline after camera calibration
previouslySelectedIndices: [],
timer: undefined,
teamNumberDialog: true
}),
computed: {
needsTeamNumberSet: {
get() {
return this.$store.state.settings.networkSettings.teamNumber < 1
&& this.teamNumberDialog && this.$store.state.backendConnected
&& !this.$route.name.toLowerCase().includes("settings");
}
},
compact: {
get() {
if (this.$store.state.compactMode === undefined) {
Expand All @@ -163,6 +219,12 @@ import Logs from "./views/LogsView"
localStorage.setItem("compactMode", value);
},
},
// ...mapState({
// ntServerMode: state => state.settings.networkSettings.runNTServer,
// ntClients: state => state.ntConnectionInfo.clients,
// ntConnected: state => state.ntConnectionInfo.connected,
// backendConnected: state => state.backendConnected
// })
},
created() {
document.addEventListener("keydown", e => {
Expand Down Expand Up @@ -197,12 +259,12 @@ import Logs from "./views/LogsView"
}
};
this.$options.sockets.onopen = () => {
this.$store.state.backendConnected = true;
this.$store.commit("backendConnected", true)
this.$store.state.connectedCallbacks.forEach(it => it())
};
let closed = () => {
this.$store.state.backendConnected = false;
this.$store.commit("backendConnected", false)
};
this.$options.sockets.onclose = closed;
this.$options.sockets.onerror = closed;
Expand Down
1 change: 1 addition & 0 deletions photon-client/src/assets/robot-off.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions photon-client/src/assets/robot.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions photon-client/src/store/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,13 @@ export default new Vuex.Store({
},
state: {
backendConnected: false,
ntConnectionInfo: {
connected: false,
address: "",
clients: 0,
possibleRios: ["Loading..."],
deviceips: ["Loading..."],
},
connectedCallbacks: [],
colorPicking: false,
logsOverlay: false,
Expand Down Expand Up @@ -143,6 +150,8 @@ export default new Vuex.Store({
settings: set('settings'),
calibrationData: set('calibrationData'),
metrics: set('metrics'),
ntConnectionInfo: set('ntConnectionInfo'),
backendConnected: set('backendConnected'),
logString: (state, newStr) => {
const str = state.logMessages;
str.push(newStr);
Expand Down
16 changes: 15 additions & 1 deletion photon-client/src/views/PipelineView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,13 @@
<span v-else-if="!$store.getters.currentPipelineSettings.inputShouldShow">HSV thresholds are too broad; narrow them for better performance</span>
<span v-else>stop viewing the color stream for better performance</span>
</v-chip>
<v-chip small label color="red" text-color="white" v-if="!$store.state.ntConnectionInfo.connected || $store.state.settings.networkSettings.runNTServer">
<span>
{{ $store.state.settings.networkSettings.runNTServer ?
"NetworkTables Server Enabled! Photonlib may not work" :
"NetworkTables not connected!" }}
</span>
</v-chip>
<v-switch
v-model="driverMode"
label="Driver Mode"
Expand Down Expand Up @@ -83,6 +90,7 @@
>
<v-card
color="primary"
class="mt-3"
>
<!-- <v-btn @click="onCamNameChange">-->
<!-- Reload-->
Expand All @@ -91,7 +99,7 @@
</v-card>
<v-card
:disabled="$store.getters.isDriverMode || $store.state.colorPicking"
class="mt-3"
class="mt-6 mb-3"
color="primary"
>
<v-row
Expand Down Expand Up @@ -421,6 +429,12 @@ export default {
.some(e => e.width === resolution.width && e.height === resolution.height)
}
},
isRobotConnected: {
get() {
// return this.$store.state.ntConnectionInfo.connected && this.$store.state.backendConnected;
return true;
}
}
},
created() {
this.$store.state.connectedCallbacks.push(this.reloadStreams)
Expand Down
89 changes: 85 additions & 4 deletions photon-client/src/views/SettingsViews/Networking.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,13 @@
: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"
/>
<span v-if="parseInt(teamNumber) < 1 && !runNTServer" class="red font-weight-bold">Team number not set! NetworkTables cannot connect.</span>
<v-chip label color="red" text-color="white" v-if="parseInt(teamNumber) < 1 && !runNTServer">
<span>
Team number not set! NetworkTables cannot connect.
</span>
</v-chip>
<CVradio
v-model="connectionType"
v-model="connectionType"
:list="['DHCP','Static']"
:disabled="!$store.state.settings.networkSettings.supported"
/>
Expand All @@ -37,8 +41,13 @@
v-model="runNTServer"
name="Run NetworkTables Server (Debugging Only!)"
tooltip="If enabled, this device will create a NT server. This is useful for home debugging, but should be disabled on-robot."
class="mt-3 mb-3"
/>
<span v-if="runNTServer" class="red font-weight-bold">Disable this switch if you're on a robot! Photonlib will NOT work.</span>
<v-chip label color="red" text-color="white" v-if="runNTServer">
<span>
Disable this switch if you're on a robot! Photonlib will NOT work.
</span>
</v-chip>
</v-form>
<v-btn
color="accent"
Expand All @@ -49,6 +58,60 @@
>
Save
</v-btn>
<v-divider class="mt-4 mb-4"/>
<v-row>
<v-col cols="6">

<v-simple-table
fixed-header
height="100%"
dense
>
<template v-slot:default>
<thead style="font-size: 1.25rem;">
<tr>
<th>
Device IPs
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(value, index) in $store.state.ntConnectionInfo.deviceips"
:key="index"
>
<td>{{ value }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-col>
<v-col cols="6">
<v-simple-table
fixed-header
height="100%"
dense
>
<template v-slot:default>
<thead style="font-size: 1.25rem;">
<tr>
<th>
Possible RoboRIOs
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(value, index) in $store.state.ntConnectionInfo.possibleRios"
:key="index"
>
<td>{{ value }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-col>
</v-row>
</div>
</template>

Expand Down Expand Up @@ -184,6 +247,24 @@ export default {
}
</script>

<style lang="" scoped>
<style scoped>
.v-data-table {
/*text-align: center;*/
background-color: transparent !important;
width: 100%;
height: 100%;
overflow-y: auto;
}
.v-data-table th {
background-color: #006492 !important;
}
.v-data-table th, td {
font-size: 1rem !important;
}
.v-data-table td {
font-family: monospace !important;
}
</style>
Loading

0 comments on commit a151f23

Please sign in to comment.