Related
I managed to find in someone who made a class for rounded buttons in tkinter that works great. However the issue I have is there is always a white border.
I've tried reading through all of the code and changing all of the colour values but to no avail.
Here is an excerpt of the code working, I've tried to format it as nicely as I could:
from tkinter import Tk, Canvas
class RoundedButton(Canvas):
def __init__(self, master=None, text: str = "", radius=25, btnforeground="#007CEE", btnbackground="#ffffff",
clicked=None, font=("Righteous", 25), *args, **kwargs):
super(RoundedButton, self).__init__(master, *args, **kwargs)
self.config(bg=self.master["bg"])
self.btnbackground = btnbackground
self.btnforeground = btnforeground
self.clicked = clicked
self.radius = radius
self.rect = self.round_rectangle(0, 0, 0, 0, tags="button", radius=radius, fill=btnbackground)
self.text = self.create_text(0, 0, text=text, tags="button", fill=btnforeground, font=font,
justify="center")
self.tag_bind("button", "<ButtonPress>", self.border)
self.tag_bind("button", "<ButtonRelease>", self.border)
self.bind("<Configure>", self.resize)
text_rect = self.bbox(self.text)
if int(self["width"]) < text_rect[2] - text_rect[0]:
self["width"] = (text_rect[2] - text_rect[0]) + 10
if int(self["height"]) < text_rect[3] - text_rect[1]:
self["height"] = (text_rect[3] - text_rect[1]) + 10
def round_rectangle(self, x1, y1, x2, y2, radius=25, update=False,
**kwargs): # if update is False a new rounded rectangle's id will be returned else updates existing rounded rect.
# source: https://stackoverflow.com/a/44100075/15993687
points = [x1 + radius, y1,
x1 + radius, y1,
x2 - radius, y1,
x2 - radius, y1,
x2, y1,
x2, y1 + radius,
x2, y1 + radius,
x2, y2 - radius,
x2, y2 - radius,
x2, y2,
x2 - radius, y2,
x2 - radius, y2,
x1 + radius, y2,
x1 + radius, y2,
x1, y2,
x1, y2 - radius,
x1, y2 - radius,
x1, y1 + radius,
x1, y1 + radius,
x1, y1]
if not update:
return self.create_polygon(points, **kwargs, smooth=True)
else:
self.coords(self.rect, points)
def resize(self, event):
text_bbox = self.bbox(self.text)
if self.radius > event.width or self.radius > event.height:
radius = min((event.width, event.height))
else:
radius = self.radius
width, height = event.width, event.height
if event.width < text_bbox[2] - text_bbox[0]:
width = text_bbox[2] - text_bbox[0] + 30
if event.height < text_bbox[3] - text_bbox[1]:
height = text_bbox[3] - text_bbox[1] + 30
self.round_rectangle(5, 5, width - 5, height - 5, radius, update=True)
bbox = self.bbox(self.rect)
x = ((bbox[2] - bbox[0]) / 2) - ((text_bbox[2] - text_bbox[0]) / 2)
y = ((bbox[3] - bbox[1]) / 2) - ((text_bbox[3] - text_bbox[1]) / 2)
self.moveto(self.text, x, y)
def border(self, event):
if event.type == "4":
self.itemconfig(self.rect, fill="#DE8500")
self.itemconfig(self.text, fill='#ffffff')
if self.clicked is not None:
self.clicked()
else:
self.itemconfig(self.rect, fill=self.btnbackground)
self.itemconfig(self.text, fill=self.btnforeground)
window = Tk()
window.geometry("1440x872")
window.configure(bg="#007CEE")
download_button_1 = RoundedButton(
text="Download",
font=("Righteous", 30),
borderwidth=0)
download_button_1.place(
x=409,
y=383,
width=621.0,
height=105.0
)
window.mainloop()
EDIT: Furas' answer works perfect, for anyone interested in using this rounded button class I would reccommend changing the splinesteps to a higher value at self.create_polygon to help with smoothing
return self.create_polygon(points, **kwargs, smooth=True, splinesteps=10000)
On Linux works for me
highlightthickness=0
or set color of background
highlightbackground="#007CEE"
eventually
borderwidth=-1
Doc for Canvas (page effbot.org on archive.org) shows all config options.
Before:
After:
2023.01.28:
Using: Pop!_OS 22.04 LTS //Python 3.10.6// Tcl/Tk V.8.6
"borderwidth=-1" did not seem to work, but "highlightthickness=0" appeared to do exactly what I expected.
Resulting button with rounded corners
And I used an exact copy of the code posted in the original question (by: Cai Allin,Mar 10, 2022 at 21:21)
My only changes were in the block for the "Rounded button".
First I tested to change the "borderwidth"
download_button_1 = RoundedButton(
text="Download",
font=("Righteous", 30),
borderwidth=-1,
)
But this did not result in any visible change.
I then tested to just below the "borderwidth" add:
highlightthickness=0
And this change succeeded in removing the "white border", and it worked regardless whether the settings for the "borderwidth" was "-1" or "0"
I managed to find in someone who made a class for rounded buttons in tkinter that works great. However the issue I have is there is always a white border.
I've tried reading through all of the code and changing all of the colour values but to no avail.
Here is an excerpt of the code working, I've tried to format it as nicely as I could:
from tkinter import Tk, Canvas
class RoundedButton(Canvas):
def __init__(self, master=None, text: str = "", radius=25, btnforeground="#007CEE", btnbackground="#ffffff",
clicked=None, font=("Righteous", 25), *args, **kwargs):
super(RoundedButton, self).__init__(master, *args, **kwargs)
self.config(bg=self.master["bg"])
self.btnbackground = btnbackground
self.btnforeground = btnforeground
self.clicked = clicked
self.radius = radius
self.rect = self.round_rectangle(0, 0, 0, 0, tags="button", radius=radius, fill=btnbackground)
self.text = self.create_text(0, 0, text=text, tags="button", fill=btnforeground, font=font,
justify="center")
self.tag_bind("button", "<ButtonPress>", self.border)
self.tag_bind("button", "<ButtonRelease>", self.border)
self.bind("<Configure>", self.resize)
text_rect = self.bbox(self.text)
if int(self["width"]) < text_rect[2] - text_rect[0]:
self["width"] = (text_rect[2] - text_rect[0]) + 10
if int(self["height"]) < text_rect[3] - text_rect[1]:
self["height"] = (text_rect[3] - text_rect[1]) + 10
def round_rectangle(self, x1, y1, x2, y2, radius=25, update=False,
**kwargs): # if update is False a new rounded rectangle's id will be returned else updates existing rounded rect.
# source: https://stackoverflow.com/a/44100075/15993687
points = [x1 + radius, y1,
x1 + radius, y1,
x2 - radius, y1,
x2 - radius, y1,
x2, y1,
x2, y1 + radius,
x2, y1 + radius,
x2, y2 - radius,
x2, y2 - radius,
x2, y2,
x2 - radius, y2,
x2 - radius, y2,
x1 + radius, y2,
x1 + radius, y2,
x1, y2,
x1, y2 - radius,
x1, y2 - radius,
x1, y1 + radius,
x1, y1 + radius,
x1, y1]
if not update:
return self.create_polygon(points, **kwargs, smooth=True)
else:
self.coords(self.rect, points)
def resize(self, event):
text_bbox = self.bbox(self.text)
if self.radius > event.width or self.radius > event.height:
radius = min((event.width, event.height))
else:
radius = self.radius
width, height = event.width, event.height
if event.width < text_bbox[2] - text_bbox[0]:
width = text_bbox[2] - text_bbox[0] + 30
if event.height < text_bbox[3] - text_bbox[1]:
height = text_bbox[3] - text_bbox[1] + 30
self.round_rectangle(5, 5, width - 5, height - 5, radius, update=True)
bbox = self.bbox(self.rect)
x = ((bbox[2] - bbox[0]) / 2) - ((text_bbox[2] - text_bbox[0]) / 2)
y = ((bbox[3] - bbox[1]) / 2) - ((text_bbox[3] - text_bbox[1]) / 2)
self.moveto(self.text, x, y)
def border(self, event):
if event.type == "4":
self.itemconfig(self.rect, fill="#DE8500")
self.itemconfig(self.text, fill='#ffffff')
if self.clicked is not None:
self.clicked()
else:
self.itemconfig(self.rect, fill=self.btnbackground)
self.itemconfig(self.text, fill=self.btnforeground)
window = Tk()
window.geometry("1440x872")
window.configure(bg="#007CEE")
download_button_1 = RoundedButton(
text="Download",
font=("Righteous", 30),
borderwidth=0)
download_button_1.place(
x=409,
y=383,
width=621.0,
height=105.0
)
window.mainloop()
EDIT: Furas' answer works perfect, for anyone interested in using this rounded button class I would reccommend changing the splinesteps to a higher value at self.create_polygon to help with smoothing
return self.create_polygon(points, **kwargs, smooth=True, splinesteps=10000)
On Linux works for me
highlightthickness=0
or set color of background
highlightbackground="#007CEE"
eventually
borderwidth=-1
Doc for Canvas (page effbot.org on archive.org) shows all config options.
Before:
After:
2023.01.28:
Using: Pop!_OS 22.04 LTS //Python 3.10.6// Tcl/Tk V.8.6
"borderwidth=-1" did not seem to work, but "highlightthickness=0" appeared to do exactly what I expected.
Resulting button with rounded corners
And I used an exact copy of the code posted in the original question (by: Cai Allin,Mar 10, 2022 at 21:21)
My only changes were in the block for the "Rounded button".
First I tested to change the "borderwidth"
download_button_1 = RoundedButton(
text="Download",
font=("Righteous", 30),
borderwidth=-1,
)
But this did not result in any visible change.
I then tested to just below the "borderwidth" add:
highlightthickness=0
And this change succeeded in removing the "white border", and it worked regardless whether the settings for the "borderwidth" was "-1" or "0"
I want to update the polygon on each mouse click. The below code redraw new polygon when new position is obtained from mouse click. I want to update the polygon or get new one (delete old one). How to do it. Here is the complete as suggested. Tkinter library of python is used.
import math
from Tkinter import *
from PIL import Image, ImageDraw
import Image, ImageTk
coord=[] # for saving coord of each click position
Dict_Polygons={} # Dictionary for saving polygons
list_of_points=[]
# Function to get the co-ordianates of mouse clicked position
def draw_polygons(event):
mouse_xy = (event.x, event.y)
func_Draw_polygons(mouse_xy)
# Function to draw polygon
def func_Draw_polygons(mouse_xy):
center_x, center_y = mouse_xy
#draw dot over position which is clicked
x1, y1 = (center_x - 1), (center_y - 1)
x2, y2 = (center_x + 1), (center_y + 1)
canvas.create_oval(x1, y1, x2, y2, fill='green', outline='green', width=5)
# add clicked positions to list
list_of_points.append(mouse_xy)
numberofPoint=len(list_of_points)
# Draw polygon
if numberofPoint>2:
poly=canvas.create_polygon(list_of_points, fill='', outline='green', width=2)
canvas.coords(poly,)
elif numberofPoint==2 :
print('line')
canvas.create_line(list_of_points)
else:
print('dot')
# ImageDraw.ImageDraw.polygon((list_of_points), fill=None, outline=None)
print(list_of_points)
##########################################################################
# Main function
if __name__ == '__main__':
root = tk.Tk()
# Input image
img = Image.open("e.png")
# Draw canvas for input image to pop up image for clicks
filename = ImageTk.PhotoImage(img)
canvas = Canvas(root,height=img.size[0],width=img.size[0])
canvas.image = filename
canvas.create_image(0,0,anchor='nw',image=filename)
canvas.pack()
# bind function to canvas to generate event
canvas.bind("<Button 3>", draw_polygons)
root.mainloop()
Does this get you any closer to your solution? It re-draws based on the list of points each time a new point is added to the list.
import math
#change to tkinter for python3
from Tkinter import *
#from PIL import Image, ImageDraw
#import Image, ImageTk
coord=[] # for saving coord of each click position
Dict_Polygons={} # Dictionary for saving polygons
list_of_points=[]
poly = None
# Function to get the co-ordianates of mouse clicked position
def draw_polygons(event):
mouse_xy = (event.x, event.y)
func_Draw_polygons(mouse_xy)
# Function to draw polygon
def func_Draw_polygons(mouse_xy):
global poly, list_of_points
center_x, center_y = mouse_xy
canvas.delete(ALL)
list_of_points.append((center_x, center_y))
for pt in list_of_points:
x, y = pt
#draw dot over position which is clicked
x1, y1 = (x - 1), (y - 1)
x2, y2 = (x + 1), (y + 1)
canvas.create_oval(x1, y1, x2, y2, fill='green', outline='green', width=5)
# add clicked positions to list
numberofPoint=len(list_of_points)
# Draw polygon
if numberofPoint>2:
poly=canvas.create_polygon(list_of_points, fill='', outline='green', width=2)
elif numberofPoint==2 :
print('line')
canvas.create_line(list_of_points)
else:
print('dot')
# ImageDraw.ImageDraw.polygon((list_of_points), fill=None, outline=None)
print(list_of_points)
##########################################################################
# Main function
if __name__ == '__main__':
root = Tk()
canvas = Canvas(root,height=200,width=200)
canvas.pack()
# bind function to canvas to generate event
canvas.bind("<Button 3>", draw_polygons)
root.mainloop()
I tried to create an Image using PIL. I wanted to show the image in a tkinter canvas with "create_image" method. But there is no image in the canvas. It looks empty:
self.image = Image.new("RGBA", (w, h), "white")
pixels = self.image.load()
for x in range(w):
for y in range(h):
pixels[x, y] = area.get_color(x, y)
photo = ImageTk.PhotoImage(self.image)
self.canvas.create_image(0, 0, image=photo)
self.canvas.pack(fill=tk.BOTH, expand=tk.TRUE)
The method "area.get_color(x, y)" returns a 4-tuple (r, g, b, alpha).
Well, few things:
First of all, python has this weird garbage collecting issue with tkinter images, in order to really pass the image to your canvas, you need to anchor down first otherwise it would just got wiped when it was passed to canvas.
This is what i did after learning from other people's example:
window.image = create_image(WIDTH, HEIGHT)
Once you anchor it down to your Tk(), it shouldn't get collected and erased anymore as long as your Tk() exists.
Second problem is your placement of image, you might want to place it to the center of your canvas instead of the corner of it:
canvas.create_image(WIDTH//2, HEIGHT//2, image=window.image)
In the end your program would look like this:
window = tk.Tk()
canvas = tk.Canvas(window, width=WIDTH, height=HEIGHT)
window.image = create_image(WIDTH, HEIGHT)
canvas.create_image(WIDTH//2, HEIGHT//2, image=window.image)
canvas.pack(fill=tk.BOTH, expand=tk.TRUE)
window.mainloop()
BTW a circle of a radius of 10 is just too small in a canvas of 640 x 480, you might want to increase this number to 100 or so.
if x**2 + y**2 < 10000:
Like that^
I posted just the relevant part of a pupils project code. They tried to create a tkinter application showing a fractal. But they should do it in
an absolute (crazy) objectoriented manner. After that it should be done in a very much faster implementation.
All the other code works fine (all tests ok), only the PIL part ...
Ok i create a small piece of code to show the pupils idea. But this code doesn't show a black piece of a circle as expected. The canvas is still empty:
import tkinter as tk
from PIL import Image, ImageTk
WHITE = (255, 255, 255, 255)
BLACK = (0, 0, 0, 255)
WIDTH = 640
HEIGHT = 480
def get_color(x, y):
if x**2 + y**2 < 100:
return BLACK
else:
return WHITE
def create_image(w, h):
image = Image.new("RGBA", (w, h), "white")
pixels = image.load()
for x in range(w):
for y in range(h):
pixels[x, y] = get_color(x, y)
return ImageTk.PhotoImage(image)
window = tk.Tk()
canvas = tk.Canvas(window, width=WIDTH, height=HEIGHT)
canvas.create_image(0, 0, image=create_image(WIDTH, HEIGHT))
canvas.pack(fill=tk.BOTH, expand=tk.TRUE)
window.mainloop()
I am using Pyglet to create a main menu for my python game. I want to draw text on top of a box that would act as its container. Whenever I render the text, instead of it having a transparent background, it draws whatever the glClearColor is set to. This also happens whenever I try and draw an image that has no background.
I am currently using these two lines for my textbox and the text.
self.text_box = pyglet.sprite.Sprite(pyglet.image.load('../Resources/Textures/Menu/text_box.png'),640-150,360-25, batch=self.menuBatch,group=boxGroup)
self.play_text = pyglet.text.Label("Play", font_name="Arial", font_size=32, x=640, y=360, anchor_x='center', anchor_y='center', color=(255,255,255,255), batch=self.menuBatch,group=textGroup)
Then I just call self.menuBatch.draw(). A picture of the problem I am having is:
For transparency effects to work, 'blend' should be enabled in OpenGL.
To enable blend:
glEnable(GL_BLEND) # transparency
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) # transparency
This complete snippet is working for me:
import pyglet
from pyglet.gl import *
# Pyglet Window stuff ---------------------------------------------------------
batch = pyglet.graphics.Batch() # holds all graphics
config = Config(sample_buffers=1, samples=4,depth_size=16, double_buffer=True, mouse_visible=False)
window = pyglet.window.Window(fullscreen=False, config=config)
glClearColor( 0, 100, 0, 255) # background color
glEnable(GL_LINE_SMOOTH)
glHint(GL_LINE_SMOOTH_HINT, GL_DONT_CARE)
glEnable(GL_BLEND) # transparency
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) # transparency
play_text = pyglet.text.Label("Play", font_name="Arial", font_size=32, x=240, y=140, anchor_x='center', anchor_y='center', color=(255,0,255,255), batch=batch,group=None)
text_box = pyglet.sprite.Sprite(pyglet.image.load('text_box.png'),240-150,160-25, batch=batch,group=None)
#window.event
def draw(dt):
window.clear()
batch.draw()
if __name__ == "__main__":
pyglet.clock.schedule_interval(draw, 1.0/60)
pyglet.app.run()
I have done something very similar to this before when making the GUI for one of my 3D programs. To make things very simple, I firstly turned off GL_DEPTH_TEST before the draw() call and then I re-enabled GL_DEPTH_TEST after the draw() call. I believe that the reason why the previous answer was working for them is because they didn't have GL_DEPTH_TEST enabled in the first place. I made a button class that you could maybe use as well (It's important to note that the argument "pos" is for the (x, y) coordinate of the lower left corner of the button and the argument "dim" is for the (width, height) dimensions of the button. The "texture_coords" argument refers to the texture coordinates of the background image of the button. If you want the full image, just leave it at the default. The rest is pretty self explanatory). So here's the code:
class Button:
def __init__(self, btn_img_file, text = "Button", pos = (0, 0), dim = (10, 10), text_color = (255, 255, 255), texture_coords = (0, 0, 1, 0, 1, 1, 0, 1)):
self.x, self.y = pos
self.w, self.h = dim
self.text = text
self.img = btn_img_file
self.tex = get_tex(self.img)
self.coords = texture_coords
self.color = text_color
self.batch = pyglet.graphics.Batch()
def on_click(self, mouse_x, mouse_y, function, *args, **kwargs):
x, y = self.x, self.y
X, Y = x + self.w, y + self.h
if mouse_x > x and mouse_x < X and mouse_y > y and mouse_y < Y:
function(*args, **kwargs)
def draw(self):
x, y = self.x, self.y
X, Y = x + self.w, y + self.h
font_size = (self.w // len(self.text)) - 5
label = pyglet.text.Label(self.text,
font_name = 'Times New Roman',
font_size = font_size,
x = x + (self.w // 2), y = y + (self.h // 2),
anchor_x = 'center', anchor_y = 'center',
color = (*self.color, 255))
self.batch.add(4, GL_QUADS, self.tex, ('v2f', (x, y, X, y, X, Y, x, Y)), ('t2f', self.coords))
glDisable(GL_DEPTH_TEST)
self.batch.draw()
label.draw()
glEnable(GL_DEPTH_TEST)
I hope this was helpful!
~ Rick Bowen