Image Strip usage in the MatrixMeterFloating Tile

[Fortune]

@d-healey AFAIK only 0-1 range sliders work with lag, but I am confused.

Any starting examples/snippet please?

[d.healey]

@Fortune It's the same as a paint routine. Except it's a laf function.

I have a video about how to do it for button laf. But you can do it for peak meter laf too.

This is where I'm drawing peak meters with laf. I'm not using images though: https://codeberg.org/LibreWave/RhapsodyBoilerplate/src/branch/main/includes/LookAndFeel.js#L786

https://youtu.be/ByhODygMhqM

[Fortune]

@d-healey Thanks for the tip.

Ok so I loaded the image strip to the laf. then recalled it from the laf but it doesn't worked. I think the peak value logic that I am trying is incorrect. I tried including the frame numbers here but I really couldn't figured it out.

NOTE: 83 is the height of the each image frame. 95= width & 51 = height that I need to scale the frame down to maintain the high image resolution.

Any help would be appreciated.

laf.loadImage("{PROJECT_FOLDER}VU_Meter.png", "VUMeter");

laf.registerFunction("drawMatrixPeakMeter", function(g, obj)
   {
   	var value = 0;
	var numActive = 0;
	
       for (x in obj.peaks)
       {
		if (x > 0)
		{
			numActive++;
			value += x;
			
		}	        
       }
       value = value / numActive;

   	
   	g.drawImage("VUMeter", [0, 0, 95, 51], 0, 83 * value);	   	
});
    

[ustk]

@Fortune Shouldn't be the drawing part inside the loop?

[Fortune]

@ustk Like this? It doesn't work though. I think the frame numbers should be included too. But I can't figure it out...

laf.registerFunction("drawMatrixPeakMeter", function(g, obj)
   {
   	var value = 0;
	var numActive = 0;
	
       for (x in obj.peaks)
       {
		if (x > 0)
		{
			value += x;
			g.drawImage("VUMeter", [0, 0, 95, 51], 0, 83 * value);				
		}	        
       }  	
   	
});

[orange]

@Fortune This is a quick example for the left channel, you need to edit the frame number and adjust the floating tile width-height sizes as your taste. Apply for the right channel with using obj.peaks[1]

laf.registerFunction("drawMatrixPeakMeter", function(g, obj)
   {

	var a = obj.area;
	var left = obj.peaks[0];
	var frames = 128;
	var left_value = 0;
	
	
	if (left <= 1)
	left_value = Math.round((frames - 1) * left);
	
		
		
	else
	left_value = frames - 1;	
		
	g.drawImage("VUMeter", [0, 0, a[2], a[3]], 0, 83 * left_value);	
   	
});

[Fortune]

@orange That's it, Thank you!

BTW, as I see the UpDecayTime and DownDecayTime is not available in laf?

Any way to set decay times? the VU meter goes pretty fast, a smoothing decay would make this usable, otherwise it is not useable like this...

[orange]

@Fortune said in Image Strip usage in the MatrixMeterFloating Tile:

BTW, as I see the UpDecayTime and DownDecayTime is not available in laf?

I will check it.

[orange]

Plus the DecayTime thing above: If we hard pan to the right or left, the signal level significantly increases.

As you can see, when the pan is in the middle, the peak level is around -23 dB. But for hard left or right pan, the peak value increases to the -13 dB.

Edit: the difference is 3 dB, not 10 dB.

[ustk]

@orange Could it be a linear vs decibel conversion issue when drawing?
10dB is quite a drastic pan law indeed... So what is the value saying in the end? (not the image)

[orange]

@ustk OK, I set the gain to 0 dB for both channels and tried again.

• Pan is in the middle: 0 dB & 0 dB

• Hard Right Pan: -100 dB& +3 dB

• Hard Left Pan: +3 dB& -100 dB

Is this 3 dB rule?

[Dan Korneff]

@orange that sounds correct

[ustk]

@orange yep 3dB is the expected power loss compensation

[Fortune]

Any ideas about the DownDecayTime and UpDecayTime on laf please?

[orange]

Well, it is not a bug. The DownDecayTime & UpDecayTime functions works great here.

I think the issue occurs if multiple floating tiles are assigned to the same Processor module. If you set the FloatingTile to the different module, it works great.

The Peak Meter with FilmStrip Image LAF example has been added to our great collection. Yes DecayTime is working in this example. You can see it from HERE.

[Fortune]

@orange I see. Thank you!