Faking Mouse Interaction

[gleb]

Hi, I am wondering if it’s possible to fake mouse interaction? If I have an animated object (fake cursor) which goes over a button. Is it possible to set that button to “hover” while the fake cursor is over it and set it to “normal” once the fake cursor moves off?

Would I tiger this with physics or js? The aim is to create button symbols for the tutorials that can have their states animated and trigger those animations automatically by animating the “fake cursor”, rather than animating the interactions by hand within a timeline.

rollover.hype.zip (19.7 KB)

Thanks.

[MaxZieb (Loves Hype)]

Not without some effort. If you are talking true mouse events they can only be “simulated” with a subset of actions and possibilities:

var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});

element.dispatchEvent(event);

Firing them manually still involves some sort of collision detection or placement on the timeline.

[h_classen (Hans-Gerd Claßen)]

if i remember it right, the intersection-hype-behaviors for on and off will fire also without a drag in my dragNdrop-enabler. So you could probably make a setup using it ...

Hypespecific Drag and Drop Enabler

I did an update on the ‘HypeDragAndDropEnabler’. Drag and drop for Hype without touching code … online: https://www2.aachener-zeitung.de/zva/karlo/test/jungle_lodge/ file: jungle_lodge.hype.zip (615.9 KB) configuration within hype -> attributes panel possible attributes: drag-elements: data-drag -> should be true data-drop -> class ... of elements that should allow drop for this element data-dropsnap -> true ... to snap to left and top of droppable element data-dragreverse -> true ... reve…

[gleb]

Thanks @MaxZieb and @h_classen

I have done this (below) at the moment, adapting from another post I found on the forum, and it seems to be working quite well for now… But it may break down once I start testing more complex variations and need different buttons to be styled differently on rollover etc.

There is an init() setInterval function that needs to be fired on scene load. Not sure if I need to clearInterval or it’s OK to comment it out as I have done. Will keep posting updates here as I progress…

var cursorTop  = hypeDocument.getElementProperty(cursor, 'top');
var cursorLeft = hypeDocument.getElementProperty(cursor, 'left');
var cursorBottom = hypeDocument.getElementProperty(cursor, 'top') + hypeDocument.getElementProperty(cursor, 'height');
var cursorRight = hypeDocument.getElementProperty(cursor, 'left') + hypeDocument.getElementProperty(cursor, 'width');

var Buttons = document.getElementsByClassName('button');

for (var i = 0; i < Buttons.length; i++) {

var Button = document.getElementsByClassName('button')[i];

var ButtonTop = hypeDocument.getElementProperty(Button, 'top');
var ButtonBottom = hypeDocument.getElementProperty(Button, 'top') + hypeDocument.getElementProperty(Button, 'height');

var ButtonLeft = hypeDocument.getElementProperty(Button, 'left');
var ButtonRight = hypeDocument.getElementProperty(Button, 'left') + hypeDocument.getElementProperty(Button, 'width');

var hit1 = (ButtonBottom > cursorTop) && (ButtonTop < cursorBottom) && (ButtonLeft < cursorLeft) && (ButtonRight > cursorLeft);
var hit2 = (ButtonBottom > cursorTop) && (ButtonTop < cursorBottom) && (ButtonLeft < cursorRight) && (ButtonLeft > cursorLeft);


if (hit1 || hit2) {

	Button.innerHTML = "I'M IN!";
	Button.style.background =  "#5835AA";	
    
    //clearInterval(call);    

} else {

	Button.innerHTML = "OUT!!!";
	Button.style.background =  "#6F43D6";

	//clearInterval(call);   

}
}  

ButtonRollover.hype.zip (22.8 KB)

[MaxZieb (Loves Hype)]

No worries, there are many ways to Rome.

The important thing is that you are feeling secure walking the road. Basically, this is a simple collision detection. You could fire timeline event to start an animation or revert it.

You could do something similar with symbols and use symbol actions on the surrounding timeline (as long as it’s a timeline).

[MarkHunte]

As @h_classen suggested there is a way to do this with

Intersection Observer API

Which the intent think was to cut down on the type of coding you just did.
And as @MaxZieb says. It is what ever you are comfortable with that counts.

But here is a quick example using the code example from the above link.

The trick here with hype is that the fake cursor needs to enter the realm of the Button. ( rect in this example )

But it will not do that under normal conditions. By realm I mean if the button was a box and the cursor was a cat and they are both in a room called scene.

The cat can jump on the box, it can go behind the box, it can go over and under the box but cannot go into it. ( Going into and crossing it’s threshold ).

So the trick here is to put both elements in a Group. Then set the group as the target and make it hug the buttons shape. This will leave the fake cursor inside the group but outside it bounding rect/borders.
Now if the fake cursor crosses over the group bounds you will get an intersection event.

Hope that makes sense.

IntersectionObserver.hypetemplate.zip (22.3 KB)

[MaxZieb (Loves Hype)]

So, basically what @MarkHunt is saying is:

[MarkHunte]

One thing I just realised though is the OP wants to react to multiple elements intersection

[gleb]

There’s a gif for everything!

[gleb]

Yes, ultimately I need multiple buttons, in different scenes, and not all butons will be the same. By “button” I mean various UI elements that can be interacted with, can be menu items that turn purple on hover and are underlined when selected, but don’t turn purple on hover in the selected state. Triggering dropdowns. etc, etc… Like a cat interacting with budgies in cages and mice and balls of wool? Same cat. Different interactions. Ideal scenario, is that once the code is set up, all I would need to do is animate the cursor (cat) and all the interactions will be triggered automatically / with minimal animation.

Thanks

[MaxZieb (Loves Hype)]

Well, you could use the Matter-Collision detection built into Hype.

[gleb]

I was also thinking of using classes, changing them / adding / removing depending on the UI element

@MaxZieb

Given you have a worked with dragging in Hype before the JS needed to add and remove a class can be found here … basically all you need is to do the following commands:

element.classList.add("draggable");
element.classList.remove("dropped");

[MaxZieb (Loves Hype)]

Here is collision detection using Matter.js in Hype. It just outputs the collision to the console:
rollover_matter.hype.zip (20,8 KB)

Given you don’t mind (mis)using the Physics engine like that.
Update: please redownload… wrong body in the output.

[JimScott]

@gleb

I do not know the full extent of your intent with your project but from what I have read You might find using a “Custom Cursor” useful. You can be totally freeform with this approach and not constricted to using motion paths, etc.

Hype Doc: Custom Cursor.hype_JHSv1.zip (18.3 KB)

The cursor in this project uses a “.png” file to replace the standard cursors. Everything acts as normal as with a regular cursor - rollovers and interactions with elements. Then You can do a screen capture of your interaction with a project tutorial. It is a simple, tight set-up with creative possibilities.

[gleb]

Thanks @JimScott,

I did look at this approach too, but it won’t work for my purposes. I even looked at tools that can record your actual ouse movements and keyboard interactions and then play them back, so I could capture the same web tutorial in multiple languages (the website is served up in 12 languages). So my solution is to build a copy of the website’s main pages in Hype, and animate tutorial sequences within a totally controlled environment.

[MaxZieb (Loves Hype)]

Ah… that is what this for then maybe look at something like this:

https://www.rrweb.io/

Read the guide at https://github.com/rrweb-io/rrweb/blob/master/guide.md

Just use the form and then hit replay:
https://www.rrweb.io/demo/checkout-form

[gleb]

Thanks @MaxZieb, really nice tool. Still want to try and do it in Hype. Going to be stubborn! Cheers

[gleb]

ButtonRolloverV2.hype.zip (31.5 KB)
Adding / removing classes and checking if a UI element contains class looks promising, but not sure about the logic. The position on the page clearly matters. The first Menu Item is triggered, the first button triggers change on the second button and the second button triggers change on the third button?

var cursorTop  = hypeDocument.getElementProperty(cursor, 'top');
var cursorLeft = hypeDocument.getElementProperty(cursor, 'left');
var cursorBottom = hypeDocument.getElementProperty(cursor, 'top') + hypeDocument.getElementProperty(cursor, 'height');
var cursorRight = hypeDocument.getElementProperty(cursor, 'left') + hypeDocument.getElementProperty(cursor, 'width');


var UIElements = document.getElementsByClassName('UI');

for (var i = 0; i < UIElements.length; i++) {

var UI = document.getElementsByClassName('UI')[i];

var Button = document.getElementsByClassName('button')[i];
var Menu = document.getElementsByClassName('menu')[i];

var UITop = hypeDocument.getElementProperty(UI, 'top');
var UIBottom = hypeDocument.getElementProperty(UI, 'top') + hypeDocument.getElementProperty(UI, 'height');

var UILeft = hypeDocument.getElementProperty(UI, 'left');
var UIRight = hypeDocument.getElementProperty(UI, 'left') + hypeDocument.getElementProperty(UI, 'width');

var hit1 = (UIBottom > cursorTop) && (UITop < cursorBottom) && (UILeft < cursorLeft) && (UIRight > cursorLeft);
var hit2 = (UIBottom > cursorTop) && (UITop < cursorBottom) && (UILeft < cursorRight) && (UILeft > cursorLeft);


if (hit1 || hit2) {

if (UI.classList.contains("button") == true){

    Button.classList.add("buttonover");
    Button.classList.remove("buttonout");
	Button.innerHTML = "I'M IN!";
	
	} 

if (UI.classList.contains("menu") == true){
	
	Menu.classList.add("menuover");
    Menu.classList.remove("menuout");
 
    }

} else {

if (UI.classList.contains("button") == true){

	Button.classList.remove("buttonover");
	Button.classList.add("buttonout");
    Button.innerHTML = "OUT!!!";
    
    }
    
if (UI.classList.contains("menu") == true){
    
    Menu.classList.remove("menuover");
	Menu.classList.add("menuout");
 } 

}
}

[gleb]

Fixed it! Just had to do this:

var Button = document.getElementsByClassName('UI', 'button')[i];
var Menu = document.getElementsByClassName('UI', 'menu')[i];!

Added some FAKE CLICKS triggering different actions added to the additional HTML attributes of the buttons (class, text, animation).

ButtonRolloverV3.hype.zip (40.5 KB)

[h_classen (Hans-Gerd Claßen)]

HypeIntersectEnabler.hype.zip (20.0 KB)

I deleted some code from the drag-and-drop-enabler and the result should be a “HypeIntersectEnabler”.

Works without custom coding. When an intersection occurs or ends a Hype-custombehavior (defined by a data-attribute) will be triggered …

SetUp:
On a targetelement set two data-attributes:

data-intersect -> true
data-intersecttarget -> className of a sourceelement

On a sourceelement set a corresponding class and two data-attributes:

data-intersectcustombehavior -> name of a Hype-custombehavior to be triggered
data-intersectoffcustombehavior -> name of a Hype-custombehavior to be triggered

///////////////////
I may cleanup and refactor this to add some more features in the future.
Actually it’s done on lowest efford …
Hope it’ll work