INTRO2CSTirgul 12 – Networks and GUI
Today:
Network and Communication
GUI - tkinter
Network
A computer network is a network which allows computers to exchange data
Networked computing devices exchange data with each other along data connections
The connections between computers are established using either cable media or wireless media.
Client-Server Model
Client-Server Model
It is a network architecture in which each computer or process on the network is either a client or a server.
The server component provides a function or service to one or many clients
For instance, a web server serves web pages and a file server serves computer files.
Client-Server Model
The client component request services from the server
For example, web browsers are clients that connect to web servers and retrieve web pages for display.
Server-Client Model Usage Examples
Email Printers Internet Atually, many of the application we use daily:
Whats up Facebook Waze Dropbox
Who can be a client? Server?
We are used to talk about servers (“ooh, Google servers are so strong!”) as a synonym for a powerful computer.
But, being a client or a server is just a role a specific program takes on itself.
We can run several program on the same machine :
Some would be clients that will reach other servers for service.
Some would be servers providing services to other clients, or even to a client on the current machine.
Client and Server Communication
Clients and servers exchange messages in a request–response messaging pattern: The client sends a request The server returns a response.
Client and Server Communication
To communicate, the computers must have a common language, and they must follow rules so that both the client and the server know what to expect.
The language and rules of communication are defined in a communications protocol
Address
(leaving a lot of details that will be revealed in a dedicated networks course) TCP-IP is one such communication protocol.
An IP defines the address of a computer in the form of 4, dot separated 8bit
numbers, e.g. : 127.0.0.1 The address can be defined by the name of
the machine, for example e-intro.cs.huji.ac.il When we want to use our computer as the
address we can use ‘localhost’TCP-IP Illustrated Volume 1 The Protocols, W. Richard Stevens, 1994 Addison Wesley
Ports
A port is the endpoint of the communication. It is always associated with the IP of a host
(for example, server) and the communication protocol
Specific port numbers are often used to identify specific services
Port 80 = HTTP, 443 = HTTPS Port 20 = FTP Port 6881 = Bittorent
TCP-IP Illustrated Volume 1 The Protocols, W. Richard Stevens, 1994 Addison Wesley
IP and Ports
We can say that the IP is the address is a building
If a letter is sent to this address without a specific apartment number, we cannot know which mailbox to put it in
So the IP is the building address and the port is the apartment number
IP, Ports and Sockets
The combination of an IP and a port defines a socket.
Sockets let us create a dedicated communication channel between two network entities. To\from this channel we can (similar to files syntax and terminology):
Write – to transfer information to the other side.
Read – to receive any information written to the channel by the other side.
TCP-IP Illustrated Volume 1 The Protocols, W. Richard Stevens, 1994 Addison Wesley
Networks with Python
The socket module lets us create and manage network communication via Python.
Creating a new socket object: import socketmy_socket = socket.socket()
Python’s socket object implement the general notion of network sockets and abstracts the “lower levels” of communication.
Networks with Python
For a full API see : https://docs.python.org/3/library/socket.html
For a nice tutorial : https://docs.python.org/3/howto/sockets.html#socket-howto
Client-server communication example
ClientServer
connecting a socket - client
Connecting a socket requires the definition of: Target address (host) : IP\host name. Target port : should be identical between both
sides. The connect method gets one parameter of the
address which is a tuple (IP, port)
connecting a socket - client
Lets see an example: what happens when we enter this url : https://docs.python.org in our browser:
address format is host and port number
Bind and listen: Server
Binding a socket = Declaring it is dedicated for a communication via a specific address.
listen : the dedicated communication channel (= the socket) will wait for client requests for connections.
If a connection is in progress and another request arrives, we put it in a queue. The queue size should be defined when we start to listen
Bind and listen: Server
We could have replaced socket.gethostname() with ‘localhost’, but then it would be visible only within the same machine
accept from a socket - server
Accepting communication could only be from a binded socket.
When the socket receives a request it returns: a new socket for sending and receiving
data. the address of the other side.
Type of Data
The type of data that is passed through the sockets is bytes.
We can encode any string we want as bytes. Any information read from the port should be
decoded from bytes to string. Encoding : The process of translating
characters to bytes\numbers. Famous encoding methods : UTF8, ASCII
bytes : when creating a bytes object from string we should declare what encoding to use (example coding = utf8) :
>> s = bytes('hi!','utf8') >> b‘hi!' # b stands for bytes >> s + 'bi'Traceback (most recent call last): File "<pyshell#66>", line 1, in <module> s + 'bi'TypeError: can't concat bytes to str
Encoding String Bytes
We decode using the same encoding method >> s = bytes('hi!',‘ascii') >> b'hi!' >> s.decode(‘ascii') >> 'hi!'
Dcoding Bytes String
Send Message
Send messages using the sendall method :my_socket.connect(address)my_socket.sendall(string_as_bytes)
Receive Message
Receive using the recv method.
Maximum amount of data to be received per single message is defined by BUFFER_SIZE.BUFFER_SIZE = 1024msg = my_socket.recv(BUFFER_SIZE)
Receive Message
We may receive more than one message.
How do we know when one message ends and the other begins?
We must define a protocol between the server and the client that both must obey.
Receive Message
For example, we can say that each message must end by a special character, like ‘\n’
So when we read ‘\n’ we know that this is the end of a message and all the data that comes after belongs to a new message
Receive Message
Receive Message
But what if we received only the beginning of a message after one call of recv?
We should get the rest of it in the next call, but we should keep the data we received in the previous call in a buffer
Receive Message
Receive Message
⬜When recv returns 0 bytes, it means the other side has closed (or is in the process of closing) the connection
⬜But if the connection is not broken but there is no message to receive, we could wait forever…
Using Select
We can call select.select(rlist, wlist, xlist, timeout) to see if any of the input sockets are ready.
rlist: wait until ready for readingwlist: wait until ready for writingxlist: wait for an “exceptional condition”
When the timeout argument is omitted the function blocks until at least socket is ready
https://docs.python.org/3/library/select.html
Using Select
The return value is a triple of lists of objects that are ready: subsets of the first three arguments.
When the time-out is reached without a file descriptor becoming ready, three empty lists are returned.
https://docs.python.org/3/library/select.html
Using Select – Client example
s = socket.socket()s.connect((HOST, PORT))
# receiving data:while True: r,w,x = select.select([s], [], [], 5) for sock in r: if sock == s: data = r[0].recv(BUFF_SIZE) # do something with the data..
s.close()
reading from our socket
If there is no sockets to read we will not call recv and wait
closeing a socket
Same as files, when communication is terminated, the socket should be closed:my_socket.close()
GUI
Graphical User Interface
A GUI is a graphical (rather than purely textual) user interface to a computer
In the past interfaces to computers were not graphical, they were text-and-keyboard oriented
Today almost all operating systems, applications and programs we use consist of a GUI
GUI in Python
tkinter is the standard GUI library for Python
The GUI consist of the main window and different widgets within it
GUI in Python
To initialize Tkinter, we have to create a Tk root widget. This is an ordinary window, with a title bar and other decoration provided by your window manager.
You should only create one root widget for each program, and it must be created before any other widgets.
The root widget contains all other widgets
GUI in Python
After creating the main window and its contained widgets, the window will not appear until we will enter the event loop by calling mainloop() method on the main window
The program will stay in the event loop until we close the window.
It enables us to handle events from the user
GUI in Python
The window won’t appear until we’ve entered the Tkinter event loop (mainloop)
The program will stay in the event loop until we close the window.
Widgets
Widget is an element of interaction in a GUI, such as button or scroll bar
Tkinter provides the following widgets: Button Canvas entry Frame Label Menu text And many more.. http://www.python-course.eu/python_tkinter.php
Adding Widgets
All widgets are implemented in widgets classes, so each time we use a widget we create such object.
The first parameter in the constructor of a widget is its parent widget
Widget Geometry Managers:
After adding a widget, we need to call a geometry manager in order to display it
There are three special methods that we can use for doing that: grid, pack and place
Try not to use grid and pack on the same container
Widget pack() Method
pack() method of the widget object: widget.pack(pack_options)
This organizes widgets in blocks before placing them in the parent widget.
The pack method doesn’t really display the widget; it adds the widget to a list of widgets managed by the parent widget
http://effbot.org/zone/tkinter-geometry.htm
Widget pack() options:expand: When set to true, widget expands to
fill any space not otherwise used in widget's parent.
fill: Determines whether widget fills any extra space allocated to it by the packer only horizontally, only vertically, both or none (defult)
side: Determines which side of the parent widget packs against: TOP (default), BOTTOM, LEFT, or RIGHT.
Adding Widgets - Label
The label is a widget that the user just views but not interact with.
A Label is a widget which is used to display text or an image.
We can set the text in the text argument in the Label constructor
More options: http://effbot.org/tkinterbook/label.htm
Adding Label Widget
Here we used text and font options
The Button Widget
Buttons can contain text or imagesButtons can be associated with a function or a
method that will be called after button click event
The association is by assigning command argument in the Button constructor to the function we wand to call
The Button Widget
Assigning the function that will be called on click event
The Button Widget
Clicking three times on the button:
The Canvas Widget
The Canvas widget provides structured graphics facilities
It can be used to draw graphs and plots, create graphics editors, and implement various kinds of custom widgets.
To display things on the canvas, you create one or more canvas items using create methods
The create method returns the item id
Canvas Items and their Create Methods
◻arc◻image◻line◻oval◻polygon◻rectangle◻text◻window
◻create_arc◻create_image◻create_line◻create_oval◻create_polygon◻create_rectangl
e◻create_text◻create_window
Canvas items
The window coordinates of the canvas start at the upper left corner (this is (0,0))
The create methods get the coordinates as arguments, separated by commas
Canvas Widget
we set the color and the width of the line
Events and Bindings
When we run the mainloop(), we are actually in events loop
Events can come from various sources, including key presses and mouse operations by the user, and redraw events from the window manager
For each widget, we can bind Python functions and methods to events:
widget.bind(event, handler)
Events and Bindings
If an event matching the event description occurs in the widget, the given handler is called with an object describing the event.
The event is an object, and the handler is a callback method that we can implement.
Some Events Formats
<Button-1> , <Button-2>, <Button-3>A mouse button is pressed over the widget. Button 1 is the leftmost button, button 2 is the middle button (where available), and button 3 the rightmost button
The current position of the mouse pointer is provided in the x and y members of the event object passed to the callback.
Some Events Formats
<B1-Motion> The mouse is moved, with mouse button 1 being held down (use B2 for the middle button, B3 for the right button).
The current position of the mouse pointer is provided in the x and y members of the event object passed to the callback.
There are more events (mouse and keyboard):http://effbot.org/tkinterbook/tkinter-events-and-bindings.htm
Events and Bindings - example
Read about Frame widget: http://effbot.org/tkinterbook/frame.htm
The after Method
after(delay_ms, callback=None, *args)This is a widget method.It registers a callback function that will be called
after a given number of milliseconds. Since for running the GUI we are in a loop (the
mainloop()), we can use after to call a certain method over and over again
Using after example:
Protocols Handlers
The protocols refer to interaction between the application and the window manager.
One example is closing a window using the window manager (the built-in x button on the upper right)
Say we want to do something when the user closes the window
We can use the protocol WM_DELETE_WINDOW
Protocols Handlers
The protocol method, much like bind, receives the protocol name and the handler (the method) that should be called upon it
Protocols HandlersLets close the window
We want to call this method upon closing the window
Top Related