Pinch zooming in exported document

And I put that in on every scene?

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

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

should work iOS-safari and webview too …

Do you want to see my hype file?

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

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" />

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

We are taking the HTML 5 code generated by hype an putting in to phonegap to create an .ipa

Can you first try to follow the instructions in my last post? And also to put @h_classen's JS into your 'on scene load' for the scene you want to enable pinch zooming to see if that does the trick?

Are you able to pinch+zoom other HTML content in your embedded HTML or is only Hype content disallow pinch+zoom?

@h_classen’s JS is in it.

we tried the
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);

also and it didn’t work

sry for delay … attached example tested on my iPad 2, ios10 workes without an issue in hypereflect and safari …
don’t know what phonegap does …pinchZoom.hype.zip (12.2 KB)

Hi,

Thanks for sharing this technique. Is there’s a way of “pinching” and zooming from any area on a slide not only middle? Or maybe zoom the middle of a slide and then more around the slide…?

Hi there, how do I add the ability to swipe left and right once I have zoomed in?

@StephanZA

Here is one way to fulfill your request…

The following uses Hans’ (@h_classen) “pinchZoom” file just above as a basis:

pinchZoom_Drag.hype.zip (15.5 KB)

I grouped all the elements and then set this group’s “On Drag” action to “Control Element Position”.

Thank you, and if I want to double tap to reset to original view?

One idea - do not have the time to try it out right now… perhaps someone else will join in on the “answer” tag team.


Idea:

Check for registering a “Double” tap script on the Forum.

Once You find this code (or You might create it - probably a “setInterval” approach) You could write a script that would check for scale (or some or other properties if needed such as “top” & left") and compare to “normal” - whatever that would be, e.g. “100%”.

Then reset the appropriate property(s) to “normal” if it was not currently set to that value.

========================

Follow-up: (Edit)

@StephanZA

So I established a double tap on the group - using setTimeout, not setInterval (as stated above), which triggers a relative timeline (‘DblClickTap Reset’) where the both the location and scale would change back to the initial starting point (top, left locations & scale of 100%).

Demo project: pinchZoom_Drag_DblClick_JHSv2.hype.zip (17.1 KB)

The location adjusts back fine - but the scale does not change back to the original “100%” due to @h_classen’s script which appears to keep redefining the scale; so when the relative timeline runs there is no rescaling back to “original size” - what constitutes “100%” scale has been changed (as I read things).

So possibly @h_classen might have an idea here for best meeting your request to double-tap back to the original size. :innocent:

Note:
An easy way to reset back to “original” settings which could be used in place of triggering the relative timeline:

window.location.reload();

If your page contains mainly the zoomed object (i.e. not a lot of other elements) where a reload might look OK - not jarring - this could be a fallback.


"doubleTapReset" script

if (typeof window.clickTimer == "undefined") {
            window.clickTimer = setTimeout(function () {
                                delete window.clickTimer;
                                //alert("single");
                            }, 500);
        } else {
            clearTimeout(window.clickTimer);
            delete window.clickTimer;
            hypeDocument.startTimelineNamed('DblClickTap Reset', hypeDocument.kDirectionForward);
            //alert("double");
        }

**"DblClickTapReset" Relative Timeline**

On the other hand... why not stick to the iOS interface?

Menagerie.hype.zip (16.2 KB)

Pinch~Zoom~Drag... double tap to reset - or am I forgetting a key request?


OP (@Marts) request:

@StephanZA requests:
Drag zoomed screen; double tap to reset.

Hello,

I want to make an html content apk with pinch and zoom but it only works on the browser and not on the apk. Also I’ve tried with examples downloaded from here “pinchZoom_Drag.hype” and “pinchZoom.hype” with the same result. What am I doing wrong?

Thanks in advance