Scale HypeScenes and resize HypeDoc proportional to windowwidth

Paste it in the head.
note: disable responsive settings in the Hypedocument

Ratio of Layouts will remain.

Please report if you encounter issues

<script>
  function layoutRequest(hypeDocument, element, event) {
  
   	var hypeDocEl = document.getElementById(hypeDocument.documentId());

    //returns [{name: xxx; height:xxx; width:xxx; breakpoint: xxx}, ...]
    var _layouts = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName());
    //current Layoutname
    var layoutName = hypeDocument.currentLayoutName();

    //get data for current Layout -> {name: xxx; height:xxx; width:xxx; breakpoint: xxx}
    var res = null;

    for (var i = 0; i < _layouts.length; i++) {
      var Obj = _layouts[i];
      if (Obj.name === layoutName) {
        res = Obj;
        break;
      }
    }


    if (res) {
	var wWidth =  window.innerWidth ||  (window.document.documentElement.clientWidth || window.document.body.clientWidth);
	
	var baseLayoutWidth = res['width'];

	var scaleFactor = (wWidth/baseLayoutWidth);
	//hypeDocEl.style.position = 'absolute';
	hypeDocEl.style.transformOrigin = "left top";
	hypeDocEl.style.WebkitTransformOrigin = "left top";
	hypeDocEl.style.msTransformOrigin = "left top";

	hypeDocEl.style.transform = "scaleX(" + scaleFactor +  ") scaleY(" + scaleFactor + ")";
	hypeDocEl.style.WebkitTransform = "scaleX(" + scaleFactor +  ") scaleY(" + scaleFactor + ")";
	hypeDocEl.style.msTransform = "scaleX(" + scaleFactor +  ") scaleY(" + scaleFactor + ")";
    }


hypeDocument.relayoutIfNecessary()

    return false

  }

if ("HYPE_eventListeners" in window === false) {
  window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
  "type": "HypeLayoutRequest",
  "callback": layoutRequest
}); 
</script>
2 Likes

Hi @h_classen

I've tried implementing this script. I am assuming that the script will display the document to the browser window size and scale down as I reduce the width of the browser window.
This will be a game changer if I have it correct.
Although it does scale down, it does not fit the Hype window into the browser window at load. Example attached.

What am I missing?
FlexiTest.zip (149.9 KB)

FlexiTest.hype.zip (152,5 KB)

3 Likes

Ok. Nough said. No comment. Just dropped it! It works. Thank you!

So I use a different symbol for each new scene and run the function with reference to the new scene symbol on each scene load?

1 Like

-no… just add the little symbol to the scene name.
You can change the symbol in the function if you want to use another.

1 Like

I have to say: THIS IS SO COOL!

1 Like

Max's got a bit more explanation here: Creating a Flexible Tumult Hype Document within a DIV with no set 'height'

just to mention:
there are differences in how to achieve the responsiveness. and not every hypedoc will fit to one of the above solutions. it's highly depended to the document-setup ... and of course to the environment later on ..

though the proportional resizing regarding Hypes Layoutdimensions is robust and will work well either using scale or resize there may also be necessary adaptions regarding the event to fetch to apply the scale/resize. eg if a Hypedoc makes heavily use of scenetransitions it'll be better to bind the scale/resize to the resize-event of the window or observing the dimensions of a Parent-element of a hypedoc instead lean on Hypes LayoutRequest-Event

2 Likes

And @h_classen :raised_hands: is the original author of this code I just packaged it up and added a trigger. It is actually compiled with closure to an extent. I did that so it would be small but I’ll revert to to regular code for readability as I built a pretty neat Closure Compiler integration on export/previews I am currently using in-house and will release soon.

2 Likes

What is the difference between these two templates please?

Thanks