Multiple toggling switches


(ptr) #1

I’m here following a brief nightmare with GWD!

I am exploring Hype for some animation projects but I am stuck on a rookie scripting problem!
(I know - I have tried several templates to find clues and read the forum but, sorry people, I am still stuck)

I have around 30 identical buttons (actually small images) which I need to be able to independently toggle the opacity of using mouse click. I don’t think I can use timeline tricks as they need to act independently. I started setting up separate functions for each of the identical buttons but, there must be an easier way? (Besides, I can only do ‘off’ - see my code!)

document.getElementById('lighton').style.opacity = '0';

Any hints or tips about how to have multiple images which can be toggled?
Thanks for understanding!


(Lucky) #2

well there are a few ways
You could give them a class of lights(select all of them , edit this box)

Then you can grab them all using
var lights = document.getElementsByClassName(‘lights’);
which gives you something like this


Mine just have 3

From this point you can do things like
lights[0].style.opacity=0;
or if you want an on off switch

if(typeof lightSwitch==='undefined' || lightSwitch != 'on'){
	lightSwitch = 'on';
	lights[0].style.opacity=0;
}else{
	lightSwitch = 'off';
	lights[0].style.opacity=1;
	
}

Then i dont know how your triggering would function but in my case, i just want the light I hit to be the one that turns off and on so i can just do

var x = event.clientX, y = event.clientY;
var currentlySelected = document.elementFromPoint(x, y);

if(typeof lightSwitch==='undefined' || lightSwitch != 'on'){
	lightSwitch = 'on';
	currentlySelected.style.opacity=0;
}else{
	lightSwitch = 'off';
	currentlySelected.style.opacity=1;

}

I wouldn’t really need to use classes or anything, ElementFromPoint gets the thing i’m currently over so I can just modify that. Again it depends on your use.
Hope this helps


(Greg) #3

This almost works, but you have to double click each element first, afterwards single clicks toggle the elements…

element.addEventListener('click', function() {   
this.style.opacity = (this.style.opacity == 1.0) ? 0.0 : 1.0;            
});

toggles.hype.zip (11.2 KB)


(Lucky) #4

Ooooh i was trying to do that ternary operator before, so thats how it works!
Yeah if you combine that with the elementfrompoint you could do a mass function you can put on any button

var x = event.clientX, y = event.clientY;
var currentlySelected = document.elementFromPoint(x, y);
currentlySelected.style.opacity = (currentlySelected.style.opacity == 1.0) ? 0.0 : 1.0;    

except when i tried it it initially gave me a value of nothing so you had to click on it twice to make it invisible, so to make it work i added an opacity keyframe to all the buttons
onoff.zip (14.2 KB)

let me know if you know a cleaner solution


(Greg) #5

You are awesome Lucky, that works perfectly!


#6

Illuminating… It is these kinds of interactions that make this forum so valuable.

A big “Thank You” to All who contribute so generously with their time.


(Mark Hunte) #7

Hmm, this is odd, if I remove those keyframes, then I would expect to get the same thing but I don’t. It all works as you posted it.

So I recreated it without the keyframes and tried it I got the have to double click behaviour.
I then added keyframes. Worked on single click.
Removed the keyframes. And still worked on single click.

Something odd is going on here.

The reason I was looking was I was going to try and fix that in the code rather than use keyframes…

Do any of you get this behaviour were Hype is not respecting the removal of the key frames…?


(Lucky) #8

This has become normal to me, most properties in hype get assigned to nothing by default as in not 0 or 1 or data, just nothing so i usually end up making a if(typeof something === undefined) to check if its gonna do that
I had originally set up a super complicated ternary operator for an answer but it looked silly.
But yeah if you also add a check if its undefined and set it to 0 then it would work without keyframes or double click


(Mark Hunte) #9

@Luckyde, Cheers,

This seems like a bug to me. It is not seeing the value as it supposed to from the get go. Then adding the keyframe triggers the value to be noticed and set as it should have in the first place.


(Greg) #10

I that script above, I simply selected the elements I wanted to toggle and assigned the action all in one shot. I did not know about the elementfrompoint function, but that looks interesting.


(Mark Hunte) #11

Yer it’s pretty cool. I used it in a scrolling date picker to work out which date numbers were clicked.
Heres the docs on it.

My other favourite command is querySelector() ( and probably off topic)
Which allows me to drill directly into an elements children and target a named class element without having to iterate over all the other elements in the document with the same class.


(Greg) #12

I get the same behavior as Mark has posted


(Mark Hunte) #13

Hi @Daniel,
Is this a bug


(Greg) #14

After reading Lucky & Mark’s posts about the value not getting assigned, I tried the following to assign the value via javascript. This seems to work well and the double click (or second click) behavior is gone - YAY!..

hypeDocument.setElementProperty(element, 'opacity', 1);

element.addEventListener('click', function() {   
    this.style.opacity = (this.style.opacity == 1) ? 0 : 1;            
});

toggles2.hype.zip (11.0 KB)


Toggle font color
(ptr) #15

As the OP, I just want to say ‘thank you!’. I never expected such fast and accurate responses.

What a great community! Thanks to you all I’m back on track!


(Olof Pock) #16

Hi Greg,
I used this snippet in one of my project to filter different things. That works exactly it should be.
In a second step I tried to reset the selection. On a reload button I put a “Jump to scene action” but the button state is still there and produce an unexpected behavior.

What’s the way to set all elements to the first state?

Cheers,

Olof


(Greg) #17

I’m not sure Olof. Can you upload an example of the issue?


(Olof Pock) #18

Hi Greg,

this is the filter example. I tried to combine the toggler you wrote with the filter @MarkHunte did a while ago in this post: Filter Elements
The filter itself works but it would be cool to set the state of all switches to the first state on my reload button.

resetToggleSwitches.hype.zip (119.2 KB)

Thanks for ideas
Cheers
Olof


(Mark Hunte) #19

Hmm,

Sorry I have changed things a bit. I was not all that keen on the double layered buttons to show and hide.

The tags are already using CSS so we may as well do the same for the buttons.

I have grouped each button with it’s tick image and transferred the ID and class ‘tag’ to the group.

In the head I have added these css styles.

       .tagsButtonSelected {
		 /* Sets group/button blue when selected */
			background-color: #00ADFF !important; 
		}
		.tag:hover {
		 /* Sets the hover color of the group/button*/
			background-color: #00ADFF !important; 
		}
		
		.tickSelected {
		 /* shows the tick */
			opacity: 1 !important; 
		}

Each group Button is set to run the javascript :

filter() and toggle().

The filter() remains unchanged.

The toggle() now toggles the classes needed to set the button and ticks.

	$(element).toggleClass( "tagsButtonSelected" );
	
	var hakenWeiss = element.querySelector('.hakenWeiss'); 
	$(hakenWeiss).toggleClass( "tickSelected" );

The reset button now only runs a reset() function which finds the tags with a ‘show’ class and removes the classes we added. It no longer needs to reset the Scene.

	var activeTagList =  $("div.HYPE_element.tag.show");
	 
	$.each(activeTagList, function( index, tagValue ) {
	  //--REMOVE CLASSES OF THIS BUTTON
 
	$(activeTagList[index]).removeClass( "tagsButtonSelected" );
	var hakenWeiss = activeTagList[index].querySelector('.hakenWeiss'); 
	$(hakenWeiss).removeClass( "tickSelected" );

	    //--RUN THE FILTERS FOR THIS ELEMENT.
 hypeDocument.functions().filter( hypeDocument, activeTagList[index], event)
});

This is all of the top of my head without delving too deeply into what you are doing but works in in so far as the toggling goes.

resetToggleSwitches v2.hypetemplate.zip (129.3 KB)


(Olof Pock) #20

Hi Mark,

quick response to your last replay. I’m away from my desk a couple of days and would say thank you for your helpful answer. I could change some things in my project and it looks good.

Maybe I will ask you some more if I’m back on desk.

Olof