Search code examples
pythonpython-2.7gtkpygtkgtk2

How to make a button image stretched, transparent, exactly width height scaled fitted?


How to make the button image stretched + transparent + exactly fitted as in like the image?

Expected output:

enter image description here

But it shows very dirty button:

enter image description here

Code:

# /usr/bin/env python
import pygtk,gtk

button=gtk.Button()
pixbuf=gtk.gdk.pixbuf_new_from_file('/var/tmp/nl.png')
pixbuf=gtk.gdk.Pixbuf.add_alpha(pixbuf,255,255,255 ,255)
pixbuf=pixbuf.scale_simple(40,40,gtk.gdk.INTERP_BILINEAR) 
image=gtk.Image()
image.set_from_pixbuf(pixbuf)
label=gtk.Label("Python")
hbox=gtk.HBox()
hbox.pack_start(image)
hbox.pack_start(label)
button.add(hbox)
vbox=gtk.VBox()
vbox.pack_start(button)
win=gtk.Window()
win.add(vbox)
win.show_all()
win.set_size_request(150,3)
win.connect("destroy",lambda wid:gtk.main_quit())
gtk.main()

Solution

  • There is a trick: as below works great.

      def __init__(self):
    
        # Button Hacker
        button_rc = """
        pixmap_path "/var/tmp"
    
        ### Background > Image 
        style "window" {    
          bg_pixmap[NORMAL] = "1.png"
        }
    
        ### Buttons 1
        style "deButton" {
          xthickness = 60
          ythickness = 30
          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     = "de.png"
                  stretch  = TRUE
              }
          }
          bg_pixmap[NORMAL] = "de.png"
        }
    
        style "nlButton" {
          xthickness = 60
          ythickness = 30
          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     = "nl.png"
                  stretch  = TRUE
              }
          }
          bg_pixmap[NORMAL] = "nl.png"
        }
    
        style "enButton" {
          xthickness = 60
          ythickness = 30
          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     = "en.png"
                  stretch  = TRUE
              }
          }
          bg_pixmap[NORMAL] = "en.png"
        }
    
    
        style "callButton" {
    
          xthickness = 58
          ythickness = 48
          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     = "call_connect_icon_64x64.png"
                  stretch  = TRUE
              }
          }
          bg_pixmap[NORMAL] = "call_connect_icon_64x64.png"
        }
    
        style "disconnectButton" {
          xthickness = 58
          ythickness = 48
          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     = "call_disconnect_icon_64x64.png"
                  stretch  = TRUE
              }
          }
          bg_pixmap[NORMAL] = "call_disconnect_icon_64x64.png"
        }
    
        # imports
        widget "*.deButton" style "deButton"
        widget "*.nlButton" style "nlButton"
        widget "*.enButton" style "enButton"
        widget "*.callButton" style "callButton"
        widget "*.disconnectButton" style "disconnectButton"
        widget_class "GtkWindow" style "window"
        widget_class "*GtkButton*" style "button"
        widget "main window.*GtkButton*" style "main_button"
        """
    
    
        # main GTK
        self.window = gtk.Window(gtk.WINDOW_TOPLEVEL)
        self.window.set_size_request(1024, 768)
        self.window.set_border_width(10)
    
        self.window.set_decorated(False)
        self.window.set_title("Test")
        #self.window.set_default_size(1024, 768)
        #color = gtk.gdk.color_parse('#234fdb')
        #self.window.modify_bg(gtk.STATE_NORMAL, color)
        self.window.connect("destroy", gtk.main_quit, "WM destroy")
    
        #window.set_name("foo")
        #gtk.rc_parse_string(pixmap_rc)
    
        self.window.set_name("main window")
        gtk.rc_parse_string(button_rc)
    
        self.vbox = gtk.VBox()
        self.window.add(self.vbox)    
        table = gtk.Table(rows=2, columns=2, homogeneous=True)
        self.hButton = gtk.HBox(False, 0)
    
        # Create gape
        align = gtk.Alignment(0.5)
        align.set_padding(500, 90, 0, 0)
        align.add(gtk.Label())
        align.show()
        self.vbox.pack_start(align, False)
    
        self.vbox.pack_start(self.hButton, False)    
        self.hButton.set_border_width(1)
    
        # Buttons 
        self.button_de = gtk.Button("Detuch")
        self.button_de.set_name("deButton")
        self.button_de.show()
        self.button_de.connect("clicked", self.deButton) 
    
        self.button_nl = gtk.Button("Nederlands")
        self.button_nl.set_name("nlButton")
        self.button_nl.show()
        self.button_nl.connect("clicked", self.nlButton) 
    
        self.button_en = gtk.Button("English")
        self.button_en.set_name("enButton")
        self.button_en.show()
        self.button_en.connect("clicked", self.enButton) 
    
        self.hButton.pack_start(self.button_de, False)
        self.hButton.pack_start(self.button_nl, False)
        self.hButton.pack_start(self.button_en, False)  
    
    
        table.attach(gtk.HBox(False, 0), 0, 1, 0, 1, 0,0,0,0)
        table.attach(self.hButton, 0, 1, 1, 2, 0,0,0,0)
        table.show()
    
        self.vbox.add(table)
    
        # Connect/disconnect  
        hbox = gtk.HBox(False, 0)
        self.vbox.pack_start(hbox, False)    
        hbox.set_border_width(10)
        hbox.pack_start(gtk.Label(), True, True, 0)
    
        # Connect
        self.button_call = gtk.Button("")
        self.button_call.set_name("callButton")
        self.button_call.connect("clicked", self.callButton)    
        #hbox.pack_start(self.button_call, False)
        align = gtk.Alignment(0.5)
        align.set_padding(0, 0, 44, 44)
        align.add(self.button_call)
        align.show()
        #hbox.pack_start(align, False)
        hbox.pack_start(align, False)
    
        # Disconnect
        self.button_disconnect = gtk.Button()
        self.button_disconnect.set_name("disconnectButton")
        self.button_disconnect.connect("clicked", self.exit)    
        hbox.pack_start(self.button_disconnect, False)   
    
        hbox.add(gtk.Label())    
        self.window.show_all()
        self.window.set_keep_above(True)
    

    EDIT:

    Error like: GtkWarning: Unable to locate theme engine in module_path: "pixmap",
      gtk.rc_parse_string(button_rc)
    
    Solution: 
    sudo apt-get install gtk2-engines-pixbuf