55 docs tagged with "avstudio"

The User Interface of AVgator Studio provides a user-friendly and

To create a user interface on HTML5 for a Crestron control system, you

Log in to AVstudio to begin building and managing your user interfaces. Whether you're starting a new project or continuing existing work, this guide walks you through the secure login process.

After configuring your project settings, the next step is to add pages. Each page represents a distinct screen in your AVstudio interface. In this guide, you'll learn how to create a page, select a design paradigm, open the page in the editor, and set its properties and parameters.

The Alignment settings within the Container Options panel control how elements inside a container are arranged and aligned. This section applies to both responsive and adaptive pages and is especially useful for designing flexible layouts that adapt to various screen sizes and orientations.

The Alignment panel lets you control how containers are arranged on the page. This setting affects the overall layout flow and helps you visually align elements based on the orientation or structure of your page.

Before We Start

The Background section lets you customize how a container looks visually by adding background colors, blur effects, or images. These settings allow you to define the tone and depth of UI sections, making your layout feel more dynamic and styled.

The Border section allows you to define how the edges of a container appear. You can keep the project’s default styling or override it with custom width, style, color, and radius settings.

The Button is one of the most commonly used elements in AVStudio. It can be used to trigger actions, navigate between pages, or toggle visibility of components.

The Checkbox element in AVStudio allows users to toggle a value on or off. It's useful for filtering, form controls, or triggering logic based on user interaction.

This guide explains how to connect an existing AVStudio project to a control system using a WebSocket token. This enables real-time communication between your interface and the processor during testing and deployment.

The Container options panel allows you to configure how a specific container behaves and appears on the page. Whether you're adjusting layout or applying styles, this panel gives you precise control over container properties.

In AVstudio, containers define the structure of your interface. They hold elements, apply styling, and help organize how content is displayed. This article introduces the two main types: Global Containers and Page Containers, and explains how they behave on both responsive and adaptive pages.

The Data Sources section in AVstudio allows you to connect your project to external APIs, WebSocket streams, or local mock data. These sources can be used to feed dynamic content into your pages and components. With support for data transformation, image preloading, and flexible HTTP or WebSocket configurations, data sources make it easy to integrate real-time and remote data into your AVstudio workflows.

Complete documentation for AV Studio

Before We Start

The Dpad element adds a directional pad to the canvas, typically used for navigation or directional control in UI layouts. It includes up, down, left, right, and center inputs, and can be configured to trigger different types of actions depending on your use case.

Each container in AVstudio can hold one or more elements. These elements define the actual content or controls inside your layout—such as buttons, sliders, inputs, or embedded widgets.

If you click the Connect button in AVStudio and it fails to link with your control system, this guide will help you understand what’s happening — and how to fix it quickly.

The Functions section in AVstudio allows you to define custom JavaScript logic that enhances your project’s interactivity. Functions can be used to manipulate variables, trigger navigation, fetch data, publish signals, and control audio playback. With built-in code snippets, live testing, and support for arguments, functions offer a flexible way to add dynamic behaviors across your application.

Get started with AVstudio

The Global Containers section in AVstudio lets you create persistent, reusable interface blocks that appear across multiple pages. Whether it’s a navigation bar, footer, or overlay, global containers help ensure design consistency while giving you control over placement and visibility on a per-page basis.

There are several ways to start a project in AVstudio. You can create a new one from scratch, duplicate an existing project, or start with a template. This guide walks you through each option.

Introduction

AVStudio occasionally releases updates that include bug fixes, improvements, and new features. This guide walks you through updating your app to the latest available version.

This section provides step-by-step instructions for performing specific tasks in AVStudio. Use these guides to set up features, configure options, and get the most out of the platform.

The Image element allows you to display images inside your project layout, with options for size, stretching behavior, and positioning.

The Image element in AVStudio is used to display static or dynamic images within a container. It supports multiple image modes and offers configuration options for size and layout.

When you open a page in the editor, AVstudio automatically loads the Page Properties view. This is where you configure the basic identity and behavior of the page before adding content or containers.

Welcome to AVstudio—your gateway to designing dynamic and interactive user interfaces with professional precision. AVstudio (also known as AVgator Studio) is a powerful HTML5 GUI editor that enables developers of all levels to create, customize, and manage rich interfaces for control systems. Whether you prefer a cloud-based platform or a compiled desktop solution, AVstudio adapts to your workflow with seamless cross-platform compatibility and robust feature sets.

The Keypad element provides a customizable on-screen keypad that users can interact with. This element is often used for numeric entry, PIN input, or other forms of digital control. The Keypad element can be static or dynamic, with various size and mode options.

The Main Dashboard is the first screen you’ll see after logging into AVstudio. It gives you a snapshot of your projects, templates, and settings. This overview will walk you through each area of the interface so you can navigate and manage your work with confidence.

The Media Assets panel is where you can upload and manage images, fonts, and audio files for use in your AVstudio project.

Before We Start

The Page Actions section allows you to define automatic or manual behaviors that are triggered when a page loads, exits, or responds to a specific event. These actions help power automation, control signals, and data exchange inside your AVstudio project.

The Page Background section allows you to customize the visual background of the page. You can use a solid color or set a background image from either your media library or an external URL. Additional options let you control blur, opacity, and image positioning.

This article provides an overview of all the page-level settings available in AVstudio. These settings define how each page behaves, looks, and connects to other parts of your project. You can access all of them from the left-hand panel when a page is open in the editor.

The Pages section in AVstudio is where you manage the main views of your project. From selecting layout paradigms to configuring signal-based navigation, this interface helps you create, edit, and organize the pages that structure your application.

If you've lost access to your AVstudio account or can't remember your password, this guide will walk you through the password reset process.

The Project CSS section allows you to define and manage custom CSS that applies globally across your AVstudio project. This gives you more control over the appearance of your layout, especially when visual configuration options are not enough or when you want to apply consistent branding across all pages.

The Project Dashboard is where you manage your individual projects in AVstudio. It gives you access to project-specific actions like previewing, building, cloning, deleting, and modifying settings — all within a single view.

The Project Media Library is where you can manage all media assets used in your AVstudio project. This includes background images, icons, UI illustrations, logos, and any other visual content that will be referenced across pages or containers.

The Project Settings panel is where you configure key properties of your AVstudio project — from the project name and theme to environment-specific build settings and connector integrations.

The Project Theme section allows you to define global design settings that apply across your entire project. These include a shared background and universal styling variables like primary colors, text colors, and border radius. Setting your theme properly ensures consistency, simplifies styling, and makes it easier to update your project visually in the future.

The Project Variables section in AVstudio lets you define and manage custom variables that store dynamic values. These variables can be used to control logic, respond to signals, and trigger actions across your project. With support for default values, signal feedback, and formatter functions, project variables give you flexible control over your application’s behavior.

After creating your project, the next step is to configure the settings that define how it behaves, builds, and connects. This guide walks you through how to open the project settings panel and configure key fields like environment setup, debug mode, signal IDs, connectors, and dataset access.

The Size section controls how much space the container uses on the page and how spacing behaves inside it. This is where you manage layout structure using either Default or Manual sizing, along with element spacing and padding.

The Subpages section in AVstudio allows you to create supporting views that complement your main pages. Subpages follow the same layout paradigms as pages and are ideal for building modular, reusable screen components within your project.

This article outlines the hardware, software, and network requirements needed to run AVstudio smoothly. Whether you're using the cloud-based SAAS platform or the compiled GUI environment, make sure your setup meets the following system specifications.

This section provides helpful guides and troubleshooting tips for working efficiently in AVStudio.

This page contains common AVStudio issues and how to fix them quickly.

From the AVstudio main dashboard, clicking the profile icon in the upper-right corner gives you access to account-related actions like managing your profile or switching accounts. This page covers what you’ll see and do in the User Profile Dashboard.

Start your journey with AVstudio by setting up a secure and personalized account. This guide walks you through registration, verification, and initial setup so you can begin building interfaces in minutes. 🚀

This section introduces everything you need to know about managing projects in AVstudio. Whether you're creating your first layout, editing an existing setup, or configuring advanced project settings, you'll find helpful guides here.