How to make my variable update based on cursor position?

Question

I tried to build off of the solution here. My code is:

from tkinter import mainloop, Tk, Frame, Button, Label, Canvas, PhotoImage, NW
from tkinter import ttk
from tkinter import filedialog
import tkinter as tk
from PIL import Image, ImageTk
 
class my_class(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry=('1400x1400')
       
        self.filename = ''
        my_notebook = ttk.Notebook(self)
        my_notebook.pack(pady=5)
       
        self.selections = Frame(my_notebook, width = 1100, height = 700)
        self.selections.pack(fill = "both", expand=1)
        my_notebook.add(self.selections, text = "Selections")
        Button(self.selections, text = "Select an Image", command = self.get_image).place(x=10,y=40)
       
        self.image_frame = Frame(my_notebook, width = 1100, height = 700)
        self.image_frame.pack(fill = "both", expand=1)
        my_notebook.add(self.image_frame, text = "Image")
 
        self.my_canvas = Canvas(self.image_frame, width=800, height=600, bg="white")
        self.my_canvas.pack()
       
        self.rgb_var = tk.StringVar(self.image_frame, '0 0 0')
        self.rgb_label = tk.Label(self.image_frame, textvariable = self.rgb_var)
        self.rgb_label.pack()
       
        self.image_frame.bind('<Motion>', lambda e: self.get_rgb(e))
   
    def get_image(self):
        self.filename = filedialog.askopenfilename(initialdir="D:/Python", title="select a file", filetypes = (("png files","*.png"),("jpg files","*.jpg")))
        self.img = Image.open(self.filename)
        self.img_rgb = self.img.convert('RGB')
        dim_x, dim_y = self.img_rgb.size
        self.img_tk = ImageTk.PhotoImage(self.img_rgb.resize((dim_x, dim_y)))
        self.my_canvas.create_image(dim_x // 2, dim_y // 2, image = self.img_tk)
  
    def get_rgb(self, event):
        x, y = event.x, event.y
        try:
            rgb = self.img_rgb.getpixel((x, y))
            self.rgb_var.set(rgb)
        except IndexError:
            pass # ignore errors if cursor is outside the image
   
if __name__ == '__main__':
    app = my_class()
    app.geometry=('1200x900')
    app.mainloop()

I can use the button to select an image. Then I click the (Image) tab and see the selected image on the canvas.

I expected the (rgb_var) displayed under the image to update as I move the mouse pointer across the image. Instead the numbers under the image only update when the mouse pointer is in the frame, but outside the canvas. Also the numbers displayed seem to be unrelated to pixels in the image. How can I display the RGB values of a pixel that is (under the mouse pointer) when the mouse pointer is over the image?

You need to update `self.rgb_var` after getting the pixel color. — acw1668, Nov 08 '22 at 23:31
@acw1668 I tried that as in my revised code above. Now the numbers update but not correctly. I revised my description after my code to explain what it does now. — Ted Ersek, Nov 09 '22 at 00:33

score 0 · Answer 1 · answered Aug 21 '23 at 11:55

To get the RGB values of the image you have to bind the 'Motion' Event to the canvas instead of the Image Frame as follows

self.my_canvas.bind('<Motion>', lambda e: self.get_rgb(e))

When the event is bound to ImageFrame the coordinates start from the top left corner of the ImageFrame. Still, you will get the results for

            rgb = self.img_rgb.getpixel((x, y))

because the image is there and the x, and y values are valid even though the color does not precisely represent the background color of the mouse pointer.

How to make my variable update based on cursor position?

1 Answers1