On the right side of the Mondrean screen is a list of file names that the program has decided are images based on the file suffix. It only recognizes jpg and png right now. If the user clicks on one of these names, then the corresponding image should be displayed in the drawing area; if the image is too large, it will be cropped.
This has four parts to the implementation: the image files have to be recognized in the working directory and their names copied to a list; we have to determine when a mouse button is clicked while the cursor is over one of the names; that image file must be read in to a Surface; and the resulting Surface must be blitted to the drawing area.
A problem is that, because of the way things are drawn, the image will not appear on the screen unless placed there by the backstack scanning function. In other words, we have to add a new drawing directive for images. This is instructive, because adding any new drawing feature would have to do the same.
Looking in the current working directory for image files is a new kind of task. It involves the use of an of operating system related function named listdir, which examines the directory passed as a parameter and returns all of the file names as a list. For example, on a PC,
names = listdir(“C:\Program Files”)
results in a list of file names from the “Program Files” directory being assigned to the variable names. Printing this out could result in
[‘7-Zip’, ‘Android’, ‘Application Verifier’,
In particular, listdir(“.”) gives a list of the files in the current directory. Image files end in “.jpg” or “.png,” so we need the following code:
allFiles = listdir(“.”) # Create a list of image files
fileList = []
for i in allFiles:
if i[-3:]==”jpg” or i[-3:]==”png”:
fileList.append(i)
This creates a list in fileList that contains only image files.
Determining which name the mouse is pointing to is simple, and we’ve done it many times before:
def filenameScan():
k = (trunc(mouseY)//30) y = k * 30
pygame.draw.rect(screen, (255, 0, 0),
(800, y, 100, y), 1)
return k
This is based on a text height of 30 pixels, a location of (800,0) for the upper left corner of the file name list, and w width of 100 pixels. This function returns with the 30-pixel-high rectangles the mouse is in, which is the index for the file name list of the file selected.
When the mouse button is pressed while the cursor indicates a name, we load that file into a Surface.
k = filenameScan()
imag = pygame.image.load(fileList[k])
Now, we have to create a new drawing descriptor. Let’s define mode 105 as IMAGE mode, and create a new DD as follows:
thisdraw = Mode(IMAGE, [0,0], [imag], currentColor,thi cknes s )
Parameter [0,0] is where the image will be drawn; [imag] is the actual surface that was just created with the image in it. None of the rest matters in this case. Finally, in order that this be visible on the canvas, we must place it in the backstack:
backstack.push(thisdraw)
After adding code to draw that will draw an image DD, we’re done:
if k == IMAGE:
imag = b[0]
xx,yy = imag.get size()
if xx > 800:
xx = 800
if yy > 600:
yy = 600
screen.blit(imag.subsurface(0,0,xx,yy), (2, 2))
Now we can select and draw an image, and even undo it if we like.
The source code for Mondrean is available online and on the DVD. It is under 400 lines long, and reading through it could complete your understanding of the methods used to create a graphical interface.
Source: Parker James R. (2021), Python: An Introduction to Programming, Mercury Learning and Information; Second edition.