Skip to content

Optimized GUI for Mini RCU screen. 🚀 #3

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

Open
connellr023 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Optimized GUI for Mini RCU screen. 🚀 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cffdc4f
Started implementing mini rcu features
Jgerbrandt Nov 23, 2024
3df21da
Expandable and collapsable sidebar
connellr023 Dec 5, 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
15 changes: 15 additions & 0 deletions RocketControlUnitGUI/src/lib/hooks/useInteraction.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,20 @@ export const useInteraction = (pocketbaseHook: PocketbaseHook) => {
modalStore.trigger(modal);
};

const confirmationModal = (title: string, onConfrim: () => void) => {
const modal: ModalSettings = {
type: 'confirm',
title: title,
response: (r: boolean) => {
if (r) {
onConfrim();
}
}
};

modalStore.trigger(modal);
}

const instantStateChange = (state: string) => {
nextStatePending = state;
pocketbaseHook.writeStateChange(nextStatePending);
Expand Down Expand Up @@ -165,5 +179,6 @@ export const useInteraction = (pocketbaseHook: PocketbaseHook) => {
confirmStateChange,
instantStateChange,
resumeConfirmRemoveWeight,
confirmationModal
};
};
8 changes: 8 additions & 0 deletions RocketControlUnitGUI/src/lib/stores.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@ import { writable, type Writable } from 'svelte/store';
export const currentState = writable('N/A');
export const auth = writable(false);

// These are intended for the smaller mini RCU screen.
// When `miniRcu` is enabled, the sidebar can be
// collapsed and expanded by clicking the soar logo.
// Additionally, there are confirmation modals
// when clicking the toggle switches.
export const miniRcu = writable(true);
Copy link

@Jgerbrandt Jgerbrandt Dec 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how are we enabling this? I think it might be best to detect this based on screen size.

Copy link
Author

@connellr023 connellr023 Dec 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea I can make this switch on at a certain screen size once we finalize the decision for which screen we go with.

export const isSidebarExpanded = writable(false); // Specific to Mini RCU

export interface Stores {
ac1_open: Writable<any>;
pbv1_open: Writable<any>;
Expand Down
77 changes: 50 additions & 27 deletions RocketControlUnitGUI/src/routes/+layout.svelte
View file
Open in desktop
Copy link

@Jgerbrandt Jgerbrandt Dec 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it also be possible to add dynamic scaling of the side and top bar depending on screen size? Right now the top and side bars are huge on smaller screens.

Copy link
Author

@connellr023 connellr023 Dec 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The side bar can be collapsed by pressing the SOAR logo in this PR. We can certainly make the top bar scale dynamically as well.

Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import '../styles/app.postcss';
import ReadOnlySvg from '$lib/components/ReadOnlySvg.svelte';
import { ThemeData, ThemeType } from '$lib/theme';
import { auth, currentState } from "$lib/stores";
import { auth, currentState, isSidebarExpanded, miniRcu } from '$lib/stores';
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
import { page } from '$app/stores';
import {
Expand All @@ -21,6 +21,12 @@
initializeStores();

$: themeData = new ThemeData($modeCurrent ? ThemeType.LIGHT : ThemeType.DARK);

const toggleSidebar = () => {
if ($miniRcu) {
$isSidebarExpanded = !$isSidebarExpanded;
}
};
</script>

<Modal />
Expand All @@ -33,12 +39,14 @@
<svelte:fragment slot="lead">
<div class="flex items-center">
<div class="flex items-center">
<img
src={themeData.logoSrc}
alt="SOAR Logo"
class="mr-2"
style="width: 70px; height: 35px;"
/>
<button on:click={toggleSidebar}>
<img
src={themeData.logoSrc}
alt="SOAR Logo"
class="mr-2"
style="width: 70px; height: 35px;"
/>
</button>
</div>
</div>
</svelte:fragment>
Expand All @@ -55,31 +63,46 @@
</svelte:fragment>
</AppBar>
</svelte:fragment>

<svelte:fragment slot="sidebarLeft">
<AppRail>
<AppRailAnchor hover="bg-primary-hover-token" href="/" selected={$page.url.pathname === '/'}>
<img src="/icons/rocket.png" class="sideBar-center" alt="Icon" />
</AppRailAnchor>

<AppRailAnchor href="/data" selected={$page.url.pathname === "/data"}>
<img src="/icons/stats.png" class="sideBar-center" alt="Icon" />
</AppRailAnchor>

<AppRailAnchor href="/live-feed" selected={$page.url.pathname === "/live-feed"}>
<img src="/icons/camera.png" class="sideBar-center" alt="Icon" />
</AppRailAnchor>

<AppRailAnchor href="/about" selected={$page.url.pathname === "/about"}>
<img src="/icons/info.png" class="sideBar-center" alt="Icon" />
</AppRailAnchor>
</AppRail>
<div class={`sidebar ${$isSidebarExpanded || !$miniRcu ? 'expanded' : ''}`}>
<AppRail>
<AppRailAnchor
hover="bg-primary-hover-token"
href="/"
selected={$page.url.pathname === '/'}
>
<img src="/icons/rocket.png" class="sideBar-center" alt="Icon" />
</AppRailAnchor>

<AppRailAnchor href="/data" selected={$page.url.pathname === '/data'}>
<img src="/icons/stats.png" class="sideBar-center" alt="Icon" />
</AppRailAnchor>

<AppRailAnchor href="/live-feed" selected={$page.url.pathname === '/live-feed'}>
<img src="/icons/camera.png" class="sideBar-center" alt="Icon" />
</AppRailAnchor>

<AppRailAnchor href="/about" selected={$page.url.pathname === '/about'}>
<img src="/icons/info.png" class="sideBar-center" alt="Icon" />
</AppRailAnchor>
</AppRail>
</div>
</svelte:fragment>

<slot>Some Slot</slot>
</AppShell>

<style>
div.sidebar {
margin-left: -300px;
transition: margin 0.15s ease-in-out;
}

div.sidebar.expanded {
margin-left: 0;
}

.sideBar-center {
filter: var(--icon-filter);
transition: filter 0.15s ease;
Expand All @@ -89,4 +112,4 @@
width: 30%;
height: width;
}
</style>
</style>
22 changes: 16 additions & 6 deletions RocketControlUnitGUI/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import Diagram from '$lib/components/Diagram.svelte';
import { initTimestamps, type Timestamps } from '$lib/timestamps';
import { usePocketbase } from '$lib/hooks/usePocketbase';
import { initStores, auth, currentState } from '$lib/stores';
import { initStores, auth, currentState, miniRcu } from '$lib/stores';
import { useInteraction } from '$lib/hooks/useInteraction';
import { onMount } from 'svelte';
import { SlideToggle } from '@skeletonlabs/skeleton';
Expand All @@ -25,7 +25,8 @@
const {
confirmStateChange,
instantStateChange,
resumeConfirmRemoveWeight
resumeConfirmRemoveWeight,
confirmationModal
} = useInteractionHook;

// Destructure stores for later use
Expand Down Expand Up @@ -208,11 +209,20 @@
const handleSliderChange = async (e: any, target: string, openCommand: string, closeCommand: string) => {
e.preventDefault();

// Determine the command based on the current value of the slider
const command = e.target.checked ? openCommand : closeCommand;
const slideChangeCallback = () => {
// Determine the command based on the current value of the slider
const command = e.target.checked ? openCommand : closeCommand;

// Create a change on the 'RelayStatus' collection
writeArbitraryCommand(target, command);
// Create a change on the 'RelayStatus' collection
writeArbitraryCommand(target, command);
}

if (miniRcu) {
confirmationModal("Confirm Action", slideChangeCallback);
}
else {
slideChangeCallback();
}
}

let wasLiveAtAnyPoint = false;
Expand Down