Layout Dash App

The layout of the app is mostly rendered at the first loading of the app, some components are created dynamically while running. You can find information on the different component in the comments in the code or from the following sources:

The layout is defined in layout.py, whichs gets all the dash components from dash_components.py.

Main Layout

layout.py creates the whole website dash layout by defining dash components and importing them from dash_components.py.

layout.app_layout(app, button_dict)

Set layout of the given dash app. This function defines the whole layout by creating the main components in a grid, adding all dash components defined in “dash_components.py” and creating intervals, notification handlers and more.

Parameters:

  • app (dash app) – Dash app to add layout to

  • button_dict (dict) – Dictionary of menu buttons for the rooms.

Returns:

None

Dash Components

dash_components.py contains the functions to create the components of the layout. Most of them at the first loading of the app, some dynamically.

dash_components.add_card_additional_devices(devices, radio_room, own=False)

Creates a card to select from a list of devices. It contains a radio-select of the devices, a radio-select of the room to add to and a button to add a selected device.

Parameters:

  • devices (list) – List of devices, either as tuples or as dicts

  • radio_room – Preset value of the room radio-select

  • own – str

Returns:

HTML-Div

dash_components.add_card_menu()

Creates the card on the right side of the app, which contains all settings of components and results. Also contains the loading overlay to display a loader when something is loading or calculating.

Returns:

DMC Card

dash_components.add_card_new_device()

This creates the card to add a new own device to the app. It creates inputs for the name, type, icon and csv/xls/xlsx-file and displays a help section on how to create a device.

Returns:

HTML-Div

dash_components.add_card_own_devices()

This returns the card to load a json-file with own devices. If they are loaded, the function “add_card_additional_devices” is used to create a list of them.

Returns:

HTML-Div

dash_components.add_card_start()

Creates the card which is shown when the app is loaded. It has buttons to either start the app or load an existing configuration. Returns an opened DMC Modal with the content card in it.

Returns:

DMC Modal

dash_components.add_cost_badge(name, cost, icon=None)

Creates a cost badge for a device containing a DMC ThemeIcon and a DMC Badge showing the yearly energy cost for the device. Also, a tooltip with the device name is created.

Parameters:

  • name (str) –

  • cost (float) –

  • icon (str) –

Returns:

HTML-Div

dash_components.add_cytoscape(cyto_id: str, elements: list)

Returns a dash cytoscape with the given id and the given elements in it. These are the power strip and the plus-element in case of a room cytoscape.

Parameters:

  • cyto_id (str) – dash id of cytoscape to add

  • elements (dict) – Elements to add to this cytoscape

Returns:

HTML-Div with dash cytoscape in it

dash_components.add_device_costs(cost_tuple)

Creates a grid of device-cost badges. The given tuples have to contain (name, cost, icon). Also creates a title for the cost page.

Parameters:

cost_tuple (list) – list of tuples of costs of devices

Returns:

HTML-Div

dash_components.add_grid_object_button(object_id, name=None, icon=None, enable=True, app=None)

This function creates a button for the left menu to add a grid object.

Parameters:

  • object_id (str) – dash-id of the button

  • name (str) – Name of the button for the tooltip.

  • icon (str) – In case of Iconify icon: iconify name; In case of png-Icon: path of the png-file

  • enable (bool) – Boolean, if button should be enabled (False=Disabled)

  • app – Dash app

Returns:

DBC button and tooltip showing the name

Return type:

list

dash_components.add_main_card_layout(button_dict: dict)

This function adds the main card layout to the app. It contains the following tabs: - Netz - Grid: The grid cytoscape to build your grid with drag&drop is added here. - Haus - House: The rooms with their cytoscapes and add-device-menus are added here. - Einstellungen - Settings: The dash components for settings inputs are added here.

Parameters:

button_dict (dict) – Dictionary of menu buttons for the rooms.

Returns:

Main card layout of the app

dash_components.add_menu_dropdown(room_type: str, button_dict: dict)

This function creates a menu dropdown containing the given devices from button_dict for a given room. Only the devices are considered, which have a standard room named in the database. The button_dict has to contain: Name, dash id, iconify icon.

Parameters:

  • room_type (str) – One of the following room types: bathroom, livingroom, kitchen, office

  • button_dict (dict) – Dictionary of menu buttons for the rooms.

Returns:

DMC MenuDropdown

dash_components.add_menu_tab_panel(tab_value: str, selected_element=None, element_dict=None)

This function returns the tabs panels for clicked object (grid components or devices in the house). It loads the stored properties from the element_dict and shows them in the inputs.

Parameters:

  • tab_value (str) – Which tabs panel should be created? The tab value is the type of the object clicked

  • selected_element (str) – The id of the selected element in the cytoscape

  • element_dict (dict) – The element dictionary which contains all information about the existing elements.

Returns:

DMC tab panel

dash_components.add_modal_devices()

Creates the modal to choose from all devices or create own ones. It is called by the “Weitere” button in a room menu. It has three tabs: additional, own, new.

Returns:

DMC Modal

dash_components.add_modal_graph()

Modal to show a full screen version of a graph. Is used by outputting the “figure” property of “graph_modal”.

Returns:

DMC Modal

dash_components.add_modal_load_configuration()

Modal to load a previously saved configuration. Takes a json-file as an upload.

Returns:

DMC Modal

dash_components.add_modal_readme()

Adds a modal to the layout, which shows the README of the project for help.

Returns:

DMC Modal

dash_components.add_modal_timeseries()

NOT IN USE! This is a modal to create a load profile of a device inside the app with a dash data table. Not running, under development.

Returns:

DMC Modal

dash_components.add_modal_voltage_level()

Return modal to choose the voltage level of a grid component. This is necessary if the voltage level of both components to connect is not specified. :return: DMC Modal

dash_components.add_result_tab_panel(tab_value)

This function returns the tabs panels for results of calculations.

Parameters:

tab_value (str) – Which tab panel should be created? Could be ‘empty’, ‘house’ or ‘grid’

Returns:

DMC Tabs Panel

dash_components.add_storage_variables()

Here the DCC store objects are defined, which store different data throughout the app.

Returns:

All dash store objects.

dash_components.add_tutorial()

DBC Row containing the tutorial card with pagination and help ActionItem.

Returns:

DBC Row

dash_components.dash_navbar()

Creates the Navigation bar of the app.

Returns:

DBC Navbar

dash_components.get_compass(orientation: int)

Returns nine DMC ActionItems, which act as buttons in form of a compass. Each has the id “button_” followed by the direction. The parameter “orientation” is used to set the rotation of the needle of the compass.

Parameters:

orientation (int) – Orientation of the compass needle, (north: 0, east: 90, south: 180, west: 270)

Returns:

HTML-Div with 9 DMC Action Items in form of a compass

Stylesheets

stylesheets.py contains the different css stylesheets of the app. They define the appearance of components and are given as lists of python dictionaries. They are split into Group and Class selectors.

More information can be found in the dash documentation on stylesheets.