Help with Peak meter with fiilmstrip

[ScreamingWaves]

hello everybody,

i'm working on a peak meter with filmstrip starting from this snippet

HiseSnippet 2266.3oc6Z8taabbD+njNAS5XaY2DzVzurknvfxRlljxJwoNolRhhNJVxhPjVNsFFFqtaH4Fcb2q2sm9mgA5qQ+VeI5maPeF5CPeCZdCbmc2ij2IQovv35nBXBaKtyr6L+l+r6L6J2HP3.ggh.qLYacrOXk4iradLW1cstTF2ZiZVYtpcCft+VfDBrV8XeZXH3ZkIyzOVMgLYmwR+46ezpTOJ2AFRxxZWAyA1j0iIGRsQ0mv77pScgVrdIl88qtgifulvSDgfYZ6RV9Tm8ocfmRUSaJaqLyttKSJBZJoRHzJyLqJbOtYWwgby72kEx1yCTCJa0DEjgbcgmqBwJpVq0k441nuQGZYkwtwPWvzFWvGauEykMf9PWwbZFjgqHo+HyTog2zofW4jvqTB3MBHkIAjlw.oaZ2zIf4KGxwDZ1figk1TzsmDJl4ZM0+w1dMANCtrXO59P8.bvfUTX4RkVjToTo4eXtb26N4x0pKKj3iwZROUvlfi91nPIQJHgnYPjcARTHFQHh1DVO7KgRTODFmr4J0KRZg7cWkb.0KBBIBtdA54Q5QOlvER7mRmtZ5A.0KdpEI4xshqQUHm1AX.mvi5sGhAJ2kbBDHTBNEClQ7ZEuhWHBQvr7t.qSWoBhpQ08DTIi2oEyCTFhhlKDxB.2XnYlewTPnF3f.N1PX7PlKbFooQsRwJOKILJPMEpY86gYtcBDQH3cv.s1U1NxyiHCn7PeZ.FQTnwO.NP+UbMc7XnuAwwctWtb3NADJdz1jujzOB5ftLIrovg5soPr+Jb25.3UPG8tGYSA0039Xd8hiKZ6iwiMaTZ4v+VDsA2MTrJj+0M1Y6ud80Z8p5auYs024M6Fo2lWzm2I+hj769L8v7wpnwvTi1wNBhD8DZoF.cXgHq5QbGISvKj2Mfd3VTDIGM37CTns6yuyhDwde674HDxqykK6ATLXiVKRqH5enOzP5jWoiBHiRHkbYQXzRHwTm5pjgPyjzIFg3bJWZvr9SCRZ5Q6mzDKRHvG84eI4yLSNW11XDp.SqCBi7EjJ3OVXg4yk804xZVRLvTaNBeA6k35vkoTCpAL1F4qhlkT1h5SVVaRgSHeABnhkPwjcnUfNjtE0YFEJDCj6RJOO4NjSlWIUsbSJ58.4g.vIkH2lrvRCz.3EhgVsZ9CJsPt8sIwZ79kWZ7z4BjBwdt6F6TT3.k3c039dkzhJksR2Sb.nvQVMBRolAxpr1PLqoFlDL7b.jVmhp7h37u9IXKRdACUc4kwCjv+TtxCVjPewRu7k5gOnjx8Xzy7OLqwI8FkqHat2nxMi2tnhTI2gVNwlmNfbMQOeAGGTHepYoRuSQnHdTxY1lg43ZUo9zOGFOi6oBIrMuv74vTkbHlNMq1sGIOErBDddPvHYqpLFbQKrfIgdQyYTClHVtHcMH6yuFTxRjNFuThIJ3avYxs8A94U3zJ10he6YaTiJopBWwzv44CARlBBYpAGfcAXJik0tFDtuT3qmab7.64PFW20T3JYzvhgUztgcp.j0QCZa3ura0iG1CQspw.neQySc9i0dcR1fASB85ONq8xK+4UteokSPsBRd174yajsxDm52lw90XlW9AdhMby+6I42NR5GIUcDkeQE6M3tvQHi6VVODaAwSb3yEA6iG96.Hi1Tb6ilWSnSODwaBtMYmnXUpXIMim4qKCoxEPpXw5X50vfTRNXE7AKIDZh31AvVV3bbGZZMsObXcpCldfjKGujFTWWzuFq69TUYBaQ0NtDTikp13.kreg97HMSBoL9uuL2arLETGDT9tVUOj4J6NjPPUIbjbfie12912F2Z3YZ6Aa3R3F4Qko6BS4niYfaKR05ip8Frfs73jsl9Nq0rwEh2ztgpZ9nw3Ti.i3lm+Wfw3FZul85saCNxg.bF65ey6gtWuxf6Tv546AOtu5+H6g6XNuKUTcoktw2UC7nobSOOUtj0er5Ht1wF7CvSeZH7nAm1IO8XakkuXqblwNSPYRjK0Yq2xV6lurCRcn+xMHmytA8mqf8NhHUERSIOrz+Si5ktX.RKyTpB2lwkTiUfnIvc0CvCheaLyxpwYhYVtOyjtgOw3Ftp8yoG.5mLP6A9D8Xri5djGCbHP4eJedawI+y+9+Zbe2.+w9cC11QhPnk9pVhPrcgDR9T7pjjWMPFwSOcCoTyRYd0QyKw7tR09DqjjHlJjRX33TRZK1v9Xr92OZcNECzMAzZb2NzAMVkuKYtRiHrTtdWP4jKbH4JII+Uz.WLt3bQm+My3c92OvSnL6k6mPYPQvUB7gNcXZ2pBKWOIkzIouyJTLrM4L+h3l2woZ5285w86tZjThmUn5z851FTDSR2dex.n0XHiqYuCfWg4GsHZ5wbwdjMMbqN8PB9wzNkPlq53HjqZqjfFKSFJlSKfl6yNGX78OZbbGnTDAxm.GG9SwifFiO.tOgK16zB31m0aLWr.v63rmXUwQZQbK6lveNBvy5FPd7MnDP4Z1lSw1gx6.Sl0j0tY2n1s8fIKC6p1lCqZwfKxDlwHfakR+MnN6qEBdaOnGqEdEvDLNsz9Gtpqck42XW9SKN5OViu91E7DNX82wVesWX0UJV7yeRshEWJpgY7XquaYuIv6H6N9Zaek118qQs8MhFlwViWp0Msiqa2D7.0M7FiLqQJneYbi4uiDGdC7FqimgFzWfmIeaL26bCkfVm6dNhoT0wIscV6uBKjMhT9K+W7LUAsr8wn4VUqiW2wSfT52KeaZjmrO0z001RvE9cEbVp1B1AvdF6zAR0swHMnUjRUh7.Jeb0cvTDZXB+4uq5lLNPCP+DLg9hx+n+8iLx30ux1.WhpiQx++9fAS+gGL35wDHJJm68I9a+0ecgpe3IC9vSF7gmL3x3SFbwtA75vWtiTXuQgNUH5CpI+7bR86i.16Cczi5DHdkiokM0YiWQSAsat9+sGYs2RMlT9rMq0i4xdkiSZQclEVYRW3RS5Bu+jtvkmzE9oS5B+rIcgO3GdgpW2YkHonmYugkE12t9WcVlLl6Lp2lX8eAJXt5.C

the problem is that i can't figure out what these numbers are,

		g.drawImage("PeakMeter", [i * 20, 0, 20, a[3]], 0, 0 * z_value);				

which is x which is y, and if somewhere there's a value that tells hise that the sprite sheet is vertical or horizontal.

also i don't understand the math here (and what is value z?)

for (i = 0; i < 2; i++)
	{
		var z = obj.peaks[i];
		
		// dB is up to 0
       	if (z <= 1.0)
		z_value = Math.round((zeropnt - 1) * z);
				
		
		// dB is between 0 & +3
       	else if (z > 1.0 && z <= 1.413)
		z_value = Math.round((zeropnt - 1) + (frames - zeropnt) * (z - 1.0)/0.413);
		
		// dB above +3
		else
		z_value = frames - 1;

this snippet is for a VUmeter, I'm trying to get a vertical peak meter.

can anybody explain me please?

[d.healey]

@ScreamingWaves said in Help with Peak meter with fiilmstrip:

which is x which is y,

The order of all rectangles in HISE is [x, y, width, height]

Looking at the snippet it seems that z_value is the frame offset.

[ScreamingWaves]

@d-healey ahhh actually with x and y i meant height and width, but x and y are the position on the interface! it starts to make more sense now!

about the math, is that for calibrating the peak?

[d.healey]

@ScreamingWaves said in Help with Peak meter with fiilmstrip:

about the math, is that for calibrating the peak?

It looks like it's converting the peak value given by obj.peaks to a frame number of the filmstrip, in order to calculate the offset for the image.

[ScreamingWaves]

@d-healey so thats for later.
my filmstrip started moving, but above and below at the same time
any idea why?

[d.healey]

@ScreamingWaves Did you set the number of frames and the size of the floating tile correctly?

[ScreamingWaves]

@d-healey
i'm a bit confused, if in the component properties i increase the width of the tile, also the height of the image is increasing, if i set it right, the image gets cut.

in the script i don't find a place where i can set the size of the image

g.drawImage("PeakMeter", [i * 20, 0, 20, a[2]], 0, 0 * z_value);

in this piece of script, the first two are x and y, the third seems to be the width of the channel R, because if i set it bigger than 20, the right bar will be bigger. "[2]" i still dont get what it is, if i set it to 3 i see the whole height of the bar. the first 0 seems to change nothing when i put another value, the last 0 changes the range of the movement: with a low number, hise will scroll the images of the sprite sheet, if the value is high like 518 (its the height of the meter) it will move like in the gif above. And in the original script from the snippet i don't see any image size value

[d.healey]

@ScreamingWaves said in Help with Peak meter with fiilmstrip:

in the script i don't find a place where i can set the size of the image

Set it in the property editor. The comments at the top of the snippet you posted provide instructions

/*
Adjust the frame number and zero dB frame number in the LAF.
Also set the height of the FloatingTile to the desired image height.

Adjust the Decay values inside the FloatingTile. 

Also make sure that the background color is full transparent to prevent the glitch.
*/

a[2] is the width of the floating tile
a[3] is the height of the floating tile

[ScreamingWaves]

@d-healey in the floating tile properties the size is set correctly, but i still don't get the right behavior from the peak meter :/

[Chazrox]

@ScreamingWaves Are you sure you exported that properly? I dont think at any frame it should be showing like this....

at most it would slide out of frame if not set properly but it wouldnt produce this look. Something seriously wrong. Can you check each frame of your sprite sheet and make sure the green touches the bottom on each frame?

[d.healey]

@ScreamingWaves Did you set the correct number of frames? In your snippet it's set to 100.

[ScreamingWaves]

@Chazrox you were right, the sprite sheet was spread the other way around
curious tho that it "compressed" the image that way tho.

at least now i understand that script better and i could give the peak meters to all the hise outputs with a loop and it's working! I'm slowly learning how scripting works. thank you both! :D

[d.healey]

@ScreamingWaves said in Help with Peak meter with fiilmstrip:

I'm slowly learning how scripting works. thank you both! :D

Looking at the filmstrip you're using, you might want to explore implementing the design with vectors directly in HISE instead of using image files.

[ScreamingWaves]

@d-healey I'm still much faster with photoshop than with codes
but i've found your HISE Paint Routines + vector graphics playlist, I'll give it a look :)

[d.healey]

@ScreamingWaves On Patreon I have a video specifically about the peak meter's look and feel function if you want to know more about it.