Tkinter

Objectives

• Install TkInter
• Getting started with TkInter
  • Adding a Widget

Languages

• Python
• Python Tutorial

Device Interfaces

• Pyserial

User Interfaces

• TkInter

Hello TkInter

Before you start, import tkinter.

from tkinter import *

In TkInter, everything is a widget. There is a button widget, a text widget and a frame widget. At the beginning, you are going to have a root widget like the window. So let’s create the window called root.

from tkinter import *

root = Tk()

After creating a window, now you want to add a label widget.Create a Label widget with the text “Hello World!” inside the window root.

from tkinter import *

root = Tk()

myLabel = Label(root, text="Hello World!")

The Window you created earlier doesn’t change. You just created a Label widget but you haven’t added it to the window yet. There are a couple way to put it on the screen. The first one is using pack.

from tkinter import *

root = Tk()

# Creating a Label Widget
myLabel = Label(root, text="Hello World!")

# Showing it onto the screen
myLabel.pack()

In the programming, we usually have a looping function to sense the changes, such as to know if you are moving your mouse towards something. There there must a constant loop till something happend.

from tkinter import *

root = Tk()

# Creating a Label Widget
myLabel = Label(root, text="Hello World!")

# Showing it onto the screen
myLabel.pack()

root.mainloop()

Title

from tkinter import *

root = Tk()
root.title('Fab Lab O Shanghai')

root.mainloop()

Grid System

Think that your program is like a grid. It has columns and rows.

from tkinter import *

root = Tk()

# Creating a Label Widget
myLabel1 = Label(root, text="Hello World!")
myLabel2 = Label(root, text="Welcome to Fab Lab O Shanghai")

# Showing it onto the screen
myLabel1.grid(row=0, column=0)
myLabel2.grid(row=1, column=0)

root.mainloop()

Buttons

from tkinter import *

root = Tk()

# Creating a button didget
myButton = Button(root, text="Click me")

# Showing it onto the screen
myButton.pack()

root.mainloop()

State= DISABLED

from tkinter import *

root = Tk()

# Creating a button Widget
myButton = Button(root, text="Click me", state =DISABLED)

# Showing it onto the screen
myButton.pack()

root.mainloop()

Button Size

from tkinter import *

root = Tk()

# Creating a button Widget
myButton = Button(root, text="Click me", padx=50, pady=50)

# Showing it onto the screen
myButton.pack()

root.mainloop()

Create a Dunction With a Button

from tkinter import *

root = Tk()

def myClick():
    myLabel = Label(root, text="Look! I click a button!!")
    myLabel.pack()


# Creating a Label Widget
myButton = Button(root, text="Click me", command=myClick, padx=50, pady=50)

# Showing it onto the screen
myButton.pack()

root.mainloop()

Input Fields

Hello Entry Widget

from tkinter import *

root = Tk()
# Creating an entry Widget
e = Entry(root)

# Showing it onto the screen
e.pack()

root.mainloop()

Insert

from tkinter import *

root = Tk()

# Creating an entry widget
e = Entry(root)
e.insert(0, "Enter Your Name: ")
e.pack()


root.mainloop()

Entry, Label and Button

from tkinter import *

root = Tk()



def myClick():
    myLabel = Label(root, text="Hello "+ e.get())
    myLabel.pack()

# Creating an entry widget
e = Entry(root)
e.pack()

# Creating a Label widget
myButton = Button(root, text="Click me", command=myClick)
myButton.pack()

root.mainloop()

Canvas Widget

ffrom tkinter import *

root = Tk()
my_canvas = Canvas(root, width=300, height=200)
my_canvas.pack()

root.mainloop()

Background

from tkinter import *

root = Tk()
my_canvas = Canvas(root, width=200, height=200, background='red')

root.mainloop()

Canvas Text Object

You can display one or more lines of text on a canvas C by creating a text object:

create_text(x, y, fill, font, text)

id = C.create_text(x, y, option, ...)

This returns the object ID of the text object on canvas C.

from tkinter import *

window = 200 #window size

root = Tk()
my_canvas = Canvas(root, width=window, height=window, background='white')
my_canvas.create_text(.5*window,.5*window,text="read",font=("Helvetica", 24),tags="text",fill="#0000b0")
my_canvas.pack()

root.mainloop()

• Reference: canvas text objects

Canvas Rectangle Objects

Each rectangle is specified as two points: (x0, y0) is the top left corner, and (x1, y1) is the location of the pixel just outside of the bottom right corner.

    id = C.create_rectangle(x0, y0, x1, y1, option, ...)

from tkinter import *

window = 200 #window size

root = Tk()
my_canvas = Canvas(root, width=2*window, height=window, background='white')
my_canvas.create_rectangle(window,0,2*window,window, tags='rect', fill='#b00000')
my_canvas.pack()

root.mainloop()

• Reference: Canvas rectangle objects

Canvas Line Objects

In general, a line can consist of any number of segments connected end to end, and each segment can be straight or curved. To create a canvas line object on a canvas C, use:

id = C.create_line(x0, y0, x1, y1, ..., xn, yn, option, ...)

The line goes through the series of points (x0, y0), (x1, y1), … (xn, yn). Options include:

from tkinter import *

window = 200 #window size

root = Tk()
my_canvas = Canvas(root, width=2*window, height=window, background='white')
my_canvas.create_line(0, 0.5*window, 2*window, 0.5*window, fill='#b00000')
my_canvas.pack()

root.mainloop()

• Reference: Canvas line objects

Item Configure

from tkinter import *

window= 200
colour_state = 0

root = Tk()



def myClick():
    global colour_state

    if (colour_state==0):
        my_canvas.itemconfigure('rect', fill="#b00000")
        colour_state =1
    else:
        my_canvas.itemconfigure('rect', fill="#0000b0")
        colour_state =0
    print(("state: {}").format(colour_state))
    my_canvas.pack()

# Creating a canvas widget
my_canvas = Canvas(root, width=window, height=window, background='white')
my_canvas.create_rectangle(0,0,window,window, tags='rect', fill='#b00000')
my_canvas.pack()

# Creating a button widget
myButton = Button(root, text="Click me", command=myClick, padx=50, pady=50)
myButton.pack()

root.mainloop()

- Reference: Python global, local and nonlocal variables

After

after(delay_ms, callback=None, *args)

This method regirsters a callback function that will be called after a given number of milliseconds.

Hello Button

Neil’s starter code display the raw data that is coming in from a PCB board. In this section, we are playing with Tkinter to do some graphics and show the button click state. We will learn how exatcly the graphics works.

Microcontroller

/*
Turn on LED when the button is pressed
*/

int LED = 13; // the pin for the LED
int Button = 7; // the input pin where the push button is connected
int val = 0; // val will be used to store the state of the input pin
int old_val =0; 
int state= 0;


void setup() {
  // put your setup code here, to run once:
  pinMode(LED, OUTPUT) ; // tell Arduino is an output
  pinMode(Button, INPUT); // Button is an input

  Serial.begin(9600);
  Serial.println("Hello!");

}

void loop() {
  // put your main code here, to run repeatedly:
  val = digitalRead(Button); // read input value and store it

  Serial.println(state);
  delay(100);


  //check if the button is pressed ( input is HIGH) and change the state
  if((val== HIGH)&&(old_val == LOW)){
    state=1-state;
  }

  old_val =val;

  // check whether the input is HIGH (button is pressed)
  if(state==1){ 
    digitalWrite(LED, HIGH);
    // turn the LED on
  }else{
    digitalWrite(LED, LOW);
    // turn the LED off
  }


}

Python

#
# hello.button.py
#
# button sensor detector hello-world
#
# Neil Gershenfeld 11/16/15
# (c) Massachusetts Institute of Technology 2015
#
# modified: Marcello Tania
#
# This work may be reproduced, modified, distributed,
# performed, and displayed for any purpose. Copyright is
# retained and must be preserved. The work is provided
# as is; no warranty is provided, and users accept all 
# liability.
#

from tkinter import *
import serial

WINDOW = 200 # window size

def idle(parent,canvas):
    global filt,eps
    #
    # idle routine
    #
    char = ser.readline()
    char = str(char).replace("b", "").replace("\\r", "").replace("\\n", "").replace("'", "")
    print("arduino:{}".format(char))


    if (char == '1'):
        x = 1
        text = 'button'
        canvas.itemconfigure("rect",fill="#b00000")
        canvas.itemconfigure("text",text="on")
    else:
        x = 0
        text = 'off'
        canvas.itemconfigure("rect",fill="#0000b0")
        canvas.itemconfigure("text",text="off")


    canvas.update()
    parent.after_idle(idle,parent,canvas)


#
# open serial port
#

ser = serial.Serial('/dev/cu.usbserial-14140',9600)
ser.setDTR()
ser.flush()
#
# set up GUI
#
root = Tk()
root.title('hello.HC-SR501.py (q to exit)')
root.bind('q','exit')
canvas = Canvas(root, width=2*WINDOW, height=WINDOW, background='white')
canvas.create_text(.5*WINDOW,.5*WINDOW,text="read",font=("Helvetica", 24),tags="text",fill="#0000b0")
canvas.create_rectangle(WINDOW,0,2*WINDOW,WINDOW, tags='rect', fill='#b00000')
canvas.pack()
#
# start idle loop
#
root.after(100,idle,root,canvas)
root.mainloop()

Useful Links

• Python GUI Programming With Tkinter - Real Python
• Interface and Application Programming - CBA MIT
• Interface and Application Week - kvfrans