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.
This is an interesting topic. I have been using Octoprint for some years now, it works great and I am very satisfied with the features it provides. However, the UX could have been improved and the layout could have been modernized. The system starts to look a bit dated, and it might be a problem attracting new users if it does not look as modern as other systems do.
Creating plugins or utilizing API to create standalone apps to add spesific features that's missing from the core system is just great! I am not sure if it's the best solution for improving the UX and the graphical interface though. It requires constantly to be updated for every new version, and as mentioned it might be complex to get it to work seamlessly with any other plugins.
The app you have made looks very nice However, it just might be too much hassle for most people to manage a separate web app to get an simplified UX that does not really provide any new feature. I can see one person has tried it and did not manage to get it work (posed an issue on github).
Good luck anyway, it would be great if you could prove me wrong - I do think it's time for Octoprint to get a graphical and UX overhaul.
However, it just might be too much hassle for most people to manage a separate web app to get an simplified UX that does not really provide any new feature. I can see one person has tried it and did not manage to get it work (posed an issue on github).