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.

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

Add Bottom Tabs for Different Views in the App #87

Open
mspringer1 opened this issue Jun 11, 2024 · 5 comments
Open

Add Bottom Tabs for Different Views in the App #87

mspringer1 opened this issue Jun 11, 2024 · 5 comments
Assignees
Labels
enhancement New feature or request

Comments

@mspringer1
Copy link

I would like to suggest implementing tabs at the bottom of the web app to facilitate various views and enable the possibility for a full-page button grid layout. This will be particularly useful for robot prototype development, where many actions are manually triggered by the user through buttons, and the current top bar can become easily overcrowded.

wireframe

@mspringer1 mspringer1 added the enhancement New feature or request label Jun 11, 2024
@MoffKalast
Copy link
Owner

MoffKalast commented Jun 11, 2024

Oh interesting, reminds me of the ol' ROS Mobile layout. Widget bar overcrowding is definitely a problem at times, especially on mobile but sometimes on desktop as well, even if you're not putting up an absurd amount of buttons. I've recently had a screen width and a half filled on a 1080p monitor with mostly visualizers. 😅

On landscape cutting off that much vertical space just for three tabs wouldn't make sense though. Definitely more of a side button thing, maybe sort of like the average GIS renderer presents the the zoom and etc controls: image

Or better yet, browsers already have tabs built in, so why not just use those? Just thinking out loud here, but I think with SharedWorkers it might be possible to keep a central roslibjs instance and create additional tabs that can act as custom dashboards. Then if you have multiple monitors you can display all of it at once with no extra backend load or segment a large monitor into multiple pieces. A bit annoying on mobile though, since tab switching is a bit of a hassle there. Plus it would have to be tested if the main tab gets paused when unfocused on some platforms which would probably freeze the dashboards as well...

I think there might be better ways to solve this problem though, since it might mean we're not using the right level of abstraction. Things like:

  • drag grouping icons into folders like on a regular mobile OS desktop, then you can just have a popup window that would act exactly like that Actions dashboard, and as many of them as you want in parallel or none at all
  • letting one widget handle multiple topics, e.g. just adding more topics to a Path visualizer with a different colour each so they can be batch rendered faster on a single canvas and use up only one icon on the bar (obviously doesn't work for things like temperature or battery where the icon is the display though)

would certainly help alleviate the problem and also some other unrelated issues.

What was your idea for the Robot tab? I'm not entirely sure what would go there. Like telemetry stuff?

@MoffKalast
Copy link
Owner

Hey yeah this would work, it's more of a mockup so far though:

image

image

@mspringer1
Copy link
Author

Yeah I also noticed that the suggestion technically includes two proposals. One would be the overcrowded top bar due to too many buttons and the second one would be changing the layout of the app with tabs, which would be a major change. So It would make sense to focus on the overcrowded top bar in this suggestion. I really like the idea of a folder in the top bar to group buttons.

Maybe one addition for the mockup: I could be helpful, if we would be able to name the folder or add a custom icon so a user knows what functions or data are in the folder.

Regarding the tabs suggestion, the main idea would be to enable different pages of the app which would be customizable by the user, similar to apps for vaccum robots for example. So the first tab could be a 3D model of the robot and some stats, the second tab a map view and the third tab a button grid for custom actions and settings. But this proposal would be more focused on using the app on smaller screens like mobile and not on a monitor and would be a major switch in the concept behind the app.

@MoffKalast
Copy link
Owner

Yeah agreed, either a nametag or an icon would be best:
image

Probably makes more sense to have an icon, given that one can't get much text in that tiny space. Maybe it could just autodetect based on what's inside the folder or have it settable via a dropdown.

@MoffKalast
Copy link
Owner

MoffKalast commented Jun 15, 2024

Well I've pushed an implementation to #88 for noetic and #89 for humble, I think it works reasonably well (at least on desktop) but needs more testing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants