Widgets Part 1: Introduction - Panel Layout and Fill Mode

Step-by-Step Tutorial: Building a Control Panel with Widgets

Step 1: Introduction to Control Panel Building

1. The tutorial covers a range of new parameters and tools for laying out control panels and introduces the basic widget system.
2. The workflow discussed in the tutorial will be valuable for understanding the advanced widget system that will be released in the future.
3. The initial focus is on building the base UI structure without adding specific knobs and sliders.

Step 2: Setting Up the Container

1. Start by creating a container, which will serve as the home controller for the panel.
2. Set important settings for the control panel, such as width and height parameters.
3. Ensure that the container is flexible and can adjust to different window sizes by setting it to unconstrained in the panel page settings.

Step 3: Creating the UI Structure

1. Within the container, create another container named UI, which will hold all the user interface elements.
2. Give the UI container a color to distinguish it from the home container.
3. Use the parent-child component relationship to organize and position elements within the UI container.
4. Utilize parameters like horizontal and vertical modes to align and stack UI elements effectively.

Step 4: Layout Organization

1. Divide the UI into sections based on the layout of the control panel you aim to build.
2. Create multiple containers within the UI container to represent different sections of the panel.
3. Set the stack order of the containers to top to bottom to stack them vertically.
4. Adjust margins and spacing between the containers to enhance visual clarity and organization.

Step 5: Finalizing the Core Structure

1. Ensure that the core structure of the control panel is in place with the main sections laid out vertically.
2. Review the layout to confirm that the sections are organized as per the desired design.
3. With the core structure established, you are now ready to start adding specific UI elements like knobs, buttons, and sliders in the upcoming sections of the tutorial.

By following these steps, you can effectively build a control panel layout using containers and organize the UI elements for a streamlined and visually appealing design.