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