Panel animation movement

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

Sawer

@Matt_SF Ok thanks.
Will try the snippet in a bit.

Sawer

@Matt_SF Man it works!!!
Will compare the code and give feedback on where I messed up. Thanks so much man!!

Sawer

@Matt_SF Hello man.
Thanks again for the snippet.
Trying to figure out how and why you got it right and what was missing on my side. I tried iterating through your code to understand it, but I'm still not getting it.

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



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


pnlAni.setTimerCallback(function()
{
	var posY = pnlAni.get("y");
	
	if (posY == 0)
		posY++;
	
	else if (posY == 177)
		posY--;
		
	pnlAni.setPosition(0,posY , 50, 50);
	this.repaint();
});

This is what I created based on your working snippet. It's not working and I'm not understanding why. Based on my logic, I think this code is right (which is totally not), and I want to understand why I think this is. What am I missing here?

Lindon

@Sawer look at your code:

if posY == 0 -- do something...
if posY == 177 do something...

So assuming posY == 0 the first time, what happens then? and what does posY ==?

Sawer

@Lindon It does nothing. Because is neither equal to 0 or 177. True, thanks..

Panel animation movement

10

1.7k

11.9k

103.5k