how do I overlay an image on webview using python Gtk and webkit

Question

I need help on how to overlay an image on a webview. I want to be able to place a button or an image on a webpage (a webview object) So I have the following

import gtk
import webkit
...
win=gtk.Window()
page=webkit.Webview()
page.open("http://www.google.com")
image=gtk.Image()
image.set_from_file("HappyFish.jpg")
container=gtk.Fixed()
win.add(container)
container.add(page)
container.add(image)
win.show_all()
gtk.main()

Everything works fine except the page covers the image or the button (even if I place the button after the page in the container), I need it such that I can have the image on top of the web page ... much like a logo on the conner of the page. I don't want to convert the page to an image and superimpose the two images one on top of the other, it needs to remain interactive. I appreciate any help on this subject.

Answer 1

GTK+3 has a dedicated API for this: GtkOverlay (more specifically: it was added in version 3.2).

From the code you have provided it seems as though you are using PyGTK and GTK+2 so it may be worth considering moving to the new version of the toolkit for this functionality.

The gtk3-demo application provides a good demonstration of the overlay. This application is held in different packages based on your distribution (I'm not sure whether it is available on OSX/Windows) so you might need to do a bit of looking around to find the correct package for it.

As an example of what this might look like in PyGObject and GTK3 (note: some changes made to accomodate changes to the Webkit and GTK api):

from gi.repository import Gtk, WebKit
...
win = Gtk.Window()
overlay = Gtk.Overlay()
page = WebKit.WebView()
page.load_uri("http://www.google.com")
overlay.add(page)
image = Gtk.Image()
image.set_from_file("HappyFish.jpg")
image.set_halign(Gtk.Align.START)
image.set_valign(Gtk.Align.START)
overlay.add_overlay(image)
win.add(overlay)
win.show_all()
win.connect('destroy', Gtk.main_quit)
Gtk.main()

Answer 2

Doubt the op still has any use for this, so I'll just leave this for anyone who happens to be stuck with GTK that does not have the overlay feature:

    self.your_image = gtk.Image()
    #this image will be the top layer
    self.image_to_overlay = GdkPixbuf.Pixbuf.new_from_file("try_some_image_file")
    #this image will be the bottom image
    self.bottom_image = GdkPixbuf.Pixbuf.new_from_file("some_base_image")
    self.image_to_overlay.composite(self.bottom_image,
    0,0,
    self.bottom_image.props.width,self.bottom_image.props.height,
    0,0,
    1,1,
    GdkPixbuf.InterpType.BILINEAR,
    250)
    self.your_image.set_from_pixbuf(self.bottom_image)