Displaying TkInter and OpenCV windows on the same time - python

I am working to extend this solution given to me previously.
The user can draw randomly using the mouse on a TkInter Canvas widget, after that, the same curves with the same pixels coordinates are drawn on the OpenCV window.
I want to modify that solution so that the TkInter Canvas and the OpenCV window must be shown in the same time: each time the suer finishes drawing one curve on TkInter it is immediately redrawn on the OpenCV window.
Is there a way to fulfill this goal ?
Thank you in advance for any help.

This is arguably even easier to do than to draw all lines in OpenCV later.
I'd make the MaClasse class only make a blank image, open a window and show it on initiation, and give it a method to draw a single line and show the image again.Then you can create a MaClasse object in Test and draw a line in OpenCV each time you draw a line in Tkinter. Then you won't even need to save all lines you've drawn (you can completely remove self.liste).
from Tkinter import *
import numpy as np
import cv2
class Test:
def __init__(self):
self.b1="up"
self.xold=None
self.yold=None
self.liste=[]
self.maclasse = MaClasse()
def test(self,obj):
self.drawingArea=Canvas(obj)
self.drawingArea.pack()
self.drawingArea.bind("<Motion>",self.motion)
self.drawingArea.bind("<ButtonPress-1>",self.b1down)
self.drawingArea.bind("<ButtonRelease-1>",self.b1up)
def b1down(self,event):
self.b1="down"
def b1up(self,event):
self.b1="up"
self.xold=None
self.yold=None
self.liste.append((self.xold,self.yold))
def motion(self,event):
if self.b1=="down":
if self.xold is not None and self.yold is not None:
event.widget.create_line(self.xold,self.yold,event.x,event.y,fill="red",width=3,smooth=TRUE)
self.maclasse.dessiner_ligne(self.xold,self.yold,event.x,event.y)
self.xold=event.x
self.yold=event.y
self.liste.append((self.xold,self.yold))
class MaClasse:
def __init__(self):
self.s=600,600,3
self.ma=np.zeros(self.s,dtype=np.uint8)
cv2.namedWindow("OpenCV",cv2.WINDOW_AUTOSIZE)
cv2.imshow("OpenCV",self.ma)
def dessiner_ligne(self, xold, yold, x, y):
cv2.line(self.ma,(xold, yold),(x,y),[255,255,255],2)
cv2.imshow("OpenCV",self.ma)
if __name__=="__main__":
root = Tk()
root.wm_title("Test")
v = Test()
v.test(root)
root.mainloop()
Since the above code using a Tkinter window and a OpenCV window does not work for you, you could also show the OpenCV image in a Tkinter Toplevel window.
from Tkinter import *
import numpy as np
import cv2
import Image, ImageTk
class Test:
def __init__(self, parent):
self.parent = parent
self.b1="up"
self.xold=None
self.yold=None
self.liste=[]
self.maclasse = MaClasse(self.parent)
def test(self):
self.drawingArea=Canvas(self.parent)
self.drawingArea.pack()
self.drawingArea.bind("<Motion>",self.motion)
self.drawingArea.bind("<ButtonPress-1>",self.b1down)
self.drawingArea.bind("<ButtonRelease-1>",self.b1up)
def b1down(self,event):
self.b1="down"
def b1up(self,event):
self.b1="up"
self.xold=None
self.yold=None
self.liste.append((self.xold,self.yold))
def motion(self,event):
if self.b1=="down":
if self.xold is not None and self.yold is not None:
event.widget.create_line(self.xold,self.yold,event.x,event.y,fill="red",width=3,smooth=TRUE)
self.maclasse.dessiner_ligne(self.xold,self.yold,event.x,event.y)
self.xold=event.x
self.yold=event.y
self.liste.append((self.xold,self.yold))
class MaClasse:
def __init__(self, parent):
self.s=600,600,3
self.ma=np.zeros(self.s,dtype=np.uint8)
self.top = Toplevel(parent)
self.top.wm_title("OpenCV Image")
self.label = Label(self.top)
self.label.pack()
self.show_image()
def dessiner_ligne(self, xold, yold, x, y):
cv2.line(self.ma,(xold, yold),(x,y),[255,255,255],2)
self.show_image()
def show_image(self):
self.im = Image.fromarray(self.ma)
self.imgtk = ImageTk.PhotoImage(image=self.im)
self.label.config(image=self.imgtk)
if __name__=="__main__":
root = Tk()
root.wm_title("Test")
v = Test(root)
v.test()
root.mainloop()

Related

A new image for a widget does not appear

I have 2 classes, first one is Game where's located the main window and its settings, the second one is Piece that have some parameters to establish a Button with an image on its surface using Pillow. From the main class Game I planned call the other class to create objects on this window(root). Everything works fine(1st pic) untill I call my setter from any of these classes to change the image of the Button(Piece), it doesn't appear though the path to the new file is absolutely correct and the button becomes enabled if I'm not wrong and it's not clickable (2nd pic)
How can I resolve the problem, cos I need this possibility to change pictures on the button for my tic-toe game?
from tkinter import *
from PIL import Image
from PIL import ImageTk
class Game:
ICON = "./rsc/logo.ico"
KREST_IMAGE = "./rsc/krest.png"
DEFAULT_IMAGE = "./rsc/1.png"
def __init__(self):
self.root = Tk()
self.root.title("Tic-tac-toe")
self.root.iconbitmap(Game.ICON)
self.root.resizable(False,False)
self.root.geometry("300x300+500+500")
self.c = Piece()
self.root.mainloop()
class Piece:
def __init__(self):
self.img = Game.DEFAULT_IMAGE
self.piece = Button(image = self._img)
self.img = Game.KREST_IMAGE
# for ex. calling again the setter. Writing direct path instead of Game.KREST_IMAGE doesn't help.
self.piece.pack()
#property
def img(self):
return self._img
#img.setter
def img(self, path):
self.temp = Image.open(path)
self.temp = self.temp.resize((20,20), Image.ANTIALIAS)
self.temp = ImageTk.PhotoImage(self.temp)
self._img = self.temp
the picture

After() not reaching next iteration in splash window

I have a splash window in a tkinter application, which is a child class of Toplevel. My target is to show a GIF moving, thus I am trying with a recurrent .after() function to update a Label. My code for the Splash window is:
import tkinter as tk
class Splash(tk.Toplevel):
def __init__(self, parent):
tk.Toplevel.__init__(self, parent)
self.overrideredirect(True)
self.parent = parent
frames = [tk.PhotoImage(file="myfile.gif",format = 'gif -index %i' %(i)) for i in range(89)] #it has 89 frames
def animate(ind, label):
frame = frames[ind]
ind += 1
if ind>88: #With this condition it will play gif infinitely
ind = 0
label.configure(image=frame)
label.update()
self.after(110, animate, ind, label)
label = tk.ttk.Label(self)
label.pack(expand=1)
self.after(0, animate, 0, label)
self.parent.overrideredirect(True)
self.update()
self.lift()
Now: I tried to also put a print function before the next after call, and I could see that it reached that step. However, if I place a print(str(ind)) at the beginning of the animate function, I see only the first index appearing.
How can I actually loop in a Toplevel window in the correct way?
EDIT:
To add context to this, I have the main class App where I do the following:
from ttkthemes import ThemedStyle, ThemedTk
import GUI.splash as sp
class App:
def __init__(self, ...):
self.interface = ThemedTk()
self.interface.iconify()
splash = sp.Splash(self.interface)
...
self.interface.after(3000, splash.destroy) #Thanks #CoolCloud
self.interface.deiconify()
self.interface.mainloop()
EDIT 2:
I have tried with a minimum reproducible example:
import tkinter as tk
class Splash(tk.Toplevel):
def __init__(self, parent):
tk.Toplevel.__init__(self, parent)
self.overrideredirect(True)
self.parent = parent
frames = [tk.PhotoImage(file="C:/temp/splash.gif",format = 'gif -index %i' %(i)) for i in range(89)] #it has 89 frames
def animate(ind, label):
frame = frames[ind]
ind += 1
if ind>88: #With this condition it will play gif infinitely
ind = 0
label.configure(image=frame)
label.update()
self.after(110, animate, ind, label)
label = tk.Label(self)
label.pack(expand=1)
self.after(0, animate, 0, label)
self.update()
self.lift()
class App:
def __init__(self):
self.interface = tk.Tk()
self.interface.iconify()
splash = Splash(self.interface)
self.interface.after(3000, splash.destroy)
self.interface.deiconify()
self.interface.mainloop()
if __name__ == "__main__":
App()
It looks like the actual problem is the size of my underlying window, or at least that's what I would think, since in my case I load multiple frames (one on top of the other one) and switch between them depending on an OptionMenu. Maybe this is too much, however it works much better than destroying and rebuilding everything.
Btw, keeping my app heavy as it is, is there a better way to produce a splash screen to load my interface and show a gif moving as in my minimal example? The gif can be downloaded here: https://images.app.goo.gl/Bpi6EvpJgodiQs2e7

How to create a fast slideshow in python?

I tried to create a slideshow in python to loop over 5500 images faster than I could manually. I used tkinter and the parameter slide_interval should do the job. The slideshow will indeed be longer if I set slide_interval=5000 for example, but it makes no differnce if I set it to 500,50 or 5, it will still take approximately same number of seconds to display each image, while what I would be interested in would be 1 or 0.5 seconds spent per image.
Here is the code:
#!/usr/bin/env python3
"""Display a slideshow from a list of filenames"""
import os
import tkinter
from itertools import cycle
from PIL import Image, ImageTk
class Slideshow(tkinter.Tk):
"""Display a slideshow from a list of filenames"""
def __init__(self, images, slide_interval):
"""Initialize
images = a list of filename
slide_interval = milliseconds to display image
"""
tkinter.Tk.__init__(self)
self.geometry("+0+0")
self.slide_interval = slide_interval
self.images = None
self.set_images(images)
self.slide = tkinter.Label(self)
self.slide.pack()
def set_images(self, images):
self.images = cycle(images)
def center(self):
"""Center the slide window on the screen"""
self.update_idletasks()
w = self.winfo_screenwidth()
h = self.winfo_screenheight()
size = tuple(int(_) for _ in self.geometry().split('+')[0].split('x'))
x = w / 2 - size[0] / 2
y = h / 2 - size[1] / 2
self.geometry("+%d+%d" % (x, y))
def set_image(self):
"""Setup image to be displayed"""
self.image_name = next(self.images)
filename, ext = os.path.splitext(self.image_name)
self.image = ImageTk.PhotoImage(Image.open(self.image_name))
def main(self):
"""Display the images"""
self.set_image()
self.slide.config(image=self.image)
self.title(self.image_name)
self.center()
self.after(self.slide_interval, self.start)
def start(self):
"""Start method"""
self.main()
self.mainloop()
if __name__ == "__main__":
slide_interval = 1
import glob
images = glob.glob("traralgon/*.jpg")
# start the slideshow
slideshow = Slideshow(images, slide_interval)
slideshow.start()
Something like this maybe:
import tkinter as tk
class Application(tk.Tk):
def __init__(self, *args, **kwargs):
tk.Tk.__init__(self, *args, **kwargs)
self.title("Slideshow")
self.geometry("256x256")
self.resizable(width=False, height=False)
self.current_slide = tk.Label(self)
self.current_slide.pack()
self.duration_ms = 1000
def set_image_directory(self, path):
from pathlib import Path
from PIL import Image, ImageTk
from itertools import cycle
image_paths = Path(path).glob("*.jpg")
self.images = cycle(zip(map(lambda p: p.name, image_paths), map(ImageTk.PhotoImage, map(Image.open, image_paths))))
def display_next_slide(self):
name, self.next_image = next(self.images)
self.current_slide.config(image=self.next_image)
self.title(name)
self.after(self.duration_ms, self.display_next_slide)
def start(self):
self.display_next_slide()
def main():
application = Application()
application.set_image_directory("dir/to/images")
application.start()
application.mainloop()
if __name__ == "__main__":
import sys
sys.exit(main())
You'll have to ask yourself if you want to load all images upfront before the slideshow starts, and just keep them in memory (this could take some time depending on how many images you have), or if you want to load images only when they should be displayed (if the interval between images is especially short, you may notice that loading the next image slows things down).
The problem is that you're calling self.main() and self.mainloop() on every interval. That will cause huge performance problems and will probably crash after only a second or two. You should never call mainloop() more than once, and there's no point in recreating the entire UI on every loop.
Instead, you need to write a function that gets the image and then configures the existing label rather than recreating the whole GUI on each iteration.
Example:
def main(self):
...
self.next_image()
def next_image(self):
self.image_name = next(self.images)
filename, ext = os.path.splitext(self.image_name)
self.image = tkinter.PhotoImage(file=self.image_name)
self.slide.configure(image=self.image)
self.after(self.slide_interval, self.next_image)

Tkinter canvas PhotoImage is not appearing

I have a problem with my code. I am creating a small video game called Lumanite. I have created the homepage and have started the graphics generation, but I have run into a bug. I am using Python 3.3 and am on a Win 10 laptop. I run the program through a run file, which accesses the main_game file that uses the classes outlined in a separate file, spritesclasses. I am trying to make a sprite appear. Here is the code for the main_game file and the spritesclasses file. (They import the canvas and root from a MENU file)
#SPRITES
from tkinter import *
from GUI_FILE import canvas, root
from OPENING_FILE import show, hide
class Sprite():
def __init__(self, photoplace):
self.orgin = photoplace
self.photo = PhotoImage(file=photoplace)
self.w = self.photo.width()
self.h = self.photo.height()
def draw(self):
self.sprite = canvas.create_image(self.h, self.w, image=self.photo)
And the MAIN_GAME file:
#Main Game File:
from tkinter import *
from OPENING_FILE import show, hide
from GUI_FILE import root, canvas
from spritesclasses import *
def start_game():
genterrain()
def genterrain():
test = Sprite("logo.gif")
test.draw()
And the sprites are not appearing. No error or anything. Please help me. I will supply you with information at a further notice.
This is a known but tricky issue. You can read about it in Why do my Tkinter images not appear? I've implemented one possible solution below:
from tkinter import *
class Sprite():
def __init__(self, photoplace):
self.photo = PhotoImage(file=photoplace)
self.w = self.photo.width()
self.h = self.photo.height()
self.sprite = None
def draw(self):
canvas = Canvas(root, width=self.w, height=self.h)
canvas.pack()
self.sprite = canvas.create_image(0, 0, anchor=NW, image=self.photo)
def start_game():
genterrain()
def genterrain():
sprite = Sprite("logo.gif")
sprite.draw()
sprites.append(sprite) # keep a reference!
root = Tk()
sprites = []
start_game()
root.mainloop()
The assignment self.photo = PhotoImage(file=photoplace) isn't a sufficient reference as the object test goes out of scope when genterrain() returns and is garbage collected, along with your image. You can test this by commenting out the line sprites.append(sprite) and see your image disappear again.
Also, it wasn't clear why you were positioning the image at it's own width and height -- the first to arguments to create_image() are the X and Y position. I moved canvas creation into draw() so I could size the canvas to the image but that's not a requirement of the visibility fix.

Any quick Python GUI to display live images from Camera

I am trying to display live images from my 1394 camera.
Currently my code is able to obtain images in a loop from the camera and I was looking for any quick GUI that will update dynamically (as a separate thread). I can do this in PyQt maybe using QThreads but is there any recommendation or faster way of doing this??
Here's my code
#Loop capturing frames from camera
for frame in range(1,500):
print 'frame:',frame
TIME.sleep(1) #capture frame every second
image_binary = pycam.cam.RetrieveBuffer()
#convert to PIL Image
pilimg = PIL.Image.frombuffer("L",(cimg.GetCols(),cimg.GetRows()),image_binary,'raw', "RGBA", 0, 1)
# At this point I want to send my image data to a GUI window and display it
Thank you.
Here's wxPython code that will do it...
import wx
from PIL import Image
SIZE = (640, 480)
def get_image():
# Put your code here to return a PIL image from the camera.
return Image.new('L', SIZE)
def pil_to_wx(image):
width, height = image.size
buffer = image.convert('RGB').tostring()
bitmap = wx.BitmapFromBuffer(width, height, buffer)
return bitmap
class Panel(wx.Panel):
def __init__(self, parent):
super(Panel, self).__init__(parent, -1)
self.SetSize(SIZE)
self.SetBackgroundStyle(wx.BG_STYLE_CUSTOM)
self.Bind(wx.EVT_PAINT, self.on_paint)
self.update()
def update(self):
self.Refresh()
self.Update()
wx.CallLater(15, self.update)
def create_bitmap(self):
image = get_image()
bitmap = pil_to_wx(image)
return bitmap
def on_paint(self, event):
bitmap = self.create_bitmap()
dc = wx.AutoBufferedPaintDC(self)
dc.DrawBitmap(bitmap, 0, 0)
class Frame(wx.Frame):
def __init__(self):
style = wx.DEFAULT_FRAME_STYLE & ~wx.RESIZE_BORDER & ~wx.MAXIMIZE_BOX
super(Frame, self).__init__(None, -1, 'Camera Viewer', style=style)
panel = Panel(self)
self.Fit()
def main():
app = wx.PySimpleApp()
frame = Frame()
frame.Center()
frame.Show()
app.MainLoop()
if __name__ == '__main__':
main()
I thought I'd try PyQt4 imageviewer.py example and it worked for me.
Thanks for all your help guys.
Here's my modified code:
from PyQt4 import QtCore, QtGui
class CameraViewer(QtGui.QMainWindow):
def __init__(self):
super(CameraViewer, self).__init__()
self.imageLabel = QtGui.QLabel()
self.imageLabel.setBackgroundRole(QtGui.QPalette.Base)
self.imageLabel.setScaledContents(True)
self.scrollArea = QtGui.QScrollArea()
self.scrollArea.setWidget(self.imageLabel)
self.setCentralWidget(self.scrollArea)
self.setWindowTitle("Image Viewer")
self.resize(640, 480)
timer = QtCore.QTimer(self)
timer.timeout.connect(self.open)
timer.start(33) #30 Hz
def open(self):
#get data and display
pilimg = getMyPILImageDatFromCamera()
image = PILQT.ImageQt.ImageQt(pilimg)
if image.isNull():
QtGui.QMessageBox.information(self, "Image Viewer","Cannot load %s." % fileName)
return
self.imageLabel.setPixmap(QtGui.QPixmap.fromImage(image))
self.imageLabel.adjustSize()
if __name__ == '__main__':
import sys
app = QtGui.QApplication(sys.argv)
CameraViewer = CameraViewer()
CameraViewer.show()
sys.exit(app.exec_())
I recommend using Tkinter since it's already part of python. I've never used PIL but a quick google shows it's easy to use PIL images in Tk widgets (via the pil.ImageTk.PhotoImage() method).
If you already have a Tkinter widget set up to display images (a Label widget works fine) all you need to do is arrange for the image to be updated every second or so. You can do this by using the after command of tkinter.
Here's an example; I don't have PIL so it uses a static image but it illustrates how to use the event loop to fetch images every second:
import Tkinter
class App(Tkinter.Tk):
def __init__(self):
Tkinter.Tk.__init__(self)
self.label = Tkinter.Label(text="your image here", compound="top")
self.label.pack(side="top", padx=8, pady=8)
self.iteration=0
self.UpdateImage(1000)
def UpdateImage(self, delay, event=None):
# this is merely so the display changes even though the image doesn't
self.iteration += 1
self.image = self.get_image()
self.label.configure(image=self.image, text="Iteration %s" % self.iteration)
# reschedule to run again in 1 second
self.after(delay, self.UpdateImage, 1000)
def get_image(self):
# this is where you get your image and convert it to
# a Tk PhotoImage. For demonstration purposes I'll
# just return a static image
data = '''
R0lGODlhIAAgALMAAAAAAAAAgHCAkC6LV76+vvXeswD/ANzc3DLNMubm+v/6zS9PT6Ai8P8A////
/////yH5BAEAAAkALAAAAAAgACAAAAS00MlJq7046803AF3ofAYYfh8GIEvpoUZcmtOKAO5rLMva
0rYVKqX5IEq3XDAZo1GGiOhw5rtJc09cVGo7orYwYtYo3d4+DBxJWuSCAQ30+vNTGcxnOIARj3eT
YhJDQ3woDGl7foNiKBV7aYeEkHEignKFkk4ciYaImJqbkZ+PjZUjaJOElKanqJyRrJyZgSKkokOs
NYa2q7mcirC5I5FofsK6hcHHgsSgx4a9yzXK0rrV19gRADs=
'''
image = Tkinter.PhotoImage(data=data)
return image
if __name__ == "__main__":
app=App()
app.mainloop()
Since the good answers are pretty large, I feel like I should post a library I built specifically for this:
from cvpubsubs.webcam_pub import VideoHandlerThread
import numpy as np
image_np = numpy.array(pilImage)
def update_function(frame, cam_id):
frame[...] = image_np[...]
VideoHandlerThread(video_source=image_np, callbacks=update_function).display()
Actually, that's if image_binary is a new numpy array every time. If it's assigned to the same location, then just this should work:
from cvpubsubs.webcam_pub import VideoHandlerThread
VideoHandlerThread(video_source=image_np).display()
I know OpenCV barely counts as a GUI, but this is quick code wise.
Try to take a look at gstreamer. This is the first result google gave me searching for "gstreamer 1394" and this one is the first for "gstreamer pyqt".

Categories