Tag: Blog

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!

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.