I'm running into a problem that makes me feel like I've been beating my head against a wall. I'm trying to get multiple (2 for starters) photoimages to be added to a tkinter canvas. Here is the code below:
def build_frame(screenHeight, screenWidth):
canvas = Canvas(root, bg = 'blue', height = screenHeight, width = screenWidth)
player = create_random_player()
enemy = create_random_enemy()
display_player_image(canvas, player)
display_enemy_image(canvas, enemy)
bind_all_keys(canvas, player)
canvas.pack()
def display_player_image(canvas, player):
tkImage = ImageTk.PhotoImage(Image.open(player.playerImgPath))
player.playerId = canvas.create_image(player.playerPositionX, player.playerPositionY, image = tkImage, anchor = NE)
player.playerImg = tkImage
def display_enemy_image(canvas, enemy):
tkImage = ImageTk.PhotoImage(Image.open(enemy.enemyImgPath))
enemy.enemyId = canvas.create_image(enemy.enemyPositionX, enemy.enemyPositionY, image = tkImage, anchor = NE)
enemy.enemyImg = tkImage
def create_random_player():
return Player(0, randint(0,9), randint(0,9), randint(0,9), PLAYER_IMAGE_PATH, 50, 0)
def create_random_enemy():
return Enemy(0, randint(0,9), randint(0,9), randint(0,9), ENEMY_IMAGE_PATH, 150, 150)
I've made sure that I store a reference to the image and I know that the images aren't at the same location but I can't understand why the second one isn't appearing. I've even put in print statements to check to make sure the image is being created and it is at the given coordinates along with an ID that I can use to identify it.
Related
I'm working on an annotation tool for some images and decided to use GTK for the task. I have a Gtk.DrawingArea() nested inside Gtk.Viewport() which is nested in Gtk.ScrolledWindow() to enable scrolling of the drawing area. The drawing area contains an image and shapes are drawn on top of the image using Cairo on each mouse click event.
If I understand correctly, scrolling by default causes a redrawing of Gtk.DrawingArea() which makes all of shapes disappear. Is there any way (other than keeping a list of coordinates and redrawing every shape on each scroll event) to maintain those shapes?
import gi
import math
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk, Gdk, GdkPixbuf
class MainWindow(Gtk.Window):
def __init__(self):
Gtk.Window.__init__(self, title = "Test")
self.drag = False
self.drag_x = 0
self.drag_y = 0
self.pos = []
viewport = Gtk.Viewport()
self.darea = Gtk.DrawingArea()
self.darea.connect("draw", self.expose)
self.pixbuf = GdkPixbuf.Pixbuf.new_from_file("anntool/test.jpg")
self.darea.set_size_request(self.pixbuf.get_width(), self.pixbuf.get_height());
self.maximize() # maximize window on load
grid = Gtk.Grid()
self.add(grid)
scrolled = Gtk.ScrolledWindow()
scrolled.set_hexpand(True)
scrolled.set_vexpand(True)
scrolled.set_kinetic_scrolling(True)
self.v_scroll = scrolled.get_vadjustment()
self.h_scroll = scrolled.get_hadjustment()
scrolled.add_events(Gdk.EventMask.POINTER_MOTION_MASK | Gdk.EventMask.BUTTON_PRESS_MASK | Gdk.EventMask.BUTTON_RELEASE_MASK)
scrolled.connect("button-release-event", self.release)
scrolled.connect("button-press-event", self.click)
scrolled.connect("motion-notify-event", self.mousemove)
# scrolled.connect("scroll_event", self.scroll)
viewport.add(self.darea)
scrolled.add(viewport)
grid.add(scrolled)
def click(self, widget, event):
if (event.button == 1):
cr = self.darea.get_parent_window().cairo_create()
x = self.h_scroll.get_value() + event.x
y = self.v_scroll.get_value() + event.y
cr.arc(x, y, 10, 0, 2 * math.pi)
cr.set_source_rgba(0.0, 0.6, 0.0, 1)
cr.fill()
if (event.button == 2):
self.drag = True
self.drag_x = event.x
self.drag_y = event.y
self.pos = [self.h_scroll.get_value(), self.v_scroll.get_value()]
def release(self, widget, event):
self.drag = False
default = Gdk.Cursor(Gdk.CursorType.ARROW)
widget.get_window().set_cursor(default)
def mousemove(self, widget, event):
if self.drag:
self.h_scroll.set_value(self.pos[0] + self.drag_x - event.x)
self.v_scroll.set_value(self.pos[1] + self.drag_y - event.y)
hand = Gdk.Cursor(Gdk.CursorType.HAND1)
widget.get_window().set_cursor(hand)
def scroll(self, widget, event):
print("scrolled")
def expose(self, widget, event):
Gdk.cairo_set_source_pixbuf(event, self.pixbuf, 0, 0)
event.paint()
win = MainWindow()
win.connect("destroy", Gtk.main_quit)
win.show_all()
Gtk.main()
As Uli Schlachter pointed out, redraw is executed on each scroll event, therefore one need to keep track of added points (e.g. with a list) and redraw each point in expose() function in the code above.
I have adapted an image viewer (see code below) to allow me to get pixel information from a loaded image. You load an image using the 'Load image' button, then you can zoom in and out using the scroll wheel, and pan using mouse left click and drag. When you press the button 'Enter pixel info mode', the dragging is disabled (you can still zoom) and clicking on the image will give the pixel coordinate (integer pixel indices) and grayscale value of the pixel.
The problem is that if you rotate the image, by pressing the 'Rotate image' button, using the pixel info button no longer gives the correct pixel info. I imagine that the mapToScene method is not the right thing to use on a rotated image but can find no other way to do it. I have tried various things, such as using toImage() on the rotated pixmap and then replacing the original image with this, but nothing seems to work. What would be the best way to resolve this?
The code:
from PyQt4 import QtCore, QtGui
class PhotoViewer(QtGui.QGraphicsView):
photoClicked = QtCore.pyqtSignal(QtCore.QPoint)
def __init__(self, parent):
super(PhotoViewer, self).__init__(parent)
self._zoom = 0
self._empty = True
self._scene = QtGui.QGraphicsScene(self)
self._photo = QtGui.QGraphicsPixmapItem()
self._scene.addItem(self._photo)
self.setScene(self._scene)
self.setTransformationAnchor(QtGui.QGraphicsView.AnchorUnderMouse)
self.setResizeAnchor(QtGui.QGraphicsView.AnchorUnderMouse)
self.setVerticalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
self.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
self.setBackgroundBrush(QtGui.QBrush(QtGui.QColor(30, 30, 30)))
self.setFrameShape(QtGui.QFrame.NoFrame)
def fitInView(self):
rect = QtCore.QRectF(self._photo.pixmap().rect())
if not rect.isNull():
unity = self.transform().mapRect(QtCore.QRectF(0, 0, 1, 1))
self.scale(1 / unity.width(), 1 / unity.height())
viewrect = self.viewport().rect()
scenerect = self.transform().mapRect(rect)
factor = min(viewrect.width() / scenerect.width(),
viewrect.height() / scenerect.height())
self.scale(factor, factor)
self.centerOn(rect.center())
self._zoom = 0
def hasPhoto(self):
return not self._empty
def toggleDragMode(self):
if self.dragMode() == QtGui.QGraphicsView.ScrollHandDrag:
self.setDragMode(QtGui.QGraphicsView.NoDrag)
elif self.hasPhoto():
self.setDragMode(QtGui.QGraphicsView.ScrollHandDrag)
def setPhoto(self, pixmap=None):
self._zoom = 0
if pixmap and not pixmap.isNull():
self._empty = False
self.setDragMode(QtGui.QGraphicsView.ScrollHandDrag)
self._photo.setPixmap(pixmap)
self.fitInView()
else:
self._empty = True
self.setDragMode(QtGui.QGraphicsView.NoDrag)
self._photo.setPixmap(QtGui.QPixmap())
def wheelEvent(self, event):
if not self._photo.pixmap().isNull():
if event.delta() > 0:
factor = 1.25
self._zoom += 1
else:
factor = 0.8
self._zoom -= 1
if self._zoom > 0:
self.scale(factor, factor)
elif self._zoom == 0:
self.fitInView()
else:
self._zoom = 0
def mousePressEvent(self, event):
if (self.hasPhoto() and
self.dragMode() == QtGui.QGraphicsView.NoDrag and
self._photo.isUnderMouse()):
self.photoClicked.emit(QtCore.QPoint(event.pos()))
super(PhotoViewer, self).mousePressEvent(event)
class Window(QtGui.QWidget):
def __init__(self):
super(Window, self).__init__()
self.viewer = PhotoViewer(self)
# 'Load image' button
self.btnLoad = QtGui.QToolButton(self)
self.btnLoad.setText('Load image')
self.btnLoad.clicked.connect(self.loadImage)
# Button to change from drag/pan to getting pixel info
self.btnPixInfo = QtGui.QToolButton(self)
self.btnPixInfo.setText('Enter pixel info mode')
self.btnPixInfo.clicked.connect(self.pixInfo)
self.editPixInfo = QtGui.QLineEdit(self)
self.editPixInfo.setReadOnly(True)
# Button to rotate image by 10 degrees
self.btnRotate = QtGui.QToolButton(self)
self.btnRotate.setText('Rotate image')
self.btnRotate.clicked.connect(self.rotateImage)
self.viewer.photoClicked.connect(self.photoClicked)
# Arrange layout
VBlayout = QtGui.QVBoxLayout(self)
VBlayout.addWidget(self.viewer)
HBlayout = QtGui.QHBoxLayout()
HBlayout.setAlignment(QtCore.Qt.AlignLeft)
HBlayout.addWidget(self.btnLoad)
HBlayout.addWidget(self.btnRotate)
HBlayout.addWidget(self.btnPixInfo)
HBlayout.addWidget(self.editPixInfo)
VBlayout.addLayout(HBlayout)
def loadImage(self):
self.viewer.setPhoto(QtGui.QPixmap('pic.jpg'))
def pixInfo(self):
self.viewer.toggleDragMode()
def rotateImage(self):
self.viewer._photo.setRotation(10)
def photoClicked(self, pos):
pos = self.viewer.mapToScene(pos)
# p.s. I realise the following lines are probably a very convoluted way of getting
# a grayscale value from RGB, but I couldn't make it work any other way I tried
rot_image = self.viewer._photo.pixmap().toImage().pixel(pos.x(), pos.y())
colour = QtGui.QColor.fromRgb(rot_image)
gsval = QtGui.qGray(colour.red(), colour.green(), colour.blue())
self.editPixInfo.setText('X:%d, Y:%d Grayscale: %d' % (pos.x(), pos.y(), gsval))
if __name__ == '__main__':
import sys
app = QtGui.QApplication(sys.argv)
window = Window()
window.setGeometry(500, 300, 800, 600)
window.show()
sys.exit(app.exec_())
You need to map the scene coordinates to item coordinates:
pos = self.viewer._photo.mapFromScene(self.viewer.mapToScene(pos))
I tried to outputting images in label. There are two images, which need to appear in labels several times. And they have appeared only once - in the latter labels.
class Application(tk.Frame):
def __init__(self, master=None):
#some actions
def ShowImages(self, frame_in, type_img, place_img):
print type_img
print place_img
print frame_in
self.image = Image.open(type_img + ".png")
self.image = self.image.resize((20, 20), Image.ANTIALIAS) #The (250, 250) is (height, width)
self.photo = ImageTk.PhotoImage(self.image)
label = tk.Label(frame_in, image=self.photo, relief='sunken', borderwidth=2)
label.pack(side="right")
self.image2 = Image.open(place_img + ".png")
self.image2 = self.image2.resize((20, 20), Image.ANTIALIAS) #The (250, 250) is (height, width)
self.photo2 = ImageTk.PhotoImage(self.image2)
label = tk.Label(frame_in, image=self.photo2, relief='sunken', borderwidth=2)
label.pack(side="right")
def createWidgets(self, dict_of_data):
frame = tk.Frame(self, relief='sunken')
frame.grid(row=0, column=self.index, sticky="WN")
frame_in = tk.Frame(frame)
frame_in.grid(row=0, sticky="WE", column=self.index)
header = tk.Label(frame_in, anchor="nw", justify="left", text="Игра: ")
header.pack(expand=True, fill="x", side="left")
self.ShowImages(frame_in, dict_of_data["type"], dict_of_data["place_type"])
#some other code
if __name__ == "__main__":
app = Application()
app.master.title('Sample application')
#All that data is not real data of my script
app.createWidgets({'name':"", 'state':"", "type":"", "date":{"start":"", 'end':""}, 'duration':{'days':'', 'hours':''}, 'site':'', 'rank':''})
app.createWidgets({'name':"", 'state':"", "type":"", "date":{"start":"", 'end':""}, 'duration':{'days':'', 'hours':''}, 'site':'', 'rank':''})
app.createWidgets({'name':"", 'state':"", "type":"", "date":{"start":"", 'end':""}, 'duration':{'days':'', 'hours':''}, 'site':'', 'rank':''})
app.mainloop()
So, in two words: I tried to invoke function ShowImages three times, and i want to see 6 images (3 x 2 images), but i see only the last 2. Names of images are identical.
I think this is trouble with opening images. Maybe there is some rule, how i can use one image several times.
P. S. Sorry for my english. I didn't know, how i need to describe my trouble. Thanks.
I have solved my problem!
Thanks #FabienAndre and THIS post.
I just realized, that every time i called function, old value of self.photo and self.photo2 variables are cleared and images disappeared.
For solve this trouble, i prepare all images i needed in Class constructor, and every time just use same value in variable.
class Application(tk.Frame):
def __init__(self, master=None):
tk.Frame.__init__(self, master)
self.initImages() #Prepare images
self.master.resizable(width=False, height=False)
self.index = 0
self.grid()
def initImages(self):
self.images = {}
buf = Image.open("Classic.png")
buf = buf.resize((20, 20), Image.ANTIALIAS) #The (250, 250) is (height, width)
self.images['Classic'] = ImageTk.PhotoImage(buf)
buf = Image.open("Jeopardy.png")
buf = buf.resize((20, 20), Image.ANTIALIAS) #The (250, 250) is (height, width)
self.images['Jeopardy'] = ImageTk.PhotoImage(buf)
buf = Image.open("On-site.png")
buf = buf.resize((20, 20), Image.ANTIALIAS) #The (250, 250) is (height, width)
self.images['On-site'] = ImageTk.PhotoImage(buf)
buf = Image.open("On-line.png")
buf = buf.resize((20, 20), Image.ANTIALIAS) #The (250, 250) is (height, width)
self.images['On-line'] = ImageTk.PhotoImage(buf)
def ShowImages(self, frame_in, type_img, place_img):
label = tk.Label(frame_in, image=self.images[type_img])
label.pack(side="right")
label = tk.Label(frame_in, image=self.images[place_img])
label.pack(side="right")
def createWidgets(self, dict_of_data):
frame = tk.Frame(self, relief='sunken')
frame.grid(row=0, column=self.index, sticky="WN")
frame_in = tk.Frame(frame)
frame_in.grid(row=0, sticky="WE", column=self.index)
#some other code here
P.S. I know, my english is ridiculous, but i have no practice... Sorry
Im very new to Python(2.7) im learning GUI design(Tkinter) and keep running into different syntax/no call method/global name not defined errors when trying to implement a simple label text change from a Entry object on button click. Can someone show me the correct syntax for the action
from Tkinter import *
class Part3:
def __init__(self, parent):
GUIFrame =Frame(parent,width= 300, height=200)
GUIFrame.pack(expand = False, anchor = CENTER)
entry = Entry(text="enter your choice")
entry.place(x=65, y = 10)
self.test = StringVar()
self.test.set('''Hi, I'm a Label :)''')
self.Label1 = Label(parent, textvariable = self.test)
self.Label1.place(x = 85, y = 100)
self.Button2 = Button(parent, text='edit',command=self.LabelChange)
self.Button2.place(x= 80, y = 60)
self.Button3 = Button(parent, text='exit', command= parent.quit)
self.Button3.place(x= 160, y = 60)
def LabelChange(self):
test = self.entry.get()
self.Label1(test)
root = Tk()
MainFrame =Part3(root)
root.title('Input Test')
root.mainloop()
The Idea being on the 'edit' (button2) click, the text of Label1 is changed to the text of entry.
Try:
self.entry = Entry(text="enter your choice")
...
test = self.entry.get()
self.test.set(test)
I know most tutorials give examples using textvariables, but in most cases you don't need them. You can get and set the values in the widget without using textvariable. Textvariables are mostly useful for doing traces on variables. Variable traces are a somewhat advanced technique that you will rarely need.
from Tkinter import *
class Part3:
def __init__(self, parent):
GUIFrame =Frame(parent,width= 300, height=200)
GUIFrame.pack(expand = False, anchor = CENTER)
self.entry = Entry(text="enter your choice") # this needs to be in self
self.entry.place(x=65, y = 10)
self.test = StringVar()
self.test.set('''Hi, I'm a Label :)''')
self.Label1 = Label(parent, textvariable = self.test)
self.Label1.place(x = 85, y = 100)
self.Button2 = Button(parent, text='edit',command=self.LabelChange)
self.Button2.place(x= 80, y = 60)
self.Button3 = Button(parent, text='exit', command= parent.quit)
self.Button3.place(x= 160, y = 60)
def LabelChange(self):
self.test.set(self.entry.get())
root = Tk()
MainFrame =Part3(root)
root.title('Input Test')
root.mainloop()
root.destroy()
Use can use a .after command. For example:
Lbl = Label(text='Hi')
def change():
Lbl.after(3000, lambda: Lbl.config(text="hola")
# Or you can use the one below to remove delay.
Lbl.config(text='hola')
return change
Btn = Button(command=change ())
Lbl.pack()
Btn.pack()
I'm writing simple GUI using wxPyhon and faced some problems.
My application does simple things: it draws triangle on the form and rotates it when user clicks arrow buttons or drags a mouse cursor over the form.
THe problems I see now are following:
1. Then I drag a mouse sursor fast the triangle rotates with keeping old image visible for a short time. When keeping moving a cursor fast for a while the drawing on the form is looking like 2 or 3 triangles.
2. If I expand the form to entire size of the screen the triangle moves unsmoothly, with small jumps from old appearance to a new one. I looked at coordinates of a mouse cursor during that rotating and noticed that they are tracked with gaps. Friend of mine said me that it is because I redraw the entire window of the application every time I wand to rotate the triangle a little bit. And that's why it works slowly and it slow down the tracking of a mouse cursor.
To refresh the view I'm using wx.Panel.Refresh() method. As drawing context I'm using wx.BufferedDC()
Please tell me how to draw CORRECTLY dynamicaly changing pictures/drawings on the wxPython forms, especially the way I make in that application.
I could place my code here, but it's too long. So if I must tell something more about my case - ask me please, I will answer.
Thanks !
class SimpleGraphics(wx.Panel):
def __init__(self, parent, size=(50, 50)):
super(SimpleGraphics, self).__init__(parent,
size=size,
style=wx.NO_BORDER)
self.color = "Black"
self.thickness = 2
self.pen = wx.Pen(self.color, self.thickness, wx.SOLID)
self.MARGIN = 1 #px
self.points = [[0.0, 0.5], [0.5, 0.0], [-0.5, -0.5]]
self.pos = (0, 0)
self.cur_vector = Vector2D(1, 1)
self.InitBuffer()
self.Bind(wx.EVT_SIZE, self.OnSize)
self.Bind(wx.EVT_IDLE, self.OnIdle)
self.Bind(wx.EVT_KEY_DOWN, self.OnKeyArrow)
# MOUSE TRACKING
self.Bind(wx.EVT_LEFT_DOWN, self.OnLeftDown)
self.Bind(wx.EVT_LEFT_UP, self.OnLeftUp)
self.Bind(wx.EVT_MOTION, self.OnMotion)
self.Bind(wx.EVT_PAINT, self.OnPaint)
def InitBuffer(self):
self.client_size = self.GetClientSize()
self.buffer = wx.EmptyBitmap(self.client_size.width, self.client_size.height)
dc = wx.BufferedDC(None, self.buffer)
dc.SetBackground(wx.Brush(self.GetBackgroundColour()))
dc.Clear()
self.DrawImage(dc)
self.reInitBuffer = False
def OnSize(self, event):
self.reInitBuffer = True
def repaint_the_view(self):
self.InitBuffer()
self.Refresh()
def OnIdle(self, event):
if self.reInitBuffer:
self.repaint_the_view()
def OnKeyArrow(self, event):
key_code = event.GetKeyCode()
if key_code == wx.WXK_LEFT:
self.rotate_points(degrees_to_rad(5))
elif key_code == wx.WXK_RIGHT:
self.rotate_points(degrees_to_rad(-5))
self.repaint_the_view()
event.Skip()
def OnLeftDown(self, event):
# get the mouse position and capture the mouse
self.pos = event.GetPositionTuple()
self.cur_vector = create_vector2d(self.pos[0], self.pos[1],
self.client_size.width / 2,
self.client_size.height / 2)
self.CaptureMouse()
def OnLeftUp(self, event):
#release the mouse
if self.HasCapture():
self.ReleaseMouse()
def OnMotion(self, event):
if event.Dragging() and event.LeftIsDown():
newPos = event.GetPositionTuple()
new_vector = create_vector2d(newPos[0], newPos[1],
self.client_size.width / 2,
self.client_size.height / 2)
if new_vector.lenth() > 0.00001:
c = cos_a(self.cur_vector, new_vector)
s = sin_a(self.cur_vector, new_vector)
rot_matr = rotation_matrix(s, c)
self.rotate_points(rot_matr=rot_matr)
dc = wx.BufferedDC(wx.ClientDC(self), self.buffer) # this line I've added after posting the question
self.repaint_the_view()
self.cur_vector = new_vector
event.Skip()
def OnPaint(self, event):
wx.BufferedPaintDC(self, self.buffer)
def DrawImage(self, dc):
dc.SetPen(self.pen)
new_points = self.convetr_points_to_virtual()
dc.DrawPolygon([wx.Point(x, y) for (x, y) in new_points])
def to_x(self, X_Log):
X_Window = self.MARGIN + (1.0 / 2) * (X_Log + 1) * (self.client_size.width - 2 * self.MARGIN)
return int(X_Window)
def to_y(self, Y_Log):
Y_Window = self.MARGIN + (-1.0 / 2) * (Y_Log - 1) * (self.client_size.height - 2 * self.MARGIN)
return int(Y_Window)
def convetr_points_to_virtual(self):
return [(self.to_x(x), self.to_y(y)) for (x, y) in self.points]
def rotate_points(self, angle_in_degrees=None, rot_matr=None):
if angle_in_degrees is None:
self.points = [rotate_point(x, y , rotator_matrix=rot_matr) for (x, y) in self.points]
else:
self.points = [rotate_point(x, y , angle_in_degrees) for (x, y) in self.points]
class SimpleGraphicsFrame(wx.Frame):
def __init__(self, parent, *args, **kwargs):
wx.Frame.__init__(self, parent, *args, **kwargs)
# Attributes
self.panel = SimpleGraphics(self)
# Layout
sizer = wx.BoxSizer(wx.VERTICAL)
sizer.Add(self.panel, 1, wx.EXPAND)
self.SetSizer(sizer)
class SimpleGraphApp(wx.App):
def OnInit(self):
self.frame = SimpleGraphicsFrame(None,
title="Drawing Shapes",
size=(300, 400))
self.frame.Show()
return True
if __name__ == '__main__':
app = SimpleGraphApp(False)
app.MainLoop()
You call self.Refresh() from your OnKeyArrow and OnMotion events. Update your scene data in those methods and set some flag e.g. self.repaint_needed = True. Then in OnIdle repaint the scene if self.repaint_needed is True.
Now you try to repaint the window every time the event is received. Which may be a lot.
What you want to do is to update the scene information every time, but repaint the window only when wx indicates it has some "free time".