Help me make a better box combo box

Mighty23

I'm trying to improve the LAF of my combo box but at the moment I don't get a nice aesthetic

Mine:

how I would like it:

here is my code:

laf.registerFunction("drawComboBox", function(g, obj)
{
    // Draw the background with rounded corners
    g.setColour(obj.itemColour1);
    g.fillRoundedRectangle([obj.area[0] + 1, obj.area[1] + 1, obj.area[2] - 2, obj.area[3] - 2], 20.0);

    // Draw the border with rounded corners
    g.setColour(obj.itemColour2);
    g.drawRoundedRectangle(obj.area, 20.0, 2.0);

    // Draw the text with alpha depending on the enabled and active state
    g.setColour(Colours.withAlpha(obj.textColour, (obj.enabled && obj.active) ? 1.0 : 0.2));
    g.setFont("SimpleFont", 20.0);

    // Adjust the text area to accommodate the rounded corners
    var a = obj.area;
    g.drawAlignedText(obj.text, [a[0] + 10, a[1], a[2] - 20, a[3]], "left");

    // Draw the drop-down triangle
    g.setColour(obj.textColour);
    var h = a[3];
    g.fillTriangle([a[0] + a[2] - h / 3 - 10, a[1] + h / 3, h / 3, h / 3], Math.PI);
});

Straticah

@Mighty23 i would say reduce the corner radius from 20 to 5 or 10?

// Draw the background with rounded corners
    g.setColour(obj.itemColour1);
    g.fillRoundedRectangle([obj.area[0] + 1, obj.area[1] + 1, obj.area[2] - 2, obj.area[3] - 2], 5.0);

Mighty23

@Straticah Yes, of course this helps a lot, the combobox box remains very ungraded. The right and left ends are crushed and the corners are not so rounded.

d.healey

@Mighty23 you need to reduce the width and height by the stroke thickness

Straticah

@Mighty23 id use a panel and give that the border radius, plus it has a cleaner stroke outline

HiseSnippet 1138.3ocsV0uaZbDDeOvWjg1TkH0GfU7GQfJ4LfSSqZTULeXpP03fJtQUxxJZ4tEtM9tcOs2hsQUQpO.8+5KUeb5aP6L2GvQLIsB0bRvcy2+lYmc1chV4xiiUZhUkKVEwIVet8zURieeelPRFMfX8E1iYwFtllxp2pHVbL2iXYU9GPFVUNfj77WurGKfIc4aXQHuVIb4mIBElMbmbxOJBBFx73WHBKn8yNYjqR1WEnVB3orcKRDy8Z1B94LTsR1DqGbpmvnzSMLCOlXcPOk2po9pako5+ZQrXV.GIZSlBNJk8PUfGhXjKouuHvaRddGS.uLYSUnbZU3KsGK7Dq4uoZ7nDAzMVTrdXUZa3UdK30tH7ZU.d6.RVEfzAoP5w1Sc0hHyFIHd9L6QRXwYNCJ6EgRptjR+QY69JPCowIjcMenFHVaQ8m2pUSJ7WiWTsJT5iMzaXvB83dzumla1BtouJLRIAh50.Y01n8YcGVPSWMGx6yTtrfyTpq6J8Fx4A0Q0AEcz7EBrQZ3RoqQnj0q4oY2B9dlpm5tZMoyyErnIUM6sMp9qUqRgmiNhN.zjZ74TC+NC8VgwmxBh7YTOdDW5IjKnJYhBbICJwdTlD9At6FNMFWNR7zBmXLavFr5ouhcPm0E8UcHlNn+SkzjlvH2eO4IHlbRcYC5KoscZQ+NZKmNMfDbsyGpvpzTQXT.G+FRqNsbRJvYoRWu2tDJcqSFFT0nFE.VWUXnxCvZhPsZoD5ZotJsjqiSLGWcXPEOAIfc4AFKjcCDKjbuK.etNSZRujcYqqneEsMrPytr8U3+cth9T.U3mGeEvoV.etoVAHttZ6oUQO0C5eoFsfIWDb+x31EsrRAhSe.mX.xw3bXO+EYdodNrx.iO8H5wv6bTBRRX0bqW.TGyL9NSFAg4cHdgtQDJ2qkCZ2Z7h71Iny3bkg+JYcripR02Uk99hlOemxvFasJHfq2oXb5k9iYXc4xvYbnS5FVvR9ZEgszaOmv9COmn3XL2z8YETTIGIElWAaA9PC2HYaNwYJYnBT0jLQ4QYSTx2BRDvnCaannRR.bwQ6jedz.lgk6FviPTh3Zi.S.qA7af47oCppXOfGesQEkna1jCh0goA8g4iwXRdPRDOzN461j6fna8mP3Vge3Aebqvy3iD+NP3yEK7MHUGfRX3g4GUT4A4G2rgamhr2EP9HYeBPH4.grAHY0ieicRNXxqPiNACMTJpZeAO1LScWU3zKMDvhQNOSI2e7NbvhxaY.yr8oM3QrYBfVqsFwiiwkwByphqS+ucDz+UH9X6IBiq+twXocfQX03SAFyN39g1mNeN20rAfGXO7W9zbJM4mTKMvQOvPIs.6YNeY3Tn0ykCQWBKz3VaqR3lvT5V4sSSgyrRH9a3ISXaj1JSX6bgjPlqV8F2zst3UCNLgCfIYxshp.WOCnose+8rDRHbSk235tsqtmgc1WCOdeM7Y6qge89Z3y2WC+l80vu8e2P7hjcWZTgoaaHjwSNMYFqk0ooW5.6VI+CKmfN5C

Mighty23

@Straticah I would never have been able to find this solution alone, Wow. Using a panel is the most immediate, brilliant solution, thanks

Solved Help me make a better box combo box

22

1.8k

10.2k

89.3k