Images in PySimpleGUI Python3

Question

So I am making a mail service application for a project with PySimpleGUI and I am really struggling with the image placement... here is my code:

import PySimpleGUI as sg
import smtplib
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText


sg.theme('Dark')
layout = [[sg.Frame('', [[
        sg.Image('xmail.png', size=(1100, 300))]])],
            [sg.Frame('Options', [[
                sg.Checkbox('Confidential'), sg.Checkbox('Extra Confidential'),
                sg.Checkbox('Not Confidential')]])],
            [sg.Text('Sender Email'+':', size=(14, None)), sg.InputText(key='sender_email1')],
            [sg.Text('Sender Password'+':', size=(14, None)), sg.InputText(password_char='*', key='sender_password1')],
            [sg.Frame('Encryption key - (optional)', [[
                sg.Slider(range=(1, 100), orientation='v', size=(5, 20), default_value=25, key='slider_encrypt1'),
                sg.Slider(range=(1, 100), orientation='v', size=(5, 20), default_value=75, key='slider_encrypt2'),
                sg.Slider(range=(1, 100), orientation='v', size=(5, 20), default_value=55, key='slider_encrypt3')]])],
            [sg.Text('Receiver Email'+':', size=(14, None)), sg.InputText(key='receiver_email1')],
            [sg.Text('Subject', size=(14, None)), sg.InputText(key='subject1')],
            [sg.Multiline('Email...', key='email_message1', size=(70, 12))],
            [sg.Button('Send Mail', button_color=('white', 'green')),
            sg.Button('Cancel', button_color=('white', 'red'))]]


window = sg.Window('Window Title', layout, size=(1100, 950))
event, values = window.read()

This is only the layout I have a lot of code under it for the actual function of the mail service. This is what it looks like - enter image description here

You can see the first image fits perfectly. What I want is to add an image on the right hand side which is vertical and would fit perfectly, but instead what happens is...

enter image description here

As you can see it completely messes it up and puts the text boxes out of order, does anyone have any idea how to fix this? I tried adding the code for the image containing the text into different positions but it never works, it always does the same, messes it all up :/

Thank you to everyone who reads this! :)

score 1 · Answer 1 · answered Oct 04 '20 at 07:26

You can use sg.Frame or sg.Column to seperate left frame and right frame. Layout of left frame for your Checkbox, Text, Slider, Multiline, ..., and another layout of right frame for your another vertial image. Something like this

top_frame = [[sg.Image(...)]]
left_frame = [[sg.Frame(...)], [sg.Text(...}], ...]
right_frame = [[sg.Image(...)]]

layout = [
    [sg.frame("", top_frame)],
    [sg.frame("", left_frame), sg.frame("", right_frame)]
]

Images in PySimpleGUI Python3

1 Answers1