With a reset button, I want to return the elements of that scene to where they were when first entering the scene. I’ve tried jumping to the beginning of the scene and going to a blank scene and placing a time line action there to go back to that scene (hoaky hack )- both don’t work.
Is there a way to go back to the beginning of the scene with all the elements in the position they were at the beginning of the scene?
I’ve been scouring this forum to find an exit scene/reset element position but can’t seem to find one.
Is there a global reset command or something similar?
Is saving the left and top position of each, then placing them in those positions by using hypeDocument.getElementById(id) then positioning them on scene load the only way? Haven’t tried this but it’s my next step if I can’t find a more elegant solution.
Hei ,
if I understand you right, you just want to reset your scene? If so - simply ad the command "jump to scene [name of the scene you´re in and you want to reset] to your button or wherever you want to trigger your action
@ktewes Hmm. I am doing that. The reset button is jumping to the scene - the same scene that is already in. According to @h_classen, the scene should reset no matter what. The element positions are neither persistant symbols nor scroll position.
Could it be that it is going to the same scene that it is in?
prototypeTest.zip (249.0 KB)
If you want to take a look, the reset button in in scene: “select”. If you drag a square to a position below, the reset button will display.
@h_classen I decided to stay with the jquery solution because of time.
Thanks for response Hans. The element is neither a persistent symbol nor a scollposition. See my reply to Kalles comment above.
I stayed with the jquery solution in the interest of time. If this is a jquery issue, I will have to find another solution.
Maybe this is the part of the code that is causing the problem. It is keeping its position even if you leave the scene.
I’m thinking this code in draganddrop function is causing the issue:
$(ui.draggable)
.detach() //Remove the draggable element from its current parent
.css({top: 0,left: 0}) //Set its absolute position to the top left corner
.appendTo(this);
I would comment out the
.detach() //Remove the draggable element from its current parent
.css({top: 0,left: 0}) //Set its absolute position to the top left corner
.appendTo(this); //Set this droppable element as the draggable element’s new parent
and put something like this in the handleDrop() function.
var dropEle = hypeDocument.getElementById(event.target.id)
var dropTop = hypeDocument.getElementProperty(dropEle, 'top')
var dropLeft = hypeDocument.getElementProperty(dropEle, 'left')
var thisEle =hypeDocument.getElementById(ui.draggable[0].id)
hypeDocument.setElementProperty(thisEle, 'scaleX', 0.5)
hypeDocument.setElementProperty(thisEle, 'scaleY', 0.5)
hypeDocument.setElementProperty(thisEle, 'top', dropTop + 10)
hypeDocument.setElementProperty(thisEle, 'left', dropLeft + 10)
i.e
function handleDrop(event, ui) {
//Display the name of the dropped element in the console for testing purposes
//`ui.draggable` refers to the dropped element
//console.log(ui.draggable.attr('id'));
var dropEle = hypeDocument.getElementById(event.target.id)
var dropTop = hypeDocument.getElementProperty(dropEle, 'top')
var dropLeft = hypeDocument.getElementProperty(dropEle, 'left')
var thisEle =hypeDocument.getElementById(ui.draggable[0].id)
hypeDocument.setElementProperty(thisEle, 'scaleX', 0.5)
hypeDocument.setElementProperty(thisEle, 'scaleY', 0.5)
hypeDocument.setElementProperty(thisEle, 'top', dropTop + 10)
hypeDocument.setElementProperty(thisEle, 'left', dropLeft + 10)
//Snap the dragged element to the drop target
$(ui.draggable)
// .detach() //Remove the draggable element from its current parent
//.css({top: 0,left: 0}) //Set its absolute position to the top left corner
// .appendTo(this); //Set this droppable element as the draggable element's new parent
//Add one to the drop count
correctDrops +=1;
....
So you saved the element id, top location, and left location.
var dropEle = hypeDocument.getElementById(event.target.id)
var dropTop = hypeDocument.getElementProperty(dropEle, 'top')
var dropLeft = hypeDocument.getElementProperty(dropEle, 'left')
Then made this element dragable.
var thisEle =hypeDocument.getElementById(ui.draggable[0].id)
Then changed scale in half, to compensate for the smaller size, you added 10 to x and y positioning, for when it is dragged.
By removing, appendto(this), it’s location isn’t locked in. Which is what was making it locked in (I’m assuming). Even if the scene was “reset”.
//.appendTo(this); //Set this droppable element as the draggable element's new parent
I assume this is the disadvantage of using jQuery. It’s position “stuck”, even though the scene was recalled. I even tried have the reset button going to another scene and that scene call the “select” scene.
It is as @h_classen states. You were using Jquery to externally move the hype elements.
Not only that but from what I inferred by the code you detached them from hype and then inserted them into a hype element.
In all cases Hype now does not know what the hell is going on with those elements.
All I have done is try to keep your code as close to what you have but doing the move of the elements within the scope of Hype using it's APIs.
It is not so much that but just understanding what Hype needs to keep track of, which is all it's element's properties. It will never pick that information up from else where but from what it records.
I use JQuery because sometime it may solve an issue better for me but have to remember this.
btw will there still be the need of http://touchpunch.furf.com to make it work with touch-events¿ … this’ll be one more reason to skip the whole jqueryoverload
)- both don’t work.