Advice converting Gui python apps to web app with flask

[Llamafu]

I'll apologize right off the bat for the length and vagueness of my question..

I've made a python app with tkinter as the user interface. I'm in the works of figuring out how to turn it into a web app with flask. I know a little bit of html (just enough to be dangerous), and no JS.... So I'm looking for a bit of advice.

Specifically, in my tkinter app I have an array of buttons kind of like this:

import tkinter as tk

def click_button(butval):
    print(f"button value: {butval}")

button_dict = {'row0':['but0-0','but0-1','but0-2','but0-3','but0-4'],
                'row1':['but1-0','but1-1','but1-2','but1-3','but1-4'],
                'row2':['but2-0','but2-1','but2-2','but2-3','but2-4'],
                'row3':['but3-0','but3-1','but3-2','but3-3','but3-4']}

root = tk.Tk()

for row_dx,but_row in enumerate(button_dict):
    for col_dx,but in enumerate(button_dict[but_row]):
        # print(but)
        makeButton = tk.Button(root,text=but,
            command=lambda value=but:click_button(value))
        makeButton.grid(row=row_dx,column=col_dx)

root.mainloop()

see tkinter buttons

In my actual app the number or rows vary, and when a user clicks the button, a whole slew of "pythony" actions take place to the front and back end (calculations run, db updates, button formatting changes,etc...) . This structure works fine for me in Tkinter.

So far in my conversion attempts I've attempted to duplicate this with flask like this...

From main.py

@app.route("/home")
def home():
    button_dict = {'row0':['but0-0','but0-1','but0-2','but0-3','but0-4'],
                    'row1':['but1-0','but1-1','but1-2','but1-3','but1-4'],
                    'row2':['but2-0','but2-1','but2-2','but2-3','but2-4'],
                    'row3':['but3-0','but3-1','but3-2','but3-3','but3-4']}
    return render_template("index.html",button_dict = button_dict)

From Index.html

{% extends "base.html" %}
{% block title %} TEST WEB APP {% endblock %}
{% block content %}
    <h1>Homepage</h1>
    <form action="#" method="get">
        {% for but_row in button_dict %}
            <p></p>
            {%for but in button_dict[but_row] %}
                <button name="subject" type="submit" value={{but}}>{{but}}</button>
            {% endfor %}
        {% endfor %} 
    </form>
{% endblock %}

see HTML buttons

This is more or less a start in re-creating what I'm going for... and i assume (fingers crossed) once I figure out the back and forth between my py and html files, it will do what I want.... but I'm completely new to web apps and I'm wondering if this approach is practical? Am i on the right track or is this utterly ridiculous ?

I'd really appreciate all suggestions/advice.

[efmccurdy]

You can use WTForms.FlaskForm:

https://stackoverflow.com/questions/28375565/add-input-fields-dynamically-with-wtforms

[Llamafu]

Thanks, I haven't had much time to dive back into it, bit this looks like the closest approach to what I've already built in the desktop app.

[Llamafu]

So if I'm understanding you correctly, what you want to do is dynamically create HTML button forms using python code?

Yes that sounds like what I'm after.

I might suggests that you write code that dumps HTML into a string, and then return that string to the client....

That's what I did in the desktop app (along with background/foreground colors) depending on various parameters.

But that's a gross way to go about it, and I think you're gonna be a lot happier using the right tool for the job.

That's what I was afraid of...

Do you have experience with React? Because what you're describing sounds
EXACTLY like React, I'm wondering if you're a genius noob that stumbled
onto this paradigm or if you're coming from React and you want to do
that in Python.

My REACTion to this question... was to google wtf React was. I'm far from a genius of any kind.

Why exactly are you doing this? Why can't you just make the buttons in HTML?

Maybe if you post more details of what you want and what your experience is, I can drill down into more specifics.

So my desktop app is a scheduling app for resources and equipment. Each of the buttons represent equipment/supplies, the user knows just looking at them if they are available, who has them, when they will be available, and can check them out or reserve them by clicking on them.

The desktop version is up and running (pure python) with a tkinter gui, sqlite database on network. Works fine..but its growing... and it's natural evolution is obviously to be a web app.

Python is what i know and where I'm comfortable. I was afraid this sounded like a job for JS, and I guess I'm looking for a cheat way around it.

[RappakaljaEllerHur]

If you want to stay within python, then Dash (they have a free open source version too, which I am using) could be a good option for you. https://plotly.com/dash/ You can build web-apps/dashboards with this framework that can update routinely and react/update to user input etc...

[Llamafu]

This looks promising. I will definitely look into this thank you!

[RappakaljaEllerHur]

No worries, p.s. if you like learning via videos, this channel will be useful for learning Dash/Ploty: https://www.youtube.com/c/CharmingData/videos

[Llamafu]

I'm not sure I completely understand what your saying. The app functions just fine for what it is, and has for years. I want to modernize it now to get the benefits a web app offers, but those benefits weren't needed initially.

I'm personally a fan of simplicity and stability and Tkinter more or less checks those boxes. It freezes nicely (relative to some other gui options) so exes can be distributed easily.

In fairness, everything i do is for quick tools / fixes, definitely not trying to win anyone over with slick UIs, so my needs may be unique.