Two sliders - can drag only once

1

Hi all,
I have two sliders - the upper one is supposed to be dragged downward, the other on to be dragged upward. Dragging stops, if the distance between the two sliders is 30 px and when the sliders go beyond their starting point. So far so good - works pretty well. But there are tow issues:

The bottom-slider does only work, if I add at a few pixel on top to its starting position:

// store initial yPos
myPos_1_start = myPos_1;
myPos_2_start = myPos_2+15;

... and - and this is my real problem: I can only drag each of the sliders once. As soon as they meet one of the limiting if-conditions (starting point or distance between) I can´t pick them up again and drag them away:

upper slider:
if (myPos_1 >= myPos_1_start && myPos_1 <= myPos_2-30){}

bottom slider:
if (myPos_2 <= myPos_2_start && myPos_2 >= myPos_1+30) {}

Any idea?

Best regards, Kalle

sliderUpAndDown.zip (12.5 KB)

2

A very, very quick look at this..

sliderUpAndDownMHv1.hype.zip (14.9 KB)

2 Likes
3

Hei Mark,
and this very, very quick look did the trick... :grinning: Seems like my basic idea was quite close, but not close enough... :grin: Thanks a lot again for your kind help!

1 Like
4

No problem.. ones like this can be a head &&%% :grin:

You can probably shorten the code by removing the last else if, and just putting it in as an OR || in the main if clause.

	if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseMove) {
		
		
				var pY = event['hypeGestureYPosition'];
		
				myPos_1 = hypeDocument.getElementProperty(element, 'top');
				
		 if (pY < myPos_1_start){
		
		return
		}
		
		
		if (myPos_1 >= myPos_1_start && myPos_1 <= myPos_2-30 ||  pY < slider_1){
	
			
			
				
				
				hypeDocument.setElementProperty(element, 'top', pY);
			
			
		}  
		
		
	// store acurrent yPos for comparing with second slider
			slider_1 = myPos_1;
	}
2 Likes
5

Everything works fine, but what, if i have this construct inside a scaleWrapper (which changes its size dynamically). How do I get event['hypeGestureYPosition'] relative to the wrapper?

6

assuming that no scrolling is involved. you can use getBoundingClientRect() to get a value corresponding to hypeGestureYPosition. then use it for a calculation translating it to the Hype-Cosmos. not tested, but this'll be the principle ... :slight_smile:

try it on a simplified document and then do a new dive to some logic :slight_smile:

	function getYFactor(el){
	return hypeDocument.getElementProperty(el, 'top') / el.getBoundingClientRect().top;
	}
	
	var newYPosition = event['hypeGestureYPosition'] * getYFactor(element);
	hypeDocument.setElementProperty(element, 'top', newYPosition);
4 Likes
7

Thanks Hans-Gerd. I´ll do so, since this is a basic issue in our graphics...

1 Like
8

the circledrag should use the same approach ... just to have an example to have a look at ...

a note: if an element does not share the scene-coordinatesystem (it's within a group, symbol ...) this 'll be considered in a calculation too. also responsive settings to an element will affect positions ...

best case'll be to keep things simple against doing complicate calculations ...

1 Like
9

@h_classen Sorry for my late reply. I´m just busy with other projects at the moment. But - the slider works pretty well now, as you can see here in this mockup - needs some finetuning of course... :slight_smile: but basically... Thanks again for your kind support.

1 Like