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

StackOverflow https://stackoverflow.com/questions/13698514

Frage

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()
War es hilfreich?

Lösung 2

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

Andere Tipps

You're missing the arguments of GtkBox::pack_start that define how the available space should be filled. Use expand = False for your label. Make sure that your size request also gives enough space to your image.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top