Trying to make a GUI for my printer.
Firstly, what is the bets way to do it? From what I understand, one way is to make a custom template and render it and the second way would be to use the REST API and make another app. Which way would be better I don't know as i dont have too much experience with either?
For starters I did make a custom template in jinja2 and rendered it, but i don't know how to add functionality to it. I believe OctoPrint uses JS from the 'static' folder', is there any tutorial as to how can i add functionality for e.g. display actual temperature on my rendered template?
What did you already try to solve it?
Have tried going through the jinja2 templates and looked for data-bindings leading to JS, but not sure is the right way to do it.
To "optimize/rearange" the octoprint-layout is one thing, but to add new functionality you need skills in different programming languages and frameworks. Just to name some languages:
OctoPrint-Backend: Python, flask (web-framework),
OctoPrint-Frontend: HTML, JavaScript, JQuery, Knockout, Bootstrap, Jinja2
If you have no experiance in programming, you should start with defining a new theme and not to develop a new UI which calls REST-APIs.
Playing around with the existing templates brings the most benefit. Step by step you are familiar with the technology and you can start programming python-plugins.
Maybe you should decribe in more deep what your goal is or whats wrong with the current UI.
i am currently rewriting https://github.com/moorviper/PrinterView
the basics are working now the js client library is nice ^^
I am currently implementing the basic stuff in vue2.js
Then follows multiuser and multi printer support.
At last wrapping it in an electron app for linux macos windows.
The plugin documentation has a UIPlugin example for displaying a smartphone-friendly version of the interface. Look for "dummy_mobile_ui" on that page. So you could write a plugin to conditionally serve up a different interface based upon some criteria like user-agent, IP address, a cookie that's set or whatever.
I created a Conky interface for my touchscreen and hope to fork Conky later and push through details of the printer-related information to that screen.
I did work for Robo 3D which uses a proprietary Kivy-based interface on their printer's touchscreens
I have decent experience in Python, PyQT and Flask, HTML and Jinja2.
My Aim:
To make a custom GUI for my printer, a simple UI which can be easily used on a 5" touchscreen. The present octoprint UI, great for a desktop or mobile, isn't very user friendly when used on a touchscreen installed on a printer. I think it would be great to have a compact HMI kind of UI for using on the printer screen.
As @danielkrah mentioned the UI used by Robo3D, That is what i want to implement on my printer.
From what i understand the UI will feel more native on the pi if I implement a Python application using kivy or PyQt or something similar, rather then using a template rendered on a web browser.(Correct me if I am wrong). @danielkrah I did implement the UIPlugin and rendered the "dummy_mobile_ui" for testing. For starters I was trying to find a way to display the actual temperature on the template rendered but i am not that great with JS. And i believe all the data-binding is done through JS.
SO,
I believe REST APi would be better for the long run. Correct?
Actually, that was me before regarding some of those.
Speaking of REST APIs, OctoPrint already has one. I've also written a mobile app (which is branded but doesn't need to be) which presents a spartan view of things for a smartphone. The point here would be that the server side of this app talks to the standard API Gina has made available in OctoPrint to then present an HTML view for the smartphone.
Your approach might be the same. The thought would be that you could write a separate service in which the backend queries the standard OctoPrint API and then sends back a view which is friendlier to the LCD screen.
You're probably thinking that you could run this service on the Raspberry Pi 3 itself but this isn't the only way to do it. You could serve that up from a second Raspberry, like a Zero W, for example. In fact, the talk which I gave to San Diego JS discussed this in greater detail. A second Pi could be powered from the first one via USB and serve up the functionality and even—if you think about it—drive the LCD screen.
@OutsourcedGuru Thanks, I think thats the way to go for me application.
I think as of now I will build a GUI in PyQt, which i almost have ready. and start writing the backend in python.
Presently my aim is to make a very good UI for my printer raspberry pi screen and i dont want to compromise on the feel of it.
I like the approach of Adobe PhoneGap you are using. I think that would be something interesting to do for the next step.
Thanks a lot, that clears things for me. Alot to learn on the way.
I am installing 20 printers once this is setup the aim is to implement a one page template which can manage all printers. almost similar to @danielkrah.
the js client library is nice ^^