Free Template Tuesday #36 – Tumult Hype “Orientation”

Now that the 2020 edition of A Book About Hype was published, what to do about those templates? Well, initially, the plan was to stop creating them. Instead, energy was to be focused on the Widgets app. But after a recent visit to the Hype forums, it looks like detecting the device orientation was an issue. That’s an easy fix… right? That should be an easy template to make… right?!

Well, there were a few problems to solve. Not surprisingly, there’s the matter of Desktop vs Mobile. There’s also the battle of screen.orientation vs window.orientation (deprecated).

That’s why I didn’t bother. Instead of trying to decipher the device’s orientation — or even trying to figure out which type of device is in use — determining orientation is a simple calculation. If the width of the webpage is greater than the height, it’s landscape. If the height of the page is greater than the width, it’s portrait — easy!

Here’s what that code looks like…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

window.HypeOrientation = "Landscape";
window.resizingReady = false;
 
if (!window.resizingReady) {
     window.addEventListener("resize", innerCheck);
     window.addEventListener("orientationchange", innerCheck);
     window.resizingReady = true;
}
 
function innerCheck() {
     if (window.innerWidth > window.innerHeight) {
          if (window.HypeOrientation != "Landscape") {
               hypeDocument.showSceneNamed("Landscape");
               window.HypeOrientation = "Landscape";
               console.log("Switched to " + window.HypeOrientation);
          }
     } else if (window.innerHeight > window.innerWidth) {
          if (window.HypeOrientation != "Portrait") {
               hypeDocument.showSceneNamed("Portrait");
               window.HypeOrientation = "Portrait";
               console.log("Switched to " + window.HypeOrientation);
          }
     }
 
     /*
     console.log("Width: " + window.innerWidth
          + " | Height: " + window.innerHeight
          + " | Orientation: " + window.HypeOrientation
          + " / " + window.orientation);
     */
}
 
innerCheck();

Responsive design is nice, breakpoints are cool too, but is it enough to easily manage the different screen sizes? Viewing a webpage on an iPhone SE is a much different experience than on a 4K desktop monitor. That’s why this landscape-vs-portrait approach can be a handy alternative. This is especially true if you’re aiming for a full-screen experience. Your design can dramatically differ based on the orientation. Just load the appropriate scene that fits.

There is a dangerous caveat though. Loading a scene can act like a reset. If you’re moving elements around, changing variables, or creating other such dynamic behavior, switching scenes can obliterate those changes. Jarring animations could occur. This technique could be especially bad for video games. You don’t want the player to have to start over, simply because they moved their iPhone.

If you didn’t splurge the extra $50 for Hype Pro, then this technique is even more useful.

The general lesson is learning how to detect the orientation. Which technique to use depends on your project’s requirements. You can download the Orientation Template to see how it works — and if it works for you.

You can also see the template in action.