AVstudio – The #1 HTML5 UI Editor for AV Systems

Blog

Crestron Home Custom UI (Webinar AVstudio October 09, 2024 highlights)

🔍 Demonstration: Integrating Crestron Home with AVgator® Studio using Data Sources

In this video, we demonstrate how AVgator® Studio interacts with Crestron Home using data sources to enable seamless control and monitoring. You’ll see how changes made in Crestron Home reflect instantly in AVgator® Studio, showcasing the power of integration.

💡 What’s Covered in This Demonstration:

• Connecting to the Crestron Home API and retrieving room data

• Controlling lights directly from AVgator® Studio

• Renaming a room in the Crestron Home App and reflecting the change in AVgator® Studio

• Explanation of data sources as structured lists with parameters for control and automation

• Overview of CORS proxy servers and their role in enabling custom UI designs

• How AVgator®Studio supports custom UI development for Crestron Home

🚀 Want to Build Custom UIs for Crestron Home?

It’s possible to create your own custom designs using AVgator®Studio and a proxy server. Contact us to get started with an example setup, or stay tuned for appliance-based solutions coming soon!

Check out the API Reference.

💬 Need Help? Reach Out Anytime!

#CrestronHome #AVgatorStudio #CustomUIDesign #HomeAutomation #APIDemonstration #AVIntegration

October 26, 2024
Summary of Workshop Day 1 – Mastering Custom UI Design with AVstudio (Oct 18, 2024)
Overview:

In the first session of the 2024 workshop series, participants were introduced to the core functionalities of AVstudio and its use in Crestron control systems. The workshop focused on project creation, connecting to control systems, troubleshooting common issues, and using AVstudio’s live preview feature for real-time testing.

Key Topics Covered:

1. Project Setup and Connectivity:
- Creating a project from scratch
- Configuring project settings, including IP addresses and WebSocket tokens
- Connecting to control systems and addressing certificate challenges
2. Troubleshooting and Security:
- Handling common connection errors
- Using browsers for debugging and maintaining user sessions
- Discussing the importance of secure certificates
3. Customizing UI Elements:
- Creating and customizing buttons to control devices
- Using feedback signals to monitor button status
- Developing pop-ups and navigation elements
4. Adaptive Design and Live Preview:
- Demonstrating responsive design features for various resolutions
- Using the live preview feature for real-time adjustments
- Introducing containers for headers, footers, and widgets
5. Advanced Mechanics:
- Implementing variables and actions for dynamic content updates
- Using page modes to switch layouts based on user interaction
Next Steps for Participants:
- Practice creating projects and connecting to control systems
- Experiment with responsive design and adaptive modes
- Explore variables, actions, and creating pop-ups in AVstudio
- Test project uploads to Crestron processors and access them via the web
The upcoming workshop is scheduled for November 1, 2024, at 11:00 AM.

Click here to sign up.
October 18, 2024
How AVgator® Studio’s Adaptive Feature is Changing the Game at CEDIA 2024

If you’ve been following the buzz around CEDIA 2024, you’ve probably heard the excitement about AVgator® Studio’s game-changing new features—especially the introduction of our “Adaptive” feature. But what does this mean for AV programmers? Get ready, because AVgator® Studio is about to transform the way AV interfaces are built and designed!

Unmatched Flexibility for Programmers

At AVgator® Studio, we’ve always focused on providing the best tools to empower programmers, and our “Adaptive” feature takes this commitment to the next level. Now, programmers have the freedom to choose between responsive, adaptive, or a combination of both when designing their pages. This powerful flexibility allows you to craft user interfaces that not only look great but also perform seamlessly across any device or screen size.

How Adaptive Page Layout Works

Our new adaptive page layout gives you the ability to arrange elements manually by dragging them into place, giving you full creative control. What’s even more exciting is that this layout can still respond to different screen sizes—allowing the elements to adjust based on the device resolution. The result? An adaptive layout that combines the best of custom design and responsive functionality. Thus there is no need to manually adjust the layout’s appearance based on different devices and their orientations.

Let’s say “no” to endless rearrangements of elements!

Curious about how it works in detail? Wait for the release and you’ll be pleasantly surprised. We’ve successfully retained the familiar approach for developers while enabling the creation of a single layout that adapts to any size.

How Responsive Page Layout Works

The responsive page layout, built on the flexbox CSS model, is designed to handle dynamic changes in screen size. All containers and elements on the page automatically adjust to fit various devices, making the layout fluid and flexible. The choice is yours: go adaptive, responsive, or even combine the two for ultimate versatility.

Community-Driven Innovation

We’re also excited to showcase some of the user interfaces that have been contributed by our community of AV programmers at CEDIA 2024. These thoughtfully crafted templates represent a new wave of innovation, proving that collaboration is a driving force behind AVgator® Studio’s rapid growth and success.

Luxury User Interfaces Across Platforms

One of the major highlights of our CEDIA 2024 showcase is the introduction of Luxury User Interfaces. These templates are designed to work seamlessly on both iPad and Android devices, demonstrating the power and versatility of AVgator® Studio’s platform. The smooth transitions between devices highlight how our technology offers a harmonious user experience, no matter the platform.

Shaping the Future of AV Tech

AVgator® Studio isn’t just showcasing the future of AV technology at CEDIA 2024—we’re actively reshaping it. With the flexibility of adaptive and responsive layouts, programmers are now equipped to create user interfaces that transcend the traditional boundaries of design. Our tools are not just powerful—they’re transformative, allowing creativity to flourish like never before.

In Conclusion: A Revolution in AV Programming

AVgator® Studio’s “Adaptive” future is more than just a new feature—it’s a complete revolution in how AV interfaces are designed. We are writing the new playbook for AV technology, and we invite you to join us in this exciting journey.

Whether you’re a seasoned industry veteran or someone passionate about the latest in tech innovation, AVgator® Studio’s “Adaptive” future is ready to change the game. Stay tuned for more updates as we continue to push the boundaries of what’s possible in AV design.

September 6, 2024
On the Way to CEDIA Expo 2024. Stay tuned for some exciting announcements!

We are excited and eagerly awaiting the start of the exhibition where we will showcase our new treats for AVstudio!

Looking forward to meeting the exhibition participants and discovering their products. We are also ready to showcase our incredibly cool and hot new features for the AVstudio app. Creating modern interfaces for AV has never been so fast and efficient.

Take your seats. It’s going to be very exciting.Booth#850.

September 2, 2024
AVgator® Studio: modern IDE to create stunning HTML5 user interfaces.

AVgator® Studio is an online-based product designed to empower AV developers by enabling them to create high-quality visual interfaces. This platform is specifically tailored to meet the needs of developers working in the audiovisual industry, providing them with the tools to design and implement visually engaging and professional-grade user interfaces with ease.

Our product is designed to deliver quick and impressive results for both seasoned web developers and those new to this technology. No prior knowledge of HTML, JavaScript, or CSS is required.

The detailed customization of the appearance and behavior of elements is all accessible directly within the interface, making it easy for anyone to create polished and functional visual components without the need for coding expertise.

Vendor integration

As of today, our product integrates seamlessly with Crestron processors. However, we are actively working on expanding our range of supported vendors. This upcoming development will enable you to create and compile projects within a single environment that can operate across multiple manufacturers, even simultaneously. This will provide greater flexibility and versatility in your AV development workflow, ensuring compatibility with a broader array of systems.

AVstudio layout building philosophy

With AVstudio you can create two fundamentally different types of pages: Fluid and Static. The Fluid approach implements a concept where all elements are harmoniously distributed within designated containers, allowing for a responsive and cohesive layout.

Fluid page sample

A fluid grid can be constructed entirely using relative values, enabling you to create a layout that looks both harmonious and visually striking on large screens as well as on mobile devices. This approach ensures that your design adapts seamlessly to different screen sizes, maintaining a consistent and polished appearance regardless of the device being used.

By leveraging relative measurements, the fluid grid offers a versatile and responsive solution that enhances the overall user experience across various platforms.

Static page sample

The Static approach, on the other hand, gives you the flexibility to manually position elements on the page. However, these elements are not entirely static; they can be anchored to specific sides of the viewport, automatically adjusting to various device types or orientations. This eliminates the need for manual repositioning and fine-tuning for each new device your project may be viewed on, ensuring a consistent and adaptive user experience across different platforms.

Element modes

Each element on the page has the ability to adopt different mode settings. Essentially, modes are instances of the same element with various configurations, both in terms of visual appearance and the events that these elements can trigger. For example, within different modes, you can change not only the look of a button but also the actions it sends to the control system. This flexibility allows you to tailor the behavior and appearance of elements to suit specific needs, enhancing the overall functionality and interactivity of your interface.

Community templates

Clone in one click

Community Template Preview:

Resume

A comprehensive set of tools, detailed customization options, a quick start, and a familiar environment will enable you to efficiently and effectively tackle all your tasks related to creating a modern HTML5 graphical interface for any control system. This combination ensures that you can achieve high-quality results swiftly, adapting your design to meet the specific requirements of your system while benefiting from an intuitive and user-friendly interface.

August 26, 2024
First look at LuxeControlSuite Community Template | HTML5 User Interface

AVstudio team is pleased to present the first Community template HTML5 User Interface! This means that you can now choose a ready-made template from the AVstudio library and use it in your own project. This opens up new opportunities for developers, as the time savings are amazing.

You can publish your own templates (even paid). Please, contact us for more details.

We have created a small demo so that you can familiarize yourself with the functionality of our template.

You can try out all the features of this template or create your own at AVstudio

August 23, 2024
Artem Buslaev’s template | Community cases

Our user Artem Buslaev decided to share one of his developed interfaces in AVstudio for your inspiration.

Thank you for sharing your developments with us and the whole AVstudio community!

Home page

Rooms page

Selected Room Page

Air conditioner control

Scheduling option

Roller blinds

Passcode panel

General climate

Multilingual interface

A video demonstration:

Check out the preview.

August 23, 2024
AVgator® Inc., a leading system integrator and innovator in the AV industry, is excited to announce the showcase of its groundbreaking product, AVgator® Studio, at CEDIA Expo 2024.

August 8, 2024 – AVgator® Inc., a leading system integrator and innovator in the AV industry, is excited to announce the showcase of its groundbreaking product, AVgator® Studio, at CEDIA Expo 2024. This premier event will take place from September 5-7, 2024, in Denver, Colorado, where AVgator® Inc. will be exhibiting at booth #850.

AVgator® Studio: The Future of AV Integration

AVgator® Studio is a modern Graphical User Interface (GUI) Integrated Development Environment (IDE) designed to streamline and revolutionize the development of HTML5-based interfaces for Crestron Control systems. The tool significantly reduces development time by up to 80%, offering a highly efficient and budget-friendly solution for AV professionals.

Key Features of AVgator® Studio:

• HTML5-Based Interface: Modern and responsive design ensuring compatibility across various devices.

• Drag-and-Drop Functionality: User-friendly interface allowing easy customization and rapid development.

• Comprehensive Component Library: Pre-built components and templates to speed up project completion.

• Real-Time Preview: Instant feedback on interface changes, reducing development cycles and improving accuracy.

• Cross-Platform Compatibility: Supports a wide range of devices and screen sizes, ensuring a seamless user experience.

• Crestron Support: Seamless integration with Crestron Control systems, making it the ideal tool for Crestron programmers.

• HTTP Requests and WebSockets: Capable of handling HTTP requests and WebSocket connections, enhancing flexibility and functionality for developers.

• Future Integrations: Plans to support additional control systems, expanding its versatility and appeal.

Innovative Solutions for the AV Industry

AVgator® Studio addresses the growing need for advanced and user-friendly AV integration tools. As a Crestron Service Provider (CSP), AVgator® Inc. has leveraged its deep industry expertise to create a product that not only enhances productivity but also sets a new standard in the AV industry.

“We are thrilled to present AVgator® Studio at CEDIA Expo 2024,” said Vadim Chekirka, President and CEO of AVgator® Inc. “Our goal is to provide AV professionals with the tools they need to deliver exceptional user experiences and drive innovation in the field. AVgator® Studio is a testament to our commitment to excellence and our passion for technological advancement.”

Meet Us at CEDIA Expo 2024

Visitors to CEDIA Expo 2024 are invited to experience AVgator® Studio firsthand at booth #850. Our team will be available for live demonstrations, detailed product walkthroughs, and discussions on how AVgator® Studio can benefit your AV projects. Don’t miss the opportunity to see the future of AV integration!

About AVgator® Inc.:

AVgator® Inc. specializes in system design, installation, commissioning, and programming, with a focus on creating innovative solutions for the AV industry. As a Crestron Service Provider (CSP), AVgator® Inc. is dedicated to delivering high-quality, efficient, and user-friendly AV integration tools that meet the evolving needs of professionals worldwide.

August 18, 2024
Version 1.0 | Introducing Exciting New Updates in AVstudio Version 1.0 | Community templates

We are excited to introduce the latest updates in AVstudio, bringing you new features and improvements that will enhance your design experience. This version includes community templates, new design options like Shadow and Reflect, support for custom fonts, and various usability enhancements such as better hotkeys and the ability to switch between element modes by name. Additionally, performance optimizations and bug fixes ensure a smoother workflow. These updates are designed to provide you with more creative options and streamline your projects.

Community templates

NEW

The first free community template is available in AVstudio. Feel free to clone these projects and reuse or modify them any way you want.

We plan to regularly add new templates, so stay in touch to not miss new stunning, free-to-use AV GUI templates!

Community templates

Try it yourself by following the link!

Design option: Shadow

NEW

Shadow introduces a subtle, elevated look to your elements, creating a sense of depth. This design option enhances visual hierarchy and can make your elements stand out more effectively.

Design option: Reflect

NEW

Reflect allows you to create mirrored versions of your elements with just a few clicks. This can be particularly useful for design symmetry and creating visually balanced layouts.

Custom Fonts

NEW

Upload and use beautiful custom fonts everywhere you need to impress your customers!

Fonts can be attached from element settings or by using custom project CSS.

Switch between element mode by name

UPDATE

You can now switch between element modes by using their names directly, making the design process more intuitive and streamlined.

Better Hotkeys

UPDATE

Add hotkeys for quick copy/paste of elements. This works even between projects, but for now, it does not include associated data like datasets, attached functions, nested subpages, etc. Deep copy will be available later.

Current available hotkeys are:

ctrl/cmd + shift + z (redo)

ctrl/cmd + c (copy)

ctrl/cmd + v (paste)

ctrl/cmd + s (save)

ctrl/cmd + z (undo)

Double click to edit text fast

NEW

You can double-click on text and button elements to open a text editor modal.

Override global project theme vars

NEW

Take control of project variables such as colors, backgrounds, and more. In the near future, the list of available overrides will be expanded.

Functions: AVgator® project methods info

UPDATE

You can now access a variety of built-in functions directly through the Window object. These include methods for data manipulation, element control, sending and listening to events, page flips, and more.

Large list loading optimization

UPDATE

Now you can easily handle a large number of elements on one page without any performance issues.

Added keypad design options for colors, backgrounds and gaps

UPDATE

Keypad design options have become more flexible.

Post-processing functions

NEW

Post-processing functions let you apply effects and modifications to element values to alter the result. For example, based on a signal or string variable’s value, you can calculate and return the proper element’s mode index (or name) using some logic.

Image Sizing

BUGFIX

There were sizing issues with image elements and inside elements where images were used (such as in the shades widget). Sometimes, images were larger than expected and did not fit the container. This issue has been fixed.

August 7, 2024
New template mechanic, payment system, downtime

At 03:00 EDT on August 6th, we plan a downtime of up to one hour. During this downtime, we are introducing a template mechanic – now each user will have access to a constantly expanding library of ready-made projects completely free of charge. Additionally, starting at 03:00 EDT on August 6th, we plan to introduce a payment system for created projects according to the price list available at link. All projects created before 03:00 EDT on August 6th will receive a free standard subscription.

July 26, 2024