CODEWITHSUNDEEP
pythontkintergridtkinter-canvas
M Lensch
M Lensch

Reputation: 43

Make a tkinter grid staggered every 2 rows

I am using this grid.py coloring program here https://scipython.com/blog/a-simple-colouring-grid/ The relevant code that makes the grid is

self.cells = []
for iy in range(n):
    for ix in range(n):
        xpad, ypad = pad * (ix+1), pad * (iy+1)
        x, y = xpad + ix*xsize, ypad + iy*ysize
        rect = self.w.create_rectangle(x, y, x+xsize,
                                   y+ysize, fill=UNFILLED)
        self.cells.append(rect)

I was wondering if I could get it so the squares stagger as shown below: Staggered boxes

Upvotes: 0

Views: 137

Answers (2)

acw1668
acw1668

Reputation: 46669

Below is an example based on your code (added missing parts):

import tkinter as tk

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        ### added missing parts
        pad = 0
        xsize = ysize = 30
        n = 8

        self.w = tk.Canvas(self, width=(xsize+pad)*n+pad+1, height=(ysize+pad)*n+pad+1, highlightthickness=0)
        self.w.pack()
        ###
        self.cells = []
        for iy in range(n):
            for ix in range(n):
                xpad, ypad = pad * (ix+1), pad * (iy+1)
                x, y = xpad + ix*xsize, ypad + iy*ysize
                color = 'white' if (iy//2+ix)%2 else 'gray'
                rect = self.w.create_rectangle(x, y, x+xsize, y+ysize, fill=color) # use color instead of UNFILLED
                self.cells.append(rect)

app = App()
app.mainloop()

And the result:

enter image description here

Upvotes: 1

Reblochon Masque
Reblochon Masque

Reputation: 36662

You could use generator functions to, for each line, generate the coordinates, and the fill of each cell.
note row % 4 < 2: this is what generates identical fill pattern for consecutive rows the rows
You can adapt the following code sample to fit your Grid class with ease.

enter image description here

import tkinter as tk


WIDTH, HEIGHT = 300, 300


def line_fills(row, numcells):
    """yields the fill value of each cells of a line, from 
    the row position of the line 
    """
    fill = True if row % 4 < 2 else False   # note %4: this is what generates identical fill pattern for consecutive rows the rows 
    for _ in range(numcells):
        yield fill
        fill = not fill


def line_coords(row, numcells, side):
    """yields the rectangle coordinates of each cells in a line, from 
    the row position of the line 
    """
    y0, y1 = row * side, (row+1) * side
    for col in range(numcells):
        x0, x1 = col * side, (col+1) * side
        yield x0, y0, x1, y1


def staggered_grid(canvas):
    """generates and draws a staggered grid on a canvas
    """
    side = 10
    w, h = WIDTH // side + 1, HEIGHT // side + 1
    fills = ['', 'grey']
    for row in range(h):
        for coord, fill in zip(line_coords(row, w, side), line_fills(row, w)):
            fill = 'grey' if fill else ''
            canvas.create_rectangle(*coord, fill=fill)

root = tk.Tk()
canvas = tk.Canvas(root, width=WIDTH, height=HEIGHT)
canvas.pack()

staggered_grid(canvas)

root.mainloop()

Upvotes: 1

Related Questions