Horizontal Filmstrip VU meter

Lindon

@Steve-Mohican not really sure what you are doing but:

HiseSnippet 2315.3oc6ZztTajbbWfkyR1jh6hckTI+YJ8mHboSHI+Abw0kSm4Ce3CL5P.WxunF1cjzDVsixtyBnyEotWhT4u4MI2iPxaPdDxaPR2yreJDBEJaG7cFJauaOc2S+cOSutkuvlEDH7MLKr+vALCy6Y0dnmr2Z8nbOisV2v7AVekvm+cBOI0kb3Aj9LIy234CGPCBXNFlly9BDUyByYn94e+EOm5R8rYofLLNTvsYay6ykoPa07q4ttaRcX6y6mA6G2bKag2ZBWQHHVyZUyX.09DZW1qnHZyXYXN+FNbovusjJYAFly8bgyv18Dm4ow+Pd.+XWF9Rci1.izf2T35fRLB0XsdbWmVwpefggoUqTiwrZiw8s1g6vSfmZTVTs.Ikhr1CyYlj3UOq3Ua5EOyLh2bZw6isZa6yGHSWAks6ZskG3h5PAWPVwRiqwLkWzZMvax7jU6SOgsoO7RBEkeZsZUHOoVskd1BEWnH3HBjjSo9jcCkCBknql74DUHR0tL4Fc5vrkkKktZIMg3ubOWtGizIzyVxEdDaeFXP1j61usDDkCC2ACkNZaVG4QZFT1CbwUHmWgLrBgGfqrzBEe8BEK3Jrgvuy3NvlBBPrBPcbZQ8XtYHD2eB7i9uiQLfgVoALeImE.pb+W1d2WEQ0q0nRHk.9K6U52Rp+j5UHKuLQ1iGPBCXAvSLB6bpsj3.AqdAf9DPDcHBTAAMJ.0nD9ziw61SBLZkGUIAnX.8OEx.fR+PFxcM.POI79CD9Rpmj.lWguCymHEvynEKfo1bGe5YbutDPE5H76iIXZNeQdEF3aqPohDdeHoA43PHSJ5sNXPluFUs0rpqf5rEtX4Rut0d69xMVa+i1b2sWei8tX6MV+vCTdoZ0qNvqaoJjRIZao7abD2bnRZ0Sotfh84jZUq8rKup1wBKqeXTwuMKR783RN3z0BdN1.dyHINUZpPf.2ZiUl.zwRL9qQccOFpkTNNjr7RZ7Rh.HQxvKhjgAL5IDs1zABZTv5SC.CBQnhXyQnJQwic1gQpeZVAlqrVnuODJtM6THdEiAhkURp.m9Tgn+g2obBG+cp.xLl3HwuPgQfC6cLQQ6QAla.KFaPAeYHjW6vroCU5jsV1hT0x0p9YMHPtuzW3pi8iPErhSXOGExCIHidVdEB1bvOXG5B0BTrNwEBdbG14onox95iB5wLB0CVVx5BVdEySQa0GSzYoN.Ffqg5fIl0arJPlMEfGgwetlyyIm0ia2CdKk79Bef61fE.EHH2RuuPxd+AtWJ4t.5hUxInuCn9ALnzY4Kq3q93pIwhYz7s5fIij+HpTmg46PZ9.H9PpJjnhzqPRQGw0Q38ajf6DTOUDoBaeH5CpsVgbbbHHhthsgpBFnkiI6IbxZNYjg61oCjMnp4nThGRz0p1sylinnJc5JSzhodkGszyJL1BQw4dRpuN6q7iRrH9LYnuWDJ.rKR5YL0cM1Ck5Oz13CsMt0z13cReiNTnNtRZ+PahOzl3mvsIh+M8FJQcFxbcBv1OE24nzkIDD9Fq.+4oUHwGT6R6S1FPW8FkqMUowPJtU09L8dkjbmWw9ZOww0yz8BqIHfR+dvKkKoVsTdQT0b6pIQurhF8iStTWTYN0FgXpJXTdCutPnEx40Y17igBGaJ7wZVaBs6D9kmPQrZK8v5vMLicyKubRS2.gKq5.eH185oWSDxjKVnXrUa4ki0nz.pUitL6nmrP3gpTi0zEvJaGafpPhqZhGgXD0VuTRv3U6SZTZIjpHtmXXyuoHixHOuRHY6B17hutXghWTjL5Rc5L10hXlKnqiaYsUXBDV1Kr+wL+X8NFQCy4xOHCqqdPFYmyhs1ljAQg2VPW4cGv7tpwaXDYHMLLmIRp.Tkpwb7yhFyQaWNbHDCtig4GYobKFJANYzQe+ZMMlZhaLFhOXq0gpy3vVhDmzC+AvVmcJ2loG8RAq0YAmHEC.qRhiGXsdSWHdvLXrnZOuu0kqxXbNPr4uF16g3C+J3A0IIAtO+eMZvY5xtHjshfnO9GRfogxtc8a9CrFSgG8t+Oeis628ZcVmmXq+gCZNL0v6zDZGOnM+6P9ZUuZMi9zTba9MMSZpnZxXXVx55NwoADQqpCiieyZkZwplk4OOiZYY1FdiGbH5hgKJfSIKqJM+UYPuiktJSFU56+lLpzOPalrgmkaC+KiX0t20FkltE+M2rVstfUaHl7MuBQi9bGGWVKQ.GStyLO1+9krtYGWqwnF6fvNc3mqly5n18Ow5f.7LdcngtRRvI.efJpmvb1Wnv23xinbQqcDN3g3xO8TrrdzBnvlcLk3nHgKJIGlcjxuUFo5zJterUKtzt23k2YFi7hEwdKKuQCndAK8DXSE14r172eSmF83GVdsqaZz2I4KGvwyB+hXQ4dVo8vmvGLvvXclKMm46aiJDEA3OzbLeRgs7NERaaIbo9iZ7mMuFO6zowiQKmapiPTCF+8lH5OwRYxeeRfUgDu+HvKhcHtEHt6otAX2cnPYbrg+qf9hhPeaFHpdPKL7Tclyf8jzuWCeGEn1LOG0K+G3mnEqG22GWrd7hYMIOPaRtq02ROko9JQQeCQ7cb.TjWv7X9nsp9DJI7Ol1ug3fo9aHtqsDDg88odACDAr5Y47Hq0HesIYnWdz0fxgEpdv0e5mAu6zLFXir.gvhbLCdOGm1gm1M13e8Ea3QAmdaFnMN6FXCJKZ6xF2zJDtznJ6ndVBSA2HK3uh56.9E6IUu7MSGh4uU+4TuUbTk+Grlyz5Reo9Ei52tAzHzEtlRRkc0wyhglOMaGgmXPOgGOW.vdLn5P2trbwUiU49RoDtDaJj62bOlKNr4DPD6laC2xl5C1L1jrK27txlSou6WZoEWBVa31UqiORK1EsNDbR13tqKSF+JIQcpe8RKbn78oJwYzSGgDkstkZNM4cLW9rp2XGyajySO6OhNO8aixQP+g2eNEzuvB5Y0fnb2j++6ueWbXn2E6Qepsu3n3O7BXstiBBn2dp+KRUvZG7cRx7wrrpot2uC+HaaLl9SqaXLdZZbCn4Q2.Zd7MflmbCn4o2.ZV4FPypSjF73MeYnTzWG+C.ZsgZTill5S3oREL9ujcOeyJ

I think 70 images is not such a good idea for this _ you might want to use a multiple of the db range you want to track.

uncomment the startTimer to see it replay your audio levels (well not quite but it gives you the idea...

A Former User

@Lindon Hi lindon thank you. But this method is not the same method in my project.

In my project (attached above), this code is for vertical filmstrip. Can we convert it to horizontal filmstrip please?


const var OutputGain = Synth.getEffect("OutputGain");



inline function createFilmStripVuMeter_Left_Output(name, x, y, isLeft)
{
	local widget = Content.addPanel(name, x, y);
    
    Content.setPropertiesFromJSON(name, {
      "width": 151, // this uses the exact dimensions of one filmstrip
      "height": 73,
      "opaque": true // opaque is important in order to increase the drawing performance
    });
    
    // Put the image in your image folder
    widget.loadImage("{PROJECT_FOLDER}LEDVUMeter01.png", "filmstrip");
    
    widget.data.value = 0.0;
    widget.data.isLeft = isLeft;
    
    // Set the initial image 
    widget.setImage("filmstrip", 0, 0);
    
    widget.setTimerCallback(function()
    {
           // Get the peak value from the master output
            var newValue = OutputGain.getCurrentLevel(true);
         
        
    	
    	if(newValue > this.data.value)
    		this.data.value = newValue;
    	else
    		// Just decay the current value (0.92 controls the decay time)
    		this.data.value = this.data.value * 0.92;
    	
    	// Calculate the filmstrip index
    	// this must be an integer value
    	// 84 is used instead of 128 because 84 is ~0dB which is
    	// more accurate for this example filmstrip
    	var index = parseInt(this.data.value * 84.0);
    	
    	// If you just want to paint one image, 
    	// you don't need the paint routine, but
    	// just use this method
    	// the yOffset is index * heightOfFilmstrip
    	this.setImage("filmstrip", 0, index * 73);	
    });
    
    widget.startTimer(30);
    return widget;
};

ustk

@Steve-Mohican

this.setImage("filmstrip", 0, index * 73);

What if you just reverse x and y ;)

Lindon

@Steve-Mohican - then yo should make a horizontal png...

ustk

Hmmm something's not clear, do you want the filmstrip to extend horizontally or the VUmeter to be horizontal? not the same thing...

A Former User

Sorry for lack of info.

My filmstrip image is stitched horizontally. Actually I can't stitch it vertically because the height of the stitched image will be soo huge. It is better to stitch a vertical VU filmstrip image horizontally. You can see the image in the project file.

So the VU meter will be vertical but filmstrip image is horizontally stsitched.

I think this code is for vertically stitched filmstrips. When I swap x & y it didn't work. The solution must be so simple but I can't see it guys.

ustk

@Steve-Mohican So swapping x and y should work, have you adapted all other properties (index nb, width, height...)?

Lindon

@Steve-Mohican so you want this sort of thing no?

heres the png I use:

not really so big...uses 106 images stacked vertically.. to cover the dB range -100dB to +6dB

ustk

Apparently, there seems to be a bug when using Xoffset making horizontal filmstrip unusable...

A Former User

@Lindon said in Horizontal Filmstrip VU meter:

@Steve-Mohican so you want this sort of thing no?

heres the png I use:

No, my VU Meter will be like this (vertical):

alt text

And my image strip is this (stitched horizontally):
alt text

A Former User

@ustk said in Horizontal Filmstrip VU meter:

Apparently, there seems to be a bug when using Xoffset making horizontal filmstrip unusable...

I think so too mate.

ustk

@Steve-Mohican So I corrected the bug, but it works using a hack for the Xoffset (it can't be 0, minimum 1). This is because the way the API is made gives a priority to check X before Y.

The way I would do it is

setImage(String imageName, bool isHorizontal, int offset)

Might not break compatibility, knowing that no one could have used a horizontal filmstrip before.
A bool isHorizontal would be 0 in older projects anyway. @Christoph-Hart ?
Working on it...

Lindon

@Steve-Mohican said in Horizontal Filmstrip VU meter:

@Lindon said in Horizontal Filmstrip VU meter:

@Steve-Mohican so you want this sort of thing no?

heres the png I use:

No, my VU Meter will be like this (vertical):

And my image strip is this (stitched horizontally):

then I've already sent you a snippet with it working...

ustk

@Christoph-Hart Here's a fix that is retro compatible (as long as no one as tried to use xOffset but this shouldn't be the case, otherwise it shouldn't have been broken)
Although before making a pull request, I don't know how to properly initialize the auto img variable, I'm sure I did it dirty...

void ScriptingApi::Content::ScriptPanel::setImage(String imageName, bool isHorizontal, int offset)
{
	jassert_locked_script_thread(getScriptProcessor()->getMainController_());

	paintRoutine = var();
	usesClippedFixedImage = true;

	Image toUse = getLoadedImage(imageName);

	auto b = getPosition().withPosition(0, 0);
	auto img = toUse;

	int w = 0;
	int h = 0;

	if (isHorizontal)
	{
		double ratio = (double)b.getWidth() / (double)b.getHeight();
		h = toUse.getHeight();
		w = (int)((double)h * ratio);
		offset = jmin<int>(offset, toUse.getWidth() - w);

		img = toUse.getClippedImage(Rectangle<int>(offset, 0, w, h));
	}
	else
	{
		double ratio = (double)b.getHeight() / (double)b.getWidth();
		w = toUse.getWidth();
		h = (int)((double)w * ratio);
		offset = jmin<int>(offset, toUse.getHeight() - h);

		img = toUse.getClippedImage(Rectangle<int>(0, offset, w, h));
	}


	if (auto drawHandler = getDrawActionHandler())
	{
		drawHandler->beginDrawing();
		drawHandler->addDrawAction(new ScriptedDrawActions::drawImageWithin(img, b.toFloat()));
		drawHandler->flush();
	}
}

A Former User

@Lindon @ustk Thank you so much guys. That really really helped me a lot. You saved my day.

Thank you again!

Horizontal Filmstrip VU meter

43

1.7k

11.7k

101.9k