Arrange dictionary items on a gui grid

Question

I have a dictionary:

data = {"Angles": 
        {"Hip": ["x", "y", "z"],
         "Knee": ["x", "y", "z"],
         "Ankle": ["x", "y", "z"]},
        "Moments":
        {"Hip": ["x", "y", "z"],
         "Knee": ["x", "y", "z"],
         "Ankle": ["x", "y", "z"]},
        "Powers": {"Hip": ["z"],
                   "Knee": ["z"],
                   "Ankle": ["z"]}}

That I am trying to place on a tkinter GUI that would look something like this:

In a grid formation that looks something like this.

I'm struggling to figure out how to stagger the items/elements of the dictionary keys/items so that they would appear in the correct grid formation.

So far, I've tried:

import tkinter as tk
from tkinter import ttk, StringVar, OptionMenu

# Create the Root Window
root = tk.Tk()
root.geometry("1200x600")
root.resizable(True, True)
root.title("Choose Model Outputs")


class ChooseModelOutputs:
    def __init__(self, master):

        # Create the dictionary
        self.data = {"Angles": 
            {"Hip": ["x", "y", "z"],
             "Knee": ["x", "y", "z"],
             "Ankle": ["x", "y", "z"]},
             "Moments":
            {"Hip": ["x", "y", "z"],
             "Knee": ["x", "y", "z"],
             "Ankle": ["x", "y", "z"]},
            "Powers": {"Hip": ["z"],
                   "Knee": ["z"],
                   "Ankle": ["z"]}}

    # Place the outputs on the GUI across the top
    for col, output in enumerate((list(self.data.keys())), start=1):
        self.output_headers = ttk.Label(
            root, text=output
        )
        self.output_headers.grid(column=1 + col * 2, row=0, pady=5, padx=20)

        for row, joint in enumerate(list(self.data[output].keys())):
            self.joint_row_headers = ttk.Label(root, text=joint)
            self.joint_row_headers.grid(column=col * 2, row=row + 1, pady=5, padx=20)

which works for getting an image like this:

But now I'm stuck on how to get the actual list elements to populate further.

I've tried this:

import tkinter as tk
from tkinter import ttk, StringVar, OptionMenu

# Create the Root Window
root = tk.Tk()
root.geometry("1200x600")
root.resizable(True, True)
root.title("Choose Model Outputs")


class ChooseModelOutputs:
    def __init__(self, master):

        # Create the dictionary
        self.data = {"Angles": 
            {"Hip": ["x", "y", "z"],
             "Knee": ["x", "y", "z"],
             "Ankle": ["x", "y", "z"]},
            "Moments":
            {"Hip": ["x", "y", "z"],
             "Knee": ["x", "y", "z"],
             "Ankle": ["x", "y", "z"]},
            "Powers": {"Hip": ["z"],
                       "Knee": ["z"],
                       "Ankle": ["z"]}}

        # Place the outputs on the GUI across the top
        for col, output in enumerate((list(self.data.keys())), 
            start=1):
            self.output_headers = ttk.Label(
                root, text=output
            )
            self.output_headers.grid(column=1 + col * 2, row=0, 
                 pady=5, padx=20)

            for row, joint in 
                enumerate(list(self.data[output].keys())):
                self.joint_row_headers = ttk.Label(root, 
                 text=joint)
                self.joint_row_headers.grid(column=col * 2, 
               row=3*row 
             + 1, pady=5, padx=20)

                for row2, axis in enumerate(list(self.data[output] 
                [joint]), start=1):
                    self.axis_row_headers = ttk.Label(root, 
                text=axis)
                    self.axis_row_headers.grid(column=1 + col * 2, 
     row=row2, pady=5, padx=20)

      
_ = ChooseModelOutputs(root)

This gets me this:

I'm not sure how to get the repeating "x", "y", "z" for the respective joints.

Thanks in advance!

score 0 · Answer 1 · answered Jul 20 '23 at 23:08

import tkinter as tk
from tkinter import ttk, StringVar, OptionMenu

# Create the Root Window
root = tk.Tk()
root.geometry("1200x600")
root.resizable(True, True)
root.title("Choose Model Outputs")

class ChooseModelOutputs:
    def __init__(self, master):

        # Create the dictionary
        self.data = {"Angles": 
            {"Hip": ["x", "y", "z"],
             "Knee": ["x", "y", "z"],
             "Ankle": ["x", "y", "z"]},
            "Moments":
            {"Hip": ["x", "y", "z"],
             "Knee": ["x", "y", "z"],
             "Ankle": ["x", "y", "z"]},
            "Powers": {"Hip": ["z"],
                       "Knee": ["z"],
                       "Ankle": ["z"]}}

        # Place the outputs on the GUI across the top
        for col, output in enumerate((list(self.data.keys())), start=1):
            self.output_headers = ttk.Label(root, text=output)
            self.output_headers.grid(column=1 + col * 2, row=0, pady=5, padx=20)

            for row, joint in enumerate(list(self.data[output].keys())):
                self.joint_row_headers = ttk.Label(root, text=joint)
                joint_row = 3*row + 1
                self.joint_row_headers.grid(column=col * 2, row=joint_row, pady=5, padx=20)

                for row2, axis in enumerate(list(self.data[output] [joint]), start=0):
                    self.axis_row_headers = ttk.Label(root, text=axis)
                    self.axis_row_headers.grid(column=1 + col * 2, row=joint_row+row2, pady=5, padx=20)

      
_ = ChooseModelOutputs(root)

root.mainloop()

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jul 24 '23 at 15:04

Arrange dictionary items on a gui grid

1 Answers1