Using fixed layout with Tumult Hype

Posted by in iBeacon in Education

This is a short follow on post from our introductory tutorial on using Tumult Hype with Locly. If you haven’t already I recommend reading the introductory post first.

In the first post we showed you how to use responsive layout to make your Hype document work across all the devices that Locly supports. Responsive layout is great because it allows you to provide a layout that changes for each device. There are instances though where you want your content to be more fixed on the screen though. We can play about with the Hype document to make it scale and stretch the content depending on the device. Let’s see how we can do this.

The first step is to create a new hype document and adjust your scene size. You can set this to be any size, but you should choose a size that is similar to the device you’re targeting. I’ve chosen 1024×768 pixels which is the same size as the iPad in landscape. Now is a good time to add some content your scene!

Screen Shot 2015-05-12 at 11.00.30

Now we need to tell hype to letterbox or stretch the scene to use as much as the screen space as available. There’s two steps to do this. The first is to change the Mobile Options and the second is to add some code to the head HTML. Your mobile options should be:

  • Viewport width : Not Set
  • Initial Scale 1.0 : Checked
  • Allow User Scaling : Unchecked
  • Use touch events : Checked
  • Show tap highlight : Checked
  • Home screen webapp : Unchecked

Screen Shot 2015-05-12 at 11.08.26

 

Once you’ve clicked on “Edit Head HTML” you’ll need to insert the JavaScript and CSS rules to scale the hype document properly. This simply looks at the screen size and provides a scaling based upon that…

JavaScript

  function get_hype_document() {
    return document.querySelector('[hyp_dn]');
  };    

  function proc_resize() {
    var container = get_hype_document();
    if (!container) { return; }
    var size = { w:1024, h:768 };
    var scale = { w:window.innerWidth/size.w, h:window.innerHeight/size.h };
    scale.min = Math.min(scale.w, scale.h);
    var pos = {
      top   : (window.innerHeight - (size.h * scale.min)) / 2,
      left  : (window.innerWidth - (size.w * scale.min)) / 2
    };

    container.style.webkitTransform = 'scale(' + scale.min + ',' + scale.min + ')';
    container.style.transform = 'scale(' + scale.min + ',' + scale.min + ')';
    container.style.top = pos.top + 'px';
    container.style.left = pos.left + 'px';
  };

  window.addEventListener('resize', proc_resize, false);
  var loadInter = setInterval(function() {
    if (get_hype_document()) {
      clearInterval(loadInter);
      proc_resize();
    }
  }, 1);

Styles


html, body {
    overflow:hidden !important;
    position:absolute;
    top:0px;
    left:0px;
    right: 0px;
    bottom: 0px;
}
[hyp_dn] {
    position:absolute;
    top:0px;
    left:0px;
    margin: 0px !important;
    -webkit-transform-origin: top left !important;
    transform-origin: top left !important;
}

Screen Shot 2015-05-12 at 11.14.16And that’s it! You’re document will now scale and letterbox to fill as much space as possible on screen. Handy if you don’t want to use responsive design!

You can download the source, generated zip file and index_en.html sideloader here and upload them to a Locly HTML card. It should work out of the box!