I have a serious problem this morning: I load a picture to display it on a Canvas. The picture is large, so I set scroll bars to allow the user to view it.
I allow the user to press the right button in order to draw random points with his mouse on the image.
It works, but there is a bug in its behaviour: When I scroll to the right or down of the image and click the right mouse button the point is drawn but not on the pixel I clicked on. It is drawn far away and my brain does not understand why.
A second but less alarming problem is that the points are drawn only in black whatever the color I set to them.
Please help me to resolve this or tell me why this occur and I will try to do something about it. I have been fighting with this problem for 2 hours by now and I did not find similar issues on this website and the whole Google:
import PIL.Image
import Image
import ImageTk
from Tkinter import *
class ExampleApp(Frame):
def __init__(self,master):
Frame.__init__(self,master=None)
self.x = self.y = 0
self.canvas = Canvas(self, cursor="cross",width=600,height=650)
self.sbarv=Scrollbar(self,orient=VERTICAL)
self.sbarh=Scrollbar(self,orient=HORIZONTAL)
self.sbarv.config(command=self.canvas.yview)
self.sbarh.config(command=self.canvas.xview)
self.canvas.config(yscrollcommand=self.sbarv.set)
self.canvas.config(xscrollcommand=self.sbarh.set)
self.canvas.grid(row=0,column=0,sticky=N+S+E+W)
self.sbarv.grid(row=0,column=1,stick=N+S)
self.sbarh.grid(row=1,column=0,sticky=E+W)
self.canvas.bind("<ButtonPress-1>", self.on_button_press)
self.rect = None
self.start_x = None
self.start_y = None
self.im = PIL.Image.open("image.jpg")
self.wazil,self.lard=self.im.size
self.canvas.config(scrollregion=(0,0,self.wazil,self.lard))
self.tk_im = ImageTk.PhotoImage(self.im)
self.canvas.create_image(0,0,anchor="nw",image=self.tk_im)
def on_button_press(self,event):
print"({}, {})".format(event.x,event.y)
self.canvas.create_oval(event.x,event.y, event.x+1,event.y+1,fill='red')
# the fill option never takes effect, I do not know why
# When I scroll over the image, the pixels are not drawn where I click
if __name__ == "__main__":
root=Tk()
app = ExampleApp(root)
app.pack()
root.mainloop()
Thank you in advance for helping me.
1) You need to use canvasx and canvasy method.
See for example:
http://effbot.org/tkinterbook/canvas.htm#coordinate-systems
2) Your oval is so small you only see the border line.
Use outline= instead of fill=
Related
TL;DR
How to create a simple "UI" to display a few pictures ("live feed") and update a few sliders to show the state of the application. Basically, how to tell the UI: "show this new image instead of the current one" and "highlight this unclickable button to show it is activated".
I have absolutely zero experience with user interface and graphical display, so I don't know what to google for this question. I have some python code that uses the raspberry pi camera to take pictures, process them a bit (filters) and that's it. I also have a few hardware components (buttons, joystick) to control that camera and the processing applied to the pictures, like filter selection and filter intensity. The hardware events are already handled through a main loop that polls the buttons/joystick controller. The loop also captures the pictures and processes them. Basically, the application is done.
Now, what would be the best way to simply display this information ? What is the best Python framework to achieve this ?
Would PyQT or Kivy allow me to do this ? I would want to show the "live feed", some button information (which button has been pressed to show what processing is currently done on the pictures) in a simple cute layout. There does not need to be anything clickable on the interface, as the interaction occurs on the hardware.
Thanks !
I really like the Tkinter library for these simpler tasks. It is quite similar to java Swing should you be familiar with that. Here is a sample code that does pretty much all you need, even though it is quite messy. It should help you out though.
Note that Tkinter is very raw and not recommended for more elaborate needs.
import tkinter as tk
from PIL import ImageTk, Image
import time
#manipulating canvas items attributes
def change_color(canvas):
if canvas.itemcget(label, 'fill') == 'black':
canvas.itemconfig(label, fill='green')
else:
canvas.itemconfig(label, fill='black')
#changing image displayed
def change_image(canvas, current):
if current == 1:
canvas.itemconfig(img, image=photo2)
return 2
else:
canvas.itemconfig(img, image=photo1)
return 1
#slider gauge
def set_gauge(canvas, percentage):
coords = canvas.coords(gaugefg)
new_y = -2*percentage + 400
coords[1] = new_y
canvas.coords(gaugefg,coords)
color = 'black'
gauge = 0
delta = 10
root = tk.Tk()
#frame size and background
root.geometry('600x600')
root.configure(bg='white')
#make frame pop upfront
root.attributes("-topmost", True)
#uploading images from the same folder
photo1 = ImageTk.PhotoImage(Image.open('download.jpeg'))
photo2 = ImageTk.PhotoImage(Image.open('download1.jpeg'))
current_photo = 1
#canvas on with we'll be drawing
canvas = tk.Canvas(master=root, width=600, height=600)
#text label (xcenter,ycenter)
label = canvas.create_text(500, 500, text='Cool', fill=color, font=('purisa', 20))
#img component (xcenter, ycenter)
img = canvas.create_image(300, 300, image=photo1)
#gauge/slider = two superposed rectangles
#NOTE: (xtopleft, ytopleft, xbottomright, ybottomright)
gaugebg = canvas.create_rectangle(510, 200, 540, 400, fill='black')
gaugefg = canvas.create_rectangle(510, 300, 540, 400, fill='blue')
canvas.pack()
#Main Loop
while True:
change_color(canvas)
current_photo = change_image(canvas, current_photo)
gauge += delta
if gauge == 100 or gauge == 0:
delta = -delta
set_gauge(canvas, gauge)
#update frame and canvas
root.update()
time.sleep(1)
I hope that helps you accomplish what you need. Any questions just text.
I have a base program I was playing with this morning I wrote up a few years back. It only had horizontal scrolling and zooming. I managed to get it so I could scroll(one axis at a time) and zoom on both axis. I'm wanting to create a program that will allow me to move around the screen in both x and y directions at the same time(like Google Earth where you can hold down the down and left key at the same time to move to lower left). It would be nice to do it without having the scroll bars on the screen as well. I don't want to have to go back and forth and click on the appropriate scroll bar to be able to scroll in that axis. Currently to change which axis I'm scrolling in I have to click on the opposite axis.
I tried the program at [http://www.tkdocs.com/tutorial/canvas.html#scrolling][1] but I already have the capability of doing that. It doesn't allow me to scroll both directions simultaneously and if I want to change which direction I'm scrolling without having to click on the opposite axis.
Is there a way of doing what I'm trying to do with Tkinter or should I look elsewhere and if so, where?
Thanks.
edit:
With the code Bryan posted below I added in the following code to try to get it two work with the keyboard versus only the mouse. I would like the be able to use the cursor keys to move the image around versus the mouse. I have a nastily touch sensitive mouse on this computer, that has a mind of its own and as a result I would like to stick with the keyboard. Plus, given the naturedness of this darn project I have to leave all option open or else I know I will regret it sometime before this entire project gets finished.
self.canvas.bind("<Left>", self.on_press)
self.canvas.bind("<Right>", self.on_press)
I also tried directing it to self.on_motion and neither one accepted the cursor keys.
Yes, this is possible. There's nothing preventing you from directly calling the canvas xview and yview methods with any arguments you want.
You first need to create bindings that tracks the clicking and the motion of the mouse. In the bound function you can compute the direction that the mouse moved, then use the results to call both the xview and yview methods of the widget at the same time.
Here's an example:
import tkinter as tk
import random
class Example(tk.Frame):
def __init__(self, parent):
tk.Frame.__init__(self, parent)
self.canvas = tk.Canvas(self, background="bisque", width=400, height=400)
self.canvas.pack(fill="both", expand=True)
self.canvas.configure(scrollregion=(-1000, -1000, 1000, 1000))
self.canvas.bind("<ButtonPress-1>", self.on_press)
self.canvas.bind("<B1-Motion>", self.on_motion)
# the following two values cause the canvas to scroll
# one pixel at a time
self.canvas.configure(xscrollincrement=1, yscrollincrement=1)
# finally, draw something on the canvas so we can watch it move
for i in range(1000):
x = random.randint(-1000, 1000)
y = random.randint(-1000, 1000)
color = random.choice(("red", "orange", "green", "blue", "violet"))
self.canvas.create_oval(x, y, x+20, y+20, fill=color)
def on_press(self, event):
self.last_x = event.x
self.last_y = event.y
def on_motion(self, event):
delta_x = event.x - self.last_x
delta_y = event.y - self.last_y
self.last_x = event.x
self.last_y = event.y
self.canvas.xview_scroll(-delta_x, "units")
self.canvas.yview_scroll(-delta_y, "units")
if __name__ == "__main__":
root = tk.Tk()
Example(root).pack(fill="both", expand=True)
root.mainloop()
I want to create a Board Game with Python and Tkinter
I want it to has a resize-function but I have two canvases for the GUI. First one is the square-Board (Spielfeld), the second one is the place where I want to add the control buttons for the player (Panel)
So if I want to resize my Board using <Configure> in my Master Window, it shall draw the Canvas with the New Size (self.FensterGroesse)
The If-Case is working well when I pass the else -function in resize
but if I run the Programm with the else function it resizes itself until its 1px big. Not just the canvas, the whole window.
I know the problem is the Panel being one third as high as the Board and when self.Panel.config sets the new size <Configure> is activated again.
But I dont know how I can have these two sanvases, one is a square, the other is a rectangle with the same widht and the square bit just 0.3*height
from Tkinter import *
class GUI:
def resize(self, event):
if event.height > (event.width*1.3):
self.FensterGroesse = event.width-2
else:
self.FensterGroesse = int(event.height/1.3)-2
self.Spielfeld.config(height=self.FensterGroesse, width=self.FensterGroesse)
self.Panel.config(height=self.FensterGroesse*0.3, width=self.FensterGroesse)
self.Spielfeld.pack()
self.Panel.pack()
def __init__(self):
self.FensterGroesse = 400
self.tkinter = __import__("Tkinter")
self.Master = self.tkinter.Tk()
self.Spielfeld = self.tkinter.Canvas(self.Master, height=self.FensterGroesse,
width=self.FensterGroesse, bg='#ffdead')
self.Panel = self.tkinter.Canvas(self.Master, height=self.FensterGroesse*0.3,
width=self.FensterGroesse, bg='brown')
self.Spielfeld.pack()
self.Panel.pack()
self.Master.bind("<Configure>", self.resize)
self.Master.mainloop()
GUI()
I need to allow the users to type text into the Canvas Widget, making the canvas update as the user types new text.
Here's what I have tried so far, but am not getting it to work.
First I have a mouseDown method which is bound to Button-1 event
widget.bind(self.canvas, "<Button-1>", self.mouseDown)
This mouseDown method returns the startx, starty positions to my method drawText
def drawText(self, x, y, fg):
self.currentObject = self.canvas.create_text(x,y,fill=fg,text=self.typedtext)
I also have a global binding on the canvas widget to capture any key press like this:
Widget.bind(self.canvas, "<Any KeyPress>", self.currentTypedText)
def currentTypedText(self, event):
self.typedtext = str(event.keysym)
self.drawText(self, self.startx, self.starty,self.foreground)
However there's no error and nothing gets printed on the canvas.
What you want to do is pretty complex and will require quite a bit of code to get working nicely. You will need to handle click events, keypress events, special keypress events (such as "Shift" and "Ctrl"), "Backspace" and delete events, and a lot more.
Nevertheless, first is first and that is getting text to appear in the canvas as a user types. Now, since I don't have your full script, I can't really work with your stuff as is. However, I went and made my own little app that does exactly what you want. Hopefully, it will shine some light on where to go:
from Tkinter import *
class App(Tk):
def __init__(self):
Tk.__init__(self)
# self.x and self.y are the current mouse position
# They are set to None here because nobody has clicked anywhere yet.
self.x = None
self.y = None
self.makeCanvas()
self.bind("<Any KeyPress>", lambda event: self.drawText(event.keysym))
def makeCanvas(self):
self.canvas = Canvas(self)
self.canvas.pack()
self.canvas.bind("<Button-1>", self.mouseDown)
def mouseDown(self, event):
# Set self.x and self.y to the current mouse position
self.x = event.x
self.y = event.y
def drawText(self, newkey):
# The if statement makes sure we have clicked somewhere.
if None not in {self.x, self.y}:
self.canvas.create_text(self.x, self.y, text=newkey)
# I set x to increase by 5 each time (it looked the nicest).
# 4 smashed the letters and 6 left gaps.
self.x += 5
App().mainloop()
Once you click somewhere in the canvas and start typing, you will see text appear. Note however that I have not enabled this to handle deletion of text (that is a little tricky and beyond the scope of your question).
I am trying to make an "Office-like" TextView. That is:
The TextView itself has a fixed width (so it kinda shows what the text would look like on a sheet of paper)
If the window (on which the TextView is packed) is smaller than the fixed width: The TextView should be scrollable
If the window is bigger, add margins to the left/right to keep the fixed width
This is what i came up with, and it actually behaves like it should, except that it doesn't scroll if your cursor gets out of the viewport, when you for example write a line that needs more space than the windows current width.
What would be the best way to keep the viewport "in sync"? Do I have to create a custom Viewport?
Thanks in advance!
#!/usr/bin/env python2
# encoding: utf-8
import gtk
class SheetTextView(gtk.TextView):
WIDTH = 700
def __init__(self):
gtk.TextView.__init__(self)
self.set_wrap_mode(gtk.WRAP_WORD)
self.set_size_request(self.WIDTH, -1)
self.connect('size-allocate', self._on_size_allocate)
def _on_size_allocate(self, widget, event, data=None):
# Reset left/right margin to simulate a fixed line width
x, y, width, height = self.get_allocation()
if width > self.WIDTH:
margin = (width - self.WIDTH) / 2
self.set_left_margin(margin)
self.set_right_margin(margin)
if __name__ == "__main__":
window = gtk.Window(gtk.WINDOW_TOPLEVEL)
window.connect('delete_event', gtk.main_quit)
view = SheetTextView()
scroll = gtk.ScrolledWindow()
scroll.set_policy(gtk.POLICY_AUTOMATIC, gtk.POLICY_AUTOMATIC)
scroll.add_with_viewport(view)
window.add(scroll)
window.show_all()
gtk.main()
You mean something like this?
Dropbox link
Please note this is just a test, all it does for now is change the size when necessary,
is that what you meant?
If so, please tell me and I'll fix the bugs and improve.
EDIT: Please note this is just scratch code, messy coded...