Pinch zooming in exported document

Mobile
1

Maybe this question was asked in another thread. Is it possible to make a hype document where the user can pinch and zoom on certain parts of the image just like in other iPad app.

2

Hi Marts,

to activate a pinchZoom on an element run

var scale = 1, newScale, el = hypeDocument.getElementById("yourId");

function saveChanges() {
scale = newScale;
}

function getScale(e) {
e.preventDefault();
newScale = scale * e.scale;
if(newScale < 1)newScale = 1;
hypeDocument.setElementProperty(el, 'scaleX', newScale);
hypeDocument.setElementProperty(el, 'scaleY', newScale);
}

el.addEventListener("gesturechange", getScale, false);
el.addEventListener("gestureend", saveChanges, false);

fyi this’ll work on mobilesafari. for intigration on other browsers / devices you’re better off using a library like hammer or quo …

3 Likes
3

Is it possible to activate a pinch zoom for a complete scene?

Martin Pilon
514.933.8543
fusioncd@videotron.ca

4

sure, change

/**
* hypeDocument.currentSceneElement 1.1
* @return {HTMLDivElement} gives you the current scene element

http://forums.tumult.com/t/extend-tumult-hype-with-javascript-hypedocument-extensions/6847/1
*/
hypeDocument.currentSceneElement = function(){
    return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}    


var scale = 1, newScale, el = hypeDocument.currentSceneElement();
5

Hi @h_classen
Thanks for the code but where (and how) do I implement it ?

6

Ok and where do I put that code?

Martin Pilon
514.933.8543
fusioncd@videotron.ca

7

well, the first version on any behaviour and the second would be fine onSceneload :slight_smile:

10

Hello @h_classen,
Any idea on how to implement this on a behavior ? I forgot how to do it

11

Hello @kerguelen,

go to the Actions Inspector or Scene Inspector, choose your favorite behaviour, select run js, paste the code … :slight_smile:

12

It works !
Also managed to constraint zoom between scale 1 and 2
Any idea how to do this :
1- when pinch/scale, disable every other touch action on the screen
2- pan scaled image

13

nothing will happen until you pinchzoom the element

14

Good news ! I also discovered that you can change the center of the scaling action by cmd+click
For exemple, if this point upper-left corner of the image, up and left sides of the image will remain in place and scale will spread to the right-bottm sides

1 Like
15

And I put that in on every scene?

16

Yes, or have a Look in The Dokumentation. You will find a Description for some global hypeevents … e.g onsceneload

17

Did it. Still doesn’t work on the ipad. I’m working to create an app for the iPad.

18

should work iOS-safari and webview too …

19

Do you want to see my hype file?

20

Hello? Would you like to see my hype file to see if I have implemented the code at the right place?

21

Go ahead and send – the only thing you would need to do to allow user scaling using ‘pinch + zoom’ is to make sure you have these settings setup in the head of your document.

If your document is embedded elsewhere (you said you’re making an app), you might not be able to utilize the pinch + zoom natural behavior that you can get as a regular website. Just make sure that the HTML page has this at the top:

<meta name="viewport" content="user-scalable=yes, width=600" />

22

how do you want me to send it it is quite large actually. Do you have an email I could use for a wetransfer