I am trying to make an image slide show application using Tkinter and Pillow. I would like the image to go full screen, so currently my code looks like this (I think these are all the important bits, ask me if you need to see more):
canvas = Canvas(root, width=screenwidth, height=screenheight, bg=‘black’)#screenwidth and height previously assigned (checked to be correct) variables containing screen dimensions.
image = image.resize((resizew, resizeh) Image.ANTIALIAS)
imagesprite = canvas.create_image(midx, midy, image=photo) #had changed our resized image to a tkinter photo image previously, midx and midy are just half the screen dimensions.
The problem:
No matter what settings I change there is always some form of grey bar around the edge of the window. I have tried changing the window size, changing the canvas size, setting the window geometry manually using root.geometry to no avail. However, some of the combinations of settings lead to there being fewer bars; I have seen between 1 and 3. Pictures of the output in its current state are attached. There are no errors in the shell, not (currently) is there a border on the left of the image
[1]: https://i.stack.imgur.com/1DLfg.jpg
You need to set highlightthickness=0 when creating the canvas:
canvas = Canvas(root, width=screenwidth, height=screenheight, bg='black', highlightthickness=0)
Related
I am working on a Python 3 tkinter app that uses windows with vertical and horizontal (mouse-scrollable) scrollbars along the window's dimensions. But I am unable to display a .png image as the background on the same windows.
I've gone through the methods to add a .png image as the background using a label and canvas but instead of the picture, I can only see white on regions of the window not covered by the frames. Also I find the canvas method really hard as it becomes very difficult to place frames on it which in turn have labels, buttons, scrollbars etc. I've also tried using PIL module but I'm finding trouble importing it from its path (I also don't think it would help much as I'm only trying to use a .png image).
Any suggestions on how to have both the scrollbars and the background image working in the same tkinter window?
#Function to create tkinter window with horizontal and vertical scrollbars
from tkinter import *
from tkinter import ttk
def win():
r0=Tk()
r0.title('title')
f=Frame(r0,bg='BLACK')
f.pack(fill=BOTH, expand=1)
#Creating canvas for attaching scrollbars
c=Canvas(f,bg='BLACK')
c.pack(side=LEFT, fill=BOTH, expand=1)
s1=ttk.Scrollbar(f, orient=VERTICAL, command=c.yview)
s2=ttk.Scrollbar(f, orient=HORIZONTAL, command=c.xview)
s1.pack(side=RIGHT, fill=Y)
c.configure(yscrollcommand=s1.set)
s2.pack(side=BOTTOM, fill=X)
c.configure(xscrollcommand=s1.set)
c.bind('<Configure>', lambda e:c.configure(scrollregion=c.bbox('all')))
#Function to enable mouse scroll
def mw(event):
c.yview_scroll(-1*int((event.delta/120)), 'units')
c.bind_all('<MouseWheel>', mw)
r=Frame(c, bg='BLACK')
c.create_window((0,0),window=r, anchor='s')
return r, r0
r,r0=win()
#Adding images as background in tkinter window using labels
r=Tk()
# Adjust size
r.geometry("800x800")
bg=PhotoImage(file="Your_img.png")
# Show image using label
l1 = Label(r, image=bg)
l1.place(x=0, y=0)
#Adding images as background in tkinter window using canvas
r=Tk()
# Adjust size
r.geometry("800x800")
bg=PhotoImage(file="Your_img.png")
c1=Canvas(r, width=800, height=800)
c1.pack(fill="both", expand=True)
# Display image
c1.create_image(0, 0, image=bg, anchor="nw")
I tried results from other answers but that didn't solve my Problem.
Here is a screenshot of my App on which I am working:
There above, (the one with >myIDLE text) is my Text box in disabled state.
When I decrease the font and use sticky="nsew" method, it works fine. But, when I increase the font and use the same method, something like this happens:
How to permanently FIX the size?
Currently I am declaring size like this:
from tkinter import *
root = Tk()
root.state('zoomed')
root.title("myIDLE Window")
root.iconbitmap(".\\resources\\images\\myIDLE.ico")
root.resizable(0, 0)
swidth = root.winfo_screenwidth()
sheight = root.winfo_screenheight()
mainf = Frame(root)
mainf.grid(row=0, column=0, padx=5, pady=7)
display = Text(mainf, height=int(33*(sheight/864)), width=int(112*(swidth/1536)))
display.grid(row=0, column=0)
root.mainloop()
I read in one answer about a similar question to use .grid_propogate(False)
I used it with following result:
On root window: Nothing changed
On Frame (mainf): Screen became white
On Text Widget: Nothing Changed
Please tell a way so I fix this problem
Also I am sorry I cant share my full code, but pls feel free to ask any part of the code
If you want the text widget to be a specific size in pixels, the following technique works:
Create a frame with the size that you want
turn geometry propagation off for this frame
create a text widget with a width of 1 and a height of 1, using the frame as its master
add the text widget to the frame so that it fills the frame.
add the frame to your app however you want, using grid, pack, or place.
The following example will appear to create a text widget that is 400 pixels wide and tall. Changing the font will not change the size since it is the frame controlling the size of the text widget rather than the text widget controlling the size of the frame.
import tkinter as tk
...
text_frame = tk.Frame(root, width=400, height=400)
text_frame.pack_propagate(0)
text = tk.Text(text_frame, width=1, height=1)
text.pack(fill="both", expand=True, padx=20, pady=20)
...
Found this question through Google. Ended up finding an easy solution.
By using the root.geometry() method, increasing and decreasing font will no longer change the size of the window.
For example, you may do root.geometry("250x250").
I imagine some background Boolean gets ticked off upon its usage that says "the program specified a size for the window, so it probably doesn't want to be changed through external means."
To set this up, I used svgwrite library to create a sample SVG image (20 squares of length 100 at random locations on a display size of length 400)
import svgwrite
import random
random.seed(42)
dwg = svgwrite.Drawing('x.svg', size=(400,400))
dwg.add(dwg.rect(insert=(0,0), size=('100%', '100%'), fill='white')) # White background
for i in range(20):
coordinates = (random.randint(0,399), random.randint(0,399))
color = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
dwg.add(dwg.rect(coordinates, (100, 100),
stroke='black',
fill=svgwrite.rgb(*color),
stroke_width=1)
)
dwg.save()
I then wrote a sample pygame program to generate a PNG image of the same sample. (A seed has been used to generate the same sequence of squares.)
import pygame
import random
random.seed(42)
display = pygame.display.set_mode((400,400))
display.fill((255,255,255)) # White background
for i in range(20):
coordinates = (random.randint(0,399), random.randint(0,399))
color = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
pygame.draw.rect(display, color, coordinates+(100,100), 0)
pygame.draw.rect(display, (0,0,0), coordinates+(100,100), 1) #For black border
pygame.image.save(display, "x.png")
These are the images that I got (SVG's can't be uploaded to SO, so I have provided a screenshot. Nevertheless, the programs above can be run to output the same).
My question is, why is the PNG (on the left) richer and sharper than the corresponding SVG image? The SVG looks blurred and bland, comparatively.
EDIT: One can notice the fine white line between the first two squares at the top-left corner. It's not very clear in the SVG.
Two things I think may impact:
You are using an image viewer, which could distort the vectorial SVG image. I think all of the vector images viewers get the actual screen size, then export the vectorial image into a matrix image sized in function of the size of the screen you have. Then they display the matrix image. If they render the image with softened sharpness, or if they have a problem by getting the size of your screen, the image may be blurred.
To make the PNG image, you use pygame. But you are using another module to make the SVG image. This module may function differently, and also exports the image with another quality than if you were exporting it with pygame.
For me personally the SVG image appears blurred with Gimp, for example, but not with another SVG viewer.
So I think the problem comes from your image viewer.
Tkinter canvas.postscript is not saving the canvas background.
Sizes of the canvas that are used throughout the Python code:
w = 800
h = 600
Function to be assigned to "SAVE CANVAS' button:
def save_canvas():
canvas.update()
canvas.postscript(file= r'Z:\\...\FILE.ps', height=h, width=w, colormode='color')
When I click on the button that has the save_canvas command assign, the file that is saved has no background as assigned in the widget. I changed the color to orange, green, etc. draw on it. Everything looks ok, but saving is without background. Same with .jpeg/.png
What do I need to call for saving the background? I'll be needing this as the application I build require images as background as well.
I don't believe the postscript command is designed to preserve the background color of the canvas widget. It only saves the items that appear on the canvas.
A simple solution is to draw a rectangle that is the exact size of the canvas, and change the color of that rectangle.
I'm making an emacs-esque toy text editor. At startup, there's one large window (a QTextEdit derivative) in the top center of the screen, with a minibuffer (QLineEdit derivative) underneath. Both of the actual editing widgets are contained in the grids of parent classes called Window and MiniWindow (Window also keeps track of a QLabel that appears directly beneath the QTextEdit).
My Window object is at location 1, 1 in the grid, and my MiniWindow object is at 2, 1. I've set content margins to 0 and spacing to 0, which looks great at first, but when I try to grow the window by dragging on the corner, this starts to happen:
As you can see, the screen is divided into two rows (as it should be), but half of the vertical length of the screen is dedicated to each row. What I need is for the top Window to stretch its length during resizing so that it is always adjacent to the MiniWindow underneath. Is there some other option I need to be setting?
Nevermind, got it.
I was having this problem because the QLineEdit object was in the grid of my container class, MiniWindow. The height of a MiniWindow object is free to vary with the window resizing in a way that a QLineEdit alone would not be. The fix was set to the maximumHeight of MiniWindow to approximately the height of a QLineEdit, which is around 16.
Works great now.