AVstudio – The #1 HTML5 UI Editor for AV Systems

Category: Product Updates

Latest improvements, bug fixes, and new features for AVstudio

  • Creating GUIs with AVgator Studio (AVstudio) HTML5 WYSIWYG UI EDITOR

    Creating GUIs with AVgator Studio (AVstudio) HTML5 WYSIWYG UI EDITOR

    To create a user interface on HTML5 for a Crestron control system, you can use a software tool like AVstudio by AVgator® Inc, which is specifically designed for this purpose.

    Here are the basic steps to create a user interface using AVstudio:

    1. Launch AVstudio and create a new project.
    2. Configure the connection to your Crestron control system (e.g., IP address, WebSocket token).
    3. Add UI elements (buttons, sliders, video windows, etc.) to your layout.
    4. Assign join numbers or data bindings to connect interface elements to control system signals.
    5. Use preview mode to test interactions in real time.
    6. Customize layout using Fluid or Static page design approaches.
    7. Save and export your project for deployment.

    AVstudio supports various environments like Crestron One, Android App, PWA, and browsers, so you can create an interface that works across different platforms.

    Additionally, AVstudio provides a built-in smart console and live debugging with a real processor to help you troubleshoot any issues and optimize your interface.

    Dark Huddle HTML5 GUI for Crestron created in Avgator Studio

    AVstudio by AVgator® Inc is an online-based HTML5 editor for creating GUIs for control systems like Crestron. You can access it at the following address: AVgator® Studio 

    Once you log in, you can start creating your project and designing your user interface. If you have any questions or issues, you can also contact support team for assistance.

    Bright Conference Space HTML5 GUI for Crestron created in Avgator Studio

    Bright Conference Space HTML5 GUI

    The difficulty level of creating a GUI in AVstudio will depend on your previous experience with GUI design and HTML5 development. However, AVstudio is designed to be a user-friendly and intuitive tool that requires no coding skills, making it accessible for people who are new to GUI design.

    Riseup HTML5 GUI for Crestron created in Avgator Studio

    Riseup HTML5 GUI

    AVstudio provides a drag-and-drop interface that allows you to select and place various elements, widgets, and controls onto your GUI canvas. You can customize the design and layout of your GUI using a variety of built-in themes, styles, and colors. Additionally, the tool provides a library of pre-built components, including buttons, sliders, labels, and images, that you can use to add interactivity and functionality to your interface.

    Violet Huddle HTML5 GUI for Crestron created in Avgator Studio

    Violet Huddle HTML5 GUI

    If you do have coding skills, you can also add custom CSS and JavaScript to your project for even more flexibility and control.

    Bright Modern Nest HTML5 GUI for Crestron created in Avgator Studio

    Bright Modern Nest HTML5 GUI

    Overall, while there may be a bit of a learning curve to become proficient with the tool, AVstudio is designed to be intuitive and accessible for users with varying levels of GUI design experience.

    Versalles HTML5 GUI for Crestron created in Avgator Studio

    Versalles HTML5 GUI

  • Version 0.20 | Project variables

    Version 0.20 | Project variables

    Project variables

     NEW

    We have added local variables that can be used in your project. There are three types of variables: string, number, and boolean. The variables have default values and can be modified within the UI interaction, either without the involvement of the central processor or with its involvement taking on the value of signal feedback.

    As a result you can implement a significant part of internal logic without involving the processor.

    variable list

    Variable list

    variable form

    Variable form

    action to change variable

    Action to change variable

    Project Datasources

     NEW

    A new feature has been added that allows you to connect JSON data to the project, either through a remote link or locally. These data can be used in any way you prefer: as text labels, numeric values for styling elements, data for building lists of items and much more.

    Currently, after building, some of the logic with data sources may not work properly. However, in the upcoming updates, full support for data sources will be provided.

    Datasource list

    Datasource list

    Datasource Modal

    Datasource Modal

    Rich text datasource & Variables support

     NEW

    Rich text content can now contain more than just plain text and print output signals feedback. It also supports working with connected data sources and local variables.

    Rich text content can now contain more than just plain text and print output signals feedback

    New Element: Button List

     NEW

    We have started adding a new type of element – lists. The first one released is called ButtonList, which is a set of buttons that can be generated based on static data or using a data source attached to the element.

    Lists have a wide range of display settings for their child elements. These settings include specifying the scroll axis, the number of rows and columns, positioning within the container, and much more.

    Presets for elements

    NEW

    We have added presets for elements, which allow you to save the appearance and settings of an element and efficiently reuse it. Additionally, you can easily change the appearance of all buttons in the project that are linked to a preset with just a few clicks.

    Project elements presets listing

  • Version 0.18 | Media player Widget

    Media player Widget

     NEW

    Beautiful and flexible media player widget.

    Handle scroll automatically inside container of elements

     NEW

    Doesn’t matter how many elements you add to the container – it will always looks nice and all child scroll smooth and accessible from any type/size of screens.

    Updated Rich Text Editor and Feedback Printing

    NEW

    Extended Button Design options

    NEW

    Now support background color and rich border options, padding in size section.

    Now support background color and rich border options, padding in size section.

  • Version 0.17 | Building ch5z project is now possible

    Version 0.17 | Building ch5z project is now possible

    Building ch5z project is now possible

     NEW

    Now you can build your project in one click and do the following:

    1. Run it on your own web server
    2. Upload the project to a Crestron processor and use it as a web project or a Crestron One project
    3. Run on touch panel

    Widget: Clock

     NEW

    A label for the current device time can be printed, and it will be updated with the ability to set time zones and many more features.

    Element: Dpad

     NEW

    Nice, simple and customizable dpad element added

    Element: Keypad

     NEW

    Project and Page background

     NEW

    Now it’s easy to set a Background color and/or image globally to project and to current page.

    Options are: color, image (from library or external link), background image opacity, background image blur, background image mix blend mode value.

    CSS built in editor

     NEW

    Project cloning

     NEW

    Clone any project in one click.

    Project media library

     NEW

    View and control all of your project’s media assets in one place.

    View and control all of your project's media assets in one place.

  • Version 0.12

    Version 0.12

    Live project preview

     NEW

    With a live project preview, you can fully explore a project, including all its actions, page flips, and designed logic.

    With a live project preview, you can fully explore a project, including all its actions, page flips, and designed logic.

    If the correct connection configuration is provided, the preview will automatically connect to the processor, allowing you to experience the full functionality of the project.

    New Element: Subpage

     NEW

    Now you can achieve page encapsulation by inserting one page into another. This new feature makes the design process much more flexible and allows you to reuse layout parts, simplifying your work.

    New Element: Switch

    NEW

    New Element: Spacer

    NEW

    The Spacer feature enables you to add free space between elements.

    New Element: Slider

    NEW

    Experience an amazing level of customization and create stunning sliders, bars, and more.

    Experience an amazing level of customization and create stunning sliders, bars, and more.

    Additionally, sliders have a feature called ‘Dynamic Background’ that can change the page background when the slider’s value is adjusted.

    6,000+ new icons

    UPDATE

    All icons are licensed for personal and commercial use.

    Better size control

    UPDATE

    Almost all element parts can now be controlled, including text size, icon size, and more.

    Predefined routes

     UPDATE

    We have added static routes in page flip actions, which include the ability to go back to the start page and return to the previous page – Go Back.

    We have added static routes in page flip actions, which include the ability to go back to the start page and return to the previous page - Go Back.

    Interactive elements preview behavior

     NEW

    We have updated the interactive elements (such as switches and text inputs) so that they now work in the preview mode. This means that you can put text into these elements and see the visual feedback, even if the processor is not connected.

    Editor context menu

     NEW

    In editor mode, you can create, delete, or clone elements by using the context menu.

    Gap property

     NEW

    Containers (and certain elements) now support the gap property, allowing for easy control of the space between content parts.

    Border property

     NEW

    We have added the ability to add borders with custom colors and types to certain elements and containers.

    Preview mode

     UPDATE

    In preview mode, the sidebars with options are faded to draw more focus to the page content.

  • Version 0.09

    Version 0.09

    New Element: Text Input

    NEW

    This feature includes the ability to manage input and output serial signals, control statements with focus management, and adjust size options.

    Elements state and behavior control

     NEW

    Now all elements have at least visibility and enabled state control. Depending on the element type, other controls are available.

    State control options for Text Input Element

    Project Media Library added

     NEW

    Upload your media file and use it as an Image element or background image. Now we allow file formats: .jpg, .png. New updates allow attaching more media formats: .svg, .webm, .mp3, .mp4, and more to create a video background, animated & interactive SVG objects, and other effects.

    New Element added – Image

     NEW

    Image elements allow rendering images from the project media library or external URL.

    Has rich stretching and size options.

    Background Color for containers

     NEW

    Now containers support background-color property.

    Accept any kind of color format.

    Editor/Preview mode UI changed

     UPDATE

    More clear implementation of changing development mode in the header from icon to Editor/Preview buttons.

  • Version 0.07

    Version 0.07

    Crestron Processor communication

    NEW

    Real time communication between your AVstudio project and Crestron processor!

    • Push to processor any type of signal: analog, digital or serial
    • Execute push on tap, on hold, on double tap
    • Subscribe to signal feedback and print it

    Current Version Limitation Only button elements has been implemented in the current release. In the following updates we will implement for all types of elements and pages actions too.

    Smart Console Events

    UPDATE

    Now when some action is triggered it will be printed in console with additional information:

    • Additional information printed in the console includes what type of event trigger was fired, such as onEnter, OnExit, OnTap, OnHold, or OnDoubleClick.
    • How many actions should be executed
    • Listed all fired actions colored by its type with signal name (or join number) and value pushed.

    Auth

    BUGFIX

    Sometimes project data can’t be fetched due to auth issues. Now redirecting to login.

  • Version 0.06 | Instant Crestron Debug

    Version 0.06 | Instant Crestron Debug

    Instant Crestron Debug

    NEW

    Just in a few clicks, connect your AVStudio project to the actual Crestron Processor and start testing and debugging your GUI in real time! Send any Signal and work with the true feedback as usual.

    Just in a few clicks, connect your AVStudio project to the actual Crestron Processor and start testing and debugging your GUI in real time! Send any Signal and work with the true feedback as usual.

    Connection options should be set in project settings:

    Connection options should be set in project settings:

    To make a successful connection processor certificate must be trusted by the browser where AVStudio opened. You can make the cert valid manually or install the CA cert on the processor. Follow Crestron Docs.

    Auto Sync Crestron Connection

    NEW

    Auto sync Crestron connection between editor and page fullscreen preview!

    Auto sync Crestron connection between editor and page fullscreen preview!

    Avstudio Console

    NEW

    Control the connection status and choose what, when, and what type of signals to push to the connected processor, and see the feedback received.

    Control the connection status and choose what, when, and what type of signals to push to the connected processor, and see the feedback received.

    Better Element Layout

    UPDATE

    The element type is now printed directly on its name in the main menu, making it easy to understand what type of element is being used.

    The element type is now printed directly on its name in the main menu, making it easy to understand what type of element is being used.

    Text Element Icon Support

    UPDATE

    Now you can attach an icon to any Text element on the page.

    Now you can attach an icon to any Text element on the page.

    Smart Drag Ordering for Elements

    UPDATE

    When elements are dragged from one container to another, the place where they are dropped makes sense based on the start or end of the elements list, taking into account the element’s current flow (row/column)

    When elements are dragged from one container to another, the place where they are dropped makes sense based on the start or end of the elements list, taking into account the element's current flow (row/column)

    Error Editor Page Loading

    BUGFIX

    Sometimes when a project contains zero global containers, the Editor crashes – fixed.

  • Version 0.04 – Selection and hotkeys

    Version 0.04 – Selection and hotkeys

    Smart Interactive Selection & Control in Preview

    NEW

    Smart selection and drag&drop actions inside preview for containers and elements: easy switch between containers to see options, dragging elements to reorder and/or changing its parent.

    Smart Selection works only when bounding box is ON. Now supported in fullscreen preview too.

    Smart selection and drag&drop actions inside preview for containers and elements: easy switch between containers to see options, dragging elements to reorder and/or changing its parent.

    Selection helpers

    NEW

    Print selected element name.

    Print selected element name.

    Editor hotkeys

    NEW

    • Ctrl/Cmd + S tosave
    • Ctrl/Cmd + Z toundo
    • Ctrl/Cmd + Shift + Z toredo

    More stable previews

    UPDATE

    The preview is now more stable with super fast initial loading and some bugs fixed.

  • Version 0.5 | Project global containers

    Version 0.5 | Project global containers

    Project Global Containers have been added

    NEW

    This feature allows you to easily create global layout containers: menus, headers, footers, and any global data you want.

    • Create containers that automatically attach to all project pages;
    • It easily manages visibility, position, inner content, and view options depending on display orientation and pages;
    • Drag&drop elements between global and regular containers; from the sidebar menu or inside the editor’s preview!

    Project global containers list

    Global menu sample

    Easy drag & drop

    Icons added: +793

    NEW

    Fast search

    Edit page name and URL directly from list

    NEW

    Edit page name and URL directly from list

    Main menu elements group layout

    UPDATE

    The ‘Create new element’ button is now located inside the ‘Elements’ collapsible group, and a simple element counter has been added to display the number of elements inside each container.

    The 'Create new element' button is now located inside the 'Elements' collapsible group, and a simple element counter has been added to display the number of elements inside each container.

    Editor layout Highlighting

    NEW

    Now all containers presented on the page when bounding box is ON have a border: page layout looks more simple and understandable.

    Now all containers presented on the page when bounding box is ON have a border: page layout looks more simple and understandable.

    “Save” button fix

    BUGFIX

    Sometimes after the page was saved to the server, the button state was ‘active,’ but this issue has now been fixed

    Project css

    BUGFIX

    The issue where project CSS wasn’t affecting the preview has been fixed

    Redo hotkey

    BUGFIX

    The issue where the REDO hotkey (CTRL/CMD + SHIFT + Z) wasn’t working sometimes has been fixed

    Project listing vertical scroll page

    BUGFIX

    The issue of a buggy layout when having a lot of projects has been fixed

    Preview orientation

    BUGFIX

    The issue of buggy orientation detection while the preview renders has been fixed