Colour accent on preset select, laf fix?

[d.healey]

@Straticah You can use the new preset broadcasters to check if the favourite button is active (seems to be inverted though at the moment, so on = 0)

https://forum.hise.audio/topic/6649/feature-request-preset-browser-broadcasters/24

Also you titles (Category, Instrument). You can do this in a single panel, just take the panel width and divide by 2 to get the correct width for each text area.

[Straticah]

@d-healey sounds good is this broadcaster thing hard to do and do i need to build a newer version of hise for that?

[Straticah]

@d-healey also, is there another solution to have the red accent the same width all the time (like starting from left aligned and adding pixels to the right on x axis? If i make the colums same size it is bigger on one side. as you can see.

HiseSnippet 1767.3ocwX0maiiaEmJSzfXs6zsKvb.HLVT3o0iWI4j3jLXv5333EAMyLFwS2snYBVPKQayFYRWJ5j3Nc.J5EnWgdT5Qo+c+qdCZeTT1RxQY1rY2EUAHV78A4u2iuOHUeoHfFGKjHqJucwLJx5SsGrfqlbzDBiiNoKx5o18kzXpB2QJtNlJwmdXOTmEyHwwzPjk0i9ZsjVU1Dk77e9pNjHBOflQBg9FAKfdJaJSkQse6eKKJpGIj9V1zbRuc6SBD7iDQh4.pdjsKZFI3RxX5qIZw1vFY83iCYJgbfhnnwHqM6HBWLXh3ZtQ9ugEyFFQ0C7PCfIxPtmHJTiXMUzQSXQg8WZ8wHXV5m4KdjwW7T6WwBYqnm4S9kILvYZj2eXsQQ38nBvyKO7byAuRfjUNHsoARet8f.IalJiiFOeh8IbEUNh.t87PwHKZia1z9HAHAW0XJ4RZOILXkF0100sNd6cbe1Kbb.WerBOzrUeJYD9k3i4iYbZi.IErmuNRLjDYl2SEhKOjG1iRipo0MSqFR5XVLL+8lyCTLAuV0PI4ZSfTZbzof.mnnSqVGOZoTiqiEC+iOy48NNUF2.jsG.zZUeyMKFS4ffda2PixJWQjXB.syAoaP.fct6EIpZF3kefe9AMu3BPcmJUvvCaDtllihdiB+xWhqdXXHLscH7Kq9rTYzOYxfqNfFQCTfTQrgRhbQ0WjSv6ZdWoDDUOeJ+6exOB7ziEkO65mJUbbb9xuL.Bdj3Ylzy3DkA5UXiRVdCAZHrZuGzMweZRqp4dy96uiuWOees2DXMBREOSLmCIHmAJQ3iin0V50pi8Sb6vJJofGJH.Bj.0JYROtaS+lsd1KRw6cLwma1uLaT5cH7yw965peG1fpie+QBImJGv9yzCv90woSvAm6UGCRo++EePi7O3j7rlmfEFQKCdtttGo+6dAO7uA6tFDy.nuwajruUxRuZ5yVcyOwMtdBSQSc55ThCiXi4zv2ByzpXl53kHnYQHrZ8qFQGoppAgi1O3rLABK3uVnnugWSmCUw4CN30YMZTo7zkGjhnHprT15RzxOlh03ymNjJqiuhDMmtRPntUwhg12cwv70pCLUqxInfeBmodyLJ+tpfiRKwAu86NoKQQzUPSoAxMiJULMDr5RuBZGYpmVwtKM9RkXFzU4HwzYBtdFrbTIbexxpsDNMBwB0sG6.ciFK0wLnax2iaQ9AWyBUSVQ3e92ZOgxFOIq6G9uzd33k839T6s8as+tM2qoqOBBOl98vveMNCExPS1RdHftely.JQFLAJ5IyYN+UR6blyWztn4fkqaNnVsKGDFpmQBYyiynuU6aakdsZ42b2xrxTN4smegJs+rwd5EIHJFe7aYPjj1r9L67j79HaTowGlfgOytPGJT1Vjis2ts.b3sSgMnRImB782deWuV65hRBE230aX+dGLTiGBoGPth1YtRI3UO.qjyo0Wx43alQ3wPlU7gwoMKN.OhDEmIRxwXjkqtNCO9VyIj.ZDu.qLxPMAvnAddtqTBZEV9RbFkCmCqbdcgNNp6fWOxUBI3jzGtKOuTjcBX0gzNIgKEL4WOepwQnAueBIy3uUGSdFrIK.Fm6nq451Xm5KeA98hDo0my3PnK1JqLU15k8yJsLqwYhq6SBCg3n6qdlzIHapitBgFymaX7JgL0yrNmrng04rzmcKtNe39TgIKjrYZtzd9dauumGRerJj0V1lCVgzMcxxFa5tcq8Z46uyNvosykz8I2UQjsrSduPZ1SyW.oa6Yv4H3pbS15YnqYN+oaUgo6OxJL6smm+NMat+sSTWwA8CvX8yYr8k+nL1+k7+2F6SJZrmRFtxXSduvN6WTzX0wN5oN8Hq5NrEMOnWxsMOh9XOSSV7GaqOLCZDDRZtg2pvRJTghr5lRZAJ5O7aWLvU2rn0tPWwTgUKz59X3HGQg+fr27at+CYY16SfKbEC0vzlvOcFbYlXQmvCzf2pnAexT35zoFbx642fwA4MX21vQjSu58ux9Obv65BmHCBlCiemtRNlbMMVLk973j5dMlwGul2.hWV2a7qAuwrIjTB3282+2eE512zEtisHbdDQU7h25u1PJCnMYga6puQKzFQsH+Wi3mraieeg3ma2moBlTNF2nDLBGS8mCLl9MLdh8wiFAWsICfaZ262+yyGr.AWkRWk6UDkjAQT1Py6APrZ.EVcNT0TeA.qMzG6xL1UOV6AFP4gIC9uvSJSO8XqTldKYhlRBjhuKvbsC8WIYqDJ.l3IQoUrekdL1CkbUDPOa2FtnorP12EDnM+mC2dnbc7e.5z7Any1O.c14AnytO.cZ8.zYuOpN5uU1gyUholzAfP+iSNTrk0wbcssjnPz+CPAEilN

[d.healey]

@Straticah said in Colour accent on preset select, laf fix?:

@d-healey sounds good is this broadcaster thing hard to do

Not for me, maybe for you ;) I posted the code in that other thread.

and do i need to build a newer version of hise for that?

You'll need a build from yesterday or today.

there another solution to have the red accent the same width

Can't you just use the same width for the rectangle?

Also this var a = [obj.area[0], obj.area[1], obj.area[2], obj.area[3]]; can just be var a = obj.area;

[Straticah]

@Straticah said in Colour accent on preset select, laf fix?:

Hey there, i am trying to have a colour accent on the front of a selected preset tab. This styles my tabs inside the favourite window aswell which does not look great. Can the red offset be coded differently so it is always the same size independent from the tab length?

HiseSnippet 1769.3ocwX8taaajDeoiYfEaR6Uf7.rPn3fROEERJYKaGDTYYYUXTmDAqzzhywnXE4JoslZW0kqrstz.Tbu.2qPeTtGk6y2mt2fqyRRIRJSm35lfRCXwcmY182L67uk8jBOZXnPhLJ8x4SoHi6Y1eNWMd+wDFGcXGjwCL6IogTEtsTbQHUhOZutn1ymRBCo9HCi670ZNMJsNJ54+8UsIADtGMcJD5UBlG8H1DlJc1ds9FVPPWhO8krIY3tQqC8D78EAhY.ptioMZJw6LxH5yIZ1VyDYb2C7YJgruhnngHi0aK7m2er3BdL+uhExFDP0CbP8gEJd5th.eMh0yh1eLKvu2BsODAqRuTawchsEOv7YLe1x4SsI+kHB3TIxZOLVKO7tSN34jEd1YfWAPxHCjVOFRetYeOIapJkhFOeh4gbEUNj.l8rPIlWzZWtt49BfCtp1DxYztRXvRIprkscUbiMse3Srr.SenBOH9n9HxP7SwGvGw3zZdRJnOecfX.IHdcORHNaOteWJMnhV1TopIoiXgv52cF2SwD7Jk8kjKhcjR7iNBX3PEcR4p3gK3ZTUrXvO9Pq2XYUZTMf2t.PqT9EWNeDkCL5znlFkkNmHwD.Zm.bWi..6D6SiDMdfS1AtYGT+zSAwsJUBCOrg3JZJJ5kJ7SeJt7d99vx1lvOq7CS3Q+jxCtbeZ.0SAbEvFHIx4keRFFut0coPfW8rI72+huOXoGIJd00OkJYYY83G6ANOR7z3vyvHgg4KwFFs8wSP8gc6MfrQ1y3vpJ1WtyNa55z00UaMARCgPwiEy3P.xwfPD9n.ZkEVspX2HyNriRJXg77.GIPrBVzC5T2sdyG9jD7dMK7IwmWwGT5SH7ivtMqqeGNfphey9BImJ6y9GzcwtUwIKvtm3TECtp5+e5a0H+sVQOqXIX9Azhfmss895+tQvC+2zaUNHZuDftwVinysB15kKe5tG+SXsKFyTzDitNjXu.1HN0+kvJszmoJdABpmGBK2+xAzgpxZPXosCVKBfvB9yEJ5K3UzwPkrdqEdURCGVHMc5AoHHfJKjrNEs7cIXE9rICnxp3yIAynKYDxakOYn40mLLatZu3rUYXTvOjyTuXJkecYvQIo3f291C6PTDcFzj4.9lRkJlFBFcnmCkihymVxrCM7LkXJTUYewjoBtdELrTQTu+hrsDNM.w70kGaCUiFI09LnKyViad1AWv7UiWNw+9e1ZLkMZbZ0O7O2ZvnE03tmYC2l6rU8sqa6h.2iIuGBtqPYfP5GGsjEBnal5zmRjdigjdxLpyuPZkQc9hV4UGrbU0A0rUwfHd1iI9rYgoyuQqqpkNMa5VeqhzxDJY0mOUkTeNVe5FHHJFezKYfmjVs9LyrS47NNnR7OhcF9LybUnPoGQVlNa0Dvgyl4NfJb5DfuSicrcZtkMJxUbsdqY9FKLjiGbo6SNm1dlRI3k2EqjynUWP4fKmR3gPjU3dgIEK1EOjDDlxRTaLxhEWGgGdk0DB.iYOGozogbBfRCzbrWJDTJr3s3XJG5CqXZcfJNpqgVWx4BIXjzM2kkVBxNDzZeZ6H2kbp7ymMI1PnAuazTwi+NsO4wvgr.HbhkNmqcsFaWM4sMcfWNMhecmF6A0wVpmIbWsneVJU7tbr3hdDeevS5lJWb.EDO0VmiPi5ShI7LgLw1rJkT+gUorvpcEpVu8ljiI0ordRzz1tNM1wwAoarBYrgYbqUHcYmz3w51MZtcSW2M2D52NSX2mbcoQ1vL58bAZOHaJjNslBcRvUYVrUiQWQc9oqjioyevbLausi6l0quyUCUWRA86PYcynr8j+gT1+i7Oak894U1iHCVprQum6j8KxqrZeGcpvEMsthxA0RtpxQzs8LIZquqotYFzPvgL9FdKcJoPFJxxaJoYHu0vsUd2VcwhlaAUESXVMWK6cgVNB7+cosYOZ+UYQZ68fKbEB4vhTgOT5aQZXdavsTe2Hu9d3D31zI5az6YOcwdY0W6VPGxI279uZ92280cfFx.OY+vWqSjiIWPCESnOJLJoWso7QqXM.mkUsFeIXMlNljLA90+q+6Wgt5EcgqXK7mEPT4u2s9iMjP.pRl6xt5KzBUQTyy9wH9fcY7aJD+bydLk23hw3ZEfQnK0OFXL4SXbeyCFNDtYSJ.W2r62+w46UffaRoSw8LhRx.OJSn1cevW0iB6NGRYp6+2XMcWWwis0i0Vf9Ttezf+O7jPzQO1HgnyBhnIDOo3G7hu0g9ijrQzL.l3QdokLeldL1AEcSDPNS6Z1nILe1O34oU+GAWdnXYbuExT+VHSiagLadKjYqagLMuExr86TF8mJauYJwj3vAXhdGD0SrgwAbctsHuPzuATTxmoF

yes this was my attempt to make them same size but the scrolling bar makes it different in size sometimes so i thought maybe there is a more elegant way to create the same effect. Like making it left aligned or something :D Its a bit strange because of the scrolling bar on the right.
Can i assign width to a rectangle? maybe this fixes the issue of different sizes on different sized columns if you have an idea let me know otherwise ill use "same" column sizes for now and dont use favourites tab.

[Straticah]

@Straticah thats with same size

[d.healey]

You probably need to change the width in your paint routine.

g.fillRoundedRectangle([a[0], a[1], a[2] - 273, a[3]], {CornerSize: 2, Rounded:[1, 0, 1, 0]});

a[2] - 273 is the width. You'll want to change it depending on the state of the favourite button (probably).

I like the accent idea. Can I steal it?

[Straticah]

@d-healey haha sure! if you let me steal the image buttons soon? ^^ i guess you will make a video about that, you can also show how to make only selected corners round, ppl need to know :)

There are not many tutorials targeting the hise browser i think. Tx for your help, really apprechiated.

[d.healey]

@Straticah Good deal. I'll post a video about loading images into look and feel on Saturday.

[DanH]

@Straticah I'm guessing this bit didn't work for you?

		    if (obj.text == "Add a Bank")
		        obj.text = "Select a library";
		        
		    if (obj.text == "Select a Column")
		        obj.text = "Select a Category";

[d.healey]

@DanH Should do, that's the code I'm using :) Oh you're right, he's put it in the wrong place. It needs to be in the drawPresetBrowserColumnBackground function.

[DanH]

@d-healey ah yes just seen in the docs too, thanks!

[DanH]

@d-healey so you're just using that? Mine goes blank, do you not have to specify colours, fonts etc?

[d.healey]

@DanH Yes that's only a tiny bit of the code.

    presetBrowser.registerFunction("drawPresetBrowserColumnBackground", function(g, obj)
    {
	    var a = obj.area;

	    if (obj.text == "Add a Bank")
	        obj.text = "Select a Library";
	        
	    if (obj.text == "Select a Column")
	        obj.text = "Select a Category";
	        
	    if (a[2] > 300 && obj.text != "")
	        obj.text = "No Results";		

		g.setColour(style.presetBrowser.columnBg);
	    g.fillRoundedRectangle([a[0], a[1], a[2], a[3]], 10);
	    
	    g.setColour(obj.textColour);
	    g.setFont("bold", 20);
	    g.drawAlignedText(obj.text, a, "centred");
    });

[DanH]

@d-healey perfect, thanks!

[Straticah]

@d-healey can width of the rectangle be written in % of the maximum length? For being responsive?

//colour accent
		   
		g.setColour(0x99ED3237);    
		g.fillRoundedRectangle([a[0], a[1], a[2] - 100, a[3]], {CornerSize: 2, Rounded:[1, 0, 1, 0]});
	}

100 in this example

[d.healey]

@Straticah Sure, just multiply a[2] by 0.5 for 50%, or 0.75 for 75%, etc.

[Straticah]

@d-healey this finally fixed my issue the accent is now the same size on each tab, independent of tab length :) ty for your help. I have learned a lot in only a week.

[DanH]

@Straticah snippet!

[Straticah]

@DanH haha i have too much going on in my project to share, maybe this will help? :)

//color preset select

	if(obj.selected)
	{
		g.setColour(0x99521F22);
		g.fillRoundedRectangle(obj.area, 3.0);

//red accent
		   
		g.setColour(0x99ED3237);    
		g.fillRoundedRectangle([a[0], a[1], a[2] / 1000 + 3, a[3]], {CornerSize: 2, Rounded:[1, 0, 1, 0]});
	}

did you mean that?