tkinter examples- 3 (Using colors and images with widgets)

Colors

In tkinter the color component values are given in hexadecimal, which is a base 16 number system and letters A-F are used to represent the digits 10 through 15. Each color is broken into three components—a red, a green, and a blue component. Each component can have a value from 0 to 255, with 255 being the full amount of that color. As the color component values run from 0 to 255, they will run from 0 to FF in hexadecimal, and thus are described by two hex digits. A typical color in Tkinter is specified like this:

'#A202FF'

The color name is prefaced with a pound sign. Then the first two digits are the red
component (in this case A2, which is 162 in decimal). The next two digits specify the green component (here 02, which is 2 in decimal), and the last two digits specify the blue component (here FF, which is 255 in decimal). This color turns out to be a bluish violet. Here is an example of it in use:

label = Label(text='Hi', bg='#A202FF')

There is this color_convert() function which will convert percentages into the hex string that can be used by Tkinter.

 def color_convert(r, g, b):

        return '#{:02x}{:02x}{:02x}'.format(int(r*2.55),int(g*2.55),int(b*2.55))

The following example shows the usage :

from tkinter import *

def color_convert(r, g, b):
    return '#{:02x}{:02x}{:02x}'.format(int(r*2.55),int(g*2.55),int(b*2.55))
   
root = Tk()

label1= Label(text='Howdy Python learners!',bg = color_convert(100,50,50))
label1.grid(row=0,column=0)
mainloop()

The example creates a background color that has 100% of the red component, 50% of
green and 50% of blue as shown in the output below:




 Images

So far we have used Labels and buttons to display text. These widgets can also be used to display images. To use an image we do the following:

1. Create a PhotoImage object and give it a name. Here is an example:

covri_image = PhotoImage(file='covri.jpg')

2. Put the image into widgets using the photoimage object

label = Label(image=covri_image )
button = Button(image=covri_image , command=covri_callback())

There is a limitation of tkinter regarding usage of GIF images only.

The following program shows how to use image with the widgets:

from tkinter import *

def covri_callback():
   
    output_label.configure(text = 'clicked')
   
root = Tk()
logo_image = PhotoImage(file='logo.gif')
covri_image = PhotoImage(file='covri.gif')

label1= Label(image=logo_image)
button1= Button(image=covri_image,command = covri_callback)
output_label = Label(font=('Verdana', 16))

label1.grid(row=0,column=0)
button1.grid(row=1,column=0)
output_label.grid(row=3,column=0)

mainloop()

The output of the above program is shown below:





Initially the two images are displayed, one as a label and other as a button. Once we click the Button the text 'clicked' is printed under the button image.

Here I am ending today's post. Make some programs on your own as GUI needs a lot practice. Till we meet next keep practicing and learning Python as Python is easy to learn!