Octoprint: [Request] Mobile Interface Improvement

[tomfarnham]

The utility of the interface on mobile devices is a little cumbersome. The project already uses bootstrap for a CSS framework, which when implemented correctly will render mobile interfaces. My main concern with the interface is pushing the wrong button can have negative side-effects, like crashing the print head.

The main issues that I've noticed:

• Controls are too small and close together, requiring the user to zoom in.

• Zooming in gives you a 50/50 chance of clicking the button you want or panning the screen.

Ideally, the correct measures in the style would be implemented like using grids with appropriate size scaling. This would eliminate the white-space margins on the sides of the screen, and stack the panes within the interface instead of putting them side-by-side. Additionally, buttons can be scaled for user-interface base on the screen size.

Additionally, menu style options can be used instead of toolbars and the like leading to an interface that is easier and more reliable to use.

[foosel]

A rewrite of the UI is on the roadmap for 1.5.0 which will implement a proper modern responsive design. Adapting the current UI is not feasible: the currently used version of bootstrap is long outdated and no longer supported, but cannot be updated as that would break compatibility for the ecosystem of existing plugins. THe way forward is a rewrite that for a while will live concurrently alongside the existing UI.

I created the ability to completely replace the UI of OctoPrint two years ago by plugins in the hopes someone would step up to create a mobile UI plugin, but sadly that hasn't happened. In the meantime I suggest to use one of the available third party clients or the TouchUI plugin (a reskin, not a replacement).

[tomfarnham]

Awesome, keep up the good work. I'll see if I can contribute in the future.