goal: play tetris in a GUI browser based
================================
END RESULT:
Play here: http://openboundlabs.com/tetris-gui/tetrisWeb/tetrisWeb.html
For controls, you can key the buttons or you can press the keys (qwe,asd).
----
The code is here: tetrisWeb.zip
## In terminal, start server that will wait for browser connection
# This is the directory I'm using
cd /media/datastore/storestudio/workspace2019/tetris-gui/tetrisWeb
python3 tetrisWeb.py
## In browser open tetrisWeb.html (either FileOpen or webserver)
================================
================================
================================
Search for "python tetris"
https://gist.github.com/silvasur/565419/d9de6a84e7da000797ac681976442073045c74a4
Copy the source code to the file "tetris.py"
================================
tetris.py uses pygame which does graphics and keyboard events. It's OK
but it's a separate install and kinda clunky.
First let's do it in a terminal.
cp tetris.py tetrisTerminal.py
================================
How can you interact with a computer?
With a typewriter of course!
The typewriter is connected to a computer by three wires. This is an
extension of the stock ticker machine (1850s). Very simple! This
history influences a lot of how computers work (UNIX, Android, macOS,
Windows).
PLAY VIDEO
You can use a screen rather than paper. This is quieter ... and you
can move the cursor anywhere on the screen by sending special codes...
================================
For this program, Python prints to the terminal just as though it were
a piece of paper.
$ python tetrisTerminal.py
Getting input can be messy. Usually things aren't sent to the computer
until you hit an enter key...
Here the keyboard controls are "a"=left "d"=right "w"=rotate. You can
see the terminal echo my keyboard.
# ffmpeg -video_size 500x739 -r 15 -f x11grab -i :1+67,57 grab.mp4 # vid capture, xwininfo to get geom
================================
Text is OK but we want a graphicial user interface (GUI) with buttons,
graphics, mouse, key presses, ... There are several ways to do
this: https://en.wikipedia.org/wiki/List_of_widget_toolkits
I find these ways clunky and error prone. Whenever you have an
application crash because you hit a GUI button, you know you have
problems. I think the web browswer is the most natural way to deal
with a GUI computer. Web browsers have tremendous capabilities given
impressive with the tremendous amount of effort given to them since
Netscape released Mosaic in 1994. Web browsers can display graphics,
play music, play video, show 3d models, have their own powerful
language (javascript), ... There are essentially their own
sub-operating-system running on your computer. This "world wide web"
thing is really going to take off, ... I'm telling you!
To use a web browser as a GUI, you code the main "logic" of an
application in any langauge (Python) and deal with user input and
output by sending messages to a web browswer (Chrome, Mozilla) which
has simple logic in Javascript to update what is shown. Once you do
this, then you can run the GUI application from any computer in the
world that can access your internet server with no software installs,
or other clunky annoyances.
================================
How to talk with a web browser.
Websockets are a natural way of talking to a web browser in an
asynchronous manner. Previous techniques like HTTP long-polling work
but are a bit clunky.
For python there is the nice "websockets"
package https://websockets.readthedocs.io/en/stable/intro.html.
This is relatively recent and is based on Python3.6 which was released
in December 2016.
Essentially you set up a connection between your Python program and a
web browser and send messages back-and-forth asynchronously at any
point. Perfect!
README_python-websockets.html gives the details on a minimal example
================================
OK. Now we have 1) Python code that accepts keyboard input and prints
a tetris board and 2) a method to communicate between python and the
browser.
Let's connect them. The browser will have buttons to replace the
keyboard input and will send button pushes to Python. Python will
update a STATE variable based on the browser messages and will run the
Tetris code which will send the Tetris board to the browser to
display.
## In terminal, start server that will wait for browser connection
# this is the directory I'm using
cd /media/datastore/storestudio/workspace2019/tetris-gui/tetrisWeb
python3 tetrisWeb.py
## In browser open tetrisWeb.html (either FileOpen or webserver)
## Multiple Games in multiple browsers!
For controls, you can key the buttons or you can press the keys (qwe,asd).
I added some javascript to take the ascii board representation and
draw blocks on a canvas and added some sound. We've moved from a paper
typewriter to a "real" video game. Hmmm, let's draw those blocks in 3d
using three.js...
PLAY VIDEO
You can use a screen rather than paper. This is quieter ... and you
can move the cursor anywhere on the screen by sending special codes...
================================
For this program, Python prints to the terminal just as though it were
a piece of paper.
$ python tetrisTerminal.py
Getting input can be messy. Usually things aren't sent to the computer
until you hit an enter key...
Here the keyboard controls are "a"=left "d"=right "w"=rotate. You can
see the terminal echo my keyboard.
# ffmpeg -video_size 500x739 -r 15 -f x11grab -i :1+67,57 grab.mp4 # vid capture, xwininfo to get geom
================================
Text is OK but we want a graphicial user interface (GUI) with buttons,
graphics, mouse, key presses, ... There are several ways to do
this: https://en.wikipedia.org/wiki/List_of_widget_toolkits
I find these ways clunky and error prone. Whenever you have an
application crash because you hit a GUI button, you know you have
problems. I think the web browswer is the most natural way to deal
with a GUI computer. Web browsers have tremendous capabilities given
impressive with the tremendous amount of effort given to them since
Netscape released Mosaic in 1994. Web browsers can display graphics,
play music, play video, show 3d models, have their own powerful
language (javascript), ... There are essentially their own
sub-operating-system running on your computer. This "world wide web"
thing is really going to take off, ... I'm telling you!
To use a web browser as a GUI, you code the main "logic" of an
application in any langauge (Python) and deal with user input and
output by sending messages to a web browswer (Chrome, Mozilla) which
has simple logic in Javascript to update what is shown. Once you do
this, then you can run the GUI application from any computer in the
world that can access your internet server with no software installs,
or other clunky annoyances.
================================
How to talk with a web browser.
Websockets are a natural way of talking to a web browser in an
asynchronous manner. Previous techniques like HTTP long-polling work
but are a bit clunky.
For python there is the nice "websockets"
package https://websockets.readthedocs.io/en/stable/intro.html.
This is relatively recent and is based on Python3.6 which was released
in December 2016.
Essentially you set up a connection between your Python program and a
web browser and send messages back-and-forth asynchronously at any
point. Perfect!
README_python-websockets.html gives the details on a minimal example
================================
OK. Now we have 1) Python code that accepts keyboard input and prints
a tetris board and 2) a method to communicate between python and the
browser.
Let's connect them. The browser will have buttons to replace the
keyboard input and will send button pushes to Python. Python will
update a STATE variable based on the browser messages and will run the
Tetris code which will send the Tetris board to the browser to
display.
## In terminal, start server that will wait for browser connection
# this is the directory I'm using
cd /media/datastore/storestudio/workspace2019/tetris-gui/tetrisWeb
python3 tetrisWeb.py
## In browser open tetrisWeb.html (either FileOpen or webserver)
## Multiple Games in multiple browsers!