Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Navbar Redesign with Icons #39

Merged
merged 4 commits into from
Nov 16, 2024
Merged

Navbar Redesign with Icons #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9bddf82
Changed circle indicators to icons, changed background color of indic…
Nov 15, 2024
49a4cc2
Added placeholder latency indicator, adjusted hover color, implemente…
Nov 16, 2024
2899b89
Merge branch 'master' into aaron/navbar-icon-redesign
uellenberg Nov 16, 2024
19c175b
Ran git pull, git run format, changed number case.
Nov 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 42 additions & 31 deletions src/components/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import HomeIcon from 'vue-material-design-icons/Home.vue';
import CameraIcon from 'vue-material-design-icons/Camera.vue';
import TuneIcon from 'vue-material-design-icons/Tune.vue';
import BugIcon from 'vue-material-design-icons/Bug.vue';
import PowerPlugIcon from 'vue-material-design-icons/PowerPlug.vue';
import ControllerIcon from 'vue-material-design-icons/ControllerClassic.vue';
import { useRoslibStore } from '../store/useRoslib';
import { useControllerStore } from '../store/useController';
Expand Down Expand Up @@ -91,32 +93,43 @@ const pageIconArr: PageIcon = [
<h4>{{ pageIcon.label }}</h4>
<component :is="pageIcon.icon" class="page-icon" :title="pageIcon.helperText" />
</RouterLink>
<div class="container">
<h4 id="status">WebSocket</h4>
<div
class="circle"
<div
class="container indicator-container"
:title="`Websocket: ${roslib.isWebSocketConnected ? `Connected` : `Disconnected`}`"
>
<h4 id="status">WS</h4>
<component
:is="PowerPlugIcon"
class="page-icon"
:class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"
></div>
/>
</div>
<div class="container">
<h4 id="status">Camera Feed</h4>
<div
class="circle"
<div
class="container indicator-container"
:title="`Camera: ${roslib.isWebSocketConnected ? `Connected` : `Disconnected`}`"
>
<h4 id="status">CAM</h4>
<component
:is="CameraIcon"
class="page-icon"
:class="{ green: roslib.isWebSocketConnected, red: !roslib.isWebSocketConnected }"
></div>
/>
</div>
<div class="container">
<h4 id="status">Controller Connected</h4>
<div
class="circle"
<div
class="container indicator-container"
:title="`Controller: ${controller.isGamepadConnected ? `Connected` : `Disconnected`}`"
>
<h4 id="status">CTRL</h4>
<component
:is="ControllerIcon"
class="page-icon"
:class="{ green: controller.isGamepadConnected, red: !controller.isGamepadConnected }"
></div>
/>
</div>
<div class="container indicator-container">
<h4 id="status">Ping</h4>
<h4>{{ roslib.latency + 'ms' }}</h4>
</div>
<!-- TODO Implement Latency -->
<!-- <div class="container">
<h4>Ping</h4>
<p>{{ `${latency}ms` }}</p>
</div> -->
</nav>
</template>

Expand All @@ -125,7 +138,6 @@ nav {
padding: 0rem 1rem;
grid-area: nav;
display: flex;
gap: 5px;
align-items: center;
height: var(--nav-bar-size);
background-color: var(--black);
Expand All @@ -145,10 +157,12 @@ nav {
background-color: var(--light-grey);
}
.navbar-tab {
margin: 0;
padding: 0 0.3rem;
min-width: 4rem;
}
.navbar-tab:not(.current-page):hover {
background-color: hsl(0, 0%, 16%);
}
#logo {
max-width: 100%;
max-height: 4rem;
Expand All @@ -163,19 +177,16 @@ nav {
align-items: center;
justify-content: center;
}
.circle {
border-radius: 50%;
background-color: inherit;
height: 22px;
width: 22px;
border: 2px black solid;
border-radius: 50%;
.indicator-container {
min-width: max-content;
padding: 0 1.5rem;
background-color: hsl(240, 20%, 20%);
}
.red {
background-color: var(--error);
color: var(--error);
}
.green {
background-color: var(--correct);
color: var(--correct);
}
}
</style>
2 changes: 2 additions & 0 deletions src/store/useRoslib.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const SECONDS_TO_TIMESTAMP = 1000;
export const useRoslibStore = defineStore('roslib', () => {
const ros = new ROSLIB.Ros({ url: undefined });
const isWebSocketConnected = ref<boolean>(false);
const latency = ref<number>(0);
const stop = { value: false };

/**
Expand Down Expand Up @@ -107,6 +108,7 @@ export const useRoslibStore = defineStore('roslib', () => {
return {
ros,
isWebSocketConnected,
latency,
stop,
init,
heartbeatPub,
Expand Down
Loading