Built-in MQTT support enables real-time communication with IoT devices and AV systems. This allows for interfaces to receive live status updates and send control commands instantly. MQTT integration allows for AVstudio projects to be more scalable and responsive across a multitude of environments.

The AV and IoT UI industry has been evolving exponentially over the years. As new technologies are developed and refined, integrators and developers need tools that keep pace with changing expectations and increasingly complex system requirements. In the past, AV control interfaces were typically located in one place. Users may have a single touchscreen on a wall to interact with the system. Today, that scenario is becoming less common. More and more, we see cases where an AV system needs to be controlled from a wall-mounted panel, a tablet, a phone, or even a laptop's browser. Each of these device types is obviously different in size and resolution, yet users expect the experience to feel the same, regardless of how they access it.

This shift in how AV systems are accessed has introduced new challenges for developers. Instead of creating a single design for a fixed device type, they are now expected to create multiple versions of the same HMI so that each component on the screen fits the specific resolution of the device being used.

The issue is that screen sizes change everything. One layout that feels perfectly intuitive for users, visually appealing, and functionally sound on a large touch panel may be completely unusable on something like a smartphone. When interfaces are scaled down or stretched to fit different resolutions, usability often suffers. This quickly degrades the end-user’s experience.

With many of the tools and platforms commonly used today to build user interfaces, the solution has been to create separate interfaces for each device. One might be for a wall panel, another for a phone, and another for a tablet. While this approach can work, it places additional strain on developers and increases development costs. It’s difficult to maintain this solution over time. Even small updates must be repeated across several layouts, increasing the chance that interfaces become out of sync. What starts as a reasonable workaround often turns into a long-term maintenance problem, and users feel the impact through inconsistent experiences.

The core challenge is not simply the number of screens involved, but how interfaces are designed in the first place. Many AV layouts are built as fixed designs, and adapting them to new screen resolutions almost always means starting over from scratch. A more sustainable approach is to design interfaces that can adapt to different screen sizes without requiring complete redesigns. This allows developers to focus on functionality and usability rather than constantly rebuilding layouts.

With AVstudio Editor, this is just one of many common challenges that we were intent on addressing. Our solution is to allow layouts to adapt to available space while keeping the core elements consistent.

From the very beginning, AVstudio Editor was designed with the assumption that any interface built on the platform will need to exist on more than one screen. This is where Adaptive and Responsive page design comes in. These options allow layouts to adapt naturally to screen sizes, but they do so in different ways.

Adaptive pages use an absolute positioning model, where elements are placed using exact coordinates. This gives you very precise control over placement, while still allowing elements to behave predictably across varying screen sizes.

Responsive pages, on the other hand, use layout rules to dynamically scale and reposition elements based on screen size. Instead of manually defining coordinates, you create a single layout and let the system handle how elements are distributed as the resolution changes. This approach significantly reduces layout effort and is often ideal for supporting multiple devices with one design.

Live preview is another key feature in AVstudio Editor that helps solve this problem. It allows developers to immediately see how an interface looks and behaves across different screen sizes during the design process, without any extra hassle. This makes it easier to make informed decisions early and helps reduce surprises later, such as when an interface is deployed on a device that was not originally considered.

These solutions are not only effective for deploying a UI across multiple devices, but are also incredibly helpful when a project needs to scale beyond its original scope. Adding new elements or pages is straightforward and doesn’t require an overhaul of the original design. Instead, you can simply build on what already exists, making AVstudio Editor ideal for scalability.

Designing HTML5 user interfaces for multiple screen sizes is no longer an exception in the industry. It’s a norm. As user expectations continue to evolve, developers and integrators need tools that offer the necessary flexibility. Traditional UI editors are increasingly struggling to keep up with these demands. AVstudio Editor was built by developers, for developers, to address these challenges directly. By reducing the need for repetitive page duplication and layout maintenance, teams can spend more time creating interfaces that are consistent, flexible, and ready to evolve alongside the industry.

AVstudio Editor is built to support secure and safe system interaction. This ensures a high level of consistency and reliability across all devices. If you’re looking to speed up the design process for HTML5 user interfaces that need to work across multiple screen sizes, AVstudio Editor is worth your time. Try it for free today!

Partner: NETIO

NETIO Products develops and manufactures power management solutions that help AV, IT, and industrial professionals gain full control over their power infrastructure, remotely, securely, and reliably. All products are designed, tested, and built in the Czech Republic, and certified around the world.

https://www.netio-products.com/en

Author: Amala Reddie (Commercial Integrator)

The demand for modern, responsive and intuitive user interfaces has never been greater. For AV integrators and developers, delivering these experiences often involves navigating through a complex web of programming languages, proprietary ecosystems and time-consuming workflows. This challenge led to the creation of AVstudio Inc., a spinoff of integration firm AVgator Inc., as well as the development of its flagship product, AVstudio Editor.

During a recent conversation with Commercial Integrator, Vadim Chekirka, founder and CEO of AVstudio, provided context on why the company’s HTML5 visual editor emerged and described how it addresses longstanding industry demands.

The Launch of AVstudio Editor

The story of AVstudio Editor begins with a massive integration project completed by AVgator about five years ago. The job encompassed more than 100 rooms and 120 user interfaces, requiring extensive HTML5 coding in the process. This compelled AVgator to bring in web developers to support the AV programming team. The project was a success, but it came at a high cost, consuming about a thousand hours of labor. This led to a crucial realization: A better, more efficient tool was needed to handle the scale of the projects they were taking on, without expecting AV programmers to become web developers in the process.

That experience revealed a gap in the market for an efficient visual editor capable of producing high-quality HTML5 interfaces. AVstudio Editor emerged as the solution, created to streamline UI development for both AV and IoT environments. It’s a tool built by integrators for integrators.

Redefining Flexibility in Systems Integration

AVstudio Editor integrates seamlessly with numerous systems and programming tools. Rather than locking developers into a single ecosystem, the platform is designed to be control-system agnostic. AVstudio Editor supports a wide range of systems, including, but not limited to, AMX, Crestron, Q-SYS and Node-RED for IoT applications. This gives integrators the freedom to choose the hardware that best fits each project.

This approach enables teams to design a single interface and connect it to any control system they prefer, without requiring a redesign. As Chekirka states, “You develop one user interface…one design…and you just select what control system you prefer to have.” End users benefit most from this consistency, allowing a team’s focus to elevate from the underlying technology to the user experience, which is what truly matters.

AVstudio Editor further achieves this through open standards, using web sockets and the MQTT protocol. Ensuring seamless communication across a multitude of devices and platforms, AVstudio Editor is an ideal tool not just for traditional AV but also for the expanding world of industrial IoT.

Reducing Development Time and Costs

In the world of commercial integration, time is money; that’s why speed and efficiency were key focal points for AVstudio when developing their platform. The WYSIWYG [What You See is What You Get] interface and drag-and-drop functionality eliminate the need for tedious line-by-line coding of standard UI elements, significantly reducing development time. According to Chekirka, users can reduce interface-development time by up to 80% as compared to traditional HTML5 development.

This efficiency becomes particularly critical when dealing with last-minute client requests. Instead of rewriting sections of code, developers can adjust components visually, apply rules and see the updates immediately. This is nearly impossible to achieve when working with raw HTML5 code in traditional development environments.

The AVstudio Editor’s live preview feature further accelerates the workflow. Changes are visible in real time, even connecting directly to the control system during the design phase. “[If] you drag the button on the editor, you will see [it] in preview right [away],” Chekirka explains. “You don’t need to recompile [or] load to the touchpanel to see how it looks like.” This immediate feedback loop ensures a polished final product and avoids the frustrating cycle of compiling, deploying and testing. This is considered one of the platform’s most impressive and unique features, providing something that no other vendor on the market can quite match.

An Advanced User Experience

AVstudio Editor empowers integrators and their teams to produce sleek, fast, highly functional interfaces without requiring expert developers. These are the building blocks for premium user experiences and projects that look and feel custom-made. And this is a crucial differentiator for high-end clients who demand unique solutions.
Although AVstudio Editor simplifies the design process, it does not limit the power available to advanced programmers. Developers can still inject custom JavaScript, use their own CSS [Cascading Style Sheets] and integrate with remote data sources. “We give advanced programmers the ability to do their own elements, code or scripts,” Chekirka notes.

Moreover, AVstudio is developing an intuitive theme editor that simplifies visual design and that is unlike anything currently on the market. Instead of managing dozens of color variables, users can create a consistent theme in just a few clicks. This feature aims to make professional styling far faster and easier for every skill level.

This balance of simplicity and power makes AVstudio Editor accessible to a wide range of skill levels, suiting everyone from AV technicians to seasoned web developers. The end result is a faster, higher-quality design cycle and clients that are more satisfied.

Introducing App Container: The Offline Deployment Solution

AVstudio is also expanding its ecosystem with App Container, a new mobile application for iOS, Android, Windows and macOS, currently in beta testing. App Container allows developers and end users to run projects in a self-contained, offline environment. This eliminates the need for online-controller hosting, providing a secure and reliable way to deploy and view interfaces on mobile devices.

App Container will include features such as push notifications and the ability to switch between projects, adding another layer of convenience for users. Those interested can download the beta version immediately.

The Future of UI Design and AVstudio Editor

With nearly 900 developers already using the platform, AVstudio Editor has quickly established itself as a leading tool for AV industry professionals. Moreover, AVstudio is itself now a standalone entity, having branched off from AVgator with more than $1 million of capital investment. And with ongoing community feedback, weekly documentation updates and hands-on workshops, the brand’s value proposition is growing even more compelling.

To explore the future of UI development, visit the AVstudio website. You can register for a free account to begin experimenting with AVstudio Editor. You can also subscribe to the newsletter to stay informed about product updates, new features, upcoming workshops and the official launch of App Container.

In the evolving world of AV and IoT technology, developers need tools that not only look professional but also streamline project completion and enhance efficiency. As the demand grows for solutions that are faster, smoother, and more dynamic, integrators are moving away from traditional interface builders and embracing AVstudio Editor, the industry’s leading HTML5 GUI and IoT platform.

Here are five reasons why AVstudio Editor is, without a doubt, the #1 interface development tool on the market.

Built for Now and the Future

Many tools still used by developers today are severely outdated, inflexible, slow to process, and locked into fixed-resolution layouts. AVstudio Editor, on the other hand, is built entirely with HTML5, enabling a new standard of speed, adaptability, and design freedom.

It integrates seamlessly with modern AV, IoT, and automation technologies, delivering responsive scaling, dynamic performance, and visually stunning interfaces without the need for extra software or plug-ins.

AVstudio Editor is built to grow with the industry. Its robust HTML5 infrastructure ensures that, as technology evolves, AVstudio evolves with it. The platform is AI-ready and designed for continuous expansion, allowing it to adapt to innovations and remain at the forefront of modern interface development. Its progressive and adaptive design ensures every project looks and performs perfectly across any screen or device.

A Unified Workflow with Faster Development

A frequent struggle for interface developers is the need to use multiple programs, tools, and platforms to complete a single project. AVstudio Editor eliminates this problem by enabling a unified, all-in-one workflow that remains fully compatible with other tools.Gone are the days of switching between separate applications for layout, scripting, and testing. AVstudio Editor combines visual design, live previews, and integration tools into a single powerful environment.

Developers can design visually with a WYSIWYG editor, but also create custom HTML5 blocks, JavaScript functions, and CSS styling when more control is needed. Designers can bind components directly to data sources, logic, or API endpoints, preview changes instantly, and deploy to devices with ease.

All of these features are built to dramatically reduce project turnaround time. When you save time, you save money. AVstudio Editor delivers the fastest, cleanest, and most efficient HTML5 GUI design experience possible.

Node-RED Integration and API Support

Modern AV and IoT systems rely on cross-platform connectivity, real-time communication, and dynamic data exchange. Every component, from lighting controls to security systems, must work together seamlessly for an interface to feel functional, high-end, and professional. In most interface builders, achieving this level of integration requires manual coding or forces developers to work within limited toolsets.

AVstudio Editor eliminates these barriers with Node-RED integration, full API support, and native MQTT connectivity. These capabilities allow developers and integrators to connect their graphical interfaces directly to live system data, automation logic, and cloud services without writing extensive code.

In just a few clicks, you can connect to Node-RED and start managing GUDE, NETIO, or other network-based devices, or even control IoT sensors and relays directly. Data sources drive the dynamic behavior of every interface, updating visuals and logic in real time. This compatibility saves developers countless hours and provides a more efficient, flexible alternative to manual programming. Through visual logic and low-code connectivity, AVstudio empowers users to focus on design and innovation rather than troubleshooting.

Adaptability and Compatibility

Possibly the most valuable aspect of AVstudio Editor, and what truly sets it apart from other interface builders, is its unmatched flexibility. This begins with its compatibility across numerous control systems, IoT devices, and programming tools, giving developers complete freedom in how they design and deploy projects.

AVstudio Editor removes the limitations that often slow down traditional workflows. Its flexibility is also showcased in its adaptability across devices, with a powerful HTML5 engine featuring progressive and adaptive design that automatically scales interfaces for any screen, from touch panels to tablets, laptops, and large-format displays.

AVstudio Editor stands as the #1 interface builder for developers who value versatility and creative freedom. Simply put, design once and deploy across multiple environments, systems, and devices of all kinds.

Speed, Precision, and Scalability

AVstudio Editor features a robust framework that enables developers to move from concept to deployment faster than ever before. With reusable templates, customizable components, and adaptive layouts, projects can be built efficiently while minimizing repetitive work.

Every element in AVstudio is designed for precision. Fine-tuning details is effortless with live previews, snapping grids, and advanced CSS styling, allowing for pixel-perfect accuracy and seamless visual alignment across every device and display.

AVstudio Editor delivers the scalability modern projects demand. There’s no need to start from scratch; existing interfaces can easily evolve and expand as requirements grow. Whether you’re designing a small interface for a single room or a full-scale commercial control system, AVstudio’s HTML5 foundation ensures smooth performance, responsive design, and limitless future development potential.

Smarter Interfaces Start with AVstudio

In an industry evolving every day, experience AVstudio Editor, the future of interface design and the #1 tool for developers looking to maximize speed, efficiency, adaptability, and flexibility. Built on a powerful HTML5 foundation, it gives developers everything they need to design, integrate, and deploy dynamic interfaces with ease.

Start creating smarter, more connected experiences today with AVstudio Editor.

Add custom URL parameters to your projects to control app behavior, configuration, and content within App Container’s dedicated environment. Ideal for deep linking, dynamic environments, and passing runtime data directly into your web applications.

Run web applications that don’t meet standard browser restrictions, such as strict CORS or certificate policies. Developers maintain complete control and maximum flexibility in secure, internal environments.

Store and load projects directly from the device’s local storage. This eliminates the need for web hosting and ensures full functionality even without an internet connection.

Host and manage multiple web projects within a single container environment. Each project can have its own configuration, icon, and access rules for streamlined organization.

Manage, deploy, and update projects remotely through a secure control interface. Push configurations or content updates to any connected device instantly.

Run web applications natively within a self-contained, offline environment. App Container provides a dedicated runtime for HTML5 projects without requiring external hosting or connectivity.

AVstudio is excited to announce that our newest product, App Container, is now open for beta testing!

APPLY AS A BETA TESTER: [LINK]

We’re proud that AVstudio Editor has already completely transformed AV interface development. Where integrators once faced long hours of complex coding or the constraints of rigid builders, AVstudio Editor introduced a fast, flexible, and intuitive way to design user interfaces.

Now, with App Container, we’re expanding that ecosystem to give you the number one way to view, deploy, and run your projects on mobile devices. Whether your project was built in AVstudio, AMX, QSC, KNX, Crestron, another platform, or even as a custom HTML5 project, App Container lets you run, test, and manage it seamlessly on both iOS and Android.

The Value of App Container

Throughout the development process of an interface or web design, viewing your projects through traditional browsers isn’t enough. They’re limited in stability, remote management, and working with specialized integrations. App Container serves as a reliable and dedicated environment for running, viewing, and managing professional interfaces. While it excels with AV projects, App Container is also built to run website designs or other programs to meet your specific needs.

Key features include:

Simplified Project Management

• Create and organize multiple project lists.
• Switch seamlessly between applications.
• Manage deployments, upload archives, and push updates all remotely.

Mobile Web Server Power

• Run apps locally, even without an internet connection.
• Debug with advanced tools, including automatic screenshot capture.

Developer-First Integration

• CI/CD pipeline integration
• Switch seamlessly between applications.

Flexibility Beyond Browsers

• Skip common web limitations
• Compatible with secure and specialized systems

App Container is a dedicated deployment and runtime platform built for the unique needs of AV interface, automation, website, or program development. By combining universality, remote management, and modern debugging tools, it delivers a level of quality that ordinary browsers can’t match.

Help Us Make App Container Better

In our effort to make App Container the best it can be, we invite you to join as a beta tester. As a beta tester, you’ll gain early access to the platform and play an essential role in shaping its future. We value your feedback and encourage you to report any issues, critiques, or questions you may have to our team.

APPLY AS A BETA TESTER: [LINK]

You can also connect with our community for support and discussions:

COMMUNITY: [LINK]
DISCORD: [LINK]

Developing a Crestron interface can be a challenging task, especially when integrators are seeking the perfect balance between the cost of development, the quality of the design, the flexibility of the interface, and the speed of delivery. In today's UI development landscape, several tools and methods are available for integrators to choose from, each with their own advantages and limitations. The approach you choose can make a notable difference in how effectively a polished and user-friendly interface can be made.

Let’s take a closer look at the main options available and what they bring to the table.

Option 1 - Manual Coding

The first and most traditional approach is to code your user interface from scratch. The most significant advantage of this method is having complete control over the design and functionality of the interface. Every single element of the interface, from buttons and layouts to navigation and dynamic behavior, must be manually written, line by line. This enables the creation of truly custom features that may not be possible with pre-built tools.

But the tradeoff is hefty. The overwhelming downside to manual coding is the significant time, knowledge, and budget required to create a professional design. Writing code manually can immensely stretch a project timeline. Even minor adjustments often require digging through the code and extensive retesting. Trial and error is common, and specialized programming knowledge is essential just to get started. For many projects, this method may be entirely impractical due to its scope or budget constraints.

While manual coding offers the most control over a final design, it is almost always the most expensive, time-consuming, and laborious. Fortunately, there are alternatives that make building a polished Crestron interface faster and more accessible.

Option 2 - Common Interface Builders

Another approach is to use common interface builders provided by control system manufacturers. These tools simplify the design process by offering a visual approach to development, rather than requiring manual code writing. With drag-and-drop components, preconfigured templates, and guided workflows, integrators can assemble an interface with significantly reduced technical overhead.

The main advantage of these builders is accessibility. Teams with little to no programming experience can create fully functioning interfaces. For straightforward projects, they can be practical, time-saving, and budget-efficient solutions.

However, this option still comes with its own set of issues. Many common interface builders popular on the market today are highly outdated and lack the flexibility to meet modern design needs. Because they are tied to specific manufacturers, integrators are often locked into one ecosystem, limiting cross-platform work. These builders are typically based on standardized templates, which can limit the extent to which you can customize your design. Implementing unique workflows, custom layouts, or tailored branding can be difficult within their limitations.

Common interface builders, although relatively easy to learn, sometimes fall short when projects require a higher level of creativity, flexibility, or innovation. This is where our final option comes in.

Option 3 - AVstudio HTML5 Editor

AVstudio Editor bridges the gap between the accessibility of common interface builders and the versatility of manual coding. This visual editor, built on HTML5, allows integrators to design professional, responsive interfaces quickly and cost-effectively.

What makes AVstudio Editor stand out is its combination of speed, flexibility, and customization:

• Drag-and-drop editing - build layouts with a visual editor, eliminating the need for manual coding.
• Responsive design – create layouts that automatically adapt to different screen sizes and devices
• Dynamic pages - reuse logic across multiple views to cut down on repetitive work.
• Reusable templates - start with proven designs and tailor them to your needs.
• Support for custom CSS/JS – add advanced styling and behaviors for complete design freedom
• Live preview mode – test changes instantly without rebuilding and connect directly to real control systems throughout the development process
• Cross-platform compatibility - build once and deploy to multiple devices
• Scalable projects - design both small and complex projects with the process

Unlike many traditional UI builders, AVstudio Editor isn’t tied to one single ecosystem. While it’s often used to create impressive Crestron interfaces, it can also be applied to other platforms, such as AMX, Q-SYS, KNX, and PLC systems. This provides integrators with the utmost versatility, enabling them to work across multiple technologies with a consistent design workflow.

Because AVstudio Editor is modern and continuously updated, you’re never stuck with outdated tools. Instead, you have access to the latest features of the industry. The result is polished projects delivered in a fraction of the time manual coding would take, and with far more flexibility than typical builders allow.

AVstudio Editor empowers integrators to focus on user experience and design quality, rather than getting bogged down in technical roadblocks. For teams seeking to balance speed, cost efficiency, creativity, and versatility for their Crestron interfaces, this is the ideal option.

Start creating with AVstudio Editor today.

AVstudio is an independent software platform. Crestron® is a registered trademark of Crestron Electronics, Inc. AVstudio is not affiliated with or endorsed by Crestron Electronics.

The MODERN NEST HTML5 demo showcases the extensive yet straightforward smart home management capabilities provided by AVstudio Editor.

Template Live Preview

Why use AVstudio?

Developing a smart home management interface typically requires an extensive and time-consuming development process. MODERN NEST proves how AVstudio Editor accelerates this process, allowing integrators to:

• Drastically reduce development time
• Reduce costs by eliminating the need for any external tools, plug-ins, or additional coding
• Maintain a consistent and fluid design across multiple devices
• Allow both tech-savvy developers and beginners to build polished solutions easily

With AVstudio Editor, building a powerful, smooth, and customizable home management interface has never been easier or more accessible, eliminating the need for months of development and specialized expertise.

Features Showcased

MODERN NEST highlights some of the most common features for a smart home interface, along with unique capabilities:

• Lighting Systems - adjust brightness, switch modes, or configure presets for each room
• Audio Controls - manage sources, volume, and audio selection
• Climate Management - set temperatures, monitor air quality, and set A/C or heating schedules
• Automated Window Shades - raise and lower shades manually or program to align with daylight cycles
• Remote Vacuum Activation - trigger cleaning at scheduled times or manually
• Integrated Security - lock doors, access cameras, and activate alarms remotely

Each system can be arranged individually, attached to preset modes, or saved under user profiles for a versatile and personalized experience.

Flexible, Fast, & Future-Proof

What makes the AVstudio Editor impressive isn’t just what you see here with the MODERN NEST demo template; it’s the limitless capacity for expansion and creativity from developers to further push smart home management systems into the future. This isn’t a fixed showcase, but rather a framework designed to evolve and adjust with ease as customer needs change.

This has a multitude of benefits. For starters, as new smart home products enter the market, AVstudio Editor enables developers to integrate them seamlessly into the existing interface without rebuilding from scratch. Third-party integration is also supported, meaning platforms such as Alexa and Google Home are entirely compatible. AVstudio Editor also allows companies to fully tailor the design of their interface to match their branding. This includes, but is not limited to, logos, colors, and layouts.

Why does this matter?AVstudio Editor ensures that users won’t have to worry about their smart home management system becoming outdated or falling behind in modern technological capabilities. It grows alongside the market. This is especially beneficial in reducing the cost of adding new features by extending them onto already existing builds. It also provides a competitive edge for developers by allowing them to respond to customer needs and new products rapidly.

Simple for Developers and Intuitive for Users

AVstudio Editor delivers a perfect balance between developer efficiency and user simplicity. The MODERN NEST demo template was built entirely with the editor’s standard, built-in tools. This showcases how developers can spend less time coding and more time creating innovative designs. For users, this provides an intuitive navigation and responsive layout that ensures a sense of ease in their home.

AVstudio Editor is flexible across all platforms, fitting seamlessly on tablets in both landscape and portrait modes, as well as phones. This versatility enables users to manage their smart home from anywhere, providing responsive control and convenience.

The Big Picture

While the MODERN NEST demo template is an excellent showcase of the impressive features possible for smart home management interfaces, it demonstrates more than that. It highlights what is possible when development tools are flexible, efficient, and intuitive.

Through the use of AVstudio Editor, scalable smart home systems have never been easier to build, customize, and deploy without any compromise to functional integrity.

MODERN NEST Showcase

New Round Slider Element

We are pleased to introduce our new Round Slider. It features outstanding responsiveness and can seamlessly fit into any environment. It can be adapted both in height and width simultaneously. All content within the slider also automatically adjusts to the element’s size by default, which is highly convenient.

Taking into account your feedback and our previous experience with the earlier version of the slider (Circle Slider One), the internal content is now presented as a standard text field. This allows you to freely arrange the necessary content across any number of lines and format it exactly as you wish.

A rich set of options allows you to style your slider and achieve completely different results that seamlessly fit into your design concept.

A universal approach to defining the list of element options.

Due to the growing number of elements and their settings, it became necessary to standardize all properties in a consistent style across all elements. We carried out extensive work to group the properties in a clear and convenient way. For now, these properties will only be available in this form for the new elements introduced with this update. In the near future, we will gradually update the properties of all existing elements to bring them into full consistency.

Element state management.

For new elements, we’ve made element state storage and usage universal. It can be stored and retrieved from any dynamic source: data sources, parameters, global variables, data received via WebSocket or HTTP requests. The Crestron option remains available. In the future, we’ll upgrade all elements so they can store, retrieve, and send state through any channels, not just Crestron.

New Color Picker Element

It’s time to introduce the new ColorPicker element. It allows you to add any RGB color range.It can store its state with any dynamic data; similar to RoundSlider, it is fully responsive and can adapt to any parent width and height.

Auth improved

We’ve improved the authorization system. Now you can log in not only using the Email and Password combination, but also via the Google platform. In the near future, we’ll add several more convenient authentication methods.

Bug fixes and improvements

• Parameter handling has become much more stable. We fixed issues with boolean parameters, as well as some update and dynamic calculation errors.
• When creating a data source, errors could occur during test data retrieval, test function applications, etc. All these issues have been fixed.
• Color selection in some element layers could be slow. We’ve improved its performance in the following object and will continue working to make this process even more convenient and faster.
• And various other minor fixes and improvements.

Welcome to AVstudio Inc. — the spin-off from AVgator Studio, built to push boundaries and set new standards in UI design for AV control systems.

Our mission stays the same: give AV integrators, designers, and programmers a tool that cuts development time by up to 80% and helps deliver world-class interfaces without complex coding or compromise.

What this move means for you:

• Product-first focus - AVstudio development is now our only priority.
• More resources - growing our team, attracting investment, scaling faster.
• Innovation ahead - AI-powered features, advanced design tools, and faster updates.

If you’ve been with us as an AVgator Studio user — you’re already home. Just visit the new site, log in, and keep creating.

💡 This is only the beginning. Stay tuned for what’s next!

🌐 https://avstudio.app

Support for WebSocket connections allows us to establish persistent, bidirectional communication channels with external systems such as Node-RED and other automation platforms.

Built-in HTTP request capabilities let AVstudio projects send and receive data via RESTful APIs, enabling seamless integration with cloud services, IoT devices, and custom back-end endpoints

The GUI Sample Multi-Language HTML5 demo demonstrates how easily an interface can be created through the AVstudio Editor that toggles between languages with the click of a button.

Why Choose Avstudio For Multilingual Interfaces?

Developing a smart home interface that offers the personalization customers deserve is a challenging process in itself, especially when each feature needs to adapt to multiple languages with the click of a button. Luckily, AVstudio has solved this issue. AVstudio Editor simplifies a process that’d typically demand complex coding, numerous redesigns, and extensive localization.

This makes interfaces easily adaptable across languages, time zones, currencies, cultures, and more. The AVstudio Editor’s simple drag-and-drop function alleviates developers from countless hours of work reconstructing designs.

The GUI Sample Multi-Language demo showcases how integrators are now enabled to:

• Easily toggle between multiple languages without additional coding
• Reduce costs by eliminating the need for any external tools, plug-ins
• Maintain a consistent and fluid design across every language and device
• Empower developers, both experienced and beginner, to create globally accessible solutions

With AVstudio Editor, designing a multi-language home management interface has never been more efficient, removing the barriers of localization and substantial development time.

Key Features In Action

The GUI Sample Multi-Language demo highlights how core smart home features can be built into a versatile, multilingual interface.

Features include, but are not limited to:

• Lighting Systems - adjust brightness manually to specific fixtures or through presets
• Audio Controls - manage sources, music queue, volume, and audio selection
• Climate Management - set temperatures, monitor air quality, establish presets, and set A/C or heating schedules
• Automated Window Shades - raise and lower shades manually or program to align with daylight cycles
• Time and Weather Monitors - view weather updates and monitor time

What sets this demo apart is how every feature can smoothly transition between languages and be adapted to meet localization needs.

Global by Design, Local in Experience

The main advantage of AVstudio Editor, showcased in this demo, is its ability to create interfaces that seamlessly adapt to users worldwide. This isn’t a fixed showcase, but a framework built to adjust to customer needs and personalization.

The benefits are clear. AVstudio Editor makes it simple to configure interfaces between different languages, time zones, and other geographical characteristics, eliminating the need for complicated coding for such a massive overhaul. Developers can use this flexibility to deliver interfaces that adapt effortlessly to every region. The AVstudio Editor also supports seamless integration with third-party smart home products such as Alexa or Google Home, while still giving full autonomy over the interface's branding, design, and capabilities.

The AVstudio Editor ensures that a smart home management system is not only future-proof but also globally accessible. Developers can quickly adapt to the needs of customers from diverse backgrounds, cultures, and regions. Features can be easily extended across pre-existing builds, while still maintaining a polished and consistent experience.

A Smarter Way to Build Interfaces

The GUI Sample Multi-Language demo was built entirely through AVstudio Editor’s standard, built-in tools. No extra coding or plug-ins were required. This provides developers with an efficiency they can’t find with any other platform, and users with the functional design they’re seeking.

All the features showcased are responsive across various device layouts, including phones and tablets (in portrait or landscape orientation), and possess the ability to switch instantly between different languages.

But the value goes beyond this demo. The GUI Sample Multi-Language template proves what’s possible when interface development tools are flexible, efficient, and built for easy future adjustments.

GUI Sample Multi-Language Showcase

The Luxe Control Suite HTML5 demo showcases how a sleek, unique smart home UI can be built entirely using the standard tools in AVstudio Editor.

Built entirely within AVstudio Editor, the Luxe Control Suite is a prime example of how elegant design and seamless functionality can come together in a unified system. Developed exclusively with the platform's native tools, this template delivers a comprehensive smart-home interface that integrates core features such as customizable lighting systems, adjustable shades, climate management, and multimedia control, all without requiring complex coding or third-party plug-ins.

Every element in the demo was designed to perform flawlessly across devices, demonstrating how responsive layouts and dynamic pages deliver an effortless, fluid user experience.As a WYSIWYG visual editor, AVstudio Editor provides an intuitive design environment powered by drag-and-drop controls, real-time previews, and adaptive components. The Luxe Control Suite highlights how these tools work in harmony, enabling developers to build sophisticated, high-performance projects in less than half the time required by traditional interface builders or manual coding. All of this is delivered while maintaining the refined precision and polish that AVstudio Editor is known for.

GUI Luxe Control Suite

Bright Conference Space, a cutting-edge HTML5 demo project designed for modern meeting and huddle rooms.

This template, available in AVstudio, offers a sleek and contemporary design that enhances any collaborative environment.

With features that allow you to select activities such as presentations, video conferences, or audio conferences, you can easily control cameras, presets, and sources to create the perfect meeting experience. Elevate your collaboration with Bright Conference Space, where innovation meets functionality.

GUI Bright Conference Space

This Demo Project is a simple yet dynamic showcase of modern design. Its responsive interface adapts to various touch panel sizes, ensuring a smooth user experience across all devices.

Enjoy effortless navigation and an engaging layout that highlights the project's unique features. Experience the perfect blend of simplicity and functionality.

GUI Chesterfield Residence

Introducing a simple yet powerful HTML5 interface designed specifically for cinema environments.

This intuitive UI allows users to effortlessly select sources, control lighting, and manage climate settings all in one place. With its user-friendly design, you can enhance the cinematic experience while ensuring optimal comfort and functionality. Experience seamless control and elevate your cinema operations with this innovative solution.

GUI Home Cinema

AVstudio offers an intuitive, drag-and-drop editor built for AV professionals who want speed and flexibility - without the need to write code.

You can build beautiful, responsive HTML5 interfaces with ease: add elements, rearrange layouts, apply styles, and define actions visually. AVstudio takes care of the code behind the scenes so you can focus on design and user experience.

AVstudio goes beyond static design. Create dynamic pages that automatically adapt to different screen sizes and devices - from iPads to touch panels and mobile phones - using modern layout tools like CSS Grid and Flexbox.

Connect UI components to control system data using classic joins, string joins, and JSON datasources. Visual binding helps you avoid complex logic while enabling powerful automation.

No need to save, recompile, or refresh - what you see is truly what you get.Test your UI in real time with live preview. Preview touch interactions and animations directly in the browser before deploying to the control system.

Maintain consistent branding and styling across your UI with reusable themes, font libraries, and color palettes. Make global changes in seconds.

Design interfaces that support multiple languages with easy-to-configure translation data and automatic string replacement for UI elements.

Deploy AVstudio projects into Crestron environments using traditional joins or JSON over WebSocket.

AVstudio is an independent software platform. Crestron® is a registered trademark of Crestron Electronics, Inc. AVstudio is not affiliated with or endorsed by Crestron Electronics.

Insert raw HTML with JavaScript and CSS blocks directly into your project to support advanced custom logic, integrations, or visual effects.

Bind data from external APIs, internal files, or control systems to your interface using powerful JSON datasource tools and formatting options.

Design once and use across mobile, tablets, and wall-mounted touch panels. Preview projects directly on your device of choice.

Start faster using ready-made templates. Save time with a growing library of professionally designed UIs.

Use AVstudio even without internet access. Perfect for secure environments or local development - offline builds coming soon.

Compile and host your projects with ease. Generate beautiful previews with cover image, title, and description automatically.

Export full projects with all assets bundled or share templates with colleagues or clients. Import older projects with backward compatibility ensured.

Never lose your work. AVstudio tracks changes with autosave and version management, so you can always go back.

Future versions will support shared editing, comments, and permissions for team collaboration.

Demo Home by Artem Buslaev

Introducing the Smart Home User Interface by Artem Buslaev — a cutting-edge demo created with AVstudio that redefines the smart home experience. This sophisticated yet intuitive GUI offers a refined design with dynamic quick actions like “Lounge,” “Dinner,” and “Cleaning,” alongside direct controls for lighting, climate, and shades.

Fully responsive across devices — including iPads and iPhones — the interface automatically adapts to screen size without the need for additional programming. Multi-language support and a smooth, logical layout ensure ease of use for all users.

Optimized for seamless integration with Crestron and KNX systems, this demo showcases what’s possible with AVstudio: precision, performance, and design elegance combined.

Explore the demo: Elegant Home Scene Control – AVstudio Demo by Artem Buslaev

This HTML5 GUI sample was created using one of the earliest versions of AVstudio.app, demonstrating its power even in the early stages of development. The interface delivers a clean, modern experience for smart home control, featuring real-time weather, analog clock, daily reminders, and personalized user data.

Explore basic functionality like video control, adjustable lighting, and motorized shades. Effortlessly switch between rooms and enjoy the intuitive layout.

Built with AVstudio.app to showcase versatility, speed, and simplicity – no coding required.

Explore the demo: Live Preview Smart Home Dashboard – Dining Room

It’s been a little over a week since InfoComm 2025 wrapped up in Orlando, and now that we’ve caught our breath, it’s time to reflect on what turned out to be an incredible show — both for the AVGator team and the broader AV industry.

Our booth was buzzing with conversations, live demos, and hands-on exploration of AVStudio.app, the cloud-based HTML5 GUI editor that’s rapidly gaining momentum. In just three days, we saw a 12% increase in new user registrations and a 27% boost in individual license sales — a clear sign that AV professionals are embracing the shift toward HTML5-based GUI design.

Why All the Buzz?

It seems the entire AV Industry is moving fast toward HTML5:

🧩 Leading Control System Manufacturers are rolling out HTML5-only support on their touch panels

🧩 Integrators — large and small — are training AV engineers in JavaScript, React, and other web development frameworks

🧩 And manufacturers across product categories — from UC and room scheduling to signal distribution and digital signage — are looking for flexible, future-ready GUI solutions

AVstudio just happens to be in the right place at the right time. Why? Because it’s built for AV professionals by AV integrators — with years of real-world project experience behind it.

As the AVGator founder — Vadim Chekirka says:

"Try to train an AV engineer to become a web developer, and you’ll lose a great AV engineer… and gain a mediocre programmer."

That’s exactly why AVStudio bridges the gap — empowering AV engineers to build fully custom, responsive GUIs without writing a line of HTML/CSS/JS. With a product shaped by control system experts and web developers, over 900 AV professionals are already designing smarter with AVStudio.

What we Showcased at InfoComm 2025

Visitors at our booth got hands-on with the latest release of AVStudio — the cloud-based HTML5 GUI editor, and it quickly became one of the most talked-about tools on the floor.

Here’s what we demoed:

⚡One-Click Autonomic Media Player Widget– Add a fully functional media player interface to your GUI just by entering the IP address. Zone control, source selection, metadata, artwork — no scripting required.

⚡Global Caché Integration– Seamlessly connect AVStudio to Global Caché devices via HTTP. Easily control IR, RS-232, and relay-based devices.

⚡NETIO PDU Control– Live outlet management using AVStudio: power on/off, toggling, and status monitoring in real time.

⚡Node-RED Bridge & Proxy Server– Showcased how AVStudio integrates with open platforms for custom automation and API-based control.

⚡ 3rd-Party Touchscreens– AVStudio designs were deployed across native iOS, Android, and any HTML5-compatible panels.

🌐Multi-Language GUI Support– A must-have for global installations, with seamless language switching.

Each integration wasn’t just functional — it was a piece of GUI art: responsive, intuitive, and deployment-ready.

Want to see what you missed?

On July 26th 2025 at 6pm CET / 12pm EST / 9am PST we are hosting a 45-minute live webinar with Q&A to showcase everything we demoed at InfoComm — plus new releases and a look at what’s coming next. Save the Date and Join Our Recap Webinar.

AVstudio is an independent software platform. Crestron® is a registered trademark of Crestron Electronics, Inc. AVstudio is not affiliated with or endorsed by Crestron Electronics.

Global Caché

A leader in IP and WiFi control hardware, Global Caché offers best-in-class connectivity products like Global Connect, iTach, and Flex. Global Cache is trusted across custom automation, signage, residential, and enterprise installations.

In partnership with AVgator, Global Caché devices now natively interface with GUIs built in AVstudio. This delivers HTTP‑based messaging from AVstudio dashboards directly to hardware, without writing drivers or custom firmware.

• Seamlessly controls Global Caché devices via AVstudio dashboards.
• Enterprise‑grade performance with minimal latency.
• Ideal for scalable deployments: digital signage, classrooms, corporate, or residential automation.

“By bridging AVgator GUI design with Global Caché’s connectivity, integrators can deploy custom control systems faster—without coding or complex driver development.”
— Vadim Chekirka, Founder & President, AVgator

Use AVstudio with Global Caché: Explore Global Caché

About Global Caché

Global Caché builds hardware modules that make IP and WiFi integration simple and reliable. Their lineup, such as Global Connect, iTach, and Flex, supports control over IR, serial, and relay devices via HTTP, enabling broad compatibility and streamlined deployment.

About AVgator & AVstudio

AVgator developed AVstudio: the code‑free GUI builder for control systems. Designed by integrators, it lets you visually create responsive, customizable UI for any touchscreen, mobile, or web interface. Start for free at AVstudio.app.

FOR IMMEDIATE RELEASE

Orlando, FL – June 09, 2025— AVgator®, the creator of AVStudio.app, a powerful and intuitive GUI design platform, today announced a strategic partnership with Global Caché, the leading independent manufacturer of IP and WiFi enabling connectivity products for the control and automation market. This collaboration combines Global Caché’s robust hardware products with AVgator’s flexible software tools, delivering integrators a streamlined, cost-effective solution for building custom control systems.

The integration enables custom GUIs designed in AVStudio to send HTTP commands directly to Global Caché devices, such as Global Connect. This direct communication reduces latency, accelerates device response times, and simplifies system troubleshooting.

• System integrators benefit from AVStudio’s user-friendly GUI builder that requires no driver development for Global Caché hardware.
• Global Caché partners now have a tested solution for adding custom GUIs to the control systems quickly and without heavy development overhead.
• In scalable systems such as digital signage, multi-room AV, or small automation projects, this integration makes it feasible to include a fully custom GUI, where it was previously too expensive or time-consuming to develop.
• This partnership opens doors for custom interfaces in environments that were previously limited by time, budget, or security constraints, such as classrooms, government, or military facilities

System integrators benefit from AVStudio’s user-friendly GUI builder that requires no driver development for Global Caché hardware.

Global Caché partners now have a tested solution for adding custom GUIs to the control systems quickly and without heavy development overhead.

In scalable systems such as digital signage, multi-room AV, or small automation projects, this integration makes it feasible to include a fully custom GUI, where it was previously too expensive or time-consuming to develop.

This partnership opens doors for custom interfaces in environments that were previously limited by time, budget, or security constraints, such as classrooms, government, or military facilities

AVStudio enables control systems using Global Caché connectivity products to offer tailored user experiences across various applications: residential, corporate, or educational. A custom user interface for a control system no longer means “complicated” or “expensive". It means that control systems can now be designed around specific user needs, whether they ask for a unique, creative UI that reflects their vision and matches their unique style, or they want a minimalistic design with just an on/off function. ”

“We’re excited to partner with Global Caché to offer integrators and control system developers a seamless, end-to-end solution that bridges hardware and software,” said Vadim Chekirka, Founder and President of AVgator. “This collaboration empowers both AVgator and Global Caché integrators to deliver high-quality, customized control interfaces for even more customer satisfaction and greater user experience.”

“Our connectivity products are built to enable IP and WiFi connectivity simply and reliably,” said Robin Ford, VP of Business Development at Global Caché.“This partnership with AVgator provides powerful GUI capabilities to our customers, giving integrators a smarter, faster way to create tailored control interfaces with seamless integration with our products.”

The AVStudio integrated solution with Global Caché will be on display at Infocomm 2025, Booth#3391, June 11-13, 2025. Register at https://www.infocommshow.org/ using VIP Code: AVG485 to get a free Exhibit hall pass.

About Global Caché, Inc.

Global Caché, a pioneer in the control and automation industry, designs, engineers, and manufactures innovative products that enable IP and WiFi integration for previously unconnected devices in homes, schools, and businesses using existing network-based software and systems. Our product lines include the customizable Global Connect, the versatile iTach, the tiny Flex, and the popular GC-100 Network Adapter families, catering to a wide range of connectivity needs. Global Caché has been recognized with numerous industry awards, including the prestigious 2015 CEA Mark of Excellence award for our pioneering online IR database, Control Tower. In addition, our product offerings feature IR learners, IR blasters, sensors, receivers, and conversion cables, providing comprehensive solutions for various applications. We distribute our products through distributors, VARs, and OEMs worldwide.

For more information about our products and partnering or to place an order, visit our website at www.globalcache.com, email hello@globalcache.com or, or contact us at 541-899-4800. Explore Control Tower, our free IR database in the cloud, atwww.globalcache.com/controltower.

About AVstudio HTML5 GUI Editor

AVStudio is a code-free HTML5 GUI builder for professional control systems. Built by Crestron Certified Service Providers, it allows integrators to design and deploy responsive, fully customized interfaces with drag-and-drop simplicity. From corporate to residential and hospitality environments, AVStudio streamlines GUI development. Create and test your GUI as much as you need for free — pay only per project at deployment across unlimited touchscreens, mobile, and web. Try building your customizable GUI at avstudio.app or visit www.avgator.com to learn more.

AVStudio HTML5 GUI Editor Updates Version 3.4.0 | New features for Crestron Control System GUIs

At AVgator Inc., we are committed to evolving our AVStudio HTML5 GUI Editor to empower system integrators with faster, smarter, and more flexible tools. Our recent updates — versions 3.4.0 through 3.4.2 — bring exciting new features and capabilities that help Crestron HTML5 GUI developers deliver exceptional, customized control system user interfaces.

Premium Widgets for a One-Click Integration

NEW

With version 3.4.0, we launched the Autonomic Premium Widget — AVStudio’s first widget designed for one-click integration within your Control System Custom GUI project.

This new AVStudio HTML5 GUI Editor feature is developed to accelerate your Crestron Control System GUI design. Simply drag and drop the widget, enter the IP address, and you instantly get a sleek, fully responsive media player interface ready to use. No complicated setup — just rapid deployment that saves time and impresses clients.

Key features include:

• Only the IP field is required to get started
• Fully responsive design that fits any space
• Comprehensive support for the Autonomic API:
  • Full transport control (Play, Pause, Skip, etc.)
  • Real-time metadata display (album art, track info, artist name)
  • Volume control
  • Player selection
  • Seamless integration with Crestron, Global Caché, and other AV control systems

This launch marks the start of our vision to develop a diverse portfolio of premium widgets supporting one-click integration with multiple hardware and software platforms. These widgets will be tailored for residential, corporate, hospitality, and education use cases.

We are committed to making AVStudio the go-to Crestron HTML5 GUI Editor for seamless, drag-and-drop integrations across all environments.

Web Connectors to add IP-controlled devices

NEW

In addition to the existing Crestron Connectors, which enable fast development and testing of Crestron HTML5 GUIs within AVStudio, this new release introduces new Web Connectors. These empower you to integrate and control a wide range of other IP-based devices and control systems within the AVStudio HTML5 GUI Editor.

Managing HTTP resources in your AVStudio GUI projects is now easier with the new Web Connectors feature. Accessible from your project’s global settings, Web Connectors let you centrally store and manage data properties used across your HTTP actions, making edits faster and your Custom GUI Editor projects more consistent.

The New Web Connectors feature extends your GUI project capabilities far beyond standard Crestron hardware and makes AVStudio the go-to GUI Editor for system integrators working across AMX, Control4, Extron, Global Cache, and other various control systems and devices.

WebSocket connectors are currently under development and will soon complement the existing Web Connectors. This new functionality will enhance the handling of real-time data streams and support remote data sources, expanding your options for dynamic and responsive integrations in future AVstudio updates.

Redesigned Manage Actions Layout

NEW

To streamline your workflow, we redesigned the Manage Actions interface in the HTML5 GUI Editor to occupy almost the full screen and group actions thematically. This reorganization helps you quickly find and manage the actions you need, keeping your focus on building powerful GUIs without unnecessary distractions.

Workflow Improvements

BUGFIX

Between updates 3.4.1 and 3.4.2, we delivered key fixes and enhancements to make your control system GUI design experience within AVStudio more stable and smooth:

• Fixed issues with attaching dynamic page names in route actions
• Improved stability of routing-back operations
• Introduced the new Editor Connection Manager for better connection handling inside the editor
• Several minor improvements and bug fixes for overall performance

Fixed issues with attaching dynamic page names in route actions

Improved stability of routing-back operations

Introduced the new Editor Connection Manager for better connection handling inside the editor

Several minor improvements and bug fixes for overall performance

Explore these new features and enhancements in the AVstudio HTML5 GUI Editor for your projects completely free and accessible anytime at avstudio.app. Registration is quick and simple, so you can start building without delay.

Interested in early access to new features, direct communication with our developers, and opportunities to influence the future of Control System GUI design? Join our growing community of beta testers! Apply now to become a beta tester or contact us directly to learn more.

Partner: Autonomic

Autonomic is a leader in premium whole-home audio systems, known for their Mirage Media Servers and cloud-connected music streaming solutions. With a focus on seamless performance, reliability, and native support for streaming services, Autonomic empowers integrators to deliver top-tier multi-room audio experiences.

Integration Highlights

• One-Click Deployment: Add Autonomic’s media control widget to your GUI in AVstudio with a single click.
• Fully Responsive: Works seamlessly across touch panels, mobile devices, and web browsers.
• Real-Time Feedback: Instant updates of track metadata, artwork, source info, and more.
• Maintenance-Free: AVstudio manages the integration—no coding, no manual API updates.

“AVstudio was built by integrators, for integrators. This collaboration with Autonomic adds real value to the everyday workflow of control system UI developers.”
— Vadim Chekirka, Founder & CEO at AVgator

Try One-Click WidgetVisit Autonomic

About Autonomic

Since 2006, Autonomic has revolutionized digital music systems by bringing cloud-connected and natively integrated solutions to the custom install market. Their Mirage Media Servers and amplifiers are staples in residential and commercial environments alike.

About AVstudio

AVstudio is a no-code HTML5 GUI editor built for AV professionals. It empowers integrators to craft sleek, responsive control interfaces with drag-and-drop ease. Trusted by CSPs and system designers around the world. Learn more at avstudio.app.

FOR IMMEDIATE RELEASE

Waxhaw, NC and Armonk, NY – June 2, 2025 — AVgator® Inc., developer of AVstudio, a premium HTML5 GUI editor tool for control systems, and Autonomic, a leader in professional-grade multi-room audio solutions, are proud to announce the launch of seamless integration between AVstudio and the Autonomic Mirage Media Controller.

This new integration allows Control System GUI designers to add a fully functional Autonomic media control interface to their GUIs with a single click – no coding, manual binding, or API knowledge required. It is ideal for integrators who want to deliver high-end functionality and customization without deep programming knowledge.

Key Benefits Include:

• One-Click Widget Deployment– Add full media player functionality (volume, zone selection, source control, now playing, album art) instantly into your GUI layout.
• Fully Responsive UI– The Autonomic widget automatically adapts to tablets, touch panels, mobile devices, or web browsers.
• Real-Time Two-Way Communication– Autonomic’s status updates (track title, artist, artwork) are reflected instantly in the UI, offering a polished and professional experience for end users.
• No Firmware or API Maintenance– AVStudio maintains the integration, ensuring long-term compatibility and ease of use for installers.

“We’re excited to bring this intuitive integration to the AV community,” said Vadim Chekirka, Founder & CEO at AVgator, Inc. “AVStudio was built by integrators, for integrators — and this collaboration with Autonomic adds real value to the everyday workflow of control system UI developers.”

“The AVstudio HTML5 GUI editor integration is a smart addition for Autonomic users,” said Michael de Nigris, CEO at Autonomic. “It’s a perfect example of how we continue expanding our ecosystem while keeping ease of use and system performance at the forefront.”

The new Autonomic integration is now live and ready to explore at AVstudio.app (you will be asked to log in or register). Installers can try the one-click widget firsthand, build fully customized GUIs with no coding required, and see how easily Autonomic media control can be deployed across touchscreens, mobile devices, and web interfaces — all within minutes.

The AVstudio integration with Autonomic will be on display at InfoComm 2025, Booth #3391. Register at https://www.infocommshow.org/ using VIP Code: AVG485 to get a free Exhibit hall pass.

About AVstudio HTML5 GUI Editor

AVstudio is a code-free HTML5 GUI builder for professional control systems. Built by Crestron Certified Service Providers, it allows integrators to design and deploy responsive, fully customized interfaces with drag-and-drop simplicity. From corporate to residential and hospitality environments, AVstudio streamlines GUI development. Create and test your GUI as much as you need for free — pay only per project at deployment across unlimited touchscreens, mobile, and web. Try building your customizable GUI at avstudio.app.

About Autonomic Controls, Inc.

Founded in 2006 when digital music was in its infancy, the company was founded with the goal to bridge users’ digital libraries with the high-end control systems used by custom integrators. They were the first company to enable the native browsing and playback of DRM-protected iTunes libraries without the need for an iPod dock. In 2009, they released the world’s first cloud-connected music server, the MMS-5. Over the years they have further refined their product line and technology before being acquired by SnapAV (now SnapOne) in 2016. In May of 2020, co-founder Michael de Nigris reacquired the company along with a core group of original employees. With a renewed passion, Autonomic continues to be the leading innovator of digital media solutions for integrators and manufacturers in the custom electronics industry.

For more information visit Autonomic.biz.

Stuck on a GUI project? Book a demo of AVstudio – the #1 HTML5 GUI editor tool.

Get your clients addicted to your level of service!

Have not registered for Infocomm'25 yet? Use our VIP code AVG485 to get your free attendee pass and come visit us at AVgator booth #3391 Hall 2 from June 11-13 at the Orange County Convention Center in Orlando.

If you’re working on a project and hitting roadblocks with creating a responsive, custom GUI – or just want to speed up your HTML5 design process ― come meet us at InfoComm 2025!

Book a Personal AVstudio Demo Session at Infocomm 2025

In this private demo, Vadim Chekirka, Certified Crestron Service Provider (CSP) and creator of AVstudio, will walk you through how to rapidly create stunning HTML5 interfaces full of features your clients will love!

Are you currently working on a GUI project in AVstudio? The clock is ticking — and you don’t want to miss out!

Important news: Pricing for AVstudio HTML5 GUI builds will change right after InfoComm 2025 — and you can lock in the current rate for life if you act fast.

With its intuitive interface and no coding required, AVstudio helps you design custom GUIs for Crestron control systems faster and easier than ever — taking your projects to the next level.

As we think about this change, let’s take a moment to revisit the now-legendary Bitcoin Pizza Day — when someone spent 10,000 BTC on two pizzas exactly 15 years ago, on May 22, 2010.

That single transaction is now worth $1.1 trillion. It’s a timeless reminder: in tech, timing is everything. Don't let your creative journey mirror that infamous mistake.

Why This Price Change Matters

Starting June 14, 2025, AVstudio’s pricing model will be updated. This is your chance to lock in the current rate for life — and gain a long-term edge on every future project.

AVstudio isn’t just another GUI builder. Whether you're developing interfaces for a luxury residence, superyacht, smart home, or corporate HQ, AVstudio offers unmatched versatility. Built on rich HTML5 functionality, it empowers you to create stunning, high-performance designs that reflect your client’s unique style — and your creativity.

AVstudio.app Interface example - HTML5 GUI Editor.

What’s in It for You?

Let’s talk about what AVstudio brings to your workflow. It’s a powerful HTML5 GUI editor built by and for system integrators — no need to write code or master new tools. With its drag-and-drop interface, real-time preview, and widget library, AVstudio makes it easy to build professional, responsive user interfaces for Crestron and other control systems.

You can design once and deploy across multiple platforms — touch screens, tablets, or web browsers — all while using your client’s branding and layout preferences.

With the upcoming price change, now is the perfect time to see what AVstudio can do for your projects. You can fully design and preview your GUI for free before making a purchase.

Don’t miss your chance to streamline your process and impress your clients — get started today at AVstudio HTML5 GUI Editor.

AVstudio - Powerful HTML5 GUI Editor for Crestron and other control systems.

Time to Take Action

Consider the risk: just like someone still cringing over their Bitcoin pizza every time the crypto market spikes, you might look back and regret missing the chance to invest in your growth.

The boost in productivity, creative freedom, and monetization opportunities AVstudio.app offers is simply too valuable to ignore.

Now is the time to act. With upcoming changes to AVstudio pricing, you have the perfect moment to lock in lifetime access at the current rate — and unlock a powerful, user-friendly design framework in the process. To secure your price lock, just make a GUI build purchase before InfoComm 2025 wraps up.

Head over to the “How to Buy” section and follow the simple steps.

Don’t let this become your own “Bitcoin pizza” moment. Invest in your Smart GUI Editor today.

In the realm of smart security and audiovisual control, two standout solutions – DoorBird and AVstudio – come together to create a seamless, powerful experience. DoorBird, crafted by Bird Home Automation GmbH, brings cutting-edge IP video intercoms to your doorstep, while AVstudio, developed by AVgator Inc., offers a robust platform to manage it all.

In this blog post, we’ll explore how these two innovations pair up, with insights from our DoorBird Integration Guide, and why this combo is a must-have for homes and businesses alike.

Meet DoorBird: The Intercom Innovator

Hailing from Germany, Bird Home Automation GmbH has redefined door communication with DoorBird. These aren’t your average doorbells - they’re IP video door stations packed with features:

• Crystal-clear video and two-way audio to see and speak with visitors.
• Remote access via the DoorBird app, letting you manage your door from anywhere.
• Smart integrations with platforms like Crestron, Control4, and, of course, AVstudio.

Whether you’re screening deliveries at home or managing access for a multi-tenant building, DoorBird delivers security with style and sophistication.

Enter AVstudio: The Control Mastermind

On the software side, AVgator Inc., a Crestron Service Provider, brings us AVstudio - a game-changing platform for AV and smart system integration. AVstudio (accessible at avstudio.app) empowers users to:

• Design custom interfaces with drag-and-drop ease.
• Control a range of devices - like DoorBird intercoms - from one hub.
• Automate workflows for a smarter, more efficient setup.

Think of AVstudio as the brain that ties your tech together, making it ideal for integrators and end-users who want total control without the complexity.

The Power of Integration

So, what happens when DoorBird and AVstudio join forces? You get a security and control solution that’s greater than the sum of its parts. Our DoorBird Integration Guide walks you through the process, highlighting:

• Simple Setup: Connect your DoorBird device to AVstudio in just a few steps.
• Unified Control: View live feeds, talk to visitors, and unlock doors—all from AVstudio’s interface.
• Tailored Experience: Customize the system for a single home or a sprawling commercial space.
• Reliability: Pair DoorBird’s top-tier hardware with AVstudio’s intuitive software for a setup you can trust.

This integration isn’t just about convenience—it’s about elevating how you interact with your space.

Why It’s a Game-Changer

Imagine this: A visitor rings your DoorBird intercom. You check the video feed on your phone via UI created in AVstudio, confirm it’s your guest, and unlock the door - all without leaving your couch or your office halfway across town.

For businesses, it’s even more powerful: manage multiple entrances, automate access, and keep everything in sync with your AV systems. It’s smart security, simplified.

Get Started Today

Ready to bring this dynamic duo to your doorstep? Dive into the full DoorBird Integration Guide in the AVstudio Knowledge Base. You’ll find everything you need - step-by-step instructions, tips, and best practices - to make the most of DoorBird and AVstudio.

Whether you’re a tech-savvy homeowner or a professional integrator, this integration is your ticket to a smarter, safer environment.

Final Thoughts

Bird Home Automation GmbH and AVgator Inc. have each brought something special to the table with DoorBird and AVstudio. Together, they’re transforming how we secure and manage our spaces.

Visit doorbird.com to explore the hardware, and check out avstudio.app for the software that ties it all together.

Let us know how this integration works for you—we’d love to hear your story!

We are thrilled to announce the release of a new template, “Bright Conference Space”, now available for free in AVstudio! This template offers a perfect blend of Responsive and Adaptive Design, showcasing how to handle both static and dynamic data, as well as smart adaptive elements.

Whether you’re learning or ready to implement it into your projects, this template provides a comprehensive guide to mastering modern UI design techniques.

What You Can Expect

This template demonstrates three core activities commonly used in a conference space setup:

1. Presentation Control
   • Select multiple destinations or use the toggle to select/deselect all displays.
     Choose a source for the presentation.
     
     
2. Audio Conference
   • Control the call with Hangup, Answer, Decline/Pause buttons.
   • Use the Dial Pad and Phonebook for easy calling.
     
     
3. Video Conference
   • Adjust camera controls: tilt, pan, left/right turn, and zoom in/out.
   • Camera selection and preset selection for precise control.
   • Content source selection to manage the conference presentation.
     
     

Key Features:

• Help Page: Access the readme and settings page placement for future control integration.
• Speaker and Microphone Controls: Mute and adjust volume with digital join numbers for precise control.
• Power Button: Activate a pop-up window and use the button for functions like starting a timer and more.

Read Me Section - Template Overview:

Here’s a quick summary of what this template offers for self-learning and demonstration purposes:

• About This Template: Learn techniques for variable management, join assignments, data sources, and the use of custom CSS in production.
• Join Numbers for Key Features
  • Power Off Button: Digital Join: 1
  • Volume Controls: Volume Up (Digital 11), Volume Down (Digital 12), Mute Speaker (Digital 13), Mute Mic (Digital 14)
  • Presentation Join Numbers: Variable ‘joinInputSelection’
  • Content Source Join Numbers: Variable ‘joinInputConferenceSelection’
  • D-Pad Join Numbers: Managed through the ‘JoinNumbers’ data source
• Fake Variables & Functions: This template uses fake variables and functions labeled “(fake)” for demonstration, which should be removed before production deployment.
• For More Information: Visit our comprehensive documentation at AVstudio Documentation.

Take your design skills to the next level by experimenting with “Bright Conference Space” in AVstudio! Perfect for both beginners and experts, it’s a hands-on way to learn key concepts of Responsive Design, Smart Adaptive Elements, and Dynamic Data Management.

Get started today – and don’t forget to share your experience with us!

AVstudio #Crestron #Template #UI #AVIntegration #SmartDesign #AVstudioLearning #FreeTemplate #ConferenceRoomDesign

AVstudio Version 3.0 is Here!

We are excited to announce that AVstudio Version 3.0 is now available! This release brings a host of improvements, new features, and refinements to enhance your experience.

Performance Improvements

Performance has been significantly improved, enhancing:

• Page speed
• Element rendering
• Internal function execution
• Data processing

Depending on the project structure, performance gains are estimated to range from 100% to 500%, delivering a noticeably smoother and faster user experience.

Extended Parameters Logic

We have expanded the logic and methods for handling parameters, making them more versatile and powerful. Now available for both subpages and regular pages, parameters can be considered local variables within AVstudio.

Key Features:

• Available at the page & subpage level
• Supports passing signal names (join numbers) and setting values from control system feedback
• Parameter values can be modified using elements or page actions
• Easily operate with Analog, Digital, or Serial feedback values

Simple and Efficient Asset Caching

We have optimized static asset caching to ensure that content loads at maximum speed while maintaining a visually polished appearance. By utilizing the latest web development standards, AVstudio now handles static assets more efficiently than ever before.

New LIVE Mode Mechanics

Our redesigned Live mode brings significant improvements in data handling:

• Data loading and updates are now 3x faster
• Minimal failures in data retrieval or updates
• Exceptional speed and stability

Enjoy real-time interaction with improved reliability!

Over 300 New Features and Fixes

This release introduces over 300 new features, enhancements, and fixes to improve functionality and stability. Here are some highlights:

New Features:

• Optimized slider speed
• Improved default button active styles
• Enhanced text field rendering for dynamic content
• Improved overlay performance
• Added version history and update info
• Reduced build size for better efficiency
• Enabled text location customization in checkbox elements
• Introduced .AVIF image format support

Fixes and Enhancements:

• Resolved text cutoff issues in Text elements
• Improved handling of initial Datasource loading variables
• Fixed dynamic action fields accepting incorrect values
• Stabilized element visibility properties
• Resolved arrow keyboard navigation issues in text fields
• Corrected overlay loading issues when buttons overlap
• Improved page flip function to support spaces in page names
• Fixed automatic closing of editor page tabs

…and much more!

Experience AVstudio 3.0 Today

This version is packed with innovations and improvements, making AVstudiomore powerful and efficient than ever. Upgrade now and take advantage of all the latest features!

Have questions or feedback? Join the AVstudio community and share your experience!

The wait is over! ISE 2025 kicks off tomorrow, and AVgator® Inc. is ready to showcase next-gen AV solutions that are transforming the industry.

📅 4-7 February 2025

📍 Fira de Barcelona, Gran Via

🎯 Booth#CS399

🔥 Why You Should Visit Us:

✅ Live Demos– Experience real-time AV innovation

✅ Exclusive Product Launches– See what’s next in AV technology

✅ Expert Consultations– Get tailored solutions from our specialists

🎟 Haven’t registered yet? There’s still time!

Use our FREE registration codeVNP6FYDVatiseurope.org.

Let’s connect, explore, and shape the future of AVtogetherat ISE 2025!

ISE 2025 Starts Tomorrow! Visit AVgator® Inc. at Booth CS399 in Barcelona! See you in Barcelona! 🇪🇸

#ISE2025 #AVgator #AVstudio #AVgatorStudio #AVIntegration #SmartTech #Crestron #CSP #UIUXDesign #AVProgramming #CrestronEurope #ProAV #Barcelona

Proxy servers play a vital role in managing and routing network traffic, offering solutions for load balancing, caching, and enhanced security.

Our proxy servers is meticulously designed to be lightweight, efficient, and highly customizable. It supports both HTTP and HTTPS protocols and comes equipped with features like keep-alive requests, logging, and robust CORS handling. Additionally, it allows you to use third-party APIs directly in the UI or AVgator®Studio, even if those APIs don’t support CORS or HTTPS.

Key Features

• Cross-Platform Compatibility: Supports Windows, macOS, Raspberry Pi, and Linux.
• HTTP and HTTPS Support: Handles both HTTP and HTTPS traffic.
• Keep-Alive Requests: Maintain uninterrupted connections automatically.
• Configurable Logging: Supports logging to a file with rotation based on file size.
• Dynamic Configuration Reloading: Automatically reloads configuration changes without restarting the server.
• CORS Handling: Seamlessly handle cross-origin requests, preflight requests, and more.

Configuration

The proxy server is configured using a JSON file. Here's an example configuration file (config.json):

{
	"hosts": [
		{
			"prefix": "hostone",
			"auth": {
				"type": "crestronHome",
				"token": "NgPkQG2zc5Wn",
				"url": "https://192.168.254.227/cws/api/login"
			},
			"url": "https://192.168.254.227"
		},
		{
			"prefix": "hosttwo",
			"url": "http://192.168.254.203",
			"autonomic": {
				"heartbeat_url":
				"http://192.168.254.203/api/?clientId=0d933545-fa6a-47fc-90de-0f20db9745ab"
			}
		}
	],
	"mode": "debug",
	"log-file": "/var/log/proxy.log"
}

Detailed Explanation of the Configuration

• mode: Specifies the mode of the application. It can be either debug or production. If not specified, it defaults to production.
• log-file: Specifies the log file name and location. If not specified, it defaults to proxy.log in the binary's directory.
• hosts: An array of host configurations. Each host configuration includes:
  • prefix: The prefix for the host. Requests with this prefix will be proxied to the specified URL.
  • auth: The authentication configuration. If the type is crestronHome, the token and url fields are required. crestronHome is a specific type of authentication used for Crestron Home systems.
  • autonomic: The autonomic configuration. If specified, keepalive requests will be sent to the heartbeat_url every 20 seconds. autonomic refers to the Autonomic music server
  • url: The URL to proxy requests to.

Running the Proxy Server

You can run the proxy server with the following command:

./proxyserver

Make sure the configuration file (config.json) and SSL certificates are in the appropriate directories as expected by the program.

You can choose our prepared Proxy Server for your OS to create AV projects in AVStudio.

RTSP (Real-Time Streaming Protocol) is widely used for live video streaming, especially in IP cameras and surveillance systems. However, RTSP isn't natively supported by most web browsers, making it less versatile for modern applications.

On the other hand, HLS (HTTP Live Streaming) is a browser-friendly protocol supported across devices and platforms.

By leveraging FFmpeg and Nginx, you can efficiently repack RTSP streams into HLS for seamless streaming. Here's how this powerful duo works.

What is FFmpeg?

FFmpeg is a robust multimedia framework capable of processing, converting, and streaming audio and video in various formats. It plays a crucial role in transforming RTSP streams into HLS playlists (.m3u8).

What is Nginx?

Nginx is a high-performance web server and reverse proxy that serves as the delivery mechanism for the HLS files generated by FFmpeg. It ensures efficient file hosting, supports cross-origin requests, and scales to handle many simultaneous viewers.

How FFmpeg Helps Repack RTSP to HLS

FFmpeg repackages the RTSP stream into the HLS format without re-encoding, which saves computational resources and reduces latency.

Use FFmpeg to process the RTSP input and generate HLS segments.

Example Command

ffmpeg -i rtsp://admin:Multimedia@10.14.25.151:8554/ch01 \
       -c:v copy -c:a copy -f hls -hls_time 1 -hls_list_size 6 \
       -hls_time 1 -hls_list_size 6 -hls_flags delete_segments \
       /var/www/streams/AV05SD082a.m3u8

Key Parameters:

• -c:v copy:Copies the video codec without re-encoding.
• -c:a copy:Copies the audio codec without re-encoding.
• -hls_time:Sets the duration (in seconds) of each HLS segment.
• -hls_list_size:Defines the number of segments in the playlist.

FFmpeg continuously processes the RTSP stream and generates a live.m3u8 playlist and media segments.

How Nginx Serves HLS Streams

Nginx acts as the web server that delivers the HLS files to clients. Configure Nginx to serve HLS files with CORS support.

Configuration File Location: /etc/nginx/sites-enabled/strapi.conf

Sample Configuration

server {
    listen 80;
    server_name 10.14.25.18;

    location /streams/ {
        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
        root /var/www;
        add_header Cache-Control no-cache;
        add_header Access-Control-Allow-Origin *;
    }
}

• The types block specifies MIME types for .m3u8 and .ts files.
• The Access-Control-Allow-Origin * header supports cross-origin requests.

Restart Nginx after configuration

sudo systemctl restart nginx

Clients can now access the HLS stream through a URL like:

http://10.14.25.18/streams/stream.m3u8

Conclusion

Repacking RTSP streams into HLS using FFmpeg and Nginx is an effective solution for delivering high-quality video streams to a wide range of devices. This setup ensures compatibility, scalability, and efficiency, making it ideal for applications like IP camera streaming, live broadcasting, or multimedia projects.

With HLS support, AV Studio allows developers to create projects without the need for third-party plug-ins. Just integrate into your project AV Studio a video element that supports HLS playback.

The Black Friday Sale is here, and we’re offering 25% OFF on ALL ITEMS from AVgator® Shop and AVgator® Studio!

Use Promo Code Blackfriday2024 for your 25% discount from TODAY until November 29!

What’s On Sale? All high quality tools and services for your AV projects.

Why You Can’t Miss This:

1. 25% OFF everything – don’t miss this incredible offer!
2. Perfect for upgrading your AV applications and software
3. Limited-time – Sale ends November 29, so hurry!

Just enter the Promo Code Blackfriday2024 in the shopping cart of Our Store or Studio and grab your 25% discount before it's gone!

We are thrilled to announce that AVgator® Inc. will be participating in the highly anticipated Integrated Systems Europe (ISE) 2025, taking place from 4th to 7th February at the Fira de Barcelona, Gran Via.

ISE is the world’s premier exhibition for audiovisual technologies and integrated systems, and AVgator® Inc. is excited to showcase our latest innovations alongside industry leaders and visionaries.

What to Expect at Our Booth

• Expert Insights: Meet our team of specialists and discover how AVgator® Inc. can elevate your projects with custom solutions.
• Live Demos: Experience the cutting-edge AV solutions that are redefining connectivity and integration.
• Product Launches: Be the first to see our newest technologies designed to transform your AV experience.

Why Visit ISE 2025?

ISE is more than just an exhibition — it’s where technology meets inspiration. With attendees and exhibitors from across the globe, the event offers unparalleled opportunities to learn, network, and discover the latest trends shaping the AV industry.

Join us for FREE! Register at iseurope.org using this code: VNP6FYDV

We’d love to see you at our booth and share how AVgator® Inc. can support your business with our groundbreaking AV solutions.

Mark your calendar: 4–7 February 2025. Let’s connect in Barcelona!

Our booth number: CS399

Stay tuned for more details, including our location and special announcements. Visit our website or follow us on social media for updates.

Then check it out here: https://avstudio.app

Cross-Origin Resource Sharing (CORS) is a vital security mechanism in web technologies, including HTML5-based interfaces created with Crestron Construct, Crestron CH5, or AVGator® Studio for Crestron control systems. It ensures that requests from a control interface (e.g., a Crestron panel or Crestron One on iPad) to external servers or APIs are handled securely.

While similar to traditional web applications, the use of CORS in Crestron interfaces has its specific challenges and solutions due to the hardware and network environments involved.

How CORS Works

When an HTML5 interface sends a request to an external API or server, the browser enforces the same-origin policy. This policy blocks requests to different domains, ports, or protocols unless the server explicitly allows it via headers like Access-Control-Allow-Origin. If these headers are not present or invalid, the response is blocked.

Simple vs. Preflighted Requests

Simple Requests:These include GET, POST, or HEAD requests with safe headers. In a smart home environment, for example, fetching status updates from an API for lighting control can succeed if the third-party API responds with an appropriate Access-Control-Allow-Origin header.

Non-Simple Requests (Preflighted):If the request includes custom headers or uses HTTP methods like PUT or DELETE, the browser sends a preflight OPTIONS request. This checks if the server permits such requests by examining headers like Access-Control-Allow-Methods and Access-Control-Allow-Headers. The preflight is critical for ensuring that interfaces can safely interact with third-party APIs.

Example Use Case: Lighting Control

Suppose you are building an interface to control room lighting, and the system relies on a third-party API for device statuses. The HTML5 interface, running on the Crestron touch panel, sends a POST request to the API for status updates:

Preflight Request:The browser sends an OPTIONS request to check if the server permits such a request. The API must respond with headers like:

• Access-Control-Allow-Origin: *
• Access-Control-Allow-Methods: POST

Actual Request:If the server allows it, the interface proceeds with the POST request, and the response is received and displayed in the control panel.

Why Proxies Are Important in GUI Development

During development, CORS issues arise when the interface connects to APIs on different origins. For instance:

• The HTML5 interface running on https://avstudio.app may attempt to communicate with an API hosted at http://192.168.4.4
• Without proper CORS configuration on the server, the browser will block these requests.

A proxy server helps circumvent this by acting as an intermediary. Developers can route requests through the proxy, which communicates with the API and ensures the necessary CORS headers are included. This approach simplifies testing and allows the interface to function seamlessly without requiring server-side configuration changes.

🔍 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!

💬 Need Help? Reach Out Anytime!

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

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.

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.

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.

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.

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

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.

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.

Introduction

Discover the Bright Conference Room Template, an intuitive HTML5/CH5 User Interface crafted using AVgator® Studio. Ideal for conference and huddle rooms, this template offers a seamless and efficient control solution to enhance your meeting experiences.

Getting Started

Welcome to the Bright Conference Room Template demo! This intuitive HTML5 User Interface, developed using AVgator® Studio, is designed to elevate your conference and huddle room experience. With streamlined controls and a user-friendly design, our template ensures effortless management of room settings, audio-visual equipment, and collaboration tools. Explore the features and see how it can transform your meetings and presentations.

Navigating the Interface

1. Home Button: Located at the bottom of the interface, the Home button allows quick access to the main screen.
2. Volume Controls: In the middle of the interface, the volume control buttons marked with + and - allow you to easily increase or decrease the volume, ensuring optimal audio levels during your meetings.
3. Speaker Mute Button: Next to the volume controls, the speaker mute button enables you to quickly mute or unmute the speaker for instant audio control.
4. Microphone Mute Button: Beside the speaker mute button, the microphone mute button allows you to mute or unmute the microphone as needed.
5. Power Button: The power button allows you to quickly and easily power off the system.
6. Confirmation Popup: After pressing the power button, a confirmation popup appears, providing options to either confirm the shutdown or cancel the action, preventing accidental power-offs.
7. Settings Menu: Located in the header, the gear button provides access to the settings menu, where you can customize various system settings to tailor the interface to your specific needs.
8. Help Button: In the top left corner of the header, the help button provides access to a help guide and technical support contact information.
9. Help Page: The help page contains all essential information and technical support contact details you need.
10. Current Date and Time: The home screen displays the current date and time, ensuring you stay informed and on schedule during your meetings.
11. Time Zones: Additionally, a clock showing different time zones is displayed below the date and time.

Activity Selection

1. Start Presentation: Select the “Start Presentation” option to initiate your presentation seamlessly, ensuring all necessary equipment and settings are ready for an effective and professional delivery.
2. Source Selection: On the next screen, select the source for the presentation you want to send to the destination.
3. Destination Selection: Choose the destination for your selected source.
4. Return to Home Page: Navigate back to the home page once your presentation setup is complete.

Audio Conference

1. Audio Conference: Select “Audio Conference” to initiate and manage audio-only meetings.
2. Dial Pad: Access the dial pad to make calls by entering the desired phone numbers directly.
3. Contact List: On the right side, access your contact list for quick and easy call initiation.
4. Call Management: On the left side, use the generic call, hangup, and on-hold buttons to manage your calls efficiently.
5. Return to Main Screen: Click the Home button to return to the main screen.

Video Conference

1. Video Conference: Select “Video Conference” to initiate and manage video meetings.
2. Camera Selection: On the left side, choose the appropriate camera for your video meetings.
3. Camera Presets: On the right side, select from predefined camera settings for your video meetings.
4. Pan, Tilt, and Zoom Control: In the middle, adjust the camera’s position and zoom level to suit your needs.
5. Source Selection for Sharing Content: Below, choose the content source you want to share during your video meetings.
6. End Video Conference: To end the video conference, click the designated button.

Conclusion

Creating an intuitive and efficient interface like this is easy with AVgator®Studio. Our powerful tools and user-friendly design make it simple to develop customized solutions for your conference and huddle rooms. Experience the convenience and functionality of AVgator®Studio and enhance your control systems effortlessly.

Enjoyed the Guided Demo?

We hope you found the Bright Conference Room Template demo informative and helpful. Try AVgator®Studio today and transform your conference room experiences!

For more information, visit AVgator® Studio.

At InfoComm 2024, we at AVgator® Studio had the pleasure of showcasing our cutting-edge AV integration solutions. Our revolutionary Graphical User Interface Integrated Development Environment (GUI IDE/Editor) captivated the audience, highlighting its remarkable efficiency and user-friendly design. This monumental presentation sparked excitement among manufacturers eager to explore OEM possibilities with us.

The AV Evolution

Our innovative approach at AVgator® Studio is paving the way for a new era in AV integration. Our GUI IDE/Editor has emerged as a beacon of modernization, winning the hearts of programmers seeking streamlined workflows and a seamless transition from outdated, legacy systems. We are committed to bridging the gap between complexity and simplicity, revolutionizing the AV landscape one solution at a time.

A Glimpse into the Future

Our future-forward design philosophy resonated strongly with attendees at InfoComm 2024. The intuitive nature of our GUI IDE/Editor symbolizes a paradigm shift towards more efficient and user-centric AV solutions. Programmers and technicians recognized our tool as a modern gem, unlocking a realm of possibilities in the realm of AV integration.

Forging Strategic Partnerships

The buzz surrounding our showcase was not merely due to our innovation but also our promise of collaborative opportunities. Manufacturers quickly envisioned the potential for OEM partnerships, leveraging our breakthrough solutions to enhance their own product offerings. The allure of seamless integration and enhanced efficiency was irresistible to those seeking to stay at the forefront of technological advancement.

Embracing Change: Legacy to Legend

Our GUI IDE/Editor represents not just a software tool but a transformative force. For programmers accustomed to grappling with outdated systems and convoluted processes, this modern marvel serves as a beacon of hope. Its user-friendly design and efficient performance not only signify progress but exemplify a seamless transition from legacy systems to a future where AV integration is synonymous with ease and excellence.

Elevating the AV Experience

In the ever-evolving landscape of AV technology, innovations like our GUI IDE/Editor stand as pillars of progress. Our commitment to efficiency, user-friendliness, and innovation heralds a new dawn for the industry, where complexity is no longer a barrier to excellence. As professionals witness the transformation firsthand, it becomes evident that the future of AV integration is not just bright – it’s impeccably designed, supremely efficient, and extraordinarily user-friendly.

In conclusion, our presence at InfoComm 2024 was not just a showcase; it was a testament to the power of innovation in transforming the AV landscape. As the industry adapts to the changing tides of technology, solutions like our GUI IDE/Editor set a new standard of excellence, efficiency, and user experience that promises to reshape the very fabric of AV integration.

So, here’s to embracing innovation, forging partnerships, and unlocking a future where AV integration is not just seamless; it’s revolutionary.

As InfoComm 2024 wraps up, we’re excited to share the final day with all of you! It’s been an incredible event, filled with amazing interactions and feedback about our latest version of AVgator® Studio - HTML5 GUI Editor

If you haven’t had a chance to visit us yet, today is your last opportunity to see AVgator® Studio in action at Central Hall, Booth 10130. We’re showcasing groundbreaking features, including over 300 new enhancements, and demonstrating how they can streamline your AV projects.

Highlights from Day 3:

• Live Demos: Experience the new features firsthand and see how easy it is to create stunning UIs with AVgator® Studio.

• Interactive Sessions: Engage with our experts, get your questions answered, and explore how AVgator® Studio can fit your needs.

• Networking Opportunities: Connect with industry peers and our team to discuss future AV solutions and collaborations.

For those who couldn’t attend in person, we’ve prepared a video showcasing our booth and the key highlights of AVgator® Studio. Watch it here and get a glimpse of the innovations we’re bringing to the AV industry.

We want to thank everyone who visited us over the past few days. Your interest and feedback have been invaluable, and we’re excited about the possibilities ahead. Stay tuned for more updates and future developments from AVgator®Inc.

Event Details:

• Location: Central Hall, Booth 10130

• Date: June 14, 2024

For more information and to stay connected, follow us on LinkedIn.

#InfoComm2024 #AVgatorStudio #AVTech #Innovation #Crestron

We’re excited to share some of our latest touch panel designs from AVgator® Studio. Check out the photos below!

Are you curious about how you can create similar touch panels for your projects? Visit us at Central Hall, Booth 10130 today, and let us show you how AVgator® Studio can transform your AV interfaces with ease and efficiency.

We’d love to hear your thoughts and questions—drop by for a demo or comment below if you’d like to learn more!

#InfoComm2024 #AVgatorStudio #TouchPanelDesign #AVTech #CrestronProgrammers #Crestron #AvgatorInc

Join Us for a Sneak Peek of Our Latest Innovations!

As InfoComm 2024 kicks off in Las Vegas, we at AVgator® Inc. are thrilled to announce that we are fully prepared to showcase our latest advancements. We invite all our current and future customers to visit us at Central Hall, Booth 10130, to discover what we’ve been working on.

This year, we have a special surprise in store, featuring cutting-edge developments in AVgator® Studio that will revolutionize how you approach AV technology. Our team is eager to demonstrate these new capabilities and discuss how they can benefit your projects.

What to Expect at Our Booth:

• Exclusive Preview of AVgator® Studio’s New Features: See firsthand the enhancements designed to streamline your workflow and elevate your AV solutions.

• Interactive Demonstrations: Engage with our live demos and get a feel for the intuitive, powerful tools we’ve developed.

• Meet the Experts: Our team of specialists will be on hand to answer your questions and provide insights into how AVgator® Studio can meet your specific needs.

Don’t miss this opportunity to connect with us and explore the future of AV technology. We look forward to seeing you and sharing our exciting new offerings!

Event Details:

• Location: Central Hall, Booth 10130

• Dates: June 12-14, 2024

Stay tuned for more updates from InfoComm 2024. Follow us on LinkedIn for live insights and highlights throughout the event.

🚀 Excited to be heading to InfoComm 2024 in Las Vegas! Representing AVgator® Inc., I can't wait to showcase our groundbreaking solutions, including AVgator® Studio. Looking forward to connecting with industry leaders and exploring new possibilities in AV technology. Let's revolutionize the future of AV together!

#InfoComm2024 #AVgatorInc #avgatorstudio

Element modes

NEW

We have added the capability to create mods for elements (all of them!). This allows for significant alteration of both the appearance and actions of the element depending on dynamic data. This functionality extends to page lists as well: you can easily modify the structure of the list with just a few clicks.

Mode creation dialog

Media upload: support for .svg (color inheritance included) and .webp

NEW

We have implemented the ability to upload images in the webp format. Additionally, you now have the unique opportunity to upload images in the .svg format. It is important to understand that an SVG image containing 'currentColor' as a color indication will adopt the element's color settings—this is particularly convenient for creating unique icons.

Extended media upload box

We recommend to use this icons: Open Source Icon Sets - Iconify

Use any .svg image as icon. Animated .svg also supported.

Granural Padding & Border Radius Control

NEW

It has become convenient to set different value for different sides. Feel free to utilize this feature!

Advanced border radius control

Extended Background Size & Position

NEW

Now you have more control over the background at the page, project, and other supported element. You can now specify sizes and positions as well.

Background Image for Containers

NEW

The ability to specify a background for the container is now available. Control for position, opacity, size, blur included!

Containers with custom background Images

Border Radius for Containers

NEW

Utilize border radius directives for the container to enhance the appearance of your project.

Container border radius

Text Wrap Behavior for Button & Text Elements

NEW

Working with long text has become more convenient. Later we will add convenient tools for automatic truncation of long text.

Control over text wrap

Global Override Theme Design Settings

NEW

We have moved global project background settings into a separate category in the menu. Additionally, in this menu item you now have the option to specify custom settings for the main colors used. In the future we plan to significantly extend control over the appearance at a global level and allow users to create and share their own design/color themes.

Override global theme color/background settings

Blur Content behind Subpage or Container

NEW

At the container and subPage level, it is now possible to control the degree of blurring of elements/content beneath them. This is very convenient for highlighting, creating visually appealing effects and improving the readability of your interface.

Background blur effect

Containers are sortable again!

NEW

New Function Creation Modal

NEW

A new editor has been designed for creating functions. Writing and testing functions has become much more convenient. Additionally, integrated documentation with all available global data and variables for use will be added to this modal soon.

New Function Creation Modal

New DateTime Widget

NEW

We have added a DateTime widget for convenient and fast visualization of the current time and date with detailed formatting options and the ability to specify time zones.

DateTime widget

Precache External Images

NEW

If your project extensively uses images from external sources you can now cache them in advance so that users will see them instantly when using your GUI.

Add datasource with urls array should be precached

Image Lazy Load Option

NEW

Using this option will allow you to defer the immediate loading of heavy images and improve the user experience.

Image lazy loading

Shades Control Widget Improved

NEW

Advanced settings and bug fixes have been implemented for the shades control widget. You can now configure the curtain style in more detail. Additionally, users can adjust the degree of opening and closing by directly dragging the curtain fabric.

We are thrilled to welcome both new and loyal customers to showcase our flagship offering - AVgator® Studio, a cutting-edge WYSIWYG user interface editor.

Join us to discover the latest in user interface design and share in our newest innovations.

Mark your calendars for June 12 to 14, and find us in the Central Hall. We can't wait to connect with you and explore what the future holds together. See you there!

Our booth number: C10130

Click the registration link below and use our VIP code for a free exhibit hall pass: https://invt.io/1exbtnte7ar

Then check it out here: https://avstudio.app

Added support for dynamic classnames

NEW

We have added the ability to assign dynamic CSS classes to any element on your page. This allows you to change the appearance of elements using not only built-in settings but also custom CSS styles.

You can assign as many classes as you want separated by a space.

Dynamic CSS classnames for any element

Environments

NEW

We are pleased to introduce our new feature, Environments. Now, each project can have multiple environments, each storing specific settings that can be used in various scenarios. For example, different connection settings to the processor that you can use at your workplace as well as for final testing on the client's hardware. It's easy to switch between environments both during interface creation and when selecting them for building. When changing the active environment in the page editor, the live preview instantly applies all the current settings you have selected.

Crestron processor auth token support

NEW

We have implemented support for authorization tokens for connecting to processors. This allows us to avoid redirects during authentication.

Variables Side Effects

NEW

Now you have the ability to react to changes in variable values. In the event of a variable change, you can create as many actions as needed. This can include actions to send any type of signal, assign a variable, change a page, or anything else necessary to implement your scenario.

Updated variables table

Variables side effects form

Dynamic subpage inside overlay

NEW

Now, when opening the overlay you can specify the page that should appear in it dynamically. This allows us to implement various interface logic within a single element as part of an action.

Call overlay by subpage name

Video element updated: new options and HLS support

NEW

The video element has been significantly enhanced. It now includes extended settings for controlling the display of player interface elements as well as support for the new format: HLS.

Updated video element

New action type: Run Function

NEW

We have introduced the ability to create an action that allows you to execute any JavaScript function you have previously created. This action can be applied to any element.

Function runner

Bugfix & Small improvements

UPDATE BUGFIX

• Better behavior for text input element, slider, circle slider, toggle, checkbox, switch.
• Fix Button element pressed state styles
• Update fullscreen editors (html block, css)
• Back routing doesn't trigger action if actually no back page exist
• Click on image allow open overlay
• Better webxpanel initialization method, webxpanel updated to latest version
• Fix bugs on touch click events
• Fix bugs when sometimes overlay cannot be closed
• Stop execute actions from list elements while it scrolling
• Edit action form bug with representing wrong initial data
• Click event may triggered twice on iOS - fixed
• Fix project clone process
• Improve page/subpage search
• Improve subpage search whet setting up a route action
• Live session isolation: one per login instance
• Fixed unresponsive field while editing assigned dataset
• Fixed: Color field doesn't show current color value (text element for example)
• Fixed: Dpad keep working when disabled
• Fixed: Circle slider send wrong value when ends with zero and using fraction
• Add project clone progress indicator

New Element: Text Input

NEW

A new widget for controlling shades with rich appearance and display settings.

Shades control

HTML block element

NEW

A new element has been introduced allowing you to embed HTML code, including tags, styles, and scripts. For example, in about 30 seconds, you can insert a fully functional web widget for weather, and it will work seamlessly and display on your page.

More control over the management of pages and subpages

NEW

Fast filtering as well as mutual mapping of utilized pages and subpages, allows for quick orientation and navigating to edit relevant components, understanding their hierarchy.

Pages & Subpages interface updated

Extend dynamic support

NEW

We've introduced dynamic support for color settings across almost all elements. Additionally, the image source specification is now entirely dynamic—you can use both URLs and dynamically reference images previously loaded into the library, including the use of variables and/or a datasource.

Video element

NEW

A video element has been added. Currently, it's the most basic implementation; later, we'll update the list of supported properties and display settings for this element.

Actions updates: OnChange, Page Actions, new properties

NEW

Actions for pages (and subpages) have been added, which can be triggered upon the loading or unloading of a page (subpage).

For all types of events, you can now set a delay in the action execution.

For elements that imply a change in the value of something (such as sliders, checkboxes, inputs, etc.), onChange actions are available. These actions allow you to trigger any events before or after the value changes, as well as directly manipulate the changing value.

For the digital type action, numerous new options have been added for working with the sent value: momentaries and toggles are now available. Additionally, for the Pulse value type you can configure the delay for value transitions.

Image as Icon

NEW

In all elements where there is an icon specification (for example, a button), you can attach not only an icon available in one of the preinstalled libraries but also use any image. Moreover, this image can be loaded either from the library or dynamically.

Overlay: Any Click to Close

NEW

An important option has been added for overlay control: the ability to close the overlay by clicking anywhere on the screen. This is useful for implementing informational pop-ups that do not require user interaction.

CSS & Code Editors updates

NEW

We have reformatted the appearance and display settings for code editors used for writing CSS and HTML block code. You can relocate the code edit and also expand it to full screen.

Bugfix & Small improvements

UPDATE BUGFIX

• Fix touch actions in Crestron One
• Added border support to many element
• Fix bugs with value in multiply circle sliders on the page
• More stable functions
• Fix deep nested parameters values
• Fix action info in sidebar, add ability to edit actions without need to recreate them
• Create user profile page
• Added background color for toggle widget
• Change JSON viewer to the code editor
• Added dynamic support to the page BG
• Added filtering for the single element generation
• Fix show Overlay when subpage is a trigger
• Fix element selection in global container
• Improved element reposition by drag
• Added background blur option for overlay
• Added text uppercase option
• Added text color to button, text elements
• Better image caching
• …and many more

Ability to attach actions to Text, Image and Subpage elements

NEW

You can now associate various types of actions with new elements, such as subpages, images, and text. It's important to note that any actions used within a subpage are executed independently.

New slider handle style options

NEW

• Hand border options including border radius
• Hand background color

Pages & Subpages sorting

NEW

Allow set signal value in action as dynamic value (json, variables, etc)

 NEW

Project global joins

NEW

• Analog flip page signal

Initiate a page flip from the processor using analog feedback. Remember to manually set the page flip ID for this operation.

• Serial flip page signal

Trigger a page flip using the page name as a reference.

• Notification signal

Inside your project settings, you have the option to define a serial signal name. When feedback is received from the processor, the text will be displayed as a notification using the specified signal name.

• Refresh DataSources

Activate a datasources update by using signal feedback.

Element extended visibility

NEW

• By orientation

Element orientation visibility refers to the position of an element, such as text, an image, or any other component, and whether it's currently visible within the current orientation.

• By dynamic value (variable, parameter, json datasource)

By utilizing dynamic values within your project, you can dynamically update whether elements are visible or not, all without the need for external processor interactions.

Added button height property

NEW

Subpage optional default fixed size

NEW

You can enable the option to set a fixed width and height for a subpage.

Added Checkbox element

NEW

Added Toggle Switch widget

NEW

Added Circle Slider widget

NEW

A highly customizable circular slider widget that can be employed for various purposes, including climate and sound controls, among others. It allows dynamic content configuration for all elements inside.

Subpage parameters

NEW

Pass data from the parent element down to a nested subpage as input parameters and utilize this data within the subpage.

Overlays

NEW

A new action type has been introduced, functioning as a trigger to display an overlay. The overlay can be any type of subpage containing various data, appearing on top of the page content. Numerous customization options are available, including:

• Adjustable overlay placement on the page.
• Customizable overlay mask styles and local mask design.
• Automatic closure by timeout or clicking outside the overlay.

Set icon dynamically

NEW

You can now set the icon name as a string, even when it's sourced dynamically. To discover the full range of available icons, you can utilize the Icon Explorer feature, providing greater flexibility in choosing and displaying icons within your project.

Dynamic image external source

NEW

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.

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

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

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

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

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

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 form

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

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.

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.

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.

Live project preview

NEW

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.

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.

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.

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.

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.

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.

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!

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.

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.

Text Element Icon Support

UPDATE

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)

Error Editor Page Loading

BUGFIX

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

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!

Icons added: +793

NEW

Edit page name and URL directly from list

NEW

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.

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.

"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

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.

Selection helpers

NEW

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.

Smart Save Keeper

UPDATE

Losing data just got harder now

Elements selector layout

NEW

Elements are now grouped into a collapsible list.

Mass actions for the entire element group will be added in the future.

Bounding box

BUG

Bouncing box view now works more stably

Main menu saved state

NEW

Main menu saves its own state after page reload

Preview window

UPDATE

Preview updates 2.5x faster now. Instant display of all your changes.

Preview interactive features

NEW

Now you can select any visible layout container by clicking on it inside the preview window!

To make this feature workShow Bounding Boxmust beON!

Interactive communication inside preview window will be significantly expanded in future updates.

Element and Container details layout

NEW

Is a more clear, simple, and compact view

Element width option

NEW

Now you can set width, max width and min width for your Button Element.

Container border options

NEW

Set any border width for any container side. Pick any colour with possible transparency or enter colour string manually in any format (RBG, RBGA, HSL and more)