0

I am trying to design a GUI that hold a map the user can interact with (move around, zoom in and zoom out from, etc.) and some additional bottoms with different functions attached to them.

The way i want it to work is to have a main window that only contains the map, and a second window ("topwin" in the code) placed on top of it that contains a grid with different frames for the bottoms and labels.

Is there any way of creating the second window that does not involve using the tk.Frame function? Because that is what i have at the moment and when i run the code it only shows the map.

EDIT:I packed the topwin, but i still dont get the result i want, i will attach pictures of what i get now and what my goal is:

This is what my two windows stack on top of each other look like

This is what i want the GUI with two independent windows to look like

from tkinter import *
import tkinter as tk
from tkinter import messagebox
from PIL import Image
from PIL import ImageTk
from math import ceil

win = tk.Tk()
screen_width = win.winfo_screenwidth()
screen_height = win.winfo_screenheight()
win.geometry(f"{screen_width}x{screen_height}+0+0")
win.resizable(False, True)
win.title("Semi-Autonomous Fire Scout Drone Main Frame User Interface")

topwin = tk.Frame(win)
topwin.pack()

topwin.grid_columnconfigure(0, weight=1)
topwin.grid_columnconfigure(1, weight=1)

tenth_w = ceil(0.1*screen_width)
one_in_fifteen_w = ceil(0.015*screen_width)
one_in_fourfive_w = ceil(0.45*screen_width)
tenth_h = ceil(0.1*screen_height)
one_in_forty_h = ceil(0.4*screen_height)
one_in_fivefive_h = ceil(0.55*screen_height)


mapImg = img_resize("middle_earth_map.png", screen_width, screen_height)
logo_label = tk.Label(win, image=mapImg).pack()

def img_resize(file, width, height):
img = Image.open(file)
img = img.resize((width, height), Image.ANTIALIAS)
photoImg =  ImageTk.PhotoImage(img)
return photoImg


topLeftFrame = tk.Frame(topwin)
topLeftFrame.grid(row=0, column=0, padx=10, sticky="w")

homeImg = img_resize("home_icon.png", tenth_h, tenth_h)
homeb = tk.Button(topLeftFrame, image=homeImg, command=homeMenu, width=tenth_h, height= tenth_h)

rgbmenuImg = img_resize("rgb_icon.png", tenth_h, tenth_h)
rgbmenub = tk.Button(topLeftFrame, image=rgbmenuImg, command=rgbmenu, height=tenth_h, width=tenth_h)

thermalmenuImg = img_resize("thermal_icon.png", tenth_h, tenth_h)
thermalmenub = tk.Button(topLeftFrame, image=thermalmenuImg, command=thermalmenu, height=tenth_h, width=tenth_h)

homeb.grid(row=0, column=0, padx=10, pady=10)
rgbmenub.grid(row=0, column=1, padx=10, pady=10)
thermalmenub.grid(row=0, column=2, padx=10, pady=10)



topRightFrame = tk.Frame(topwin)
topRightFrame.grid(row=0, column=2, padx=10, sticky="ne")

settImg = img_resize("settings_icon.png", tenth_h, tenth_h)
settingb = tk.Button(topRightFrame, image=settImg, command=settings, height=tenth_h, width=tenth_h)

infoImg = img_resize("copyright_icon.png", tenth_h, tenth_h)
infob = tk.Button(topRightFrame, image=infoImg, command=copyright, height=tenth_h, width=tenth_h)

loginImg = img_resize("login_icon.png", tenth_h, tenth_h)
loginb = tk.Button(topRightFrame, image=loginImg, command=login, height=tenth_h, width=tenth_h)

exitImg = img_resize("exit_icon.png", tenth_h, tenth_h)
exitb = tk.Button(topRightFrame, image=exitImg, command=quit, height=tenth_h, width=tenth_h)

settingb.grid(row=0, column=0, padx=10, pady=10)
infob.grid(row=0, column=1, padx=10, pady=10)
loginb.grid(row=0, column=2,padx=10, pady=10)
exitb.grid(row=0, column=3, padx=10, pady=10)



rightFrame = tk.Frame(topwin)
rightFrame.grid(row=1, column=2, padx=10, pady=10, sticky="e")

tempMap = img_resize("temp_heat_map.png", one_in_fifteen_w, one_in_forty_h)
tempMaplab = tk.Label(rightFrame, image=tempMap).grid(row=0, column=0, padx=10, pady=10)



bottomFrame = tk.Frame(topwin, relief='solid', bd=2)
bottomFrame.grid(row=2, column=1, padx=10, pady=10, sticky="s")

info = """Drone Speed = XXX Km/h   Drone Distance = XXX m  Wind Direction = XX   Wind Force = XX Knots"""
info_botton = tk.Label(bottomFrame, justify=tk.CENTER, text=info, font = "arial 14 bold").grid(row=0, column=0, padx=10, pady=10)


win.mainloop()
J Dom
  • 63
  • 7
  • You need to `pack()` or `grid()` topwin if you want to display it. – figbeam Dec 12 '18 at 11:46
  • That is true thanks, but it still does not do what i want it to – J Dom Dec 12 '18 at 11:51
  • I also get the error: `NameError: name 'img_resize' is not defined`. – figbeam Dec 12 '18 at 11:52
  • Is this an issue between PIL and Pillow? I have Pillow installed which may explain this. – figbeam Dec 12 '18 at 11:58
  • That is because i deleted the function that resizes the images called "img_resize" as it was irrelevant to the question, ill add it for you – J Dom Dec 12 '18 at 12:03
  • Ok, now I'm just getting the middle_earth_map and nothing else. – figbeam Dec 12 '18 at 12:09
  • I'm also getting: `NameError: name 'homeMenu' is not defined`. I'm not sure you understand, but I copy your code, paste it into IDLE and run it. If it doesnt run I can't help you. Please check that your code runs before posting it. – figbeam Dec 12 '18 at 12:13
  • 3
    all widgets have a background colour, frames included, I would suggest what you actually want to do is to skip the use of the frame and place the buttons and other widgets above the background image. that or place everything in a canvas and `create_window`s to your controls – James Kent Dec 12 '18 at 12:14
  • Look at [this answer](https://stackoverflow.com/a/10181434/3714930) for a nice and easy was to use a background image. – fhdrsdg Dec 12 '18 at 15:10
  • @JamesKent The problems is that the map is not supposed to be an image, im trying to implement the actual google maps API so that the user can actually interact with it, move it around it around and so, but i want the map to be big, fullscreen to be more precise, and so i want the bottoms to be on a individual window on top of it where they will stay static as the user moves the map around. Can this be done with a canvas? – J Dom Dec 12 '18 at 17:21
  • @figbeam I didn't post the full entire code, but more of a snipet where the frames and windows are defined so you could see what im talking about, because the full code its pretty long and i thought it would've been too much. – J Dom Dec 12 '18 at 17:24
  • I understand. For your future questions it's worth knowing that a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) is what most are looking for in order to answer a question. – figbeam Dec 12 '18 at 19:50

0 Answers0