71 docs tagged with "avstudio"

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

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

Learn how to securely log in to AVstudio and troubleshoot common access issues.

Learn how to add pages and subpages in AVstudio, choose adaptive or responsive layouts, and manage them from the Pages and Subpages tabs.

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.

Learn how to control page-level alignment and container flow, including orientation-based layouts.

Learn how to integrate the Autonomic Mirage Media Server with AVstudio using its JSON/HTTP API for full playback control, metadata display, and real-time synchronization.

The complete, user-focused guide to mastering AVstudio Editor for modern control systems and UI/UX design.

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.

The Color Picker element allows users to select any RGB color dynamically. It is fully responsive and adapts to the parent container’s size.

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.

Learn how to configure container options in AVstudio—friendly name, CSS class, orientation-based settings, alignment, size, border, and background.

Learn how to work with global and page containers in AVstudio and how they differ on responsive vs adaptive pages.

Learn how to connect AVstudio to external APIs, WebSocket streams, or local mock data to power dynamic content across pages and components.

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.

Learn how to define, test, and manage custom JavaScript functions to add interactive logic and behaviors to your AVstudio project.

Get started with AVstudio

Learn how to create and manage Global Containers to reuse shared UI (like headers, footers, and overlays) across multiple pages.

Learn how to add elements to your AVstudio project using the Page Containers panel, the editor context menu, or drag-and-drop.

Learn how to add and configure MQTT connectors in AVstudio to enable communication with external systems and devices through the MQTT protocol.

Learn how to assign dynamic values to element fields in AVstudio using the Pick Dynamic Value modal.

By default, all buttons in AVstudio use a mint green color when pressed or active. If you’d like to customize this state (for example, changing the pressed color of a mute button), there are several methods you can use.

Learn how to adjust element width and height in AVstudio using pixels, percentages, or dynamic values, plus inheritance tips.

Learn how to create a project in AVstudio—start from scratch, clone an existing one, or use community and personal templates.

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.

Learn how to configure and customize the Circle Slider element in AVStudio, including data sources, design settings, and value display options.

Guide for configuring and using the HTML Block element in AVstudio — content, dataset source, styling and common use cases.

Learn how to use and configure the Player element in AVStudio, including its properties, playback data, and state options.

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.

Learn how to configure initial page settings—page name, CSS class, layout type, toolbar visibility, spacing, and parameters.

Learn to use AVstudio, explore its features, and get started designing powerful user interfaces.

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.

Learn how to use the AVstudio Main Dashboard to navigate your projects, access templates, and manage your workspace efficiently.

Learn how to upload, organize, and use images, fonts, and audio files across your AVstudio project.

Before We Start

Learn how to create and manage page actions in AVstudio—behaviors that run on load, on exit, or manually to power automation and integrations.

Learn how to set page backgrounds in AVstudio—colors, library images, external URLs, blur, opacity, fill, and position.

Learn how to configure page-level settings in AVstudio—identity, alignment, containers, actions, backgrounds, theme, CSS, and media.

Learn how to create, organize, and configure pages in AVstudio using responsive or adaptive layouts and signal-based navigation.

Learn how to reset your AVstudio password and regain access to your account.

Learn how to add global CSS to your AVstudio project and when to use it for consistent, advanced styling.

Learn how to use the Project Dashboard to preview, build, clone, and configure your AVstudio projects from one place.

Learn how to upload and manage media assets in AVstudio’s Project Media Library for use across pages and containers.

Learn how to configure project-level settings in AVstudio, including names, themes, environments, connectors, and datasets.

Learn how to define a project-wide theme in AVstudio—global background, primary colors, text color, and border radius.

Learn how to define and manage project variables to control state, respond to signals, and trigger actions across your application.

The Round Slider element in AVStudio provides a circular slider interface that can display or control values. It is useful for volume controls, progress indicators, or any scenario where a round, interactive slider is preferred.

Learn how to manage and configure different types of connectors in AVstudio to enable communication between your project and external systems or devices.

Learn how to configure project settings in AVstudio—environments, connectors, datasets, and other options that define how your app runs.

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 Slider element provides a linear slider for adjusting or displaying values such as volume, brightness, or progress.

Learn how to add and configure Subpage elements in AVStudio, including layout, appearance, and action properties.

The Subpage List element allows you to display and manage multiple subpages within a container. It’s useful for showing repeating layouts, dynamic lists, or collections of content that share the same subpage structure.

Learn how to create, organize, and reuse Subpages to support your main pages with modular, consistent UI components.

Learn how to add and configure the Switch element in AVStudio, including sizing, design, text, and action settings.

Learn the system, hardware, browser, and network requirements to run AVstudio reliably.

The Text element allows you to display static or dynamic text content within your project. It supports flexible data binding, making it useful for both labels and dynamic data displays.

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.

Learn how to manage your AVstudio user profile, update account information, and change your password from the User Profile Dashboard.

Learn how to register, verify your email, and complete your AVstudio account setup.

How to add and configure the Video element in AVStudio, including poster images, playback options, actions, and visibility.

Learn how to work with projects in AVstudio—create, clone, use templates, configure settings, and manage shared elements.