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.
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.
We’re proud to showcase the outstanding work of Artem Buslaev, a member of the AVstudio community who has crafted an elegant, high-performance user interface tailored for the iPad. Artem’s attention to detail, smart layout decisions, and deep understanding of the AVstudio platform make this project a standout example of what’s possible.
Whether you’re designing for residential, commercial, or hospitality control systems, this UI offers inspiration for building clean, intuitive, and modern control environments.
Main Home Dashboard
A beautifully clean interface that immediately communicates clarity and control. The user is greeted with a layout that balances visual hierarchy and accessibility — everything feels right at your fingertips.
Lighting Scene Control
From “Lounge” to “Dinner” to “Cleaning” — each quick-action button is designed for immediate recognition and ease of use. The soft gradient accents and large touch areas make this panel perfect for fast scene switching in both day and night environments.
Climate Control Interface
A dedicated climate panel that’s both functional and elegant. The use of space and clear temperature indicators provide a seamless experience, with intuitive controls for setpoints and HVAC modes.
Shading and Privacy Control
This view simplifies motorized shade and curtain operation. The iconography is clean and minimal, while the layout ensures the user always knows what’s open or closed — without second-guessing.
Room Navigation System
Users can move between rooms or zones effortlessly. With thoughtful use of animations and page transitions, the navigation experience feels natural and smooth — as if the interface knows what you need next.
Watch Artem’s live demo to experience transitions, responsiveness, and fluid control across all panels.
🔍 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!
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
