Tag: Blog

All blog content

  • 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.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.