GTK3+ (3.14) drawing area on scrolledwindow - python

It makes a while that I've been trying to put a drawing area on a scrolled window. I've been reading articles about pygtk and C solutions but I think that they are not working in pyGobject.
I made a minimal example:
from gi.repository import Gtk, Gdk
import cairo
class Test(Gtk.Window):
def __init__(self):
Gtk.Window.__init__(self)
sw=Gtk.ScrolledWindow()
vp=Gtk.Viewport()
box=Gtk.VBox()
vp.set_size_request(100,100)
for i in range(3):
da=Gtk.DrawingArea()
da.connect("draw", self.draw, [0.3, 0.4, 0.6], da)
da.set_size_request(100,100)
box.add(da)
sw.add(vp)
vp.add(box)
self.add(sw)
self.show_all()
def draw(self, widget, event, color, da):
cr = widget.get_property('window').cairo_create()
cr.rectangle(0, 0, 100, 100)
cr.set_source_rgb(color[0], color[1], color[2])
cr.fill()
main=Test()
Gtk.main()
So the problem is that the drawing areas are not always rendered. This is for example, a gtk2 working code:
import gtk, cairo
class Test(gtk.Window):
def __init__(self):
gtk.Window.__init__(self)
sw=gtk.ScrolledWindow()
vp=gtk.Viewport()
box=gtk.VBox()
for i in range(3):
da=gtk.DrawingArea()
da.connect("expose-event", self.draw, [0.3, 0.4, 0.6], da)
box.add(da)
sw.add(vp)
vp.add(box)
self.add(sw)
self.show_all()
def draw(self, widget, event, color, da):
cr = widget.get_property('window').cairo_create()
cr.rectangle(0, 0, 100, 100)
cr.set_source_rgb(color[0], color[1], color[2])
cr.fill()
main=Test()
gtk.main()
Please do not point me to the following articles, I've already read them multiple times!
Gtk Forum: 1652
SO
AskUbuntu
pyGtk faq
I've added the viewport and a size_request, what else could be missing?
Thanks for the help!

by Emmanuele over the Gtk mailing list:
from gi.repository import Gtk, Gdk
import cairo
class Test(Gtk.Window):
def __init__(self):
Gtk.Window.__init__(self)
sw=Gtk.ScrolledWindow()
vp=Gtk.Viewport()
box=Gtk.VBox()
vp.set_size_request(100,100)
for i in range(3):
da=Gtk.DrawingArea()
da.connect("draw", self.draw, [0.3, 0.4, 0.6])
da.set_size_request(100,100)
box.add(da)
sw.add(vp)
vp.add(box)
self.add(sw)
self.show_all()
def draw(self, widget, cr, color):
cr.rectangle(0, 0, 100, 100)
cr.set_source_rgb(color[0], color[1], color[2])
cr.fill()
cr.queue_draw_area(0, 0, 100, 100)
return True
main=Test()
Gtk.main()
You should read the API reference for GTK+ 3.x:
https://developer.gnome.org/gtk/stable
as well as the Python API reference:
http://lazka.github.io/pgi-docs/#Gtk-3.0

You can add a damage region and force the redraw, I've slightly modified you example (sorry I could not resist fixing a couple of things) and add the queue_draw_area
I would strongly suggest avoid using a Gtk.DrawingArea and using a canvas widget instead, drawing on a canvas it's just much easier, GooCanvas is a good example but there are many others that you can use.
from gi.repository import Gtk, Gdk
import math, cairo
class Test(Gtk.Window):
def __init__(self):
Gtk.Window.__init__(self)
sw=Gtk.ScrolledWindow()
box=Gtk.VBox()
for i in range(3):
da=Gtk.DrawingArea()
da.connect("draw", self.draw, [0.3, 0.4, 0.6], da)
da.set_size_request(100,100)
box.pack_start(da, True, True, 10)
sw.add(box)
self.add(sw)
self.connect("destroy", Gtk.main_quit)
self.show_all()
def draw(self, widget, event, color, da):
cr = widget.get_property('window').cairo_create()
lg1 = cairo.LinearGradient(0.0, 0.0, 100, 0)
lg1.add_color_stop_rgb(0, color[0], color[1], color[2])
lg1.add_color_stop_rgb(1, color[0], color[1], color[2])
cr.rectangle(0, 0, 100, 100)
cr.set_source(lg1)
cr.fill()
da.queue_draw_area(0, 0, 100, 100)
main=Test()
Gtk.main()

Related

"Pixmap" migration on Gtk 3

I have a python 2 project using GTK2.
I am working on this project to migrate python 2 to python 3 and Gtk2 to Gtk 3.
I have a problem with the Gtk migration.
I want to replace “gdk. Pixmap” in my code.
I found this documentation:
Replace GdkPixmap by cairo surfaces The GdkPixmap object and related
functions have been removed. In the Cairo-centric world of GTK 3,
Cairo surfaces take over the role of pixmaps.
I have to use Cairo, but I don’t know how.
I spent a lot of time looking for examples in python. I didn’t find anything that matched my code.
Can someone help me, give me references?
Python2 :
class TraceView(gtk.DrawingArea):
…
def configure_event(self, widget, event):
_, _, width, height = widget.get_allocation()
self.pixmap = Pixmap(widget.window, width, height)
self.pixmap.draw_rectangle(widget.get_style().white_gc, True, 0, 0, width, height)
...
return True
def expose_event(self, widget, event):
x, y, width, height = event.area
widget.window.draw_drawable(widget.get_style().fg_gc[gtk.STATE_NORMAL],
self.pixmap, x, y, x, y, width, height)
self.maj_exposed()
...
return False
Python3 :
class TraceView(Gtk.DrawingArea):
…
def configure_event(self, widget, event):
width = widget.get_allocated_width()
height = widget.get_allocated_height()
self.pixmap = ?
self.pixmap. … ?
...
return True
def draw(self, widget, event):
  ???
self.maj_exposed()
...
return False
This is a minimal example of gtk3 program that draws a rectangle
import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk
class MinimalCairoTest(Gtk.Window):
def __init__(self):
super(MinimalCairoTest, self).__init__()
self.set_size_request(400, 400)
self.connect("destroy", Gtk.main_quit)
darea = Gtk.DrawingArea()
darea.connect("draw", self.__draw_cb)
self.add(darea)
self.show_all()
def __draw_cb(self, widget, cairo_context):
cairo_context.set_source_rgb(1.0, 0.0, 0.0)
cairo_context.rectangle(20, 20, 120, 80)
cairo_context.fill()
MinimalCairoTest()
Gtk.main()
You can find more examples about how to draw with cairo here https://seriot.ch/pycairo/ and documentation here https://pycairo.readthedocs.io/en/latest/reference/context.html

How to draw a figure on mouse click in qtapplication

I'm new to Pyqt5 and writing applications with it in Python so forgive me if this is a very simple question but I'm having trouble drawing ellipses in my program. I want to draw one by wherever a click occurs. Here is my code:
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import *
class Window(QGraphicsView):
def __init__(self):
super().__init__()
self.scene = QGraphicsScene()
self.setScene(self.scene)
# p.setTransform(transform)
self.button = QPushButton("Draw")
self.button.setCheckable(True)
self.button.setGeometry(0, 0, 100, 30)
self.scene.addWidget(self.button)
# self.setMouseTracking(True)
width, height = 1000, 1000
self.setFixedSize(width, height);
self.setSceneRect(0, 0, width, height);
self.fitInView(0, 0, width, height, Qt.KeepAspectRatio);
self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.show()
def mousePressEvent(self, event):
if self.button.isChecked():
x = event.x()
y = event.y()
print(x, y)
ellipse = QGraphicsEllipseItem(x, y, 50, 20)
self.scene.addItem(ellipse)
The issue I'm having is I think the mousePressEvent function isn't allowing me to click on my button to enable drawing but the part I'm really not sure about is what is going on in the mousePressEvent. It seems as though it's getting the (x, y) coordinates within the QGraphicsView object but my ellipses are getting drawn in strange spots far away from wherever is clicked in my application when it's open.
You should not override the mousePressEvent as you remove the default behavior such as sending the event to the button. On the other hand you have to convert the coordinates of the view to the coordinates of the scene.
self.proxy_widget = self.scene.addWidget(self.button)
def mousePressEvent(self, event):
super().mousePressEvent(event)
vp = event.pos()
if self.proxy_widget in self.items(vp):
return
if self.button.isChecked():
ellipse = QGraphicsEllipseItem(0, 0, 50, 20)
self.scene.addItem(ellipse)
sp = self.mapToScene(vp)
ellipse.setPos(sp)

how do I create a circular shadow effect with cairo?

I'm trying to enhance the graphical look of my application by giving the drawing a subtle shadow effect. I'm using python and cairo drawing.
With the example code below I can draw an outer circle and an inner circle with the picture as shown.
What I want to do is replace that outer circle with a shadow effect.
I guess that I need to use a lineargradient or a radialgradient but I can't find a good example for what I want to achieve.
Anybody point me in the correct direction please?
from gi.repository import Gtk
from gi.repository import Gdk
from gi.repository import GdkPixbuf
import cairo
import math
class MyWindow (Gtk.Window):
def __init__(self):
Gtk.Window.__init__(self, title='MyWindow')
darea = Gtk.DrawingArea()
darea.connect('draw', self.on_draw)
self.add(darea)
self.width, self.height = self.get_size()
filename = "/usr/share/backgrounds/Thingvellir_by_pattersa.jpg"
if self.width > self.height:
self.width = self.height
else:
self.height = self.width
self.width = self.width
self.height = self.height
self.pixbuf = GdkPixbuf.Pixbuf.new_from_file(filename)
self.pixbuf = self.pixbuf.scale_simple(self.width, self.width, GdkPixbuf.InterpType.BILINEAR)
def on_draw(self, widget, cr):
w = self.width
h = self.height
# draw outer circle
cr.translate(w/2, h/2)
cr.set_line_width(10)
cr.set_source_rgb(0.7, 0.2, 0.0)
cr.arc(0, 0, w/2, 0, 2*math.pi)
cr.stroke_preserve()
cr.stroke()
# now reset the origin and set the picture to be the source
cr.translate(-w/2, -h/2)
Gdk.cairo_set_source_pixbuf(cr, self.pixbuf, 0, 0)
# now reset the origin again and this time clip the pixbuf
cr.translate(w/2, h/2)
cr.arc(0, 0, w/2.2, 0, 2*math.pi) # was 2.2
cr.stroke_preserve()
cr.clip()
cr.paint()
win = MyWindow()
win.connect('delete-event', Gtk.main_quit)
win.show_all()
Gtk.main()
Using Ubuntu 14.04 - Gtk+3.10, python3

Python GTK - DrawingArea with opacity

I'm working on a transparent window which includes a DrawingArea widget, which gets on top with a solid background color, but I want to keep it transparent. I've tried everything, unfortunately the docs are a bit dated (with PyGTK on the top results). Other things I've done is connecting its draw event as I'm doing it with the window, but with no success.
Of course I need the square to be shown, so I just need the background color to transparent. I've also tried with modify_bg, but I only manage to set it to solid colors.
Here's what I have so far.
#!/usr/bin/env python
from gi.repository import Gtk, Gdk
import cairo
class GWin (Gtk.Window):
def __init__(self):
super(GWin, self).__init__()
self.set_position(Gtk.WindowPosition.CENTER)
self.screen = self.get_screen()
self.visual = self.screen.get_rgba_visual()
if self.visual != None and self.screen.is_composited():
self.set_visual(self.visual)
self.connect("draw", self.on_win_draw)
self.set_app_paintable(True)
self.show_all()
self.draw_area = Gtk.DrawingArea()
self.draw_area.add_events(Gdk.EventMask.BUTTON_PRESS_MASK)
self.draw_area.connect('draw', self.begin_draw)
self.draw_area.show()
self.add(self.draw_area)
def begin_draw(self, draw_area, cairo_context):
cairo_context.rectangle(20, 20, 120, 120)
cairo_context.stroke()
def on_win_draw(self, widget, cr):
cr.set_source_rgba(1, 1, 1, 0.1)
cr.set_operator(cairo.OPERATOR_SOURCE)
cr.paint()
cr.set_operator(cairo.OPERATOR_OVER)
win = GWin()
win.connect('delete-event', Gtk.main_quit)
Gtk.main()
You need to set the cairo.Context source rgba before creating the rectangle. Here is the code, the edited line marked with ### ADDED THIS LINE:
#!/usr/bin/env python
from gi.repository import Gtk, Gdk
import cairo
class GWin (Gtk.Window):
def __init__(self):
super(GWin, self).__init__()
self.set_position(Gtk.WindowPosition.CENTER)
self.screen = self.get_screen()
self.visual = self.screen.get_rgba_visual()
if self.visual != None and self.screen.is_composited():
self.set_visual(self.visual)
self.connect("draw", self.on_win_draw)
self.set_app_paintable(True)
self.show_all()
self.draw_area = Gtk.DrawingArea()
self.draw_area.add_events(Gdk.EventMask.BUTTON_PRESS_MASK)
self.draw_area.connect('draw', self.begin_draw)
self.draw_area.show()
self.add(self.draw_area)
def begin_draw(self, draw_area, cairo_context):
cairo_context.set_source_rgba(1, 1, 1, 1) ### ADDED THIS LINE
cairo_context.rectangle(20, 20, 120, 120)
cairo_context.stroke()
def on_win_draw(self, widget, cr):
cr.set_source_rgba(1, 1, 1, 0.1)
cr.set_operator(cairo.OPERATOR_SOURCE)
cr.paint()
cr.set_operator(cairo.OPERATOR_OVER)
win = GWin()
win.connect('delete-event', Gtk.main_quit)
Gtk.main()

How can i use gtk3 and opengl together?

I have been looking into how to mix gtk3 and opengl, in gtk2 you could use gtkglext but this is not packaged any where meaning any software developed would not end up in software repositories.
Managed to piece this together seems to work quite well tested on two laptops on ubuntu 13.04, posting here incase i ever need it in the future :)
#!/usr/bin/env python
# [SNIPPET_NAME: gtk3 opengl example]
# [SNIPPET_CATEGORIES: opengl]
# [SNIPPET_TAGS: opengl, gtk3]
# [SNIPPET_DESCRIPTION: using gtk3 library lets draw using opengl]
# [SNIPPET_AUTHOR: Oliver Marks ]
# [SNIPPET_LICENSE: GPL]
import sys
from OpenGL.GL import *
from OpenGL.GLU import *
from OpenGL import GLX
from OpenGL.raw._GLX import struct__XDisplay
from OpenGL import GL
from ctypes import *
import Xlib
from Xlib.display import Display
from gi.repository import Gtk, GdkX11, Gdk
class gtkgl:
""" these method do not seem to exist in python x11 library lets exploit the c methods """
xlib = cdll.LoadLibrary('libX11.so')
xlib.XOpenDisplay.argtypes = [c_char_p]
xlib.XOpenDisplay.restype = POINTER(struct__XDisplay)
xdisplay = xlib.XOpenDisplay("")
display = Xlib.display.Display()
attrs = []
xwindow_id = None
width = height = 200
def __init__(self):
""" lets setup are opengl settings and create the context for our window """
self.add_attribute(GLX.GLX_RGBA, True)
self.add_attribute(GLX.GLX_RED_SIZE, 1)
self.add_attribute(GLX.GLX_GREEN_SIZE, 1)
self.add_attribute(GLX.GLX_BLUE_SIZE, 1)
self.add_attribute(GLX.GLX_DOUBLEBUFFER, 0)
xvinfo = GLX.glXChooseVisual(self.xdisplay, self.display.get_default_screen(), self.get_attributes())
configs = GLX.glXChooseFBConfig(self.xdisplay, 0, None, byref(c_int()))
self.context = GLX.glXCreateContext(self.xdisplay, xvinfo, None, True)
def add_attribute(self, setting, value):
"""just to nicely add opengl parameters"""
self.attrs.append(setting)
self.attrs.append(value)
def get_attributes(self):
""" return our parameters in the expected structure"""
attrs = self.attrs + [0, 0]
return (c_int * len(attrs))(*attrs)
def configure(self, wid):
""" """
self.xwindow_id = GdkX11.X11Window.get_xid(wid)
if(not GLX.glXMakeCurrent(self.xdisplay, self.xwindow_id, self.context)):
print 'failed'
glViewport(0, 0, self.width, self.height)
def draw_start(self):
"""make cairo context current for drawing"""
if(not GLX.glXMakeCurrent(self.xdisplay, self.xwindow_id, self.context)):
print "failed"
def draw_finish(self):
"""swap buffer when we have finished drawing"""
GLX.glXSwapBuffers(self.xdisplay, self.xwindow_id)
def test(self):
"""Test method to draw something so we can make sure opengl is working and we can see something"""
self.draw_start()
glClearColor(0.0, 0.0, 0.0, 0.0)
glClear(GL_COLOR_BUFFER_BIT)
glBegin(GL_TRIANGLES)
glIndexi(0)
glColor3f(1.0, 0.0, 0.0)
glVertex2i(0, 1)
glIndexi(0)
glColor3f(0.0, 1.0, 0.0)
glVertex2i(-1, -1)
glIndexi(0)
glColor3f(0.0, 0.0, 1.0)
glVertex2i(1, -1)
glEnd()
self.draw_finish()
class gui():
glwrap = gtkgl()
def __init__(self):
self.window = Gtk.Window()
self.window.realize()
self.window.resize(self.glwrap.width, self.glwrap.height)
self.window.set_resizable(True)
self.window.set_reallocate_redraws(True)
self.window.set_title("GTK3 with opengl")
self.window.connect('delete_event', Gtk.main_quit)
self.window.connect('destroy', lambda quit: Gtk.main_quit())
self.drawing_area = Gtk.DrawingArea()
self.drawing_area.connect('configure_event', self.on_configure_event)
self.drawing_area.connect('draw', self.on_draw)
self.drawing_area.set_double_buffered(False)
self.drawing_area.set_size_request(self.glwrap.width, self.glwrap.height)
self.window.add(self.drawing_area)
self.window.show_all()
def on_configure_event(self, widget, event):
self.glwrap.configure(widget.get_window())
return True
def on_draw(self, widget, context):
self.glwrap.test()
def main():
g = gui()
Gtk.main()
if __name__ == '__main__':
main()
You can always pack gtkglext yourself. Also, you might want to use Clutter for OpenGl interaction inside a Gtk+ widgets hierarchy.

Categories