HISE Logo Forum
    • Categories
    • Register
    • Login

    Help me make a better box combo box

    Scheduled Pinned Locked Moved Solved General Questions
    6 Posts 3 Posters 222 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      Mighty23
      last edited by Mighty23

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

      Mine:
      bc4e0920-bbee-4cb6-8ec4-8250cde6fa64-image.png

      how I would like it:
      35eea9b6-136b-4313-85e7-9e5fb77670eb-image.png

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

      Free Party, Free Tekno & Free Software too

      StraticahS 1 Reply Last reply Reply Quote 0
      • StraticahS
        Straticah @Mighty23
        last edited by

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

        building user interfaces in HISE :)
        web: www.vst-design.com

        M 1 Reply Last reply Reply Quote 0
        • M
          Mighty23 @Straticah
          last edited by

          @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.

          Free Party, Free Tekno & Free Software too

          d.healeyD StraticahS 2 Replies Last reply Reply Quote 0
          • d.healeyD
            d.healey @Mighty23
            last edited by

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

            Libre Wave - Freedom respecting instruments and effects
            My Patreon - HISE tutorials
            YouTube Channel - Public HISE tutorials

            1 Reply Last reply Reply Quote 1
            • StraticahS
              Straticah @Mighty23
              last edited by 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
              

              building user interfaces in HISE :)
              web: www.vst-design.com

              M 1 Reply Last reply Reply Quote 1
              • M
                Mighty23 @Straticah
                last edited by

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

                Free Party, Free Tekno & Free Software too

                1 Reply Last reply Reply Quote 1
                • M Mighty23 marked this topic as a question on
                • M Mighty23 has marked this topic as solved on
                • First post
                  Last post

                28

                Online

                1.7k

                Users

                11.8k

                Topics

                103.1k

                Posts