Switch between different appearances?

Using JavaScript with Hype
1

Hello !
I have a square container in which 9 elements can be moved by mouse.
I have set up an Observer who tell me when an element is close to the container boundary (up/down ; Left/right).

When a boundary is reached, I forced the element position in order to always keep it inside the container.

My question : I would like to change the appearances of the elements as an Arrow shaped (right arrow when right boundary is reach, up arrow when up and so on …). If the Users moves back the arrow, the element come back to the former appearance.

How can I do that in my javascript modules ? A possibility is to have, for each of my 9 elements, 4 Arrows (up/down ; Left/right) and I switch among them but it’s an heavy management because I have to do : “Ok, the element #1 reach the right border, so I set up it’s opacity to zero and set the opacity of the Right Arrow #1 to 1.0 …”
It’s painful to manage the links between all this elements !
Is it a more easy way to just switch the appearance ? With InnerHTML ?

Thank you very much for your help !

2

It would probably be useful if you could attach your current zip of the .hype and possibly provide annotated screenshots or example usage to fully understand the use case.

There’s probably different approaches you could use to make this easier. One of which is the hypeDocument.setElementProperty() API function that can allow setting a background image directly on an element. Depending on your needs, you may be able to name the unique IDs for the elements intelligently so you can set the image more effectively. You could also add class names to the elements to quickly iterate and return them to a normal state before you set a specific one.

You may also be able to get mileage out of using symbols along with the API to run timelines. This could be especially useful if you’re doing shape morphs on the appearance instead of just changing opacity.

3

Thank you very much for your suggestions, Jonathan !-)

I join an example of my Hype project : the problem is in the constrain() function where I cannot be able to change my little circles in Arrow shaped point !

4

Here my project : Box project

(I cannot find how to join directly the .hype file into the post … Sorry !)

5

Compress it, then just drag it from your Desktop into your post.

Now on to your topic's main question... I found (2) issues there may be others.

I found the "means testing" was off in the function constrain():

hypeDocument.setElementProperty(ptFocus, 'left', containerBottomRightX-35, 0, 'linear');

I changed "-35" to "-10" and it worked.


In the time allotted I could not figure out why the innerHTML did not work properly - so instead I switched the background image as @jonathan suggested - which worked....

constrain() partial script:

if(currentXCenter > containerBottomRightX){
		// On force la position du point Focus sur celle de la limite du container
		hypeDocument.setElementProperty(ptFocus, 'left', containerBottomRightX-10, 0, 'linear');
		// Au contact du container, on fait apparaitre la flèche
		hypeDocument.setElementProperty(ptFocus, 'background-image', "${resourcesFolderName}/FlecheG.png", 1.0, 'easeinout');
	} else {
		hypeDocument.setElementProperty(ptFocus, 'background-image', "${resourcesFolderName}/PointSimple.png", 1.0, 'easeinout');
	}
1 Like
6

I have corrected according your proposal and it works fine !
I have attached the new version hereafter

Thank you so much for your help !

20190822 Box.hype.zip (42.1 KB)

1 Like