LAF Collection for everyone

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]);
   }
});

DanH

@Christoph-Hart ok thanks for the info - if you find time could you please check my sliderpack snippett? - I couldn't use drawRect for the + side of the arp sliderpack as it wouldn't draw anything, and instead had to use drawRoundedRectangle with a border radius of 1. Trying to set the radius above 1 resulted in a some weird elongated curves on the + side too

It's all a bit fiddly!

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

Straticah

i made some edits to the knob from @orange and wanted to ask how i would integrate these custom panels into the laf function :)

HiseSnippet 1658.3ocsXstaaaCEVNIZn1asXEXO.DFX.1sNt1NIcsHnsN27PPtt3zzMDTjQKQKwEYRCI5j30Vf8.r2f8xLf8u9BrWitmftygRxRxWZZyV0OXLO2324BIOLG5KsXAAReib4OdXelQtuxr8PgxcCWJWXr8lF4ti4dz.EymDRZ8g8oAALaib4l+6QB4xufg96cOacpGUXwRHYXbhjaw1k2iqRndXyc3ddsn1ri48RI8xM21RJ1P5IG.3YdyZF8oVmScX6SQwlyzH2WrkMWI8aqnJVfQtEVWZOrsq7RQn7mvC3c7X3j5FsACERtkzyFQLR0XCWtm8gw9cfAXkCShByGFE9Fy8317QzShFeslAIQizwibykEdymAd0SCuZof2TfTtTPZgPHcWy1V979pDNHd9RysEPxoKEB6ogRnrFy864M2PBRHTU6QOm0xGlLRiROrVsJjkqUq7pEvuG7.xtRKpGY20ZU.REAJhmzx6LOZWxSHw1wxmAtmVvckxyWSX2hw7JosAXARaOtMyOnPrpU8YNbrBp0.gkhKEkJZ6Su7Hoh5OLT3hUHciY5TgH67KkK7Js0NlckhriP1In.g2kTBXUUgzdxSHEOQ5Uj75WSxP74BdfTTrLo.gPdUg7NU6BUaq44o0kqX8BqvpC.Neg7WP8ITv6PlTvyVMjzEPT.LVQsLNUQ.ulG2QvrQDUZOpxspubfvtDHYYx8AQgAzHAC51keUExozSq8xJjZUqux8nmtD7S5oMziK8R3OEsfXoOytH.CMTgg2DkDVy2R6y.YlW.aRGGD3Lby2jdOxYSe9Eroy5ET+dJ2hk0K3qzin2tyDo2CAGDSowRzu90JhOU3vhhj8nWQVL7WbwpQtWjbAPdWcP2tAL.WjFUWNwDTeqic4VmKfBbfWsp0dTFlufaqbAF0qVCLeCX7dYzIT3n0pe8pVdLputxTmTYB6Qq6hogw8irUZZ2SCeH6NfsuzuG0i+qL6wbkjpjDTloVJl5kSkpt.BiAIjPuCqPRsP5skzNLO8lArZDfWXM7zJo0raAYpREO3pgNLA4Hly.OJtIq9JkWkLs543BEXuZeO7jAc0BnQwhkGUJi3Zw3h3oWJqwa9Ti3v3.tiS3jnZGHOQssg0qzoYx+OfznBYpTBKCteFlyjA.vEyjXq.I6UJGkxxjN6CUzqAYHHG.fxgoVGSPAkhybfSOgdWiyEFp0aU5WuxnUnBIkMGqHNdIzC67YO1jNzrndKGDgFsSQmRKTXVgoclYThLRuYWu1XxfzNebwHRTPJAXwmQ5Ju.5UI5rOKOPdlc7wcSENXYebJK++Q3.mfSxfJG3RBrYfRiBnvtoz1Qm1FivKGEVlMRiD.uZ6HL7yrOhYofSf8XkFeAhNINA5PRd4IV0oH0JYERSqdkIDqNd4ltGh2.o72D0LQgnNHvJlva4OCpiwq0Zj5pDGzC60WJX3AViIWwHSMFYLrLQ6Gwca.pD2JAQJ1WpXGHJgcSju.jbFmU2tSkGhNeomGyeprw1V8+PJVRLnWGleEh95iQBB8xksAQyY2fX59WsBCVoDTJ1VvUGzmIlUWsFQQXrYxHTAhpzsRdmnVICiqFbac2kYCxFZnG2b9e+Wa1z34auIUQiMHXaX85y7UbzUxsI6BnU+vdUyatIK3bkrOrjiRuPypgK+si6jkJXd5U+Vl5eW23pQuF3Our4vjIcZdId7UxaE1toKi63pRSI4fEf5W3559djdpiaPx.EM4NRevcOhZyGDj9IHgzaCW1mPsXyjsdQ1H7KkuU3Z7sFo7se9pT9lg8391Smv2d5X9VrSLluczQm7I6au6Yo8ha+ITfL6bEFsvmlLpYTiqK68a+PSnkwDA9olgsQC6XLIe6394e7967OYcej5ae6a0duMqKcfm5jz0u3BDeyLhrUZTq1iW5gOdE30nS7RK3MdRaniIU1G9gMbGw.1rm40V3KpDAb0vzw0+2dM3GKDuq4gbkk6zw3bSAivV4OGXL5Mz21bqtcgKkR.3Bls9wOOOX1.tDTwENv6x7wpFy8GzqMjqsXvpKfse3gs4lC2xFNuFNGi.sgal0SdO7EwrNNOWDy5wLM5Qs7kmYEdXJ9J8aoo.XRn+GTj2bObNod7YmllvMsF8317yrrP2eQ3j5oqSiafNKcCzY4afNqbCz4g2.c9tafNO5CpC9+pYsAJYuvsC.gC2ReGVtbaInPkktJz3eM9WA0N

orange

@Straticah
Thank you for this elegant Skeuomorphic design

It's been pushed to the GitHub: https://github.com/christoph-hart/hise_laf_library/blob/main/Examples.md

Straticah

@orange you are the best!

DabDab

@DabDab said in LAF Collection for everyone:

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

bump bump.... How can I make own Matrix Peakmeter with LAF? Gradient etc.

d.healey

This post is deleted!

LAF Collection for everyone

22

1.8k

11.9k

103.7k