Tkinter - how to display a 2d array of colors as an image?

Question

I am somewhat new to Python and completely new to Tkinter. I have the following python code:

class Level:

    def __init__(self, name, height, width):

        self.name = name
        self.height = height
        self.width = width
        self.tiles = makeTiles(height, width)   

    class Tile:

        def __init__(self, x, y, type, color, isOccupied, enemy):

            self.x = x
            self.y = y
            self.type = type
            self.color = color
            self.isOccupied = isOccupied
            self.enemy = enemy

def makeLevel(name, height, width):

    level = Level(name, height, width)

    return level

def makeTiles(height, width):

    tiles = [[Level.Tile(x, y, "Surface", "red", False, "None") for x in range(width)] for y in range(height)]

    return tiles

test1 = makeLevel("test", 10, 10)

for x in range(10):
    for y in range(10):
        if x % 2 == 0 and y % 2 == 0:
            test1.tiles[x][y].color = "black"
        elif x % 2 == 0:
            test1.tiles[x][y].color = "blue"
        elif y % 2 == 0:
            test1.tiles[x][y].color = "yellow"

colorMatrix = [[0 for x in range(10)] for y in range(10)]

for x in range(10):
    for y in range(10):
        colorMatrix[x][y] = test1.tiles[x][y].color

print(colorMatrix)

which generates the following 2d array of colors:

[['black', 'blue', 'black', 'blue', 'black', 'blue', 'black', 'blue', 'black', 'blue'], ['yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red'], ['black', 'blue', 'black', 'blue', 'black', 'blue', 'black', 'blue', 'black', 'blue'], ['yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red'], ['black', 'blue', 'black', 'blue', 'black', 'blue', 'black', 'blue', 'black', 'blue'], ['yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red'], ['black', 'blue', 'black', 'blue', 'black', 'blue', 'black', 'blue', 'black', 'blue'], ['yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red'], ['black', 'blue', 'black', 'blue', 'black', 'blue', 'black', 'blue', 'black', 'blue'], ['yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red', 'yellow', 'red']]

Which I would like to represent in tkinter with each array item being a 25 pixel by 25 pixel cell of the given color, and all of the cells flowing seamlessly together with no visible borders or gaps - it should look something like this:

Image of what it should look like

The only solutions I've been able to find involve text fields, not colors. Is there any way to do this in tkinter, or do I need to use a more complex GUI framework?

Answer 1

One way you could do it by creating corresponding rectangles arranged in a grid on a tkinter.Canvas object. Besides being relatively simple, you can make it so individual Tiles can be selected, if you wish.

try:
    import tkinter as tk  # assume Python 3
except ImportError:
    import Tkinter as tk  # nope, Python 2

class Level:
    def __init__(self, name, height, width):
        self.name = name
        self.height = height
        self.width = width
        self.tiles = makeTiles(height, width)

    class Tile:
        def __init__(self, x, y, type, color, isOccupied, enemy):
            self.x = x
            self.y = y
            self.type = type
            self.color = color
            self.isOccupied = isOccupied
            self.enemy = enemy

def makeLevel(name, height, width):
    level = Level(name, height, width)
    return level

def makeTiles(height, width):
    tiles = [[Level.Tile(x, y, "Surface", "red", False, "None") for x in range(width)] for y in range(height)]
    return tiles

test1 = makeLevel("test", 10, 10)
for x in range(10):
    for y in range(10):
        if x % 2 == 0 and y % 2 == 0:
            test1.tiles[x][y].color = "black"
        elif x % 2 == 0:
            test1.tiles[x][y].color = "blue"
        elif y % 2 == 0:
            test1.tiles[x][y].color = "yellow"

colorMatrix = [[0 for x in range(10)] for y in range(10)]
for x in range(10):
    for y in range(10):
        colorMatrix[x][y] = test1.tiles[x][y].color

#print(colorMatrix)

width, height = 400, 400

root = tk.Tk()
root.title("colorMatrix")

frame = tk.Frame()
frame.pack()

canvas = tk.Canvas(frame, width=width, height=height)
rows, cols = len(colorMatrix), len(colorMatrix[0])

rect_width, rect_height = width // rows, height // cols
for y, row in enumerate(colorMatrix):
    for x, color in enumerate(row):
        x0, y0 = x * rect_width, y * rect_height
        x1, y1 = x0 + rect_width-1, y0 + rect_height-1
        canvas.create_rectangle(x0, y0, x1, y1, fill=color, width=0)
canvas.pack()

root.mainloop()

Display: