LAF Collection for everyone

DabDab

@orange Thank you. Will try and learn from it.

Now understood. I didn't declare UI element. I used to use Global LAF. Now got LAF functionality.

DabDab

Now my question is @Christoph-Hart @d-healey @orange @Matt_SF @Fortune what is getIdealPopupMenuItemSize , drawthumbnail ,drawmatrixpeakmeter, drawsliderpack drawtablecell , drawwhitenote functions? How to use them? Any Example? Documentation is not full of all laf.registerfunction examples. Can we get update ? This help doc will be a great place to learn Local LAF for newbies.

orange

@DabDab I haven't look at these yet. But it would be great if someone has the examples. drawmatrixpeakmeter looks interesting

DabDab

How can I use Sliderpack Flash using LAF? I have tried but it is not linked with step size.

const var SliderPack1 = Content.getComponent("SliderPack1");
SliderPack1.setLocalLookAndFeel(locl_laf);
locl_laf.registerFunction("drawSliderPackFlashOverlay", function(g, obj)
{
	g.setColour(Colours.pink);
	g.drawRect([0,0,20,240], 2.0);
});

Tania Ghosh

@DabDab Please use

(obj.area);

DabDab

OK.. Now I got it

Tania Ghosh

@DabDab Another example You can try:

const locl_laf = Content.createLocalLookAndFeel();
const var SliderPack1 = Content.getComponent("SliderPack1");
SliderPack1.setLocalLookAndFeel(locl_laf);
locl_laf.registerFunction("drawSliderPackFlashOverlay", function(g, obj)
{
	g.setColour(obj.itemColour);
	g.fillRect(obj.area);
	g.setColour(obj.itemColour2);
	var a = obj.area;
	g.fillRect([a[0], 230, a[2], 12]);
});

locl_laf.registerFunction("drawSliderPackBackground", function(g, obj)
{
	g.fillAll(obj.bgColour); 
});

orange

@DabDab Alternatively you can open the Hise source code with the IDE. I am using Xcode, so searching for the keyword is a short way to understand what is going on. When we search drawMatrixPeakMeter, we will find this:

void ScriptingObjects::ScriptedLookAndFeel::Laf::drawMatrixPeakMeter(Graphics& g_, float* peakValues, float* maxPeaks, int numChannels, bool isVertical, float segmentSize, float paddingSize, Component* c)
{
    if (functionDefined("drawMatrixPeakMeter"))
    {
        auto obj = new DynamicObject();
 
        Array<var> peaks, maxPeakArray;
        
        for(int i = 0; i < numChannels; i++)
        {
            peaks.add(peakValues[i]);
            
            if(maxPeaks != nullptr)
                maxPeakArray.add(maxPeaks[numChannels]);
        }
        
        obj->setProperty("area", ApiHelpers::getVarRectangle(c->getLocalBounds().toFloat()));
        
        obj->setProperty("numChannels", numChannels);
        obj->setProperty("peaks", var(peaks));
        obj->setProperty("maxPeaks", var(maxPeakArray));
        
        obj->setProperty("isVertical", isVertical);
        obj->setProperty("segmentSize", segmentSize);
        obj->setProperty("paddingSize", paddingSize);
        
        if(auto pc = c->findParentComponentOfClass<PanelWithProcessorConnection>())
        {
            obj->setProperty("processorId", pc->getConnectedProcessor()->getId());
        }
                                 
        setColourOrBlack(obj, "bgColour", *c, MatrixPeakMeter::ColourIds::bgColour);
        setColourOrBlack(obj, "itemColour", *c, MatrixPeakMeter::ColourIds::peakColour);
        setColourOrBlack(obj, "itemColour2", *c, MatrixPeakMeter::ColourIds::trackColour);
        setColourOrBlack(obj, "textColour", *c, MatrixPeakMeter::ColourIds::maxPeakColour);

        if (get()->callWithGraphics(g_, "drawMatrixPeakMeter", var(obj), c))
            return;
    }

Thus we can say that the below list is for the properties of the drawMatrixPeakMeterLAF function. Then you can insert a MatrixPeakMeter FloatingTile and go on with these..

obj.area
obj.numChannels
obj.peaks
obj.maxPeaks
obj.isVertical
obj.segmentSize
obj.paddingSize
obj.processorId
obj.bgColour
obj.itemColour
obj.itemColour2
obj.textColour
obj.maxPeakColour

DabDab

@orange Which Cpp file do I need to open to view all LAF functions?

DabDab

@orange Can you prepare an example please ?

orange

@DabDab Open the Hise Standalone Project file and search for the keyword.

DabDab

@orange Thanks a lot.

I got all the functions.

		"drawAlertWindow",
		"getAlertWindowMarkdownStyleData",
		"drawAlertWindowIcon",
		"drawPopupMenuBackground",
		"drawPopupMenuItem",
		"drawToggleButton",
		"drawRotarySlider",
		"drawLinearSlider",
		"drawDialogButton",
		"drawComboBox",
		"drawNumberTag",
		"createPresetBrowserIcons",
		"drawPresetBrowserBackground",
		"drawPresetBrowserColumnBackground",
		"drawPresetBrowserListItem",
		"drawPresetBrowserSearchBar",
		"drawPresetBrowserTag",
		"drawTableBackground",
		"drawTablePath",
		"drawTablePoint",
		"drawTableRuler",
		"drawScrollbar",
		"drawMidiDropper",
		"drawThumbnailBackground",
		"drawThumbnailText",
		"drawThumbnailPath",
		"drawThumbnailRange",
		"drawThumbnailRuler",
                "getThumbnailRenderOptions",
		"drawAhdsrBackground",
		"drawAhdsrBall",
		"drawAhdsrPath",
		"drawKeyboardBackground",
		"drawWhiteNote",
		"drawBlackNote",
		"drawSliderPackBackground",
		"drawSliderPackFlashOverlay",
		"drawSliderPackRightClickLine",
		"drawSliderPackTextPopup",
                "getIdealPopupMenuItemSize",
		"drawTableRowBackground",
		"drawTableCell",
		"drawTableHeaderBackground",
		"drawTableHeaderColumn",
		"drawFilterDragHandle",
		"drawFilterBackground",
		"drawFilterPath",
		"drawFilterGridLines",
		"drawAnalyserBackground",
		"drawAnalyserPath",
		"drawAnalyserGrid",
                "drawMatrixPeakMeter"

Now have to learn how to use them.

hisefilo

@orange So generous man!!!! :smiling_face_with_heart-eyes: Thanks you thank you!

DanH

Shaded SliderPacks - Although I think this should have it's own LAF function rather than using drawLinearSlider as there are some quirks doing it this way - and doing it for a +/- SliderPack seems rather overcomplicated

Screenshot 2022-10-31 at 15.56.19.png

If anyone can get the +/- SliderPack to get rounded corners that look right please let me know!

HiseSnippet 1694.3ocsX80TaaDDWBPLQNABjlo8UM7jI1wU1Fv3ISZw+kPvfUvT9SYXxHKc19Jx2YjOavjguG8w9wouzm6Wi9AnyztmjrkLwlX6lpAjmc2a282t2d6cmzroFn1so1BhxG2qERP7YRU5QXMx0PGSD1Kuf3xRGn2lgrUbYksWK81sQlBhhyuKmgn7BBNO+0OlU2RmXf7YIHbBEafJgahY9b01YerkUQcSzw3lAF8F6rmAkjiZQ6.3YdIUgV5FWoWGcnNeXyIIHtXASLiZWgoyPsgwjkZ1qRC5MD2weBtMtpEhSDWnBXHW1B4ZfsL05GqsEDDWPyOxm2MxeozAXS7.99YfUbDn3qQvbf3bCCoEFBRwGGjJRsL4FXLvat.vaAW3spTECabKluDN1dpzdDXxolNj1CBK2wJL2eufTNJLBBKVS8qPEsAhAZDdKU0nJvq0eSHHy2lozU2VohE1DYqAo9MTdqResqiX4nMaQI.Q30BLl0FixaNAJuIW4fZqUJSw.5YXifrZIpgtUIJ8pLDyhHjU3g8HWmDSjRgbFaLaTcLuhtXGhACSIgWyzV+lRXBR21EaqEUoVeg0ipPq9KqG5SgBIy8mN3JfQLcvMuwkUWOVc0s5fNjZ2T2BeGxDbnb8Xs4wNujNr5soRplHSxLIAr.R3d8cTa7c.vArB9Or9EIuT46URDUQ+B0K4uSb45Cryt15lXHDKBKeBeAXtTEcdhpDGlG4+ArRuct7p4bYEWU0UcbMkvcU9g2pDe8PxeJjrr9EwuDPsyOQT56VkWoDNdLUkWqzkCQYG9u0W7qcT.jburbHYjUazCrl63Fmp9NIA3jW45j6chtZPHcDxfEVmy6A4syJj6g4sincHvBHtJ5j5Vnv8mRbxCw4A88Ny39EpbK9YUENUD7A5Vaj3+PwwXlhTUiuU9Te4on9AfyLheIFOoMXVYDEYdUGCxe80aTowTEKjVMY9zARiAUIJOsIq.OOL2s43ycIV+M8yFJTxgTFpLILOgHG59PJOTTsZiTFeoqM0xBYORw7sIreLECS5zrJxNphSxYv.gdmC2bdwIq4rgamj.CjR1ifYkag7n8aeGeDsuE7ZEwaj6gP.JLm13uvqMtexU.CFZIo.YaAmvveiw01wTmoKHdgzVaDyd2BGlN0Gpe8V85phusbrXwzhn89pampR8q28FNcsHb4aWI4le3lxGzqTkH2gyd51XqysTKeT8qO0UdOfYhxfljzwbw7TBzM5CTIwmCvL.HuQEmMBX3toxA34txa8g56G4Lv+awoINzoImacdRNHUKm6zx+bj7mV98amiYdbWt7qSSf3aybEXlcKCLeWD.j+zd44NA1gyKECo8VHaFlO6JlG0ENsg61kxR4QsuhQa4LG3s2if3SlhYga8mANemd9DrcvLTS2UUI.1K9r+3WugKvmMm6e9sBNbuAaxZvyQQEEDZfv0av3T+lfSgx.js3Tj1GGxNemw3re24bWe1QdVRJicKT85Xcl24IVNHm3CeRm4erCeEexO7UfkGeyfpt4cC+k8B+rcXLJwIzWVxEEdrdvZCg.Uti2FKIcDBZgMrIjDeT0cS3Np+boC6zrBC0xi2Cvf5NShQdpD2BN3XJBh.FXEGCT4J7Cfgjn3DlF.KPsY6i5M8IygCjVHj49DZUeHrxnTdEOkgx7pzrzacTGpvQW2AAWTX.6IKPB.gkjJCa72EcDr4OZ5mOkkpznSsZVnYqZ5oREH5Po9wXz3f9i2D8kPJnI9XXke.AiqWJ7TJSF9O4g+OqK7pZFnMZ27k37zbZ3CuRVjSWkKuKWtlC8gbZsXf90xwoS1wkdJv5IHKpAl0aTX8efmgvZsHYAekd+7bWo80gdhw5KjJgH0YMlLjdE2Sm7dvSmQ095POgKAVUBtcIgfrpfrfSfQ+RKkGoQ9NoxcXs5v9JXpUkNPq.zW2tuw7MxbSrQdN2HEHlelIVYBWVsnz6fiUMhkje9kggqjSM6Xw2jJ38z4ePBOAv4CGZ2K9kdIsgp3fevho3x6pi7x6i7zeSHbWURCyLZLZ7N2HvK+3j+Oi2AmKnPsZP0jOXWPp3Yy528XJfBbsNFlT+.clMFNjiy1tvwofsJbKpZ2ujziVseW+JHhoZ+k4dBi2eQ.WX79BEZpaXS+nga8H+is7DGN.lHNemIYoC3zJwGTAKoFSUnI1D+QCCdp30.1GsNIlAcRNC5rwLnylyfNaMC5jZFzY6GUG9meKSGFso6xDfgVAm6AHJ5tQrSEov+BLftwVE

lalalandsynth

@DanH Do the sliderpacks not have LAF ?

Christoph Hart

@lalalandsynth Sure, you can draw the background, the text label and the flash animation but there's no need for another function than drawLinearSlider (also the sliders are juce::Sliders so it would be super difficult to branch that into another function.

orange

Wow, this sharing is going great and it has become a great collection! :D

Today we've got a nice Knob Peak Meter from @Steve-Mohican and this cool Shaded SliderPacks from @DanH. Thank you, guys! Both of them are on GitHub now.

Send your stuff guys, let's show the power of this incredible community!

Knob Peak Meter by @Steve-Mohican

Shaded SliderPacks by @DanH

DabDab

How to implement Matrix Peak Meter?

const locl_laf = Content.createLocalLookAndFeel();
const var FloatingTile1 = Content.getComponent("FloatingTile1");

FloatingTile1.setLocalLookAndFeel(locl_laf);
locl_laf.registerFunction("drawMatrixPeakMeter", function(g, obj)
{
	if(obj.ProcessorId == "SAW");

	var a = obj.area;

	g.setColour(obj.bgColour);
	g.fillRect([a[0],a[1],obj.area[2],a[3]+300]);
	
   if(obj.peaks);
   g.setColour(Colours.red);
   g.fillRect([0,0,obj.area[2],2]);
  
   if(obj.maxPeaks);
   g.setColour(Colours.cyan);
   g.fillRect([0,obj.area[1]+335,obj.area[2]+2,2]);

});

Peak Meter Is Not working

my snippet.

HiseSnippet 1605.3oc0XrsSabDcWfEEbZUapRUq5Sqr5CNJNHaSBjznjXvFmPCNXg4RkPnngcO1dBimY0tiAbixeSeseD8OneB809V+CnmY1c8tKX4531j1xCvdtMm6m4LzxW3.AABeCyk1anGXX9IVsGxk8p0iP4FaUGwa0BHmtMoiwFC8HAAfqgo47OWQ1boELz+7GOaCBivcfDTFFGHnNv1z9TYB1VUeIkwZPbg8n8Sw88qtkifWSvDCPSYdqRFdDmSIcgWQTrMmkg4ha5RkB+1RhDBPd1P3NrcOw47P9OfFPOgAJfxFswCJDsQsdTlaqX2LvvvzpUhSOenSeaqlTW5H7IN+mqIXmHQ5Xf4bSxjJ+dXRloLoEBMoaY01wm5ISnnrmaZsEWB9cHXnNsoDxqwb+9bV0DHGb4x8ImBM7QfQRTX0RkJZi+5NONGFsCj1LgC60LRG6mXGKliOfdy1BGBaag3z04tM.fUXjHmQ7savDDIk2cOJCJmR1tfrlnumfi.Exmgq73AjKClkC.40TSrAgbG+4x9PWZ.5BMFvcjTAuPdWex4MIRe5EpRyl.RLeQ6Nwz6VzVbxatSt2laIZmB3mKOJHtkq8Sdhc91qen1fVR4MDzCTLQPOWgqqxxBKE0BeR2P.T.jVGr9cWvQV3HxQkNtH4nxGWLV5ipnPrxw2ckRkNVwdNaa6HSvCsz.DGhIsBB+S.5jtwDSzPohkxb1UNVySpSsOQGBlvA6LjvG2IO5bKil6JOHsdtakPMk6c24wwAUaA+UBIrCufNtl6c4ruJoNcFKMUwgufw.+wRVMGveRBVfOn+IfeQrxiM.FwH1njs6awoq6yIrVMEiB9VbpbGOHBtgf4p5pTee8dUinhc7q82pNQRTsuQ3P97.eIUYNl0gyv4egMyKYUGBNUJ7vQYi5PvYsxnoOgsuoaOLnnE7YVY5XLt.GdY9SnlGp9PYBmSck8T.2FA5Azt8jJn8LGYmwSStR+hQbUMZbKVq1N4USgoRneB182e+KyhshBc0UxqQq884Vzz5sXwU9TcX4+tvFrhJ7awcgKPL2qrFDisLw4GJ7OM.GvCHgNDV.no0F51GM3sA21zeTQp7xkzD12qN3PFppTPrkhvVGSfiC+9APazVc.bJNmCr.jlzePjNNENuAwAKaRc9sHttXL9JZUUgzLr8JE1nCU6Vf5n4CXrbuKUPZEUP5Mu4W5puXaly1UTY6nqGq5UcXxcktUGk0+dyzYctwUx54rdIL7DAw2MS51008xqmtu7xK+lwjtQzZlkvExDle5S+YijhfiiJBPscnxzTwq6GmlnAdLxvcbjjyfWoakyj02VbNJFh5QZvWPCgJWYsv38f.on+y8Id8nNAYjrNzgLfIW2CGs5qV9HchdCFt+.dT6hATgt5X0Go+4gOrzZOpzZgki6I51kAMEtYqDU24GknUlRbY0AfpvIksLRaHwFLhrsbH6JmTqMiSAWEON2xWlnkJw32j6lR2qh0VFWe6.buDg6.TkYWVQsUVDAbFZlMDTaAvCnxgo2Z68XClRSbClo0DukUKpzo23sw4FiMhSW+PXiQ688oVa1oClUSLvErZ7Cy5RdSu5+xP0eSqCwlB891ZkaYgyMmvZ1+5ztls2TulcXe4dX+SfmH.uiI0IeEZURSqNHGvyxdHpLbobuFB+9o36FUiQVIMxVDdlCCgybRMoIiCM9smsImfA81.5Mt6D3fNqpNKcocqAXuldZT4zBlftRZzu.aPw7fSlBu4yl4WX5VvHaOXJ9Gyd+K9g5oHKLcUo+Eq57e+4NYd4zRw1XaZeOFrI+LfgKjoswuvJ55hXrkyXkMEbgWOAmloBXW.2YpaWHSg0Xcn0kR79lDL2t5t.CHAo5891paS43MUpaalwXw6+qHGa95qsBMWa0vA6+N4sOpkYS7ti4mp6N9G2dm86Q9H2ghyO++Sl9qrvY5Ur0oa6+8y26JFn1JO7ET3sz3VrYeggZ464TKeGBWRAqLm1.2UCnVhNhXYErYDwxwD+nni9DGewqcBeVsZfwMzXP+lq+ursD9HQD1trg9o1p8QvGUYzGu140NNpZ56gwmwKSkYPlUlAYt+LHyClAYVcFjYsYPlGNQYT23u9.7APg0+HhVapexkoY3FP5VAi+DoTb9k

d.healey

@DabDab Use curly braces with your if statements.

DabDab

@d-healey Still No luck

Content.makeFrontInterface(600, 600);
const locl_laf = Content.createLocalLookAndFeel();
const var FloatingTile1 = Content.getComponent("FloatingTile1");

FloatingTile1.setLocalLookAndFeel(locl_laf);
locl_laf.registerFunction("drawMatrixPeakMeter", function(g, obj)
{
	if(obj.ProcessorId == "SAW");
	{
	var a = obj.area;
	g.setColour(obj.bgColour);
	g.fillRect([a[0],a[1],obj.area[2],a[3]+300]);
	}
	
   if(obj.peaks);
   {
   g.setColour(Colours.red);
   g.fillRect([0,0,obj.area[2],2]);
   } 
   
   if(obj.maxPeaks);
   {
   g.setColour(Colours.cyan);
   g.fillRect([0,obj.area[1]+335,obj.area[2]+2,2]);
   }
});

LAF Collection for everyone

17

1.7k

11.8k

102.6k