Add Bottom Tabs for Different Views in the App

[mspringer1]

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.

[MoffKalast]

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:

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]

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

[mspringer1]

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]

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

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]

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.