Round Corners for Floating Tiles? (FilterDisplay)

Darkmax204

Hello, pretty new here. How do I make this Floating Tile fit the border I've designed in the background? Is there any script or code line I should put in the Data part to get round edges? Is it even possible?

For clarity, the border is part of the background I designed in Photoshop. Loaded using an image component.

floating tile.png

d.healey

@Darkmax204 You can use look and feel. Here's a crude example to get you started

HiseSnippet 1014.3ocuVs0aaaCElJIJX16ZAF1yB9ImAu.KW2DuVLrz3KaFKI0K1qauUvPcjLqoIconSpQQ.5Ov8io+CxNTR1xZIHK0Xa9AKctwymN7ieRCzJFDGqzDmxiVLCHNel6vERy31iobIoeGhyW3dJM1.ZuTWGuXFMNFBHNNa+SVGNk1gj76C+3wTAUxfbWDxKUbFbBeJ2j6cvQ+BWH5QCfQ7oqkcyi5yTx1JgZNhmscqSlQYSnQvYTaZa4R9YZ7Xhy25F32zOrEidPK+lMXrFsNrw2eHCnggvA9O4vlsBaFRY0aPb1sa.2nzCMTCDiK5wpfECGqtRl1fWxi4WH.qgOYH14T2j1i4hfAKGNwDhyNCxGUamNp9Z2S4A7U9yGYeUR.u7JVen4r08AI+OBH4rFj1IEROxcHSymYxiXwym51Wh6f3HAJ.kzbIa8AG21JLCoY+ozIPOMZrphpGTudMO7u8dV4x39Srw6Rp1qmPQMbYzHt.789AukKPDXZqlNSIQipUJjUk7UPPCWqFlFvYwIJFUbhRM44xfd.HphoWn98iAysRBWI6xhW1WCQbKSs2bIyvUxpUBzzq5wEnuiQlTjVMWFTolW3xDhp4ot306U9ckKYelnHlP68oHdv0rTjsio7wpoWhwlDf8CCYW6ysKHDbNvLTYj.pRq44iSqFXJWu2yV1GOk7LkAdgrZRqJecYu+dnvv6LlcBoUBAnuyv1yO56qvpx4Su.z0vsLwbXUhHeoHIb2GFIjktgsVhJYeI27hYPlcOkHvRtr2eaJKIaGGu6252gZnVVblOLuYf1vsvwoCbIpajxoK41AhmXTyRxMiZgjZS1gvTV75LEBGQvW5Vf7PdatPyniVrx38gGkAfzt8MtczznHJ9zmxbFPkffbQzRcoR6tTaiafo4du4ladeQuMxR9wV2IOsNm69txddUVMS5GT4onIUiJbFM+Mdc+U+J0rozGIVuEC9c9Il3bUnt52U5IwnnHfABohXn70jq3AFTTz04OcHjw.OZrwZUwwpzdKABTZRELWPME0qrJ4YAP9SAQBqPfLlaVrtR+GgHV86UD6gBwG4NfaXiuaLt0cfQjY8eAFyj9+b2t36ZXlb.tiau+XS04q+v04cWdln8b8kP22js+UjAU.GmMeZJQN1RKrCld8F0UZI3o3b6+kdeDAUCsG2Nkh3.Os4hcdHdLfA3TRhGhR.vVVUfT65KAzPPFjXfmgtIKnu01IKn+xf+uzioTlV8JVpBpcC3SR7fO2xjODoD9EQnsmOIQUccN2T789uhwJtT2pvFaZgOdSKr4lV3S1zBOXSK7vMsvV+yEZ+rrmO2nllJgPHmNnapvryZmHH+UBu4QJ

Darkmax204

@d-healey Thank you so much! I just loaded this up, and it works like a charm for my needs. If I have three floating tiles, how do I make this script work on all of them?

d.healey

@Darkmax204 You can apply a single look and feel object to multiple components, or you can create a unique one for each, depending on your needs.

Darkmax204

@d-healey Sorry for the delayed response.

You can apply a single look and feel object to multiple components

May I ask how to do just that? I've been racking my brain over this, but considering your videos are my only guide to HISE, I'm a bit lost. I appreciate your help though, means a lot!

Edit: Never mind, figured it out. Thank you so much for the help regardless, you're a godsend!

For anyone with zero experience like me who might have the same issue, you just have to do it like this.


const var FloatingTile1 = Content.getComponent("Object 1");
const var FloatingTile2 = Content.getComponent("Object 2");
const var FloatingTile3 = Content.getComponent("Object 3");

//And so on so forth.

const laf = Content.createLocalLookAndFeel();
FloatingTile1.setLocalLookAndFeel(laf);
FloatingTile2.setLocalLookAndFeel(laf);
FloatingTile3.setLocalLookAndFeel(laf);

laf.registerFunction("drawFilterBackground", function(g, obj)
{
	var a = obj.area;

	g.setColour(obj.bgColour);
	g.drawRoundedRectangle(a, 20, 2);
});

Straticah

@Darkmax204 @d-healey i was wondering about this for a while, since i use panels for cropping sometimes.

Is there a way to crop/cut the radius aswell since panels when used as a container usually crop stuff to a box anyway like a mask would do.

HiseSnippet 958.3ocuV0saaTDEdl3rAroE0JPb8pbUAEj7Z65jTopZh+ArfjZhCEtqLdmY8NJ6Ny1YmMoVkJwKARbAOFHtlG.tiWDdCBmY+I6tD2RkETekmuybly47cNeyryTRWVbrTgvsNaUDCguk07UBs+PeBWflNBgeeqiIwZlxNC5nUQj3XFEgwM9bC.t41nze+0iNhDPDtrRHD5IRtK6q3gbcI5rAeIOHXBgxNiGVY28FL0UJFJCjIP9zvpMJh3dNYI6DhYaaYg9BRrOB+IVsueeFa+tdTJoaWZ+98O7fC6cnCwqcOxBm9G1qSu86bv9dH7NiobsTMWSzrXDd6ijzUy8kWJxBvS3w7EALyBGzbHxYvSjATSIZPQC84AzYEDULBNkYkzViLZ6CsNlS4WiWRe2I0fcoGUIP7V0SuF0ROmpoW6Jo2ZRIbkTZ6rT5tVycU7HcoES97dVSEP2zi.8opoR1dQ3ewx1KQ3p4RgsTbhTydr3debqWzpYqW15Fl77VqsgRgVICBXp0Z1z1UuNGumHIbASsm8EjfD10aDJs57k0qlup1NgoJMSnqrQoXpfqebDS7pZxngYNA+6alNhnIFRNGC1WDSo4lT.OhcALhmQ4MsFwhOWKiR2aXjTXNA76nSsd6hFBQvBPbpoYXNQXTgoPOGJG7LHbqL+4Wg+bImp8MK9CLB4y3K80lU6BqVHUTl5TBkmDWU.UKr2RmOZlE1IARhlKVdFGXHSz2wZplElEXTQfQkkdVM8QViTjkKI.uNgG.iNYo+hkEB0l6b0u8S6Y7iCGWEzqt5Gqi1w.CHcMvobJ9TqWzx1d2qY9ozce.rjn.IuVwel83u1Y28LaYpfxdNX7ScRWBRz.4keqTcdLbKACL3QBhYsdYAskSJ+9OLnf5xQrUChHJn9pPUUaDnaJk.QrjlDPz0U1l6+xM.iu0jSFQlHlqWU89w+yj6uoo3cslw0t9qOG2ZM4HLj++QNleI4ssF64wb0kI31VS9t2B2H1pPdNLQcAa7yx6e0GypkGmjDlMsatkAaTEGQDz14Lk8O+P6AF.mbfu+O+fGkBzo96gBZ2+IPuRf6LXxjyFKLRqrhuwabw67549SkIFo9wDn3L5anblCBPWFP8BP9lVUaYj5YqaWH8myRqRKLnduJ2nSAEXL5TX7sRLBItJ4ScydUvzUe2TDntEoeSPS3iSf01NnzWJpNHGBO69TW25G0Mbryl5X2M0wdapi2eScr+l539apiG7u6n4qh9rDsLL6dID53YiydR.WQQf9a.oDC2HA

udalilprofile

@Straticah Hi, Is it true that you made an interface for nexus 5?

Straticah

@udalilprofile yess! :) - not in HISE tho ^^

udalilprofile

@Straticah Oh, you're cool! I'm studying and writing a short report on the vst industry. Can I ask you a few questions? It would help me learn more information.

Straticah

@udalilprofile sure dm me here or write an email with your questions :) to keep the thread clean.

udalilprofile

@Straticah

Tell me, how did you start collaborating with refx? How do you find an acquaintance or did you already have contacts with refx?

What tools do you use in your work? (Editors, scripts) Examples (refx)

Do you use GPT?

Plugins (development and design) - is it your job or a hobby? If it is a job, can you provide for yourself by creating a design for vst?

A direct question: how much will it cost to develop an interface (gui) for a project like Nexus 5 (You don't have to name the exact amount, but specify the currency and the number of zeros)

What can you wish for a beginner.

d.healey

@Straticah said in Round Corners for Floating Tiles? (FilterDisplay):

Is there a way to crop/cut the radius aswell

Your snippets not showing a UI here.

Straticah

@d-healey oh i see Content.makeFrontInterface(600, 600); was missing.

HiseSnippet 966.3ocuV0saaTDEdl3LAroE0JPb8pbUJJf7F65j.BUS7OfEjTSrok6Ji2YV6QY2Ybmc1jZUpTeIPhmDttuC7hvaP3L6t16tstkHKn4Bqb9NmyLememcnV4wihTZDt13Ey4H7sHiVHMy5LiJjnAcQ3OlbJMxv0NoPmrXNMJhyPXbkuyBfqtMJ4u+9AmPCnROdNDB8Hkvi+ihPgIGcX6ePDDzmx3iEgErtY6AdJYGUfJF3SERczbp2Ezo7ynVy1hf9dZzLD9yI0ueKN+vF9LFsQCVqVsN9niadrK0udS5D2VG27flGdvQG5iv6ziILJ8HC0viP3sOQwVLZl5JY5E7HQjXR.2J3hFA2bJbeU.yFhVTTmYh.1vkIpHDbJCySaURSaeJ4TASrBOO8cmDEN4dTLAh2pL8pThdtEoW8BzaMTBWfRamRo6RF4oEyM4Zr74iHCjP0zmB0ohTI0VD9UjNJv.o4KCoWv6qAgUNrWq5022A94deserzyHTRGk7Lkg+P4d2q1yqUs1Kp475p78WqN60nUAAb8ZUaaMzuKG2SFGNgq224RZPLekgP3WNmRd64zhkbuzntfgJ4.ov7v4b4aqQ.kkpf+6mGzkZn1BQFFX2bt1HrT.2keILFjVVpR5xitvnlmXa3bkzdB3Ovjn81KKZTIO.IX1Bl8Dg1ItF8r7gkwsWrR3k9suRvLyVA7peq8LtX5r7gNGc6IJMiqOmxDwQEG5JQiaYxZmSoQ+.E0HjSGKfLlkM6PFX3gEIBBsnnPV3mFqeFoqlNcJEx28EAPWTZXMY5xg7p6b8e966a8S.GaAzqu9kkQOvBCHMrvI4Z74jmWywY2UUjArc+JPjpg0EFs3oN89I2c22Zx.Ii+LP4W3lHBi2ApqdrReQDrggCJ7oAQ7Zu.cCRiyoZH9JjxJVfPu4XHr.PwhCnlxaEr6NyT.s0kFEsyaxHgYQwcq+msp3lRw6RFJLdyVOG2ZMbDZ9++fiYKXuMomuO2yjSvsI8+k2CaSqsbrsSr9RdumlU+J2lUhGmEGl1sa29fwP3bBUxpmkob9iuwosEvMC3W+qO4AI.GT9sTIqwqCzLG3Ns62ebOoczJM3qbiCd22ct+bUrcj+TJDbvbNABmQv.nGGR8RX7MIp1xNpmJW2JaozHdRTRvvz60YJcWlBrJcWp78xcDR8zpm3k9Zgsp9gIHPbKS9dhpvG1.xNtnjWPJ1HGBOY+DOuxG0a33AapiM1TGatoNd+M0wVapiGtoNdz+ti1un5aiMpvz8RHzoC6k9j.tvDA5evZbn9y

d.healey

@Straticah So it's basically the same thing I showed before, but you will use a paint routine in addition to laf.

HiseSnippet 1166.3ocuV0sbaSDEdkST.KZYZGX3ZM9JGFiGKG2j.Y5TW6XCdHI0DGZ4txlUqjVhzttqVmTSIyzGCtg2EdG3Eg2fvYkjsjZRJY7.0WX6yeq9Nm87cNZrTPnwwBIxv5j4SoHi6YNYNWEzO.y3nQ6iL9TyCwwJpzNUUu4SwwwTWjgwZeqVgQ00QIe96mzCGh4DZtJD54BFgd.Khox0Nt62yBCGhcomvhJ3cmtiHBdeQnXFfm0LaglhImg8oGg0tUwD8c33.jwWZ55zwwaWBd6cc5zlPZu6Ns+5cHTrmGcamGsSmc853gIsZiL1XfKSIjSTXEMFYrdOg67IAhK3oOfmyhYmFR0BNnIvSNU8PQnqNE0ZQ8CXgtiWTnhQvoLNursVZY6yMOj4xVpOu78fDC14QTr.ZToL7VqD7bJBuVEf2M.IiBPZ8TH8PyIDIapJ2hFOeh4HNbaBkGZInj5KpxeTwru.7fqZFgOiNTBBKin91sZ0vF9Zy8rrf6pXk84Xo8vPAVw39mvBoN1O1dwA3SU8EQSEbPndsQJZTs7.CwdEbkHoPI3.AAGdfPb1S4tCozv5f6kN7lwT00bBNI8wB+zTR8Y5l0gy3DESvqWyUhuXHKDz0CZl7khYb2ZMr8V3feCawo+xlVuwppNUv.l.4lX.O6YcY47TCV3dE3B2VNtzijDcojF1ig+oNVLCxEZ87GeomrJfEqOwjTrmFpw0005pVU80mQJ2nd5OwMuHfonZy9M0o4w5.ntGSIJL2OjVG2X4IVu1oBoKUdL1kMKt1lW2xD1uRqs4l6UEx5EvyVvORnnOiWOAlVWZY+tl77tQa5TWJBCoxazrl3KeeAVmOK5TprAT2CmQW5HzbWlwXd6LlhDZR5sUAGE7Qbl5YSo7ailixthg+8ii1GqvZZVlNvuoTohogfw9zyggbojtpl6SiOSIll3aVeAx3iTIVu+BJIlSCQLWMcbYSB504iBOo67kBu0q6ELWUvRE+4u0Mfx7CxGoZK6V75s3H0Rv3dprgUovnH0JAMaXpIoEABBMunPV5mlqeg49RruOFp2oLrzz5T+Eivqtwh3f9znbsWc0Uusr11YNukVcRs13Xy2XYaWa4MxH2ZeCHhkvx.kj8J6A+fSsFZWFAc8uFL9UNIhvv6PwEuPHOKF1ePACd3vXp0kn6PYbJP74pBkrhWPnqOjEFuKbmEhUkm4q2LlY.ZqKMnUOLkGyTyKt47+rEA2UH9PywLEI3lwXka.iPy++GXLa848MG.6tIpb.tt4ve5CvtRqEz19yjmSG7pr6uxsYkvwQyhR610SeLLfzoGl61JqRY+6O1tqVgSlhe9u9rmjnnc42Th6t06pnSthGzc3vSFv0Tqzjes6bx679q8oaf7ODCIGvyMgzYBP.ITnzyA5aRVUQS0Skaok0PZBMIKMM.16UYFcVTBzFcVX7CxyHBSjhWRR2VnuU+3DMPdySdawpvqsBx1NnjMHEajifWH6kDR4i5ZA1dUCbqUMvNqZfOZUCb6UMvcV0.28eOP86K+zYJQT5bID5vwCRWIXTfQf9GXJdKdO

Straticah

@d-healey maybe its not clear what i meant, i am sorry for making the effort but on my end it does not crop /mask the objects edges.

Other tools have something like this:

d.healey

@Straticah said in Round Corners for Floating Tiles? (FilterDisplay):

maybe its not clear what i meant, i am sorry for making the effort but on my end it does not crop /mask the objects edges.

Fill a rounded rectangle in the paint routine.

Straticah

@d-healey yeah the padding saves it there are a lot of applications where an actual cornered crop might be better.

like for images, shader panels, audio analyzers and everything that may exceed (or completely fill) its bounds - audio spectrum in your example might overlap the edge on high dB right?

It looks cropped but is not - for everything that is transparent or has lots of padding its not needed :)

The panel crops, but its not respecting rounded edges - maybe its intentional

CSS uses Overflow: hidden

tomekslesicki

@Straticah @d-healey it would be great to have an option to take the alpha mask from another component. This is just one use case, but I can think of a gazillion others.

d.healey

@Straticah said in Round Corners for Floating Tiles? (FilterDisplay):

might overlap the edge on high dB right?

Not if you make it smaller than the panel. The problem is as you say it's padding it rather than applying any kind of cropping or mask.

Darkmax204

@Straticah said in Round Corners for Floating Tiles? (FilterDisplay):

@Darkmax204 @d-healey i was wondering about this for a while, since i use panels for cropping sometimes.

Is there a way to crop/cut the radius aswell since panels when used as a container usually crop stuff to a box anyway like a mask would do.

@Straticah I actually encountered this problem, but in my case, I'm only using a filter with this type of coloring, so it only happened on the lower parts of the border. It's inconvenient, but it might look good if I go back to Photoshop and make only the lower edges square again. Would make a cool design choice, I think.

Round Corners for Floating Tiles? (FilterDisplay)

53

1.7k

11.7k

101.9k