I have a lot of other little things that are CLI or conversational, such as an application I use to print images onto cards with a QR code. I need to specify a few things, particularly the position, size and alpha blending of a QR code. Right now it is displaying the output in an image viewer application and reloading it when I type "up 200" into a window.
I am thinking of getting more of this functionality into web applications; for instance if the window manager did 100% of what I wanted that UI would be easy to live with but I am always having to move windows around to find my file manager.
The obvious UI is something that looks like a desktop or web app where I can move the QR code with the mouse or the arrow keys.
One answer to this is a desktop app but I don't want to go there. I did a big review of x-platform applications and would say "they all suck" with Electron (you can make apps that look state of the art, try that with tk) and JavaFX standing out as exceptions. (Both have serious baggage)
Seems to me instead of booting up a conversational interface I could open up a web server and build simple user interfaces there. Something based on websockets would be sweet, I would really like to have bidirectional updating ability.
Are there frameworks designed for this kind of work, preferably based on Python or Java.
If so, I think rather than trying to build your own CLI to do this and refresh the image every time, you can do it entirely clientside with something like https://konvajs.org/docs/react/Intro.html or https://fabricjs.com/, storing the QR overlay position and alpha in state. Then once it looks good on the client, you can send that state as an API request to the server for rendering to the final image. (You can probably also just render the finished output on the client directly, but since you already have that part of the rendering in the server, might as well re-use it).
i.e. let the user handle the image positioning clientside as state, then send the final params to the server for rendering, e.g. /overlay?x=500&y=300&w=30&h=30&opacity=50.
Websockets is overkill and will cause unnecessary complexity. You don't need to sync every intermediate state., just whenever you click "save". Autosave every minute if you must. But why, for something so simple? Positioning the QR code would probably only take a few seconds.
PS And if this is for your own use (as opposed to building a service for other users), I should point out you can also easily do this with existing free web-based image editors like photopea.com
And as a service, this is pretty similar to what Imgix does already, just without the drag-and-drop overlay GUI. Example here with another QR code in the upper right: https://sandbox.imgix.com/view?hasAgreedToUploadTerms=1&url=...
One thing you might do is abstract over something like dat.GUI [0]
(Note: I like dat.GUI but understand it hasn't seen development lately and you might be concerned about that. In that case, substitute dat.GUI for Tweakpane [1] and the idea is still the same)
dat.GUI creates a sort of control panel with various types of inputs based on whatever you want to manipulate. Something like this [2].
The code to produce it can be abstracted quite nicely. So you could simply create a small generic script to create a panel from just a JS object with the properties you want to manipulate. You'd link this to a simple submit against your server-side binary.
Now, the only thing that remains is presenting the output. I'm guessing that today you're generating an image but in some other case your output may be a text file or something else. For a lot of things you can just relay on the browser if you output to an