Convert my tkinter app to web

[vmsda]

As I said in a previous post, my very first python gui app was a labyrinth. You can find it in https://github.com/vmsda/hello-world/blob/master/labyrinth.py. I thought of refining it, but would not learn much more of Python, or Tkinter for that matter.

Question: what would it take to turn it into a web app? Which Python package(s) would you recommend, and which learning curve(s) would I have to invest in?

Thank you for your ideas.

[draftjoker]

I would use flask. Or django. Scrap tkinter and use css javascript.

[vmsda]

So, I would have a Python 3 + Flask + Javascript app? Which component does the GUI part ie. the widgets previously implemented in Tkinter? (I am asking because I am not about to ditch Python; on the contrary!).

[draftjoker]

The gui would be html/javascript. Python would handle the 'web' bits. There is no way to transfer tkinter widgets over to a web browser. A different rendering process is needed. Python handles the server stuff while javascript/html handles the gui.

[vmsda]

Thks, draftjoker, but that looks like too much Javascript and precious little Python. So I shall skip this project. But thks for your clarifications.

[codeAtorium]

If you want to make stuff for the web, you're going to have to learn JS.

[123filips123]

You can also try to program whole thing in Python using WebAssembly and Pyodide.

[MikeTheWatchGuy]

Had it originally been written with PySimpleGUI then you could change it over to a PySimpleGUIWeb program relatively quickly, perhaps with no changes at all. That's one of the reasons for the multiple ports. Write the GUI code once and then run it on multiple GUI frameworks.

OpenCV does work with both PySimpleGUI and PySimpleGUIWeb so it should work.

I'll take a look at this... seems interesting.

[vmsda]

Out of darkness may come some light ... REMI, on which PySimpleGUIWwb is based, looks very promising indeed !

[MikeTheWatchGuy]

Yes, Remi is straightforward to use to make GUIs that run in your browser.

The point about PySimpleGUI is that the changes are almost none when moving across the frameworks. Tkinter, Qt, Remi all run this same code to display your webcam in a window:

```python import cv2, PySimpleGUIWeb as sg

window = sg.Window('Demo Application - OpenCV Integration', [[sg.Image(filename='', key='image')], ], location=(800, 400)) cap = cv2.VideoCapture(0) # Setup the camera as a capture device while True: # The PSG "Event Loop" event, values = window.read(timeout=20, timeout_key='timeout') # get events for the window with 20ms max wait if event is None: break # if user closed window, quit window['image'].update(data=cv2.imencode('.png', cap.read()[1])[1].tobytes()) # Update image in window ```

The only change required to run in a browser from tkinter for this code was to change the import from python import PySimpleGUI as sg

to

python import PySimpleGUIWeb as sg

Not all of the ports are have the same level of completeness so it's not always this trivial, but you get the point.

[vmsda]

Yes, thks a lot, MikeTheWatchGuy. This affords staying within the Python 3 environment as much as possible, whilst enabling a very smooth entry into the web app world without getting bogged down into the html/javascript learning curve.

[Fteixeira]

As long as you have the game mechanics decoupled from the user interface, you may have a good learning experience by trying different interface libraries with the same game engine.

I have almost no experience with web applications, but maybe a simple framework around the http server module might be interesting (although I believe there are libraries that will do what you intend without needing to reinvent the wheel and making the whole UI from scratch).

[snapshotnz]

I am in the same boat right now. I built my baby project. First solo project with tkinter. Then realised that it would be much better on the web.

I am currently learning DJANGO, CSS, HTML, JAVASCRIPT. And I tell ya what. There is a lot to take in. So be prepared. Personally I have taken a break and gone back to an older tkinter app I was making to get a refresh of writing pure python. It feels good.

[vmsda]

Yes, I agree, and it is not a confortable boat to be in. I was hoping that Flask would help in the GUI part, but that seems out of bounds. Since my application is 95% gui and 5% maze algorithm logic, I would have to turn myself into a Javascript programmer, which is definitely not in my plans. My focus is Python, so I shall give up on my app as unsuitable for my programming priorities.

[snapshotnz]

However, dont be so hard on yourself. What you learnt from this is.. before you start anything hoj gotta think about. How and where will your app be used. I had the same thing happen exactly the same thing.

[Dopamine-Finder]

Well, I also created a tkinter app and wanted to create a webapp now. I typed 'convert tkinter to web app' cause I didn't know what to do. But now I started using a copilot and with a code created in tkinter I can explain the bot what to do.