Implementing HTML5 for AV Control
For years the AV industry has had the comfort of relying on proprietary WYSIWYG (What You See Is What You Get) tools supplied by control system manufacturers (Crestron, AMX, Extron, and others) to develop their user interface designs. Regardless of whether they were ideal, these software applications were the go-to resource for developing a user interface for the respective brands of touchpanels. In many cases, thanks to the functionality of Adobe Flash, the ability to provide webpage control that mimicked the look and feel of an existing touchpanel user interface was as simple as “save as.”
While the recent deprecation of Flash support in modern web browsers removes the luxury of being able to create webpage control with ease, it also introduces a new opportunity to modernize user interface design by leveraging mainstream web development technology found in HTML5. It should be made clear, that although HTML5 is widely used for many websites and web development solutions and is a common proficiency of full-stack software developers, it is complex and can require a significant learning curve for AV programmers who are new to the technology. Additionally, the application of HTML5 as an interactive user interface for an AV system also introduces another layer of requirements beyond what might be needed for a basic informational website or static application.
Unlike a touchpanel page drawn in an editor where buttons are placed on a screen, colors or styles changed with a click of a palette, and functions tied to a program by assigning button IDs or function numbers, most HTML5 development requires HTML code to define the structure of the screen/page, CSS to define the style and presentation of the UI elements, and JavaScript to determine the action and connection to the control program. Additionally, challenges can arise when requirements call for an HTML5 user interface to replicate an existing design. Depending on the intricacies of the button graphics and feedback states, as well as, the latitude for variation, the effort required to create a replacement or duplicate design for one created by proprietary touchpanel software can require a significant effort.
One of benefits of a using a webpage for displaying a user interface is the flexibility it provides. With web browser support available on workstations with large screen displays all the way down to cellphones that are pocket-size, the ability to support a web-based interface is seemingly boundless. However, with this level of flexibility and compatibility, comes challenges for programmers and user interface designers who need to create designs that are adaptable for the various device types and sizes. As you can imagine, user interface optimized for a 27″ desktop monitor is different than one for an 10″ iPad which is different than one for a 6″ cellphone. Therefore, it is important to identify the type and size of the target device being used to access the user interface, as well as, how the user interface needs to be adapted when it is used on other size browsers. If not determined and planned properly from the outset, this can become problematic, time consuming, and costly down the line.
When a single, dedicated device like a touchpanel will be the target for an HTML5 user interface, the design can be created for a fixed resolution. However, when multiple devices with varying resolutions need to be supported, it is important to determine how much of a difference there is in resolution between the devices. If the resolutions are close (100-200 pixels), the user interface can be designed to be scalable, but if the difference in resolutions in significant (over 300 pixels), a responsive user interface will likely be best. The key is that a scalable user interface uses a singular layout that can be dynamically resized, whereas a responsive user interface is comprised of two or more user interface designs that are optimized for specific resolutions.
While it’s no longer as easy as “save as,” a properly planned HTML5 user interface can be a powerful solution for clients looking to leverage web technologies and modern interface design for multiple devices and provide a solution for BYOC (Bring Your Own Control).
It is understandable that some AV integrators and programmers may need help or support in making the leap from Xpanel or web control of the past to HTML5 solutions. Whether it’s to create the design and include a guided handoff to a programmer who will address programming needs, offer consultation and support for those who desire to handle the implementation on their own, or provide complete turnkey HTML5 and programming solution, Control Concepts is here to help. For more information, please contact projects@controlconcepts.net or call (201) 797-7900.
This content is part of a series of posts on HTML5. Previous topics include:
In a follow up post, we will discuss the various HTML5 approaches that are available and how to determine which is the best fit for a particular project or client.
Keep in touch with Control Concepts and never miss this valuable information by signing up on our mailing list.
