AV UI’s With HTML5 – Part I

We’re going to break down and define all the components needed to turn a web page into an AV control interface. Some of this may be obvious, but things can quickly get confusing. So it is best to go over the basics before getting into architecture.

Table Of Contents

  • Part 1: The Browser & Web Pages
    • HTML
    • CSS and Javascript
    • The DOM
    • Frameworks
    • Resources
  • Part 2: The Server
    • Design Considerations
    • Development vs. Production
    • Number Of UI Devices
    • Authentication & Data Storage
  • Part 3: Integrating with AV Systems
    • HTTP & REST API’s
    • WebSockets
    • Design Strategies
    • Hardware Choices
  • Part 4: Case Studies

HTML

Web pages are viewed in a browser (duh).

At a minimum, a browser needs an HTML file to do anything. Here is some very basic HTML:

You can open that file up in a text editor and play around with it. Pretty boring, eh?

CSS and Javascript

HTML is a markup language browsers use to create a web page document. Other files such as CSS, Javascript, fonts and images can be loaded into the document through the HTML file to make things more interesting.

Technically, everything could be included in one big, messy, hard to read HTML file. But every programmer knows if you don’t want to lose your mind, you gotta stay organized.

So instead of including all the CSS styling and Javascript in one file like this:

You could include the styling and Javascript in separate files. Those files need to be loaded into the browser through the html file like this:

Stackblitz Tip: Click the Project button at the top left of the window to see all the files.

Notice that the CSS file called style.css is loaded at the top of the file. That makes sure it gets loaded first, before the document is shown in the browser.

Likewise, the script.js Javascript is loaded last because it is not needed until someone clicks the button. Loading it last lets the browser show the page faster.

You could also put the script tag in the head or at the end of the body.

The DOM

One more cool feature before we get into designing a system for real time control with HTML5: the DOM.

It sounds ominous, even frightening. But it’s no big deal to understand. DOM stands for Document Object Model and it gives you a way to access the HTML elements from Javascript.

In this example, we give the heading an id and change the heading text whenever the button is clicked. Don’t forget to look at the script.js file. That is where the magic happens.

Frameworks

Layout

Those are the most basic components of a web page. There are frameworks out there for styling and layout such as Materialize and Bootstrap. These are really useful because laying out a web page can be a huge PITA. Layout is probably the biggest challenge to using HTML5 in AV projects.

Keep in mind that just like the browser itself, layout frameworks tend to adopt conventions from the printing industry. Remember newspapers and magazines?

Those paradigms are not always helpful when designing control interfaces.

Single Page Web Apps

Instead of loading a new page every time a change occurs, web pages can be loaded once and have their data updated on the fly through the DOM. This type of design is called a Single Page Application.

Data manipulation frameworks such as Angular, React and Vue attempt to make single page applications more approachable.

New Approaches

Just as Single Page App design followed the server-side paradigm, new approaches continue to develop. Reactive Design or HTML-over-WebSockets is a great example of a shiny new technology that sounds quite exciting.

Don’t Choose A Framework

Deciding to use a framework has a major impact on the way you work. Some are easier to get started with, but have limited functionality. Others are fully-featured but take more effort to learn.

In addition to their advantages, you also inherit their roadmap, release schedule and bugs.

It is important to remember that most all frameworks are built on the same components: HTML, CSS, Javascript and interacting with the DOM.

If you are just getting started, it is probably best to avoid these frameworks and build a good foundational knowledge of the base components first.

Resources

There are plenty of educational resources online for creating webpages. Just search for whatever your looking for and you’ll probably wind up on Stack Overflow or W3 Schools.

Next Up

Now that we know how to make a web page, it’s time to start thinking about how to get those HTML, CSS and Javascript files into the web browser.

Like when you click the button below and your browser loads the next page from a server…