3-Panel Layout (0.8)

[mentat-enki]

This was originally posted in 0.6 discussions by @DataExplorerUser
It has been refactored/updated to work in 0.8.*, for those interested:

Note: you may need to download the "glacial" font and rename it and or update the path in the code below, per the Original Post. Alternatively, you can comment out the font-setting lines in main().

from dearpygui import dearpygui as dpg

FONT_FILE = "data/glacial_font.otf"

def toggle_window_lines(sender, app_data, user_data):
    toggle_state = dpg.get_item_configuration('left_panel')['no_background']
    dpg.configure_item('left_panel', no_background=(not toggle_state))
    dpg.configure_item('middle_panel', no_background=(not toggle_state))
    dpg.configure_item('right_panel', no_background=(not toggle_state))

def update_panel(panel_id, pos=[0, 0], width=0, height=0):
    dpg.set_item_pos(panel_id, pos)
    dpg.set_item_width(panel_id, width)
    dpg.set_item_height(panel_id, height)

def resize_windows(sender, app_data, user_data):
    width_main = dpg.get_viewport_width()
    y_pos = dpg.get_item_height('main_menu')
    height =  dpg.get_item_height('main_window') - y_pos
    # left and right are fixed width, middle is dynamic
    width_left = 300
    width_right = 400
    width_middle = width_main - width_left - width_right
    x_pos_left = 0
    x_pos_middle = x_pos_left + width_left
    x_pos_right = x_pos_middle + width_middle
    update_panel('left_panel', [x_pos_left, y_pos], width_left, height)
    update_panel('middle_panel', [x_pos_middle, y_pos], width_middle, height)
    update_panel('right_panel', [x_pos_right, y_pos], width_right, height)

def draw_menus():
    with dpg.menu_bar(id='main_menu', label='Main menu'):
        with dpg.menu(label='File'):
            dpg.add_menu_item(label='Item 1')
            dpg.add_menu_item(label='Item 2')
            dpg.add_menu_item(label='Item 3')
        with dpg.menu(label='Edit'):
            dpg.add_menu_item(label='Item 1')
            dpg.add_menu_item(label='Item 2')
            dpg.add_menu_item(label='Item 3')
        with dpg.menu(label='Help'):
            dpg.add_menu_item(label='Item 1')
            dpg.add_menu_item(label='Item 2')
            dpg.add_menu_item(label='Item 3')
        with dpg.menu(label='Layout'):
            dpg.add_menu_item(label='Resize', callback=resize_windows)
            dpg.add_menu_item(label='Toggle window lines', callback=toggle_window_lines)

panel_conf = {
    'autosize': False, 
    'no_resize': True, 
    'no_title_bar': True, 
    'no_move': True, 
    'no_scrollbar': True,
    'no_collapse': True, 
    'horizontal_scrollbar': False, 
    'no_focus_on_appearing': True, 
    'no_bring_to_front_on_focus': False,
    'no_close': True, 
    'no_background': False, 
    'show': True
}

def draw_panel(label):
    with dpg.window(id=label.lower().replace(' ', '_'), label=label, **panel_conf):
        dpg.add_text(label)

dpg.set_start_callback(resize_windows)
dpg.set_viewport_resize_callback(resize_windows)

def main():
    with dpg.font_registry():
        dpg.add_font(FONT_FILE, 18, default_font=True)

    with dpg.window(id="main_window", label="Main") as main_window:
        draw_menus()

    draw_panel('Left panel')
    draw_panel('Middle panel')
    draw_panel('Right panel')

    dpg.set_primary_window(main_window, True)
    dpg.start_dearpygui()

if __name__ == '__main__':
    main()

[DataExplorerUser]

Thanks for posting the updated version! I will check it out later. Theoretically, you could achieve something similar with the new Table API, where you can set fixed and variable width columns, but I think there is still a place for this method as well!

[DataExplorerUser]

O, finally got around to testing it... It works well -- very snappy! One thing I noticed is that if you make the viewport bigger, the height is no longer correct. No time to investigate at the moment, but I thought I'd share that finding.