Panel animation movement

Sawer

Hello everyone.
Trying to add some animation using panels , the paint routine, the timer callback and the onNoteOn callback.

My idea is to move the panel on the Y axis in a Parent panel frame:
The animating panel will go down until its Y positions is >= than the height of its parent, If the animating panel then touches the maxHeight of the parent panel, the Animation reverses and by that the animating panel will go up. I almost got it right but I think I'm lacking something In the conditional statement.

I'm attaching the snippet down here, any help is super appreciated.

HiseSnippet 901.3ocsV0taSCCE0tqAsD9PLId.h1uxDio1wfhzzfs0sgJvFUTXB90jWhai0RriRbYTgPhGIdZ3Qfeyav3diSaRGcSPEDsIk6GG6St9butcSU97rLUJgZ+1QIbB8VV8FI0gsCYBIoydD5crNjko4otFW6NJgkkwCHT5BOGcPsqSxe94y1kEwj97RWDxwJgO+UhXgtza2seoHJ5.V.+sh3JYuw1c7Ux1pH0PfOKX0fjv7OiMfeDCSqlEgdi8CDZUZOMSyyHz56pBF0KTctzj+whLwoQbznIoGrPF2GnhBPFidIsCEQAcG+cmQfUoaYUXASU3dVGJBDS7WVMtad.2RDUqGzZSSuElhdMqRuFUn2LnDsBkpanzRV87SEI5xHHetoUGIb3zmAk8pTwjKoVqZVtPQMS69QVpahLZGovcK21J.kTu1.ttsJNQIACukMgWdkMcJgzkI4QMuRHlvHj7m9Ck9ZgR5pjGoz7WK8Vw4yN1lEdsLMKUim4odMafPrc9hiy3fbcWUl.Q60XUW3uGk+OjWYF4fayhhNETFdi2MylfrcPJK3C.YKP.b0a4QH6rcrMwt+VtM2rjQSuo4oTYicbD8c8L.eJ.rUq7cx33A+MqzWbrAJfew15PQ1Zo7DPRo8vPqr4kKa86eo5lJwT1JJZUxGOVRUQQXPDBrStUBW.aFQJ.5IGFeJOcU3vNZHeRhfraZsr0Uqkq1p4aTIURTI6HE5WmvkWUCHoPZAu8tN6wzLrAnvGjWBOUKPJP2i+QXZhocv1ZOd1YPgIO2B8HLfPmG81iaVP4IQ.sDKZYjpjOUNvoy1ilX70i29bQfND9RoemRHgbwfPMZ8CBY58v9p2CyAFtGVTbUGgu7M3kIq85jpqMZIz73wC8ruwKN+vKHS4c8ptSXo.GpPlIeWjeejALrRELLhomdBFN1tH.HElZrANLQBp3QUGqe4wZ0+yFqc8Sc+So6RVcEZ+vYy2Zyfuvg0+a9VbIwss1ueetutjr0sN38W6MB+anxaTC0B4fCY5TAJ0NZXbOPn3yAlHAw.1tRqgMVF6Fiki83xfbiKfmhfMQaZQvliCRhY9opS7MCIvqjVL2CvIY9sw1vOK.rcaRxGb.3rZrVCRLb63I99Xo3A.2mMl0mCLObNvrwbf4QyAlGOGXZMGXdx0hA+gI6LTqhMsIfit6mOMkR2Wx.UVthj7KCbGqZA

ulrik

@Sawer There is no code in this snippet, nor any interface

ustk

@Sawer Your snippet has only 2 lines of code and no interface...

ustk

@Sawer Also, are you certain it is a panel you want to animate and not simply a rectangle you draw in the parent?
You might have your own reasons, but I don't see any for moving/animating a panel...

Sawer

True, my bad. will remake everything from scratch and send it back here thanks!

Sawer

@ustk Nice thought about that. What I was a thinking is that since it has been drawn, It will remain only static. So maybe the only animation I can think of is changing the color or it's opacity. But I cant move it. (I repeat, that was my thought). Perhaps can you show me what you mean by this, and how can a simple implementation be?

Sawer

HiseSnippet 913.3ocsV0taaaCEkzIrnRaEXEXO.B4WJXsA1YsKEnnqtwIYvaKoBycAa+piQhNhHRjBTzM0Xv.6QaOR6Mn6dIksj2bFJLVkgMz8iCuGRd3kNwnSE00ZCgF7l4UBB8yYSlqr4ix4REY7ID58YIFQsvRNddEutVjQnzc9NLJMXWh64ud4w7BtJUz5hPtTKSE+nrTZa8lL7GjEEmwyDuQV1I6mLbbpVMRWnmALYGVeREO8F90hK3XZ8XD58NMSZ0lIVtUTSn6drNa9jb8sJe9WJqkWUHPiAjIv.4celtHCYL5kLJWVjkrbFWSfQIoc9uie9+krykYxU9aWG9BWfnVDcWOn8Vmd6rF8Fzkd86PuMPIZGJsqmROjMI0HqrsQP97YrwJqvLkCK6cohOWRuo8XizPFJ6Ak7aDmY.iUHheZ+9OJB9Y+mGFFBq801n2wMQUphWojQuHZIzqE1Q5xJsBLh2yGdO.TKjDtRTL3Ng3CumqNvSzzYpTqTqhzpKzVwqUw6GF86gAMk9fZK2XQ0gId.xtnEgQgqBJrI5ZIhOF3uaJfew7ZSwgdDun3JPDEurfPcfx3lj55eE3aC.ftw6MGIXPXfKzW8hnAdqMVULmNEFxSNM1A7aAfGcz9gAPg7C0i8CU.Z+QLXPdKvAD+Xyk0GXDUf9yF6qS3h8e9+b8a5T+Dqc8SW4W9.LK5jMt8XzEEXDDP3h01LZvrgHM.iUyJuRXdDroWLSrJQPkttzmc2R+tmLS8pkNIpUiUR6qqDp657JoQhAu8yiOga434kFePdUBiUhTfdh3cPyG+om.1Ih5afUEWtM5Rneh0E8AKOagxThLy0uyIYIuua2r4qL9iKGdqLyluxwusXXtPdcdaet+rX3Z0J3tqkeWCqEi1TG+KM0fQODLVN9dKoUTtrWYv899aO+Cj07dXW2UbCvgNjY07i7u6z.83zYyJ310a7gc6aB.Rh051fcTTfbdd2aC9eqa3GKEeHKQZSy2LG6sANBBmOEbr4NjGvNc5TQpskf6xN6W9zbgA4mzyrR00mysFIJitXV4DPDjJfpqfMZ7HIsGd3wa2eoBahPk4L9.7zDb.ZSaBNXYPRIO0neapuQ.dK08cd.NobWPGvNGsiFPbMG.br9GzmTBWX91zTb5+XPusYLGtEX95s.yS1BLOcKv7MaAli1BLO6+DC9eUd0Lqtzeb.bjbpqiIkdphCJKmJj72lUrqi.

Hope it works now. Please let me know.

ustk

@Sawer That's all I can help for today I have to leave...
Try to replace the knob with a timer that increments the value, and when it's above 1, decrements it...

HiseSnippet 935.3ocsV0saaaCElzwrsVasXEXO.B4J4AWC6s1tADTT23jzYzkTi5trULLTPKQaQDJRAQ5lYLz2k9nrmic2dC1av1gjRVJqFosFX9BCe9+67K8zBULSqUEHbmWtNmgveNY1ZoIcbJkKQSNBguC4Tp1vJB8rNbcNUqYIHLdumZYf6zF4972O9PpfJiY0rPnyU7X1Ovy3lZtSG8LtPbBMg8RdVCsu+nIwJ4XkPsBvydjAnbZ7EzkrynV0ZQP3abbB2nJlYnFlFz4PUx5YopKkd8Omq4yELKwPzLvQd1nwobQxzpbUiP31Sqy787Y9WRNkmv2vutB7ENAg0VzrFfaccPZ3m.jvMfTaOjtKYVbAO2TKwhmOiLQBMjETnT2DJdcQsTsHiUfFRS+L5ErSJ.hMVD8vAC5EBe08ff.nbqMgugVDNkJYhggOJrxxkLyXUVtRBDQ66Euu0l.+u6qYloPEx7B0JCWxhVrRFa3JYzxtA+dPmk8W.M4mHDQ9Fpt+bAzMAOzwJTacuk+FwqYBg5RubKhxU5WA3wjx0VvbNUrhE0M7qBipX88L9xTCv6dgOXPkisQ8ErXSzu.oo0G813hehmXRi51Cz9WA0eqKaBB3RAf+vJ7GpjOSplOzVHJThn3ppPOnPAXvkc00.OtFBXvK8fMBKX415SjMTGDr85pKR620WNbwaLUHlCEpnqBCvIM.3YJC64xHGTBdaP3+UzhEaUVouDrhsJ1tMVbcFFIWkMmUzrPXUDFWu5NvM931Ah8kjFJpjSjbyyyYkzmnDI1Ya6ue+MFTYM0t6ThPPUiay4NkaNyD7DVAhCN4lDWAE4.e4Um28z+5OeL5GmbD0PqbC3QHJ4rBC2lL3iXuAtg4WH6PNhouvnxgyQaZiPB6C5sqVWsC.tXdKheX.8a0m43iVWS7pQWZmJQXBNAHScizVpdXWBtIDs+f4UcHdmoQH9CwHz6eYAtooRVInlqdnydQuT.z4ux0E6EDolaV27h+mv0uAW60uOVHdWxTtINc6Xr0VvHzU++.ikuYbaxwKV.WapAXaxI+7t9.wGH79KsKOkZJ3Pylb1prYvoyXFDcILkosyMsriMd5AVZaEXFSl3H9G3SovgVZbovgUBQYz3B0qi8aS1WktkiCfIo6Q3Nv+F.nC2rFQHC5O.kAOP953Xa5eOXUc61706fMeyNXy82AadvNXyC2Aa91cvlu6Zsw9eSdxJiJyuN.Lldr6bFFerjBSVtoPz+BzWR3FL

Sawer

@ustk
Thanks man.
Will try and apply this on the onNoteon function.

Sawer

This post is deleted!

Sawer

@Sawer

HiseSnippet 906.3ocsV8taaaCDmzIrnRqEnEXO.B4SJXsA1IsKCXHqtwIYvaKIByoAsepiQhNhHRjBTzM0XH.8InOS8QpuAcGIkrjSsCJLVMfMz8me28imt6niTxXVYoTgvdmMsfgvOfLZpPmNHkxEngGfv2mDoXkLMZ+oEzxRVBBiW62MVwdqire97K1mlQEwrFUHz4RdL6u34bci1n9+IOK6HZB6LddKueV+gwRw.YlbBvj0HcQEz3qnWxNgZbqCAgu2gIbsTMRS0rRDd88kISGkJuV37+bdI+hLlQnGZDDHm5ijYIFFazhFjxyRhpOwkHHJQMm+0bm+ejbLOgOSeSc3QVCAMHZWOvclmdqMG850ldcaQuEPIbKJstiROlLJVwKzMVL74GHCEZlZLEJ6sohyWTmO1gLPBdHzakSuhcjBDlgH74c69j.3mM+Ueeen1WpCdGUETHxdofGrWPMzKY5Ax7Bo.DB2vYdC.TCjHpfk0aoPbl2vlGe+wSDwZtTDHEmH0rSEga5+u9dt3tUolpzlNCU3NFl44eiuesMlNRVxMfCApaYu4qMvM9XQOflkcAz.EVmtprHKeCvyJmAZFtwTCwbF9o8B5YRo2BSn0kV4D7iONzp82.f6t6l9dPJbg5otP4Yj+lB1M9d5Td4VJVAztoCAc2XOX2tdMd7sJXxh4qWKo.CExfkEqaYy7ZTIyxfftHytzcG.CESxufodBzbjMgMyQnad9QDxxGQZOAG65pZ4nTLTv0mVvDKatFU0JBO8pgGP0TybUkNvuBlRyMT.e.6cvRJ2TlG4.V4UPA05aU+Kr2Qas9v5YPS6LhmX2KZasQuu8VuoyD9v48ulmnSmo3etoeJieYZy9vOk0etb4s7b4dgaxEAWkG2CU4ff2FDpiuShqY406T8t2eb8weAMm1saqtfp.NzhLyNenudiDrKTlLIipmeAo4VgJCPKwbakLadDv.vz12Z7+1VyuUJ9XRDWGmtXN1YAbDZb9dvwp6ZdH4vwiYw5FBtN4nW+84hEzeKmn4hKOlpUbSazISxGAMAwLH6B3EsYjD2wL73j6V2gMhIRrBeA9TYrmQFWYrWsQTNMVIearaQf41r6a0.bRXuH2ibrQNnGxtb.vQ5tUWTNbw5aiiMG+mB8aKFy1q.lcVALOaEv77U.yOuBX1cEv7K2IFy+o4kSzxb23.nH5P6FSL9PAE5rrcgn+Cfxi0KF

Let's see if this works.

Sawer

Content.makeFrontInterface(500, 500);


const var pnlAni = Content.getComponent("pnlAni");
const var Panel1 = Content.getComponent("Panel1");


function onNoteOn()
{
	pnlAni.startTimer(30);
	
}



pnlAni.setPosition(0, 0, 50, 50);


pnlAni.setTimerCallback(function()
{
	var start = 0;
	var end = 177;
	var mover = pnlAni.get("y");
	
	if(mover >= start && mover <= end)
	{
		pnlAni.setPosition(0,mover , 50, 50);
	}
	
	this.repaint();
});


function onNoteOff()
{
	pnlAni.stopTimer();
	
}

Retrying with the panel.

Matt_SF

@Sawer said in Panel animation movement:

@Sawer

HiseSnippet 906.3ocsV8taaaCDmzIrnRqEnEXO.B4SJXsA1IsKCXHqtwIYvaKIByoAsepiQhNhHRjBTzM0XH.8InOS8QpuAcGIkrjSsCJLVMfMz8me28imt6niTxXVYoTgvdmMsfgvOfLZpPmNHkxEngGfv2mDoXkLMZ+oEzxRVBBiW62MVwdqire97K1mlQEwrFUHz4RdL6u34bci1n9+IOK6HZB6LddKueV+gwRw.YlbBvj0HcQEz3qnWxNgZbqCAgu2gIbsTMRS0rRDd88kISGkJuV37+bdI+hLlQnGZDDHm5ijYIFFazhFjxyRhpOwkHHJQMm+0bm+ejbLOgOSeSc3QVCAMHZWOvclmdqMG850ldcaQuEPIbKJstiROlLJVwKzMVL74GHCEZlZLEJ6sohyWTmO1gLPBdHzakSuhcjBDlgH74c69j.3mM+Ueeen1WpCdGUETHxdofGrWPMzKY5Ax7Bo.DB2vYdC.TCjHpfk0aoPbl2vlGe+wSDwZtTDHEmH0rSEga5+u9dt3tUolpzlNCU3NFl44eiuesMlNRVxMfCApaYu4qMvM9XQOflkcAz.EVmtprHKeCvyJmAZFtwTCwbF9o8B5YRo2BSn0kV4D7iONzp82.f6t6l9dPJbg5otP4Yj+lB1M9d5Td4VJVAztoCAc2XOX2tdMd7sJXxh4qWKo.CExfkEqaYy7ZTIyxfftHytzcG.CESxufodBzbjMgMyQnad9QDxxGQZOAG65pZ4nTLTv0mVvDKatFU0JBO8pgGP0TybUkNvuBlRyMT.e.6cvRJ2TlG4.V4UPA05aU+Kr2Qas9v5YPS6LhmX2KZasQuu8VuoyD9v48ulmnSmo3etoeJieYZy9vOk0etb4s7b4dgaxEAWkG2CU4ff2FDpiuShqY406T8t2eb8weAMm1saqtfp.NzhLyNenudiDrKTlLIipmeAo4VgJCPKwbakLadDv.vz12Z7+1VyuUJ9XRDWGmtXN1YAbDZb9dvwp6ZdH4vwiYw5FBtN4nW+84hEzeKmn4hKOlpUbSazISxGAMAwLH6B3EsYjD2wL73j6V2gMhIRrBeA9TYrmQFWYrWsQTNMVIearaQf41r6a0.bRXuH2ibrQNnGxtb.vQ5tUWTNbw5aiiMG+mB8aKFy1q.lcVALOaEv77U.yOuBX1cEv7K2IFy+o4kSzxb23.nH5P6FSL9PAE5rrcgn+Cfxi0KF

@Sawer you have to write

var posY = pnlAni.get("y");

first thing in your timer callback (otherwise the 'posY' variable is not declared and the function won't work).

And you can't 'define' the onNote / noteOff callbacks into the init callback. Use the dedicated tab for these :

Sawer

@Matt_SF
Thanks.
That's what I'm consistently trying. The thing is that when I export the snippet, none of the code there appears. Don't know where I am mistaking.

Sawer

Screen Recording 2022-03-09 at 15.36.08.gif

Don't know why it's not going up even by setting up the conditional statement.. There's the problem I think.

I tried also to use a while loop, without any positive outcome.

Matt_SF

@Sawer which version of HISE (develop) are you using ? IIRC there was a lookalike bug a few commits ago... Try to compile a more recent version to see if that solves your problem.

Sawer

@Matt_SF
This is the latest on probably. I got it a month ago or less probably

Matt_SF

@Sawer that's odd, because if you load the snippet I posted, the panel moves correctly when pressing a key. I simply moved the start/stop timer calls to the appropriate CB tabs.

Sawer

@Matt_SF
Uhm..
Does yours move backwards after reaching the final point?

Matt_SF

@Sawer I just got it to move but if you want to move it back and forth you have to create another variable which holds the direction of the panel and change the direction when the panel reaches the value you want.

Try this :

HiseSnippet 931.3ocsV0saaaCElzIrnRaEXEXO.B4JEzl.4z1kBTTL23jL3skTg4tfsq5XjnsHhDo.EcSMJBvdN1E6YYOR6Mn6PR8mScFFLVMfMz4mOxuC024PGqjIrpJoBg8dyxRFB+kjoKE5rwYTt.M4XD99jXEqhoQGsrjVUwRQX7VemIJ1aaj8ye+sGQyohDVmKD5BIOg8i7Bttya7nefmmeJMk8FdQure5nIIRwXYtbAvjsHQnRZxUz4ryolzFPP36cRJWKUS0TMqBg29HY5xoYxqEt7ufWwuLmYLFhlBKjy8ox7TCiMdQiy34owMUbEBVk3t5eKW8+0jy3o7V+cmCekMPPGh9mG3AqRusVgdC6SundzaMTB2iRa6nzCISST7RcWDCe9BxDglolQgi89TwkKZveLfLVBYHz6WPuhcpBLZQD9rnnGG.+r6K788gy9Jcv6npfRQ9qD7fWFz.cNSOVVTJEfQ3Ntv6.f5fDSEr7g2IDWXCjZLYL97LMj+vCO7E9J17fTthkn4RAjiaG1GzawxJtwYHPTKWMeszsKGiJRMllmeIHWBmsPXWlvc8+fumsbjU+JrS0..hEtyRCU7783yBBcgeYPzt9ddsr..DAovxqXA8yxQ7am5v1Uqm25kzf7QOpdsps2aOvFPr1B0tU8pUOcFuZeEqDDg5PvwMv2lxLPJNWpYuttdaVPMU4NWBehYItwO31.lM6VHjkN.eR5lWoJYdtIlAwsBWiZMQpAFJVTbIS8XPnjuf0lHnrWscgb2sK86lSbJrdIJESDb8qKYh6pGGUKKgm94IGS0TSOVsOHuRlRyMT.eL6cv.KWGmG4XV0Uv4hM2ZsLLCRai9fl9QizFwSsyHsxbz66OAbYqwuewnq4o5rVG+1MibxoVO+U9nU1Ku6dubu2L6EAWuOD7eBOTuGD7AfQy56r3ZVQy7Uu688We1GQq38f9tKoJfC8HSa8g9zoSvbQY5hbpd0gklaHpC.RhUlPYlBI.M+x92f7+1Dz+qT7gjXtNIa8bbvZ3HHb9bvw56cd.4jYyf4GcDbaxo+xmmKYP+jbglKleFUq3FYz4KJlBhfDFr6B3EsokDOvz73riZjZSYhTqwGgO0AGZrw0AG1DDUPSTx2l3FDXtY69VO.mD1K08HmYrCFhrCG.bjn8iPEvkruMIwT96A5s0i4fM.yS1.LOcCv7rM.y2rAXNbCv77+ULl+eyqVnkEt1AvQ7I1IlX7IBJnrrpPz+.CNAw0B

Solved Panel animation movement

23

1.8k

10.3k

90.3k