Setting up GUI with Tkinter for Image and Text inputs – Photoshop

Im using python 2.7 to build a satellite tracker for a cubesat project at my university. Now I’ve got the whole thing running as I want it to. I produce 4 images and a load of text based on the ISS’s orbit parameters as our cubesat is not yet flying.

The 4 pictures are:

1) Satellite’s current position on a globe based on its TLE straight from celestrak.

2) Satellite’s current position on a mercator(flat) map.

3) Its current lat/lon position translated to a google earth view to physically interpret where it is.

4) Its current lat/lon position based on current weather maps, for whether or not there are clouds in the region, obscuring the satellites remote sensing imaging capabilities. (Reason why the picture looks ugly and purple, is because this region had no current weather data at the time of retrieving data)

Then I need to implement a text box with information on altitude, velocity, spatial resolution etc.

It’s all nice and dandy. But I cant for the love of god figure out how to get this Tkinter GUI to play nice! I’m a geoscientist, not a computer scientist and python programming is very new to me 😀

Anyway I did a quick layout in photoshop as of how I want the finished data to be produced in a Tkinter GUI. See the primitive image below:

Now here is my shameful code below:

import Tkinter as tk
from PIL import ImageTk, Image

#This creates the main window of an application
window = tk.Tk()
window.title("Satellite Control Center")
window.geometry("1000x800")
window.configure(background='grey')

#Imports the pictures.
pic1 = "Globeview.png"
pic2 = "MercatorView.png"
pic3 = "currentweathercroppedsmall.png"
pic4 = "GECurrentcroppedsmall.png"

#Creates a Tkinter-compatible photo image, which can be used everywhere Tkinter expects an image object.
img1 = ImageTk.PhotoImage(Image.open(pic1))
img2 = ImageTk.PhotoImage(Image.open(pic2))
img3 = ImageTk.PhotoImage(Image.open(pic3))
img4 = ImageTk.PhotoImage(Image.open(pic4))

#The Label widget is a standard Tkinter widget used to display a text or image on the screen.
globeview = tk.Label(window, image = img1)
mercatorview = tk.Label(window, image = img2)
currentweather= tk.Label(window, image = img3)
gearth = tk.Label(window, image = img4)

#The Pack geometry manager packs widgets in rows or columns.
globeview.pack(side = "top", fill = "both", expand = "yes")
mercatorview.pack(side = "top", fill = "both", expand = "yes")
currentweather.pack(side = "bottom", fill = "both", expand = "yes")
gearth.pack(side = "bottom", fill = "both", expand = "yes")

#Start the GUI
window.mainloop()

Which produces this horror show!

My issues are clearly:

1) Images are not aligned in any way I want. Normally in HTML I’d set up table rows, align and fit it with spacers as I want. But I don’t know how to define that here and I’ve spend hours being frustrated of this by now.

2) I need to add a text box. Every time I’ve tried to add various versions of text boxes. I get weird pyimage’xx’ errors and no text box seems to materialize.

3) For the future: A button under the images that will show the full size uncropped picture. But that’s not imperative right now!

So I’m hoping one of you have a nice way to do this, or can point me in a direction.. or perhaps even have done something like it where I can see your code and just tweak the numbers of a bit for aligning the pixels.

Thank you in advance.