Modernize multimedia app & Object-Oriented Programming lecture [TWP56] [TWP58]

[reingart]

The DJ mix a sample app to play music, with a mixer to control the volume: mock-up

The original lesson uses Tkinter GUI for desktop apps, looking outdated and requiring a PC to execute it.
The idea is to revise and rewrite the code for the web (HTML5) and make the lesson interactive in the browser

TIPs:

• Use Brython to create the HTML UI programatically
• Implement events handlers with Brython

See previous lessons for examples about Brython and MVC TWP50

Affected pages:

• https://pyar.github.io/PyZombis/master/lectures/TWP56/TWP56_1.html
• https://pyar.github.io/PyZombis/master/lectures/TWP56/TWP56_2.html
• https://pyar.github.io/PyZombis/master/lectures/TWP56/TWP56_3.html
• https://pyar.github.io/PyZombis/master/lectures/TWP58/TWP58_2.html

Please add E2E tests with playwright

[shivamshan]

Hi @reingart, I had a quick question. Should the code to handle events be written from a point of view of teaching students a particular topic. In other words, what are we trying to teach the students here?? or is this only a exercise? do we need to to mock any library here to teach its concepts? could you explain a bit more?

[reingart]

The idea is to teach Model-View-Controller patterns to develop a visual application (design a simple UI, connect events, etc.)
The second part is about Object-Oriented Programing (SoundPanel class, to encapsulate and reuse common code)

So far we cannot use Tkinter, GTK, WxPython or QT in the browser (a wrapper could be built but is out of scope of this ticket), so Brython Widgets can help

It would be great to stick with the original program as much as possibly, only changing the UI design