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

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

May 4, 2023
Vadim Chekirka

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

Ready to try AVstudio?

Start building professional AV control interfaces today.

Start Free Trial