Without intending to offend the creators of OctoPrint and its entire community, I have created a small frontend for OctoPrint using its WebSocket connection and API.
It is a basic frontend in terms of functionality but with a lot of potential for growth.
The project is published so that anyone can use it as they see fit.
OctoFront is a web application developed with React, TypeScript, and Vite, focused on providing a modern, clean, and accessible interface for OctoPrint users. This frontend is designed for users who prefer a simplified experience, displaying only the most important data from the 3D printer, such as:
Temperature: Real-time visualization of the hotend and bed temperature, with the option to set new temperatures.
Printer Status: Monitoring of the current state of the printer, such as whether it is idle, printing, or has completed a task.
Printing File Status: Information about the file currently being printed, including printing progress.
Responsive Interface: Compatible with both mobile and desktop devices, adapting to any screen size.
Multilanguage: Support for multiple languages, allowing users to use the application in their preferred language.
Customizable Themes: Users can choose between a light and dark theme, offering a personalized experience.
This project is ideal for those who do not need the full range of functionalities that OctoPrint offers but prefer a quick and simplified view of the key elements.
One of the things complicating moving to a more modern UI are plugins. Do you have any thoughts on how a React UI could be extended with plugins and offer similar flexability?
I'll upload some screenshots in a while. For now, it has limited functionality. I’m not familiar with the plugin system in React, but I'll look into it so the community can develop plugins.
Yeah, screenshots would be nice. There was a POC UIPlugin mixin implementation that @Charlie_Powell did using React as well. It could potentially be an example to show you how that's done and is a little easier to distribute via the OctoPrint plugin ecosystem. There still hasn't been anything from a plugin integration perspective with that, which is kind of the big hold-up on moving forward with a modern day framework, like kantlivelong mentioned.
Actually, that’s not the approach I took, replacing the OctoPrint interface. I'm a frontend web developer, and as such, I have very limited skills with Python. I made some attempts to modify OctoPrint themes, but without much success. However, seeing that an installation provides you with an API with 'almost' all the options, I thought it would be a good idea to create a frontend in parallel with OctoPrint.
Additionally, through a VPN service, it's possible to access that frontend in a more agile way than with other solutions currently offered on the market. Obviously, there are paid services that offer a similar service. But well, I've been into 3D printing for a year and a few months, and I wanted to contribute something from my humble position. The idea of Octofront is that users can make pull requests on the server to continue adding features that OctoPrint already offers, but in a more modern and customizable environment. I know it's not for everyone and I suppose it won't grow much, but it could be a starting point for others.
Just because it's in a plugin format doesn't mean it's not just a front-end. If you check deeper into the repo you'll see that it's a react app creating websocket connection to OctoPrint's back-end.
Ooooh it’s been nearly 3 years since I dove headfirst into learning frontend code… was good fun but OctoPrint had way too much going on for me to fully build it out. NextGenUI was one of my favourite random projects that actually functioned, even if limited features.
A UiPlugin allows people to install & run your UI on their server, replacing the built in one. Your implementation is similar to how mobile apps and dashboards like OctoDash work, being stand alone apps connecting to OctoPrint. Both are valid solutions and definitely have their pros/cons.
3rd party plugins seem incredibly difficult to do in (basic) modern JavaScript development when everything was being bundled up & run through a minifier to ship an application. Interested to know what solutions could look like here.