Posts Tagged ‘ Tkinter

Graphics using Python’s standard library (Tkinter)

I really dig Python. It just (seemingly) has no built-in graphics capabilities, which makes me sad. Or DOES it? It ships with the Tkinter module, right? Which can display built-in graphics via its canvas widget.  Based on that, presumably you can start to do some simple interactive graphical applications a-la Pygame \ Processing.  Right?

Well, I thought I’d give it a shot.  Considering I’ve not ever used Tkinter, this was my first real foray into that arena.  But you can display graphics and bind callbacks to events, so it has the foundation for doing what I want.

My first attempt is listed below.  Some things I learned:

  • How to query the mouse position in the Tkinter window.
  • How to create a rectangle, that will follow the mouse around.
  • How to… make a Tkinter window with callbacks that make all the magic happen.

Not very impressive on it’s own:  All you get is a small window with a blue rectangle that follows the mouse.  But baby steps here.  I’m interested to see how far this can go.

from Tkinter import *

class Rect(object):
    def __init__(self, canvas, width, height):
        self.canvas = canvas
        self.width = width
        self.height = height
        self.x = 0
        self.y = 0
        coord = self.getCoordinates()
        self.rect = self.canvas.create_rectangle(coord[0], coord[1],
                                                 coord[2], coord[2],
                                                 fill="blue")

    def getCoordinates(self):
        # Used to define the sides of the rect based on a starting x,y position.
        left = -self.width/2 + self.x
        top = -self.height/2 + self.y
        right = self.width/2 + self.x
        bottom = self.height/2 + self.y
        return left, top, bottom, right

    def move(self, x, y):
        # Move the Rect object to a new location.  What is called to by the
        # UI callback moveRect()
        deltaX = x - self.x
        deltaY = y - self.y
        self.canvas.move(self.rect, deltaX, deltaY)
        self.x = x
        self.y = y

class App(object):

    def __init__(self, width=256, height=256):
        self.width = width
        self.height = height

        self.root = Tk()
        self.root.title("tkinter_test01")
        self.root.geometry("%sx%s"%(self.width, self.height))

        self.canvas = Canvas(self.root, width=self.width, height=self.height)
        # Bind the event to move our Rect:
        self.canvas.bind("<Motion>", self.moveRect)
        self.canvas.pack()

        # Create our Rect object:
        self.rect = Rect(self.canvas, 32, 32)

        self.root.mainloop()

    def moveRect(self, event):
        # Callback that will move our Rect object
        self.rect.move(event.x, event.y)

if __name__ == "__main__":
    App()

Visual guide to Tkinter widgets

Over on my Python Wiki, I’ve started making a ‘visual guide to Tkinter widgets’.  I’ve found a lot of good online Tkinter reference, but nothing with pictures… so I figured I’ll make my own :)  I find this to be a good exercise when first learning a new UI system, plus it makes for a nice quick-reference when authoring them later.

As an asside, I’ve also started this process for Maya’s Extended Layer Format (ELF) UI system on my Mel Wiki HERE.

See the growing Tkinter widget list HERE, but a few examples are pasted in below:

etc…