The Interactive & Immersive HQ

05 – Screens and Intro to Video Hardware

Introduction

With all the overviews out of the way, we now begin the full block of posts on Technical Implementation and Design. This will introduce the whole section. Then a small introduction about Video hardware specifically, then we dig into screens. So…

How do different hardware elements fit into the space? What kinds of technical hardware is required to express specific immersive designs? How do you know how much power you need? How do you know what operating conditions specific hardwares need? What is pixel density and how does that effect your content? How do you decide between the different hardware options?

These are all elements that will be explored in this next block of posts. We will examine how different elements can work in spaces, which spaces are appropriate for which technologies, the type of effect they have on the individual, and how interactions can translate into the real world movement, lighting, sound, and video.

This block of posts introduces visual, aural, and mechanical elements that are commonly used to convey immersive designs. By separating the notion of the technical implementation from the immersive design and interactive technologies, we create an entry point for creative professionals that are already accustomed to thinking about and transforming the visual aesthetics and design of a space. You may be savvy in many elements of design, but the idea of augmenting these designs with technology like LEDs, speakers, screens, etc, might seem daunting.

The focus of these next number of posts is on definitions, comparing the technical advantages and disadvantages of specific hardwares, and use-case studies and examples of each technology implemented in a space.

The overall goal of this unit is to collect, present, dissect, and simplify, the mounds of technical information that is usually quite disparate, scattered, and loaded with sales jargon. First on deck, is video hardware, and more specifically, screens.

Video Hardware

Introduction

The first elements we will examine are different pieces of video hardware. This section is further broken up into three sub-sections: screens, LED displays, and projectors.

In the screens section, we will discuss video walls (screen arrays), outdoor screens, indoor screens, signage systems, etc etc. In the LED display section we’ll dicuss LED panels, large LED systems, LED controllers, curved displays, creative LED products, and more. In the projector section, we will explore the many facets of projectors, from basic principles of light, optics, edge blending, screen size calculations, general considerations, and more.

Screens

What are they and how do they work?

Screens are all around us. TVs, computer monitors, smartphone & tablet displays, GPS displays…all these things are “screens”.

Without going into the nitty gritty of how screens work, let’s cover their basic design as it impacts the next few topics.

Typically screens have:

  • plastic or metal chassis/body
  • some form of lighting (backlit, edgelit, LED, CCFL)
  • some technology of display/pixel (OLED, plasma, LCD)
  • glass/plastic substrate (read: extremely thin layer of glass/plastic) on the front

So to explain how screens work in a nutshell, you first have a chassis/body.

Inside the body you need a source of light. The different techologies of displays/pixels use different forms of lighting, but generally lighting is either:

  • emitted from the edge of the screen inwards and then reflected through the screen to your eyes
  • emitted from behind the image straight through the screen to your eyes
  • emitted directly from the pixels
A quick note right here, there’s often confusion between LCD and LED screens. Both screen types use LCD technology, but the difference lies in their backlighting. LCD screens use CCFL (basically a type of fluorescent light) while LED screens use LEDs as backlights. Many people are led to believe the LED screens use LED pixels, which is false.

This light then travels it’s various paths, through the various technologies of display/pixels to create the visible image, including:

  • extremely small LED pixels found in OLED screens
  • a matrix of electrically charged liquid crystals that direct light through polarizing filters found in LCD screens
  • Ultraviolet light-excited colorful phosphurs in plasma screens

Each of these differen technologies then either passes light through color filters, or they emit colored light directly, and then they pass through a glass/plastic substrate to our eyes. These final substrate layers are for protection generally, and glossy glass screens produces a more vibrant colors and a clearer picture at the expense of being susceptible to glare.

With that technical stuff out of the way, let’s examine the elements of a screen.

Implementation basics

Screens are quite common, and as such there aren’t a large range of obstacles around implementing them, as there are many accessories and varients in screen technologies to suit many needs.

The three best features of screens are:

  1. they are relatively bright
  2. they pack a large amount of pixels in a small amount of space
  3. they are easy for people to understand because we stare at screens all day long.

Brightness

Firstly, screens are bright. In the spectrum of dimmest to brightest, projectors are the dimmest, LED displays are brightest, and screens sit in a range in the middle.

Brightness is measured in a unit called nits, which is another term for candela per square meter. Typical indoor screens have around 200 – 400 nits. Your laptop falls in this indoor screen category, and in particular, Macbooks have an average maximum brightness of between 350 – 400 nits, depending on what year it was made. Outdoor screens range from 400 – 2000+ nits.

Brightness is a bit of an arms race, where companies are quick to increase the nits of their screens using “interesting” measurement methods, so it is best to get a test model of any screen you want to use outdoors. With indoor screens, you have a bit more leeway as most screens will do just fine as long at they aren’t combating direct sunlight. Use your common sense with nits, you wouldn’t want to buy a 2000 nit screen for inside a corporate lobby, and don’t buy a 200 nit screen for an outdoor kiosk.

Contrast

Contrast is just as important as brightness, as it is the difference in brightness between the brightest white and the darkest black. The difference is mostly a factor on the type of backlighting the screen uses. Some types of screens are able to light up small regions, whereas others only have a single light source for the whole screens. You’ve probably seen an example of this when you’ve seen screens where the blacks look more gray than dead black.

Contrast is represented as a ratio such as 1000:1, where a larger ratio means the screen has more contrast (2000:1 would have twice the contrast, and 500:1 would have half as much contrast). Screens typically range from a few hundred to 1, up to around 10000:1 contrast ratio. The Retina Macbook Pros have a 1000:1 contrast ratio.

OLED changes this as it technically has an infinite contrast ratio since each pixel can be controlled and turned on or off, meaning black would actually be completely off, but these screens are still quite expensive.

Similarly to brightness, manufacturers can measure contrast in a number of “different” ways, so be wary of screens that have an insanely high contrast ratios like 1,000,000:1, as these are just inflated specifications, and may end up looking worse than a screen with a much smaller contrast ratio. Unfortunately, your best bet would be to try a number of different screen models by feeding them a piece of content that has a lot of light and dark elements simultaneously.

Resolution

Screens can be found in many resolutions, but the most common is 1920 pixels wide by 1080 pixels tall. This is changing currently as higher resolution screens are becoming more affordable, such as 4K screens (3840 pixels wide by 2160 pixels tall). Pixel density is one of the main benefits screens have over LED walls, which is how many pixels they can pack into a small space.

Pixel density is the measurement of how many physical pixels are in a specific area measured. This is generally measured in pixels per inch (PPI). This unit of measurement is exactly as its name implies, it is the amount of physical pixels per inch squared on a display. The higher the PPI, the “sharper” the image will look, because it generally implies more and smaller pixels in a tighter space. When Apple released their “Retina” displays, what qualified as “Retina” was a display with a high enough PPI in which you couldn’t distinguish physical pixels with your naked eye at a regular viewing distance. But wait, can you distinguish the pixels in a screen normally? The answer is “Yes, but depending on the PPI, you’ll only see them at certain viewing distances”.

This may seem confusing at first but consider this simple example. In one hand you have a 42″ TV with a 1920 by 1080 pixel screen, and in the other hand you have a 5″ phone with a 1920 by 1080 screen. Both screens, despite their huge size difference have the same number of physical pixels. In the 42″ TV these pixels will have to be quite large to fill the screen, and if you were to get right up to your screen, you will see tiny little squares that are the individual pixels. Good luck trying to see the individual pixels on the phone screen. Because the 42″ TV has larger pixels, it has less pixels per inch, probably around 50 pixels (aka 50 PPI), where as the 5″ phone has to have tiny pixels to fit the same amount of pixels into such a small package, it would have around 440 pixels per inch (aka 440 PPI), so you would have to get much closer to your phone to see every individual pixel.

Size

Screens are measured in inches diagonally from one corner to the opposite corner. They come in a large variety of sizes, ranging from small screens on smartphones that are a few inches diagonally to large home cinema displays that are upwards of one hundred inches diagonally. This means they’re quite flexible when you need to find just the right size.

Almost all screens have bezels, which are the frame around the image. We will discuss this more in design basics, but they range in size from a millimeter to many centimeters. Generally, the smaller the bezels, the more expensive the screen. For now, the important thing to note is that screens can be measured with and without their bezels, so make sure if you’re fabricating a housing for a display you use the measurement including the bezels!

Enclosures and mounting

Screens come in both indoor and outdoor variants. We’re generally used to seeing and using the indoor variants, but many manufactures produce screens inside of weather-resistant and weather-proof enclosures that allow you to mount screens outdoors in hot, cold, wet, and dry weather without much concern.

It is always a good idea to confirm that a screen can be mounted in your desired orientation, whether portrait or landscape. Almost all screens can be mounted in landscape, as it is the common mounting option for screens. Portrait mounting a screen is less common, and because of ventilation and heat dissipation, you should always confirm with the vendor’s specification sheets.

Many displays have a VESA mount option, or VESA pattern, or VESA mounting holes on their back. This is a standard set out by the Video Electronics Standards Association (or VESA) for the pattern and distance between the screw holes on the back of the screen. The 4 holes look like 4 points of a square. This makes it very affordable and easy to find many different kinds of mounts for almost any screen.

Playback systems

With our focus on real-time interactive content, we won’t explore digital signage players at all, because they often don’t have enough power or flexibility to be a viable solutions. There are many different kinds of computer form factors now that range in price, power, and scalability. We will discuss these in the computer hardware section in more depth, but one thing to consider is that as the number of screens increases, your computer hardware will also need to scale accordingly.

Generally there’s two different methods of controlling screens from computers. The first method is to build a single machine that is powerful and has many outputs (or uses video splitters like the Datapath X4). This is useful when you want to quickly sync and co-ordinate the content on a large number of screens. It reduces some of the overhead in the software development stages, but powerful computers and high quality video splitters are costly. Another thing to consider is that powerful computers are large and will require some kind of server room and rack, which then means the computer is farther away from the screens and will require video signal extenders (DVI over CAT5 is a reliable and cost effective option).

The second method is to use a larger number of less powerful computers (could even be 1 per screen). These computers have the benefit of being smaller and easy to mount directly behind the screens, reducing the cost of cabling and server racks. Each of these computers will be much cheaper than a powerful computer, but you’ll often need many of them, so the price can end up being very similar to buying a single computer. This method works well if all of the screens have discrete content and don’t need to be in sync with each other. If they do need to be synchronized, this can increase software development costs as creating a network of synced systems a more involved task than just outputting content to the many outputs of a single machine.

Design basics

With the basic technical implementation of screens covered, let’s discuss their technical design.

Screens can be big, bright, and high definition. They’re great for detailed content, whether that be photos, filmed content, computer-generated content, or text data (like Twitter feeds, weather updates, traffic alerts, etc). Their high resolution and brightness makes them versatile, and almost anyone can create appealing content for screens, as they’re what we’re accustomed to creating content for.

There are a number of ways to implement screens into a space, but the two main methods are as either a singular display, or in a video wall (or array).

A singular display is quite simple. It’s what you probably have at home for your computer. Your TV is a singular display. Your smartphone is a singular display. One display mounted anywhere, qualifies as a singlular display.

Singular displays can be mounted in any number of ways, from flat against walls, hanging from ceilings, on pivoting mounting arms, sliding rails, poles, poles on wheels, poles on segways (like those robo-tele-iPad bots…), in-laid in a table, on an industrial robot arm, and really anywhere/anyway you can imagine. As we mentioned already, many screens come with VESA mounting hole, so as long as your mount has a VESA plate (or as long as you can quickly fabricate one) you can mount a screen on almost anything.

What’s more interesting than a single screen? Many screens! With the increase in computing power, we can now more easily create larger and larger video walls, or screen arrays, as I prefer to call them…because they are arrays….of…screens…(this also avoids people’s general confusion between video walls and LED walls which we’ll discuss later)

Screen arrays are quite interesting because they have the same benefits as a single screen but they fill larger spaces. A screen array is capable of very high resolutions, and brightness for daytime visibility, with a price that increases moderately linearly relative to the size of the screen array. I say moderately because nothing scales perfectly linearly, and at a certain point you will need a stronger computer or more computers, and this will then impact system complexity and software development costs, etc etc.

An important design consideration in screen arrays are the bezels. More affordable screens often have large bezels that create a bit black space between the screens. More costly screens have smaller and smaller bezels. Bezels often end up being a matter of creative taste and budget. Some clients don’t mind seeing the black grid created by the bezels, and for others it is very distracting.

The larger the bezels, the more important bezel compensation becomes. If you’re working with an experienced vendor, they can help you navigate your content creation pipeline to account for bezel compensation. Bezel compensation is when you take into account the amount of pixels that would hypothetically exist in the black space between the screens. Without bezel compensation, a box that animated into the edge of one screen would immediately appear on the other screen. This may seem ok, but it really becomes an issue for circles, diagonal lines, or any other more complex shape. With proper bezel compensation, the edge of a box would animate into the bezel and it would appear to move through the bezels naturally, instead of jumping immediately to the next screen without taking account of the physical space it just jumped across.

example of bezel comp on video hardware
Notice how in the left, its as if the bezel area is accounted for in the image, whereas on the right, the image directly jumps over the bezel, which then creates warping of image content.

The goal of screen arrays is usually to create a larger uniform screen, but there are a many interesting artistic choices that can be made with a large number of screens. Screens don’t always need to be oriented in the same direction, and many interesting patterns can be made with simple screen orientation and rotation changes.

Misc notes

Some side notes:

  • Screens have many different names, so when you’re researching choices, use words like “commercial displays” or “digital signage” or “digital signage displays” to find more rugged pieces of hardware

Get Our 7 Core TouchDesigner Templates, FREE

We’re making our 7 core project file templates available – for free.

These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.

They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.

Examples and References

Here are some examples of different implementations and designs of screens.

First an example of a single screen being used to display content at the University of British Columbia:

single screen video hardware
Credit – http://digitalsignage2.sites.olt.ubc.ca/files/2010/10/IMG_1301.jpg

Next is an example of a 3 by 3 array of small bezel screens at a Cisco booth at a trade show:

3x3 array of screens. video hardware
Credit – http://blogs.cisco.com/wp-content/uploads/IMG_00341.jpg

Finally, a simple example of a more artistic video wall

artistic video hardware
Credit – http://www.userful.com/videowall-artistic

Wrap-up and What’s next?

So that is probably a lot of information to digest all at once about screens. Re-read it, save it for reference, talk it through. Remember this was all about the technical implementation of screens. After we get through all the technical stuff, we’ll talk about what you can actually put on the screens and how you can interact with them. Up next will be the wonderful world of LED displays and LED walls.