Positioning text and displaying URL images #510
Answered
by
Akascape
amanashraf
asked this question in
Q&A
-
|
Hi, I'm trying to create a UI such that when a 'search' button is clicked the model displays a URL image and some text in the frame (Right Frame). Theres 2 parts I'm having issues with.
Please see my code attached. If theres any more information you need or I haven't made a lot of sense, please let me know! ` ` |
Beta Was this translation helpful? Give feedback.
Answered by
Akascape
Oct 11, 2022
Replies: 2 comments 5 replies
-
|
@amanashraf It's a little bit complicated example, but let me give you some tips:
customtkinter.CTkButton(master=self.frame_right, image=ImageTk.PhotoImage(Image.open("Your_Image")).resize((256, 256), Image.Resampling.LANCZOS)), text="", fg_color=None, hover_color=None)Change the width, height, resize according to your choice Then you can easily configure the image for the button.
|
Beta Was this translation helpful? Give feedback.
4 replies
-
|
Hi @Akascape, Thank you for the tips! I gave them a go, but unfortunately they didn't completely work.
|
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
@amanashraf Building a good UI needs experimentation, let me give you some more tips so that you can build your apps properly.
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the added tips! |
Beta Was this translation helpful? Give feedback.
-
|
@amanashraf I have analyzed your program code and improved it, here is the result: Improved Programresult.mp4Codeimport tkinter as tk
import tkinter.messagebox
import customtkinter as ctk
#from Dataframe import Data
from PIL import Image, ImageTk
from urllib.request import urlopen
import io ##Need this module to convert the raw_data
ctk.set_appearance_mode("System") # Modes: "System" (standard), "Dark", "Light"
ctk.set_default_color_theme("blue") # Themes: "blue" (standard), "green", "dark-blue"
class HomePage(ctk.CTk):
WIDTH = 950
HEIGHT = 700 ##I have changed the window size
def __init__(self):
super().__init__()
self.title("Movie/Series Selector")
self.geometry(f"{HomePage.WIDTH}x{HomePage.HEIGHT}")
# -------- create frame --------
# configure grid layout
self.grid_columnconfigure(1, weight=1)
self.grid_rowconfigure((0,1,2,3,4), weight=1) ## Do not forget to give proper grif config
self.frame_left = ctk.CTkFrame(master=self)
self.frame_left.grid(row=0, column=0, sticky="nswe", padx=(10,5), pady=10)
self.frame_right = ctk.CTkFrame(master=self)
self.frame_right.grid(row=0, column=1, sticky="nswe", padx=(5,10), pady=10)
#Left Frame
#Time
self.label_1 = ctk.CTkLabel(master=self.frame_left,
text="How much time do you have?",
text_font=("Roboto Medium", -16))
self.label_1.grid(row=1, column=0, pady=(50,10), padx=30, sticky="we")
self.optionMenu_1 = ctk.CTkOptionMenu(master=self.frame_left,
width = 120,
values=["Select",
"<30mins",
"30mins - 1hr",
"1hr - 2hrs 30mins",
"+2hrs 30mins"],
command=self.disable_enable) ### Command function for the combobox 1
self.optionMenu_1.grid(row=2, column=0, pady=10, padx=30, sticky="we")
#Streaming Service
self.label_2 = ctk.CTkLabel(master=self.frame_left,
text="What streaming service do you have?",
text_font=("Roboto Medium", -16))
self.label_2.grid(row=4, column=0, padx=30, pady=(35,10))
self.optionMenu_2 = ctk.CTkOptionMenu(master=self.frame_left,
values=["Select",
"Netflix",
"Prime",
"Disney",
"Apple",
"Hulu",
"HBO"],
command=self.disable_enable) ### Same command function for the combobox 2
self.optionMenu_2.grid(row=5, column=0, pady=10, padx=30, sticky="we")
#Movie or Series
self.label_3 = ctk.CTkLabel(master=self.frame_left,
text="Do you want to watch a Movie or Series?",
text_font=("Roboto Medium", -16))
self.label_3.grid(row=10, column=0, pady=(35,10), padx=30)
self.optionMenu_3 = ctk.CTkOptionMenu(master=self.frame_left,
values=["Select", "Movie", "Series"], command=self.disable_enable) ### Again same command function for the combobox 3
self.optionMenu_3.grid(row=12, column=0, pady=10, padx=30, sticky="we")
#Genre
self.label_4 = ctk.CTkLabel(master=self.frame_left,
text="What Genre are you in the mood for?",
text_font=("Roboto Medium", -16)) # font name and size in px
self.label_4.grid(row=15, column=0, pady=(35,10), padx=30)
self.optionMenu_4 = ctk.CTkOptionMenu(master=self.frame_left,
values=["Any",
"Biography",
"Film Noir",
"Game Show",
"Musical",
"Sport",
"Short",
"Adventure",
"Fantasy",
"Animation",
"Drama",
"Horror",
"Action",
"Comedy",
"History",
"Western",
"Thriller",
"Crime",
"Documentary",
"Science Fiction",
"Mystery",
"Music",
"Romance",
"Family",
"War",
"News",
"Reality",
"Talk Show"])
self.optionMenu_4.grid(row=17, column=0, pady=10, padx=30, sticky="we")
#Submit
self.searchButton = ctk.CTkButton(master=self.frame_left,
width= 140,
height= 50,
text="Search",
text_font = ("Roboto Medium",20),
command=self.search)
self.searchButton.grid(row=20, column=0, pady=(55,60), padx=30)
self.searchButton.bind("<Return>",self.search)
self.searchButton.bind("<Return>",self.switchButton, add='+')
#Right Frame
#Image Box
self.imageLabel = ctk.CTkButton(master=self.frame_right,
text = "", fg_color=None, hover_color=None)
self.imageLabel.grid(row=0, column=0, columnspan=2, padx=20, pady=(5, 0), sticky="nsew")
self.SMselectedLabel = ctk.CTkLabel(master=self.frame_right,
width= 250,
text = "", anchor="w", ## Anchor the big labels to left
text_font = ("Roboto Medium",5))
self.SMselectedLabel.grid(row=1, column=0, padx=50, pady=5, sticky="nsew")
self.castLabel = ctk.CTkLabel(master=self.frame_right,
width= 250,
text = "",
text_font = ("Roboto Medium",20))
self.castLabel.grid(row=2, column=0, columnspan=2, padx=20, pady=(5), sticky="nsew")
self.overviewLabel = ctk.CTkLabel(master=self.frame_right,
width= 250,
text = "",
text_font = ("Roboto Medium",20))
self.overviewLabel.grid(row=3, column=0, columnspan=2, padx=20, pady=(5), sticky="nsew")
#Reset button
self.resetButton = ctk.CTkButton(master=self.frame_right,
width= 140,
height= 40,
text="Reset",
text_font = ("Roboto Medium",20),
state=tk.DISABLED,
command= self.resetClick)
def disable_enable(self, value):
if self.optionMenu_1.get()!="Select" and self.optionMenu_2.get()!="Select" and self.optionMenu_3.get()!="Select":
self.resetButton.configure(state=tk.NORMAL)
else:
self.resetButton.configure(state=tk.DISABLED)
def search(self):
##Add your converter function here
def converter(imageURL):
u = urlopen(imageURL)
raw_data = u.read()
u.close()
poster = io.BytesIO(raw_data) ##Change the bytes properly so that PIL can read it
return (poster)
results = ['Amazing Stories', 'Release Date: 2020', 'https://image.tmdb.org/t/p/original/evcvXE6BP8fT8UoWsyiTBvxqyrL.jpg', ##Give proper indentation in long strings
'Starring: Dylan OBrien, Victoria Pedretti, Micah Stock, Sasha Alexander, Gabriel Olds, Cullen Douglas, Nandy Martin',
'Overview: Each episode transports the audience to worlds of wonder through the lens of today’s most imaginative filmmakers, directors and writers.'
'A reimagining of the original anthology series by Steven Spielberg.', '55 mins']
if isinstance(results, list):
##Use the wraplength method to give auto spacings for long strings
self.SMselectedLabel.configure(text = "How about watahing: "+results[0]+" ("+results[1]+")"+results[-1], text_font = ("Roboto Medium",20), wraplength=500)
self.castLabel.configure(text = results[3], text_font = ("Roboto Medium",13), wraplength=500)
self.overviewLabel.configure(text = results[4], text_font = ("Roboto Medium",10), wraplength=500)
##Show the image
image=converter(results[2])
rawImage = ImageTk.PhotoImage(Image.open(image).resize((350, 400), Image.Resampling.LANCZOS))
self.imageLabel.configure(image = rawImage)
self.resetButton.grid(row=4, column=0, padx=20, pady=(10,10)) ##Improve the reset feature
else:
output = results
self.resultsLabel.configure(text = output, text_font = ("Roboto Medium",10), wraplength=500)
self.resetButton.grid_forget()
def resetClick(self):
self.optionMenu_1.set("Select")
self.optionMenu_2.set("Select")
self.optionMenu_3.set("Select")
self.optionMenu_4.set("Any")
self.disable_enable(None)
def switchButton(self):
self.resetButton['state']=tk.NORMAL
self.nextResultButton['state']=tk.NORMAL
def start(self):
self.mainloop()
if __name__ == "__main__":
app = HomePage()
app.start()My comments are given with |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Ahh right i see, thank you so much for your help. Its all working now! I have marked this as answered |
Beta Was this translation helpful? Give feedback.
Answer selected by
amanashraf
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@amanashraf I have analyzed your program code and improved it, here is the result:
Improved Program
result.mp4
Code