How to best setup a chessboard with Kivy

[ColdHeat]

I've been working on a front end to a chess engine with Kivy but I'm having trouble implementing the chess board. 

It doesn't seem like it should be so complicated, but at the moment the most I have is a correctly colored set of 64 buttons. 

# |plus| increments a character by x. 'a' |plus| 1 == 'b'

class ChessApp(App):

    def build(self):

        game = GridLayout(cols=8, rows=8)

        squares = self.checkerboard(game)

        return game

    def checkerboard(self, widget, light=(1,1,1), dark=(0.43,0.50,0.56)):

        squares = {}

        for y in range(4):

            for x in range(4):

                square = Button(background_color=[3,3,3,1])

                widget.add_widget(square)

                squares[('a' |plus| (x*2)) + str(y+y+1)] = square

                square = Button(background_color=[1,1,1,1])

                widget.add_widget(square)

                squares[('b' |plus| (x*2)) + str(y+y+1)] = square

            for x in range(4):

                square = Button(background_color=[1,1,1,1])

                widget.add_widget(square)

                squares[('a' |plus| (x*2)) + str(y+y+2)] = square

                square = Button(background_color=[3,3,3,1])

                widget.add_widget(square)

                squares[('b' |plus| (x*2)) + str(y+y+2)] = square

        return squares

It doesn't seem like this would work well enough to implement a proper chess board. What would be a better implementation? 

[Math BKweb]

Hi ColdHeat,

I made a reversi Game with a GridLayout and an image for each cell/tile : reversi

Still learning Kivy, there might be better solutions.

Cheers

[Math BKweb]

I will try a background image of the whole chessboard for a gridlayout and transparent png for pieces.

I really can not work with kv language, then comments and solutions are welcome.

Regards

in kv file :

[code]

<GridLayout>:

canvas.before:

BorderImage:

# BorderImage behaves like the CSS BorderImage

border: 0, 0, 0, 0

source: "chessboard.jpg"

pos: self.pos

size: root.size

<Chessboard>:    #the main widget

    GridLayout:

        width: root.height # to get a square for horizontal display

        cols: 8

        Tile:

    id: '0_0'

        Tile:

   id: '0_1'

[/code]

in main.py

[code]

class Tile(Image):

    def __init__(self, **kwargs):

        super(Tile, self).__init__(**kwargs) #constructeur du parent

        self.source = self.source_property

        self.source='queen.png'

class Ground(Widget):

    def __init__(self, **kwargs):

        super(Ground, self).__init__(**kwargs) #constructeur du parent

        #self.add_widget(Label(text='Hello world'))

class MyApp(App):

    def build(self):

        return Ground()

[/code]

[Noob Saibot]

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.widget import Widget
from kivy.properties import NumericProperty, StringProperty, ObjectProperty

kv = """
<Tile>:
    source_image: 'foo.jpg' if (self.index%2.0) else 'bar.jpg'
    canvas.before:
        BorderImage:
            source: self.source_image
            pos: self.pos
            size: self.size

<Chessboard>:
    container: container_id
    canvas.before:
        BorderImage:
            source: 'chessboard.jpg'
            pos: self.pos
            size: self.size

     GridLayout:
         id: container_id
         cols: 8
         rows: 8
"""

class Tile(Widget):
    index = NumericProperty(0.0)
    source_image = StringProperty('')

class Chessboard(Widget):
    container = ObjectProperty(None)

    def on_container(self, *args):
        if self.container:

            for x in xrange(8*8):
                self.container.add_widget(Tile(index=x))

class MyApp(App):

    def build(self):
        return Chessboard()

if __name__ == '__main__':
    Builder.load_string(kv)
    MyApp.run()

You could try something like this. kvlang makes things 1000x easier in kivy. 

Run this code as is (after determining foo.jpg, bar.jpg, and chessboard.jpg images). Let me know if you have trouble understanding. I'm sure you'll see what's going on if you look this example over for a few min.

[Math BKweb]

Hi Noob Saibot,

It works fine, just by modifiying MyApp.run() in MyApp().run().   Difference for this is also a total mystery for me :)

I wanted a background image for the whole board, but I will go for a background image for each tile and an other image for the piece placed on it.
My game is not a chessboard, but it will work either for chess.
This was made with a small modification of your code.

Thanks