PyGTK - how can I use this table layout to match the background image?

Question

This is what I was trying ,,but some rows are differently designed. Why can't I place the buttons correctly, any idea how to fix it?

This is the background image:

Code is place it as below:

#!/usr/bin/python
import gtk

class PyApp(gtk.Window):

    def createButton(self, name, funreturn):
      button_height= 32
      button = gtk.Button()
      button.props.relief = gtk.RELIEF_NONE
      label = gtk.Label()
      label.set_markup('<span color="#ffffff"><small>' + name + '</small></span>')
      button.add(label)
      button.set_name("deButton")
      button.connect("clicked" , funreturn , None)
      button.set_size_request(48, button_height)
      return button

    def callback(self):
      print "none"

    def __init__(self):
        super(PyApp, self).__init__()

        """ Window """
        button_rc = """
        pixmap_path "/var/tmp"

        ### Background > Image
        style "window" {
          bg_pixmap[NORMAL] = "menu/keyboard_new.png"

        }

        style "deButton" {

          fg[PRELIGHT] = { 0, 1.0, 1.0 }
          bg[PRELIGHT] = { 0, 0, 1.0 }
          bg[ACTIVE] = { 1.0, 0, 0 }
          fg[ACTIVE] = { 0, 1.0, 0 }
          bg[NORMAL] = { 1.0, 1.0, 0 }
          fg[NORMAL] = { .99, 0, .99 }
          bg[INSENSITIVE] = { 1.0, 1.0, 1.0 }
          fg[INSENSITIVE] = { 1.0, 0, 1.0 }

          engine "pixmap" {
              image {
                  function = BOX
                  file     = "menu/commonbutton1.png"
                  stretch  = TRUE
              }
          }
          bg_pixmap[NORMAL] = "menu/commonbutton1.png"
        }

        # imports
        widget "*.deButton" style "deButton"

        widget_class "*GtkButton*" style "button"
        widget_class "GtkWindow" style "window"
        """

        self.set_title("Keyboard")
        self.set_size_request(600, 300)
        self.set_position(gtk.WIN_POS_CENTER)
        gtk.rc_parse_string(button_rc)
        vbox = gtk.VBox(False, 2)
        table = gtk.Table(5, 10, True)

        table.attach(self.createButton("1",self.callback), 0, 1, 0, 1)
        table.attach(self.createButton("2",self.callback), 1, 2, 0, 1)
        table.attach(self.createButton("3",self.callback), 2, 3, 0, 1)
        table.attach(self.createButton("4",self.callback), 3, 4, 0, 1)
        table.attach(self.createButton("5",self.callback), 4, 5, 0, 1)
        table.attach(self.createButton("6",self.callback), 5, 6, 0, 1)
        table.attach(self.createButton("7",self.callback), 6, 7, 0, 1)
        table.attach(self.createButton("8",self.callback), 7, 8, 0, 1)
        table.attach(self.createButton("9",self.callback), 8, 9, 0, 1)
        table.attach(self.createButton("0",self.callback), 9, 10, 0, 1)


        table.attach(self.createButton("Q",self.callback), 0, 1, 1,2)
        table.attach(self.createButton("W",self.callback), 1, 2, 1, 2)
        table.attach(self.createButton("E",self.callback), 2, 3, 1, 2)
        table.attach(self.createButton("R",self.callback), 3, 4, 1, 2)
        table.attach(self.createButton("T",self.callback), 4, 5, 1, 2)
        table.attach(self.createButton("Y",self.callback), 5, 6, 1, 2)
        table.attach(self.createButton("U",self.callback), 6, 7, 1, 2)
        table.attach(self.createButton("I",self.callback), 7, 8, 1, 2)
        table.attach(self.createButton("O",self.callback), 8, 9, 1, 2)
        table.attach(self.createButton("P",self.callback), 9, 10, 1, 2)

        table.attach(self.createButton("A",self.callback), 0, 1, 2,3)
        table.attach(self.createButton("S",self.callback), 1, 2, 2, 3)
        table.attach(self.createButton("D",self.callback), 2, 3, 2, 3)
        table.attach(self.createButton("F",self.callback), 3, 4, 2, 3)
        table.attach(self.createButton("G",self.callback), 4, 5, 2, 3)
        table.attach(self.createButton("H",self.callback), 5, 6, 2, 3)
        table.attach(self.createButton("J",self.callback), 6, 7, 2, 3)
        table.attach(self.createButton("K",self.callback), 7, 8, 2, 3)
        table.attach(self.createButton("L",self.callback), 8, 9, 2, 3)
        table.attach(self.createButton("",self.callback), 9, 10, 2, 3)

        #vbox.pack_start(gtk.Entry(), False, False, 0)
        vbox.pack_end(table, True, True, 0)

        self.add(vbox)

        self.connect("destroy", gtk.main_quit)
        self.show_all()


PyApp()
gtk.main()

Answer 1

OK - Works, better to use Fixed widget not table or grid.

#!/usr/bin/python
import gtk

class PyApp(gtk.Window):

    def __init__(self):
        super(PyApp, self).__init__()

        """ Window - Background embed """
        button_rc = """
        pixmap_path "/var/tmp"
        # Button - image apply
        style "window" {
          bg_pixmap[NORMAL] = "menu/keyboard_new.png"
        }

        style "deButton" {
          fg[PRELIGHT] = { 0, 1.0, 1.0 }
          bg[PRELIGHT] = { 0, 0, 1.0 }
          bg[ACTIVE] = { 1.0, 0, 0 }
          fg[ACTIVE] = { 0, 1.0, 0 }
          bg[NORMAL] = { 1.0, 1.0, 0 }
          fg[NORMAL] = { .99, 0, .99 }
          bg[INSENSITIVE] = { 1.0, 1.0, 1.0 }
          fg[INSENSITIVE] = { 1.0, 0, 1.0 }
          engine "pixmap" {
              image {
                  function = BOX
                  file     = "menu/commonbutton1.png"
                  stretch  = TRUE
              }
          }
          bg_pixmap[NORMAL] = "menu/commonbutton1.png"
        }
        # imports
        widget "*.deButton" style "deButton"
        widget_class "*GtkButton*" style "button"
        widget_class "GtkWindow" style "window"
        """

        self.set_title("Keyboard")
        self.set_size_request(600, 300)
        self.set_position(gtk.WIN_POS_CENTER)
        gtk.rc_parse_string(button_rc)  ##<<<<< include the design
        vbox = gtk.VBox(False, 2)

        fix  = gtk.Fixed() ## YumYumYum
        """ Row 1 """
        fix.put( gtk.Button("1") , 20 , 20 )
        fix.put( gtk.Button("2") , 80 , 20 )
        fix.put( gtk.Button("3") , 150 , 20 )
        """ Row 2 """
        fix.put( gtk.Button("Q") , 20 , 80 )
        """ Row 3 """
        fix.put( gtk.Button("A") , 60 , 130 )
        """ Row 4 """
        fix.put( gtk.Button("Z") , 60 , 190 )
        """ Row 5 """
        fix.put( gtk.Button("SPACE") , 180 , 240 )

        vbox.pack_end(fix, True, True, 0)
        self.add(vbox)
        self.connect("destroy", gtk.main_quit)
        self.show_all()


PyApp()
gtk.main()