Cockpit should have a tutorial #1286

ArturoManzoli · 2024-09-02T20:53:58Z

Added a tutorial that can be further converted into a reusable component;
Tutorial display flag is bound to the user configs;
It can be accessed on the Configurations > General -> User settings;
Can be disabled/re-enabled at its first and last step;

When testing, start with the vehicle disconnected, with a wrong IP for example.

rafaellehmkuhl · 2024-09-09T12:58:54Z

Will review it right now. Sorry for the delay.

rafaellehmkuhl · 2024-09-09T13:28:10Z

src/App.vue

+ <div
+ v-if="
+ !widgetStore.editingMode &&
+ !interfaceStore.showMainMenu &&
+ interfaceStore.mainMenuStyleTrigger === 'center-left'
+ "
+ >


We did raise the eslint rule for line chars right? Is it still giving us trouble?

We did, but it seems to be an issue between code formatters. It will be addressed in a future task.

rafaellehmkuhl · 2024-09-09T13:33:04Z

src/stores/appInterface.ts

+ setHighlightedComponent(component: string) {
+ this.componentToHighlight = component
+ },
+ setMainMenuVisibility(value: boolean) {
+ this.mainMenuVisibility = value
+ },
+ setMainMenuStep(step: number) {
+ this.mainMenuCurrentStep = step
+ },
+ setCurrentConfigComponent(componentIndex: number) {
+ this.configComponent = componentIndex
+ },
+ setKeepGlassModalAlwaysOnTop(value: boolean) {
+ this.isGlassModalAlwaysOnTop = value
+ },
+ setTutorialVisibility(value: boolean) {
+ this.isTutorialVisible = value
+ },


Are those methods needed?

One of Pinia's advantages is that it doesn't need mutation methods, and one can easily set the values from both inside and outside the store directly.

Unless we need the methods to create side-effects (like we do when we set the widgets view index for example, where we need to confirm if the index is valid), I think we can get rid of them.

You are correct.
Those methods should exist in Pinia, only when some extra logic has to be applied on a state change.
Changing that..

rafaellehmkuhl · 2024-09-09T13:38:42Z

src/App.vue

@@ -182,7 +204,7 @@
 :selected="false"
 @click="
 () => {
- mainMenuStep = 1


It seems to me that the wizard logic got very coupled with the main-menu logic, inside this component file, specially with the currentConfigMenuComponent variable.

We can follow with this for now, but it would be important for the future to uncouple than, specially since the wizard will also be used for other parts of the application, like the edit mode and the toolbars.

I agree with you.
The idea is to design easy to reuse (but not yet completely generic) components until they need to be reused. This way we save coding time until the component has an real need to be re-instantiated along the app.

Once the wizard is in fact reused, its code will change a bit to be more generic and this coupling will no longer exists.

rafaellehmkuhl · 2024-09-09T13:45:51Z

src/views/ConfigurationUIView.vue

@@ -152,4 +156,8 @@ const interfaceStore = useAppInterfaceStore()
 const updateOpacity = (value: number): void => {
 interfaceStore.setBgOpacity(value)
 }
+
+const resetColorsToDefault = (): void => {
+ interfaceStore.setUIGlassEffect(0.8, '#4F4F4F1A', '#FFFFFF', 25)


It would be good to interesting to concentrate those default values in the defaults.ts file, so it gets easy to find and anyone can import from there if needed.

rafaellehmkuhl · 2024-09-09T14:04:37Z

A couple more things:

The Cockpit logo color is changed. We should stick with the correct design to support brand strength. PS: after refreshing Cockpit it seems that it is green again. Maybe I didn't give a refresh after checking out the branch and it took an old CSS?

In most of the tutorial pages, there's something blinking below the tutorial modal, and not in the configuration pages themselves. Seems like a bug, but it only happened to me the first time. In the next refreshes, the highlight seems in place. Maybe the git branch problem again?

When I have an user set already, the tutorial works fine, but if I have a brand new Cockpit installation, without a user set nor a vehicle connected, the tutorial modal keeps showing up on every Cockpit refresh, even after I connected to a vehicle and set the user.

ArturoManzoli · 2024-09-11T13:13:33Z

2. In most of the tutorial pages, there's something blinking below the tutorial modal,

Maybe is the H from the home location on the map. Are you in a house near Daniela Beach :)?
In my case the 'H' home is pretty close to where I live:

Check it out without the Wizard modal:

rafaellehmkuhl · 2024-09-11T13:33:40Z

Maybe is the H from the home location on the map. Are you in a house near Daniela Beach :)?

Oooo it makes sense! My bad!

ArturoManzoli · 2024-09-11T13:39:16Z

The Cockpit logo color is changed. We should stick with the correct design to support brand strength. PS: after refreshing Cockpit it seems that it is green again. Maybe I didn't give a refresh after checking out the branch and it took an old CSS?

It was actually intentional, to differentiate the connected and disconnected state of the vehicle. But I agree with you. Changing the Cockpit logo color that dramatically wasn't right. We indeed should keep a branding consistency.

I reverted the color to the original green, but made it a little bit darker when the vehicle isn't connected:

Disconnecetd:

Connected:

ArturoManzoli · 2024-09-11T13:43:34Z

3. When I have an user set already, the tutorial works fine, but if I have a brand new Cockpit installation, without a user set nor a vehicle connected, the tutorial modal keeps showing up on every Cockpit refresh, even after I connected to a vehicle and set the user.

I couldn't replicate the issue here. Maybe is something related to the flow. Have you pressed 'Don't show again'?

rafaellehmkuhl · 2024-09-11T16:43:41Z

When I have an user set already, the tutorial works fine, but if I have a brand new Cockpit installation, without a user set nor a vehicle connected, the tutorial modal keeps showing up on every Cockpit refresh, even after I connected to a vehicle and set the user.

I couldn't replicate the issue here. Maybe is something related to the flow. Have you pressed 'Don't show again'?

Didn't click the "don't show again" button, but even so, the problem is the opposite (it keeps showing again on every boot).

tutorial-bug.mp4

ArturoManzoli · 2024-09-11T17:17:54Z

Didn't click the "don't show again" button, but even so, the problem is the opposite (it keeps showing again on every boot).

I see now what was causing the confusion.
Now instead of the 'Don't show again' button on the last wizard step, there is a 'Previous' button; and the 'Close' button was replaced by a 'Finish' one, that also changes the 'cockpit-has-seen-tutorial' flag to true;

rafaellehmkuhl · 2024-09-11T17:54:52Z

Didn't click the "don't show again" button, but even so, the problem is the opposite (it keeps showing again on every boot).

I see now what was causing the confusion. Now instead of the 'Don't show again' button on the last wizard step, there is a 'Previous' button; and the 'Close' button was replaced by a 'Finish' one, that also changes the 'cockpit-has-seen-tutorial' flag to true;

Nice! I actually think that the variable should be changed as soon as this last step is reached, so even if the user closes the dialog in any other way, or even refresh the application (?), the tutorial is seen already and won't re-appear.

Signed-off-by: Arturo Manzoli <[email protected]>

ArturoManzoli · 2024-09-11T18:24:43Z

Nice! I actually think that the variable should be changed as soon as this last step is reached, so even if the user closes the dialog in any other way, or even refresh the application (?), the tutorial is seen already and won't re-appear.

Done

rafaellehmkuhl

All good now!

Great addition!

ArturoManzoli requested review from rafaellehmkuhl and ES-Alexander September 2, 2024 20:53

rafaellehmkuhl requested changes Sep 9, 2024

View reviewed changes

ArturoManzoli force-pushed the 1012-Cockpit-should-have-a-tutorial branch from c6cabdc to b8ea328 Compare September 11, 2024 13:43

ArturoManzoli requested a review from rafaellehmkuhl September 11, 2024 13:52

ArturoManzoli force-pushed the 1012-Cockpit-should-have-a-tutorial branch from b8ea328 to 3cf00ad Compare September 11, 2024 17:17

ArturoManzoli added 2 commits September 11, 2024 15:24

Components: Tutorial: Add tutorial on cockpit startup

0e3d60c

Signed-off-by: Arturo Manzoli <[email protected]>

Views: Configuiration-interface: Add reset colors to defaults

f656a94

Signed-off-by: Arturo Manzoli <[email protected]>

ArturoManzoli force-pushed the 1012-Cockpit-should-have-a-tutorial branch from 3cf00ad to f656a94 Compare September 11, 2024 18:24

rafaellehmkuhl approved these changes Sep 11, 2024

View reviewed changes

rafaellehmkuhl merged commit 91cd347 into bluerobotics:master Sep 11, 2024
10 checks passed

ES-Alexander added the docs-needed Change needs to be documented label Sep 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cockpit should have a tutorial #1286

Cockpit should have a tutorial #1286

ArturoManzoli commented Sep 2, 2024 •

edited by rafaellehmkuhl

Loading

rafaellehmkuhl commented Sep 9, 2024

rafaellehmkuhl Sep 9, 2024

ArturoManzoli Sep 11, 2024 •

edited

Loading

rafaellehmkuhl Sep 9, 2024

ArturoManzoli Sep 11, 2024 •

edited

Loading

rafaellehmkuhl Sep 9, 2024

ArturoManzoli Sep 11, 2024

rafaellehmkuhl Sep 9, 2024

rafaellehmkuhl commented Sep 9, 2024 •

edited

Loading

ArturoManzoli commented Sep 11, 2024

rafaellehmkuhl commented Sep 11, 2024

ArturoManzoli commented Sep 11, 2024 •

edited

Loading

ArturoManzoli commented Sep 11, 2024

rafaellehmkuhl commented Sep 11, 2024

ArturoManzoli commented Sep 11, 2024 •

edited

Loading

rafaellehmkuhl commented Sep 11, 2024

ArturoManzoli commented Sep 11, 2024

rafaellehmkuhl left a comment

Cockpit should have a tutorial #1286

Cockpit should have a tutorial #1286

Conversation

ArturoManzoli commented Sep 2, 2024 • edited by rafaellehmkuhl Loading

rafaellehmkuhl commented Sep 9, 2024

rafaellehmkuhl Sep 9, 2024

Choose a reason for hiding this comment

ArturoManzoli Sep 11, 2024 • edited Loading

Choose a reason for hiding this comment

rafaellehmkuhl Sep 9, 2024

Choose a reason for hiding this comment

ArturoManzoli Sep 11, 2024 • edited Loading

Choose a reason for hiding this comment

rafaellehmkuhl Sep 9, 2024

Choose a reason for hiding this comment

ArturoManzoli Sep 11, 2024

Choose a reason for hiding this comment

rafaellehmkuhl Sep 9, 2024

Choose a reason for hiding this comment

rafaellehmkuhl commented Sep 9, 2024 • edited Loading

ArturoManzoli commented Sep 11, 2024

rafaellehmkuhl commented Sep 11, 2024

ArturoManzoli commented Sep 11, 2024 • edited Loading

ArturoManzoli commented Sep 11, 2024

rafaellehmkuhl commented Sep 11, 2024

ArturoManzoli commented Sep 11, 2024 • edited Loading

rafaellehmkuhl commented Sep 11, 2024

ArturoManzoli commented Sep 11, 2024

rafaellehmkuhl left a comment

Choose a reason for hiding this comment

ArturoManzoli commented Sep 2, 2024 •

edited by rafaellehmkuhl

Loading

ArturoManzoli Sep 11, 2024 •

edited

Loading

ArturoManzoli Sep 11, 2024 •

edited

Loading

rafaellehmkuhl commented Sep 9, 2024 •

edited

Loading

ArturoManzoli commented Sep 11, 2024 •

edited

Loading

ArturoManzoli commented Sep 11, 2024 •

edited

Loading