Category: Product Updates

Latest improvements, bug fixes, and new features for AVstudio

  • How AVgator® Studio’s Adaptive Feature is Changing the Game at CEDIA 2024

    How AVgator® Studio’s Adaptive Feature is Changing the Game at CEDIA 2024

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

    Luxury User Interfaces

    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!

    Adaptive page

    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.

    Responsive page

    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.

    Community Programmer Contributions

    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.

    User Interfaces

    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.

    AV studio Interface

    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.

  • On the Way to CEDIA Expo 2024. Stay tuned for some exciting announcements!

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

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

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

    On the Way to CEDIA Expo 2024

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

  • AVgator® Studio: modern IDE to create stunning HTML5 user interfaces.

    AVgator® Studio: modern IDE to create stunning HTML5 user interfaces.

    avstudio

    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

    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

    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.

    Element modes

    Community templates

    Clone in one click

    Clone in one click

    Community Template Preview:

    HTML5 Template for smart homes

    HTML5 Template for smart homes

    HTML5 Template for smart homes

    HTML5 Template for smart homes

    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.

  • First look at LuxeControlSuite Community Template | HTML5 User Interface

    First look at LuxeControlSuite Community Template | HTML5 User Interface

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

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

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

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

    Free HTML5 Template for smart home AVstudio

  • Version 1.0 | Introducing Exciting New Updates in AVstudio Version 1.0 | Community templates

    Version 1.0 | Introducing Exciting New Updates in AVstudio Version 1.0 | Community templates

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

    Community templates

     NEW

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

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

    Community templates

    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.

    shadow

    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.

    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.

    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.

    Switch between element mode by name

    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)

    Better Hotkeys

    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.

    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.

    Functions: AVgator project methods info

    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.

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

    Post-processing functions let you apply effects and modifications to element values to alter the result

    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.

  • New template mechanic, payment system, downtime

    New template mechanic, payment system, downtime

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

    New template AVgator

  • What’s New in Version 0.40: Exploring Element Modes, New Design Features, and the Datetime Widget

    What’s New in Version 0.40: Exploring Element Modes, New Design Features, and the Datetime Widget

    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

    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

    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.

    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!

    Padding per side

    Advanced border radius control

    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.

    Extended Background Size & Position

    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

    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

    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

    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

    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

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

    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

    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

    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.

  • Exploring the Enhanced Features of Version 0.28: Dynamic Classnames, Environments, and More

    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

    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.

    Crestron processor auth token support

    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

    Updated variables table

    Variables side effects form

    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

    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

    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

    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
  • What’s New in Version 0.24: A Comprehensive Overview of the Latest Updates and Features

    New Element: Text Input

     NEW

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

    Shades control

    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.

    HTML block element

    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

    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.

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

    Actions updates: OnChange, Page Actions, new properties

    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 elements that imply a change in the value of something (such as sliders, checkboxes, inputs, etc.), onChange actions are available

    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.

    digital action

    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.

    Image as Icon

    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.

    overlay any click to close

    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.

    CSS & Code Editors updates

    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
  • Version 0.21

    Version 0.21

    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.

    Ability to attach actions to Text, Image and Subpage elements

    New slider handle style options

     NEW

    • Hand border options including border radius
    • Hand background color
    New slider handle style options

    Pages & Subpages sorting

     NEW

    Pages & Subpages sorting

    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.

    Project global joins

    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.

    Element extended visibility

    Added button height property

     NEW

    Added button height property

    Subpage optional default fixed size

     NEW

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

    Subpage optional default fixed size

    Added Checkbox element

     NEW

    Added Checkbox element

    Added Toggle Switch widget

     NEW

    Added Toggle Switch widget

    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