top of page

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

Updated: 1 day ago



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:



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.


64 views0 comments

Comments


bottom of page