I have a GridLayout inside of a ScrollView. The GridLayout contains about 25 images. The images are chosen at runtime so their sizes cannot be determined beforehand. These images are loaded asynchronously at different times ( there is at least a 500 millisecond difference between them ).
The problem occurs when the image is loaded and the size of the GridLayout changes. From what I understand, the ScrollView's scroll_y is set to some value relative to the original height of the GridLayout. Then, once the image has loaded the size of the GridLayout changes, but the scroll_y is still relative to the old height. This causes the ScrollView to scroll down by a large amount.
I've tried to rectify this by manually changing the scroll_y to match the new height. I'm using the following equation:
Equation for Finding New Scroll_Y
I'm subracting scroll_y from 1 because a scroll value of 1 is at the very top in kivy. I've reordered this equation to the following and have implemented this in code:
Simplified Equation for Finding New Scroll_Y
This has reduced the problem, and there is a less apparent jittering, but it still scrolls up by 5-10 pixels each time an image is loaded.
This is because I'm calculating the new height for the equation, based on:
the old viewport height of the ScrollView
the old height of the image widget
the new height of the image.
But, this calculated height is slightly bigger than what the actual height turns out to be, causing my adjusted scroll_y to be slightly off. I'm not sure why the actual height is smaller.
I'm not sure where to go from here.
Here is a link to a repository that has a minimal reproducible example. Grid Stuttering Example
I believe the easiest way to do what you want is to extend ScrollView. Here is a class extending ScrollView that does what you want:
class ScrollViewNoStutter(ScrollView):
child_height = NumericProperty(0)
def add_widget(self, widget, index=0):
super(ScrollViewNoStutter, self).add_widget(widget, index=index)
widget.bind(size=self.child_size_changed)
def remove_widget(self, widget):
super(ScrollViewNoStutter, self).remove_widget(widget)
widget.unbind(size=self.child_size_changed)
def child_size_changed(self, child, new_child_size):
if new_child_size[1] > self.size[1]:
# re-calculate scroll_y
# calculate distance between scrollview top and child top (in pixels)
y_dist = (1.0 - self.scroll_y) * (self.child_height - self.height)
# calculate new scroll_y that reproduces the above distance
self.scroll_y = 1.0 - y_dist / (new_child_size[1] - self.height)
self.child_height = new_child_size[1]
Just use this class in place of ScrollView, and you won't need any of those calculations in your App.
Related
I'm struggling with Tkinter now. I wanted to create layout but if I define window dimensions (800x600) and create frame which have to be wide 800 too, it have just half.
I tried googling and changing code, if I multiply width 2 times (to 1600) then frame fit the screen perfetly.
Here is code:
import tkinter as tk
SW, SH = 800, 600
win = tk.Tk()
win.geometry(f"{SW}x{SH}")
frm_appname = tk.Frame(
master = win,
bg = 'red'
)
frm_appname.place(
anchor = tk.N,
width = 800,
relheight = (1/6)
)
Here is output:
Can anyone explain me what happened here?
The anchor of "n" (tk.N) means that the top center portion of the frame is at the given coordinate. Since you didn't provide an x and y coordinate for place it defaults to 0,0. So, the top/middle (400,0) of the frame is at coordinate 0,0.
If you set the anchor to "n" or tk.NW, the top-left corner of your frame will be in the top-left corner of the window.
On an unrelated note, experience has taught me that layouts are nearly always easier to create with pack and/or grid. In my coupe of decades of using tk and tkinter, I've never used place for more than one or two special-case widgets.
I've been learning some basic tkinter and I've come across simple code to centre the window in the middle of your monitor, except when I run it, it's off horizontally. It's pedantic but it bothers me a lot.
The code I used
# Imports
from tkinter import *
# tkinter Application
root = Tk()
#Root Geometry
root_Width = 600
root_Length = 600
# Coordinates of top left pixel of application for centred
x_left = int(root.winfo_screenwidth()/2-root_Width/2)
y_top = int(root.winfo_screenheight()/2-root_Length/2)
root_Pos = "+" + str(x_left) + "+" + str(y_top)
# Window size and position
root.geometry(str(root_Width) + "x" + str(root_Length) + root_Pos)
root.mainloop()
Even if I go basic, and just try to open a window the size of my monitor (1920x1080) at 0,0, it's misaligned horizontally by 8px.
from tkinter import *
root = Tk()
root.geometry("1920x1080+0+0")
root.mainloop()
I took a screenshot of the result:
I have a dual monitor set up so I've added a red line where the right monitor starts. I don't know what the issue is or how to fix it. If I change it to,
root.geometry("1920x1080+-8+0")
It opens where it should, but I want to fix this in general preferably. I want 0,0 to be the top left pixel of the monitor. I acknowledge the issue may not be with python, but any advice would be helpful.
Ok, there are two thing that you are missing. The first, in your first example, is that you need to assure tkinter is getting the right values, and to do this you have to use update_idletasks() method before any winfo.
The second thing, which explains why you have to use -8 to center the full screen window, is that tkinter widows have outer-frames. You can determine the size of this frame by checking for the top left coordinate of the window (winfo_rootx()) and of the outer-frame (winfo_x()). Now the frame width is the difference between both: frame_width = root.winfo_rootx() - root.winfo_x() while the real window width is real_width = root.winfo_width() + (2*frame_width), since you have to consider the frame in both sides.
In summary, to center the window horizontally you do:
width = root.winfo_width()
frame_width = root.winfo_rootx() - root.winfo_x()
real_width = root.winfo_width() + (2*frame_width)
x = root.winfo_screenwidth() // 2 - real_width // 2
(here you can print the frame width and you will see it is 8)
and then use geometry method to place the window at position x.
Off course you can do the same for the vertical alignment
I have a texture that I want to repeat inside a Rectangle drawn by canvas.before. The problem is that I don't know what is going to be the size of the Rectangle (it's used as a background for its widget).
For example, I have a Rectangle that has 48 px height and width 100 - 500 px. I want to fill its content by horizontally repeating a 48x48 texture.
I know and tried setting texture.wrap = 'repeat' and texture.uvsize and it works correctly but only if I know the widget size beforehand. For example, setting uvsize = (3, 1) for a widget with size 144x48 works fine.
However, this doesn't work when I want to update uvsize before redrawing the widget. I created a canvas callback and updated uvsize there but this has no effect for some reason:
...
with self.canvas.before:
self.cb = Callback(self.on_canvas_redraw)
...
def on_canvas_redraw(self, instr):
self.texture.uvsize = (self.width / 48, 1)
So how can I dynamically update uvsize? Or is there a better way to handle widget resize or a better way to this altogether?
I've tried using the screen size and window size methods but as they don't give numerical values I cant subtract them from one another. Here's my code:
from tkinter import *
statistics = Tk()
screenwidth = statistics.winfo_screenwidth
windowwidth = statistics.winfo_width
distance = screenwidth - windowwidth
statistics.geometry(+distance+'0')
winfo_screenwidth and winfo_width are both functions, so you need to call them rather than reference them. So, to get these values you should do it like this:
screenwidth = statistics.winfo_screenwidth()
windowwidth = statistics.winfo_width()
Be aware that until the window actually appears on screen, it's width and height will be 1.
Depending on the platform you're running on, you don't need to do any of those calculations. If you give negative values for the geometry, it will refer to the location of the bottom right corner of the window with respect to the bottom right edge of the screen. Positive and negative numbers can be mixed, so "-1+1" means to put the app in the upper-right corner.
This doesn't seem to hold true for OSX, FWIW.
I'm using Python and tkinter. I have a Canvas widget that will display just one image. Most times the image will be larger than the canvas dimensions, but sometimes it will be smaller. Let's just focus on the first case (image larger than canvas).
I want to scroll the canvas to an absolute position that I have already calculated (in pixels). How can I do that?
After trying for around half hour, I got another solution that seems better:
self.canvas.xview_moveto(float(scroll_x+1)/img_width)
self.canvas.yview_moveto(float(scroll_y+1)/img_height)
img_width and img_height are the dimensions of the image. In other words, they are the full scrollable area.
scroll_x and scroll_y are the coordinates of the desired top-left corner.
+1 is a magic value to make it work precisely (but should be applied only if scroll_x/y is non-negative)
Note that the current widget dimension is not needed, only the dimension of the contents.
This solution works very well even if the image is smaller than the widget size (and thus the scroll_x/y can be negative).
EDIT: improved version:
offset_x = +1 if scroll_x >= 0 else 0
offset_y = +1 if scroll_y >= 0 else 0
self.canvas.xview_moveto(float(scroll_x + offset_x)/new_width)
self.canvas.yview_moveto(float(scroll_y + offset_y)/new_height)
This is what I have already done:
# Little hack to scroll by 1-pixel increments.
oldincx = self.canvas["xscrollincrement"]
oldincy = self.canvas["yscrollincrement"]
self.canvas["xscrollincrement"] = 1
self.canvas["yscrollincrement"] = 1
self.canvas.xview_moveto(0.0)
self.canvas.yview_moveto(0.0)
self.canvas.xview_scroll(int(scroll_x)+1, UNITS)
self.canvas.yview_scroll(int(scroll_y)+1, UNITS)
self.canvas["xscrollincrement"] = oldincx
self.canvas["yscrollincrement"] = oldincy
But... As you can see... it's very hackish and ugly. To much workaround for something that should be simple. (plus that magic +1 I was required to add, or it would be off-by-one)
Does anyone else have another better and cleaner solution?
In tkinter you can get the width and height of a PhotoImagefile. You can just call it when you use canvas.create_image
imgrender = PhotoImage(file="something.png")
##Other canvas and scrollbar codes here...
canvas.create_image((imgrender.width()/2),(imgrender.height()/2), image=imgrender)
## The top left corner coordinates is (width/2 , height/2)
I found this solution by using self.canvas.scan_dragto(x, y)
Edit: I develop an interface which can scroll, zoom, and rotate an image. Let's extract from my interface the code.
When I want to save the current position of image I use this:
# 1) Save image position
x0canvas = -self.canvas.canvasx(0)
y0canvas = -self.canvas.canvasy(0)
x0, y0 = self.canvas.coords(text)
ximg = x0
yimg = y0
# 2) Restore image position (for example: after a load)
self.text = canvas.create_text(ximg, yimg, anchor='nw', text='')
self.xyscroll(x0canvas, y0canvas)
# Rotate and zoom image
image = Image.open('fileImg.jpg')
..
imageMod = image.resize(new_size)
if rotate != 0:
imageMod = imageMod.rotate(rotate)
imagetk = ImageTk.PhotoImage(imageMod)
imageid = canvas.create_image(canvas.coords(text), anchor='nw', image=imagetk)