Horizontal Filmstrip VU meter



  • Well, just struggling with to get a horizontal filmstrip Vu meter with the strip below. I am attachnig the project below I would be apprecaited if anyone helps.

    alt text

    Horizontal VU Meter.zip



  • @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...



  • @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;
    };
    
    


  • @Steve-Mohican

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

    What if you just reverse x and y 😉



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



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



  • 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.



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



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

    2a3644fb-d71e-4c19-91ed-027ee48580d4-image.png

    heres the png I use:

    78788f80-4558-4978-9024-dbfc6d8a04b7-image.png

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



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



  • @Lindon said in Horizontal Filmstrip VU meter:

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

    2a3644fb-d71e-4c19-91ed-027ee48580d4-image.png

    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



  • @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.



  • @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...



  • @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?

    2a3644fb-d71e-4c19-91ed-027ee48580d4-image.png

    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

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



  • @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();
    	}
    }
    


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

    Thank you again!


Log in to reply
 

12
Online

1.2k
Users

3.8k
Topics

33.6k
Posts