Hello,
I am using this bit of code to enable the user to pinch/zoom an element on the hype stage and it is working fine. I'm wondering if it is possible to add some code to enable this action by using a trackpad on a computer rather than pinching and zooming on an iPad or such..
hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}
var scale = 1, MIN_SCALE = 1, MAX_SCALE = 2.25, newScale, el = hypeDocument.currentSceneElement(), displayel = hypeDocument.getElementById("controldot");
var restrictScale = function (scale) {
if (scale < MIN_SCALE) {
scale = MIN_SCALE;
} else if (scale > MAX_SCALE) {
scale = MAX_SCALE;
}
return scale;
};
function saveChanges() {
scale = newScale;
if (newScale > MIN_SCALE) {
track.connect(reverbNode);
} else if (newScale < MAX_SCALE) {
track.disconnect(reverbNode);
}
}
function getScale(e) {
e.preventDefault();
newScale = restrictScale(scale*e.scale);
if(newScale < 1)newScale = 1;
hypeDocument.setElementProperty(displayel, 'scaleX', newScale);
hypeDocument.setElementProperty(displayel, 'scaleY', newScale);
}
el.addEventListener("gesturechange", getScale, false);
el.addEventListener("gestureend", saveChanges, false);
( also helps if you put up an example of you project )
But maybe have a look at
There is an update in the post that suggest using gesture events.
The ones they mention are possibly the same ones that Hyp's API inherits from but Hype is additionally keeping track of its own elements. So if you can use them I would.
Your, which uses the gesture event methods listed in @MarkHunte's link, basically works for me. I had to remove the references to "track" since it doesn't exist just by copying your code. I also added a gesturestart handler to preventDefault as otherwise Safari kept wanting to try to zoom the page:
Of course note that not all macs have trackpads, and even if they do users can disable gesture functionality in the system preferences (I usually disable all gestures). This only works in Safari.
This will not work in Chrome. Which appears to have never implemented these gestures.
With a little play on adding mousewheel listeners we can use the delta to determine direction of zoom.
We then just slightly change the scale value and pass that scale value into your code in the event.
( yes I also new lined the vars at the top. A single var line chain (IMO) is harder to read and see at a glance what's what )
hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}
var scale = 1
var MIN_SCALE = 1
var MAX_SCALE = 2.25
var newScale
var el = hypeDocument.currentSceneElement()
displayel = hypeDocument.getElementById("controldot");
var restrictScale = function (scale) {
if (scale < MIN_SCALE) {
scale = MIN_SCALE;
} else if (scale > MAX_SCALE) {
scale = MAX_SCALE;
}
return scale;
};
function saveChanges() {
scale = newScale;
}
function getScale(e) {
console.log(e.scale)
e.preventDefault();
newScale = restrictScale(scale*e.scale);
if(newScale < 1)newScale = 1;
hypeDocument.setElementProperty(displayel, 'scaleX', newScale);
hypeDocument.setElementProperty(displayel, 'scaleY', newScale);
}
el.addEventListener("gesturechange", getScale, false);
el.addEventListener("gestureend", saveChanges, false);
el.addEventListener("mousewheel", getScrollDir, {passive: false});
el.addEventListener("DOMMouseScroll", getScrollDir, {passive: false});
window.addEventListener('gesturestart', function(e) { e.preventDefault(); });
function getScrollDir(e){
e.preventDefault();
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
var scale = hypeDocument.getElementProperty(displayel, 'scaleX')
if(delta === -1 ){ //shrink
scale -= 0.1
} else {
scale += 0.1
}
e.scale = scale
getScale(e)
}
Thank so much for helping me with this, Markhunte and jonathan! I haven't posted my project because it is a very confidential project I'm working on a major automotive company's infotainment system. I'll try to dee if I can post a generic version of it, but I'm not sure I can do that very quickly.
Again, thanks for the help so far, it's helping me get closer to my goal.
My main thing is trying to get this to work with a Windows based trackpad, such as an IBM Thinkpad or some such.
Ok, here's a stripped down version of my project to give you all some better context for what I am trying to do. hopefully, the pinch/zoom works on an iPad. if not let me know. but I need it work on a trackpad. thanks again for everybody's help on this.
After clicking the initialize sound and play sound you can pinch/zoom the circle. And it changes the sound... I need this to work with a track pad.
Thank you so much, MarkHunte. this is very helpful. I guess maybe I wan't very clear wha I was trying to do. As the user drags the larger dot around the sound changes to less bass/treble, more bass/treble, etc. As the user pinches and zooms, the gray circle behind the draggable dot grows and shrinks as the sound changes to mimic a "surround" effect. It works just fine on an iPad but I'm trying to make it work for a trackpad. So this code is working for me, although I can't move the dot around now. i'm sorry for not being clear on my intentions.
The specific GestureEvent API only works on Safari, so this means it would be a no-go on a Windows machine. Older versions of IE/Edge have their own MSGesture API but this was dropped when MS moved to using Chrome's rendering engine.
You may be able to make use of the Touch API on Windows to handle multiple touches and use your own javascript to build these gestures -- this is either a tall order on code or something folks have done. But even then, I'm not sure these are supported on any windows trackpads and probably reserved for physically touching the screen.
I'd instead recommend having the user make use of a modifier key and then track the delta distance of the mouse.
I was thinking more about pinch-to-zoom specifically; using a scroll gesture from your code is a pretty good workaround for other OSes/devices/browsers!
The funny thing is in Chrome, it is also allowing the pinch/zoom to work by holding back the default behaviour.
Cannot fully work out why its odd.
This was confirmed also on a pc. Both two finger scroll and pinch unpinch worked
Hey guys, sorry that I did not reply to these last posts yet. Thank you so much for all your help with this. I think it is working well enough now that the client will be happy. Thanks again! I owe you guys!
ok, so I don't hear any sound changes when the control dot is resized. the original code I had added reverb to the sound playing when the control dot is resized to mimic a "surround effect".
