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
- The DOM
- 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
- Design Strategies
- Hardware Choices
- Part 4: Case Studies
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?
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.
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.
You could also put the script tag in the head or at the end of the body.
One more cool feature before we get into designing a system for real time control with HTML5: the DOM.
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.
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.
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
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.
Like when you click the button below and your browser loads the next page from a server…