Pages

In AVstudio v3, a page is the main container for placing your content, including elements, widgets, applications, and subpages. Pages support both Adaptive and Responsive design paradigms, allowing flexible layout customization based on screen size or manual positioning.

Creating and Managing Pages

To create a new page:

1. Navigate to the Pages tab in your project.
2. Click Create New Page.
3. In the "Add new page" dialog:
   • Enter a unique Name (e.g., "main").
   • Select a Design paradigm:
     • Adaptive: Allows manual element positioning with optional adaptability.
     • Responsive: Automatically arranges elements based on screen size. Note: Responsive is the most preferred option for optimal layout adjustment across devices.
   • Click Add new page to create the page.

Caption: Creating a new page with the Adaptive design paradigm.

Caption: Creating a new page with the Responsive design paradigm.

Within the Pages section, you can manage your pages:

Element	Description
Name	Change page name or filter by name.
Analog flip ID	Page number for flip trigger from processor (see Project Settings.
Updated	Last page update date (e.g., Mar 9, 2025, 4:21 PM).
Subpages Used	Information about subpages used on this page.
Actions	- Open in Editor: Edit the page.
	- Mark as Start Page: Set as the first page loaded.
	- Clone Page: Duplicate the page.
	- Delete Page: Permanently remove the page.

Caption: The initial Pages tab in AVstudio v3.

Caption: The Actions dropdown for managing a page.

Adding Elements to a Page

Once a page is created, you can enhance it by adding elements in the page editor. The editor provides a canvas where you can design your interface, initially starting with no elements.

Caption: The page editor interface before adding elements.

To add elements:

1. In the page editor, click Add Element (or use the context menu) to open the element addition dialog.
   • This dialog allows you to select the element to be added to the page.
2. Elements are grouped into categories:
   • Elements:
     • Button
     • Checkbox
     • Dpad
     • Image
     • Keypad
     • Slider
     • Spacer
     • SubPage
     • Switch
     • Text
     • Text Input
     • Video
   • Widgets:
     • Circle Slider
     • Clock
     • DateTime
     • HTML Block
     • MediaPlayer
     • Shades Control
     • Toggle Switch
3. Give a name and click Add Element to insert it.

Caption: Initiating the Add Element process in the page editor. This dialog appears after clicking "Add Element," prompting you to name the element and select its type from a dropdown.

Caption: First part of the element type dropdown (e.g., Button, SubPage).

Caption: Second part of the dropdown (e.g., Switch, Text).

Caption: Third part of the dropdown (e.g., Video, Widgets).

Caption: Fourth part of the dropdown (e.g., Circle Slider, Clock).

tip

Use keyboard shortcuts like Cmd+Ctrl+C to copy, Cmd+Ctrl+V to paste, and Del/Backspace to delete elements.

Defining Page Parameters

Customize page behavior with parameters:

1. Switch to the Parameters tab.
2. Click Add Page Parameter to define settings (e.g., Type, Default Value, Signal FB Setter).
3. Configure as needed.

Caption: The Page Parameters tab in AVstudio v3.

Important Notes

info

The Start page is the first page loaded after the initial UI loads.

warning

Page names must be unique to avoid conflicts.

danger

Deleting a page is permanent and cannot be undone. Proceed with caution.

tip

Hold the Option/Ctrl key while clicking to open multiple page editor tabs at once.

Best Practices

• Use unique, descriptive names for pages and elements.
• Test pages with both Adaptive and Responsive paradigms across devices.
• Regularly save your project after adding pages or elements.

Related Topics

• Learn about the project workspace in Working with Projects.
• Manage subpages in Subpages.
• Configure reusable layouts with Global Containers.

---