How Can I Make Multiple Skins/Themes



  • How can I make multiple themes for my plugins? Many plugins come with multiple Skins/themes (eg Sylenth 3, Serum,Valhalla, Sonic Academy ANA etc).

    Thank you,
    TM



  • If you do it with images your plugin will be massive as all images are embedded in the plugin and loaded into RAM as uncompressed bitmaps. I recommend using panels, paint routines, and vectors.

    Peek 2020-09-02 00-47.gif



  • @d-healey But How? I have seen your Paint Routine

    . The above skin change example is way more advanced and not covered in the video.
    As a beginner I am facing problem every day. NO proper video tutorials are available on behalf of HISE. You are the only hope. You are the only one who makes Video tutorials.



  • HiseSnippet 1052.3ocsVssaaaDDcorXfESUQBP+.V3mn.TkoZkcKPQPjstjJzZGgnjTCDDDrhbE0BQtq.4pDKD3uk7czW6mSep+AsyvKhT0xoNBnjuv41NmY14BGGob4wwpHhQsWtdImX7UlSVK0y6MmIjjQ8IFes4ErXMOhlx570KYwwbOhgwAOCYXTqJI44ud54r.lzkWvhPdsR3x+UQnPWvcb2eQDDLj4weoHrj1c5NxUI6oBTq.7bfoCYIycAymeICUqhIw3AChgg6u4QKSPK7hQ7q71Uns9Zk4njRm95+ZQrXZ.GIZSl.GTJaRu4h.uw4wZLgXTcbQjePZj+MlWH7Da3WjAdTh.ZgEkyAFU1FRU2BRsuKHMTE3gGvc.OiRvqZJ7dr4D2HwRcgDDaOzbjDtblwfzdYXkpKoxeTwrmBzPpaExVvGFADarv9DGmlzNNNM9o5VPpOVSeOKhNlI4AsoOglaoOW2SEtTIAB6iREeDZS5msh45wPxR+B0JsPxsmsR5pEJosei5V0s9XcKJkd7wT+VyfK9yBBrSujia4whV3GwWiGFniOdTOKh4I.OMDz09MNWexImN3z9m1uYGmlscZ5b0fgcbv2lsOAX71LayNc.CRHy9BtqlI8C3vIzzoodtHFCieS3oma2XC8OyE9y01MdaSZ6jrf0MHhqageiuEYEHCLUct556NwrQiixsVHCf7AMOePwp6LcviHREX6laeSvKAq3MRxW0N93y77nqgjD0cUrVERCT9BW5bdDuUqV0stIwE+m.ASnYtpGKHXJzPYeaTf3sDHuTo4OWZ2v5iV0rtwh9uEMa1NkkcXA7ncJFa1i9bFZKWENkGkmHxUD5.1tE6g2uVL2zbSIEUxQRg94K4YzEMgnrznNWpCYSvVlUQLVlaRnsC0JXc6dbR1cG1smoNnpNoW+QY8542SDgG1pu4ZijjgJOmk7pQ8YZV9gAmK3qk7Hs.yXF84uGlCmNHolYed7BsZILRcSQCLZM000yGyfs1I98Pyz1bx0EN7ocWWPbU2OfsUDCSie2fPlmzSgT+IIIL23hCumQWgin5xN5Mc07q0HFggyReNcxBXD8T+7UF0dPXn7UnlBMOrfa2tc+TN2XLfP6nsgMQ2ZJKLqW4sJfo2dA.toKS.Txt0jVbZpLVnWWdS3WvVAmctUn8tpXtmv8wliEZ246FuU1Adgpl+uwa1N15lClMCFMW.1plCuZeWn9E.kzUS9WvzQBn7x7xUgSfpCWNVIAU2wX8ZErbMk1AowLyDtzKg3ugmLgsQZiLgsyERBYtQp24l1KiawOLgCfIYxOvTC9SJflto80zzokCID94h245hohuEv9ts461Ca998vlN6gMmrG1b5dXyOrG17ieVav+q6rUv10z1Dfw3AIiQMLFHYPUVREI4e.TkDIPD
    


  • @d-healey I was trying after watching your tutorials. But how can I change skin from
    Button or comboBox ?



  • How can I change skin?

    HiseSnippet 1327.3ocsW0raaaDDdosYPDSTQBPAb6MBeRFPQgz+jjhfhXKaqTiFmHDolFfD2fUjqn1ZxcEHWYKif.zS8TOzGh7HjS8ZdW54bpW5gzY3RQREqZ6HzJevZlYmc+luY1cF0NV5wRRjwDiJcOcHiXbcyNmJTC1Y.kKH6uaphi3BPVDvHMOcHMIg4SLLV7g3JLprDI8yGdPSZHU3wJTQHOSx8XOhGwUEZau02yCCaQ8Yc4QkV8FasumTriLTNBPyhlNjgTuinArGSwksfIw3J64yUx3NJphkPLVpoz+zNCjmHzq+Y7DduPFJ3R5.ajVcKYnOhXTKYmA7P+1Sh5DBrKsK3fE0bvWZd.2mmqufKtQpA6BOJyGFKbdvy8hgmyrfmQI3sjFd2zriWLenpvBhsqYtuPwh6S8lNMoWKYgqaZtiDVgP0HhdDqULHj6QsMcbpaugiyp2upEjFRT1GSisCo8ss+V68DAbAqgWLChrGFJ6QC065ijxi1V32hwBqgdBquQLKfm.aaqQBOEWJpsheL8jtxffPVyQJkTrR89Y1rqETW16mWsp0qqZYaae6aGzHgozEA0.KM5EnEvcGVPp4GFS84PbzBpip8BbUbEKRut5N0W2o9z5VCTt1g46PevsmJGI.V+oLOETWGxROKJDe0sc2r7YkAE8+RZzKDpIysiA11g7.AyuKarJcSTvWpaWrcq3AHMl4uxp225MUsPeOOdZGYTOYS43yiiru.R5+.V5BoIWmFNScbmCQMOL0EwSskCGM7.lXTS3bBhQb9uQYkR6aCTgy3cuqS5G7LdisNmTTy2lJXgtPU+jaKAXvEMTJ.gZqnMuhFeZAL7aCOQn.5RAWTpMAG0BV050VUJe1M2d80V2ccWz+JyHO47700fyAnXLI4L9ati1ETg6lGl44LSOuXCHIpFvSPP+ibe0fZqdq6kq46X7fAJPk6ZNGBU5Y4vJkSfNia0x8t3eYlP1FOA.amcyOyVCa6F5cERgV4IDo3wRE6IhZoDh0arr+TS86OSaXRHVFFxhmoYrER744XMwnndr35PpMbDKegvaoS+X80tbOV6oqIJsPoXeAW8jgrL4xcalD0Sr5PxC1xpJhwxZSCsYrrBUmsaAIqlE5arP1xgkpR6ZbirtFSdggv8wlFSDcIoLT4t2jOcK9hrsP+Ld5FTwTKbF2+vCH+v96RUTrGVFr.nNjEq3HgarK6XX3.cGsJl6xRNRIGBGU9cMhwU0Ga0I86vaaom5UM027HiKi2SKD9psNAKPIFlF+kAgLHs5Dk9UPpzadfGWY4kW9inOEpQsfhOlQB4345WRlr.U+9IaUfpeYqshniQTrHHgO+gSWomrBmwJEA.0XmNwk8tr9zQgJqcjCAVypCO7XVbSjjyisHR4X6qOSP7t28t+DO4IMHPcu+8u+2lNbSYgW9xe5u+z305Rj1KkAblNVKen850KkMyQ9yu.j+129G8mAJ61saJJ0jWUMQkgKxYmTBlWS5OJjpldHNbx0LCviESMsDNQjHgqNsbk7mwjcNW5AOurv8lls4JuAyFuKLC7hW9+eFuYyIW0bu98gVCEfcIyVOedGJ9y.J5FsAGPUwb7B0iGE0AJQ7X3kI3ggDrnZArXVK6fxHyzgI7SE9H7IynKJajYzchQRD0KV9JO8Sf3j3WMUCfIQ5OHoh4Anrc9KellP+TRD7CDdkmGRE2Bv9r8Ys4vm0mCe1XN7Yy4vm6LG9b24vm6ct9f+1rsGojQ5qIfh16k1AxvXOAEpxRqHI+CxURI8.
    


  • Skinchange.zip Here is my tiny interface. I created with the help of @d-healey Youtube Paint Routine video and HISE docs. Now show me how can I change it's skin?

    Thanks,
    TM



  • This should help you get started.

    HiseSnippet 1453.3ocsW0raaaDDdosYajZTQBPAROR3Sz.JJjRxNwonnxRxJ0nwIBQpoAvIMkhbE0VSsq.4pXYDXz9.zC8gHOB4Tul2kdt26gzY3RIRYKKaHzHdvdme14a+lY2c11gBWZTjHjnkq6oinDsap24TtbPiANLN4flwBNlwgwbeJo9oibhhndDMs0eDZgVtMHw+9muqtSfC2klJhPdtf4ReLaHSlJscsefEDzxwi1kMLi0Uqcfqf2PDHFCnYccKxHG2ic7oOwAMaMch1msuGSJB6HcjzHh1F0Edm1Yf3Dtx9myhX8Bn3.aRGXhThaIB7PDiRIMFvB7ZOcUGQfYocJGrthC9J8CYdrYxS4haEqvH0ir7g1ZKCd1Ygm00GdZYf2FJ3ca8NtgrQxTMH19B8C3RZXeG24SSJaIq4945MDfEbYogNGSaEBCl4g41VVEMpZYs02THOjFhjFuwIzHvougw2ZrO2mwokbCovJ6QAhdNApY8wBww6w8ZQoAlnmnOtwYPavMqWTwR8aNUkQUS1cmJkqXWwdt30PLrmntXB58Tv5Skf3QBNLvbyYVrIFO7CvXoPpOKBVJsFyckLA2bSuPmS5J78Cn0GKkB9lE6mnyvzunn2utUg7usPdCCi6cO+RQXLPrYBZJ0yWM.i.XPr5GE53w.DzBpcMOBshIoCU1UzpXEqhyKqLHr7qlMC8A2dlXLGxzOi5Jg8RAz3X4.bZQC6syFqDnn9STodAv9fY5wE1dALeN0qKchLdRjv+TzHc51zEPZH0C3n7mUHuhotbdZJmtLNx3JHo+GXoqjlrsJYMW3VBQsJL0UwSsEiFO5PJebcHN9gHNuLJKSZeOfJrlz79pcBXLNyPkSRq6a6voAWdQuRcREuZ.t7aCGKIA5RBaNMmhCS+sx+174xF656o1pg9maA4ojcr.+hYnjMo3H6seUhOKLwbTUH8IGvhP39SLO4.yst6ClI46oL+ARPjcYqWA03IYubYScVSZ0x993WhJjmwHXdj0Em7KL0vzVUMqmM83.FO.nCiYoE7JkjiLPxMTDX5NkYKBjevX5rxbinSXR2AFlSEixRTg+bchnF1OLUPrvEed2EM4Bm6k0jyEjxOz3RiBPYMZ8f5Uqrjnzp0tU1w1dukGkJObYAo4t32RCR0cvuDSNCyfIUmgzQXwY7kBmEmYtxiyUUEwYnFNAA8f8XlWL4gSX9LI2mHjzmxMiq4yeVdiyqpe+EpKY1BngKTM1YR3xbzjOdXOZ3zBnoFBWQOeO.5WdO.YaQwUQNYLTvOfyjOcDkeYcFPRXTnGg0RPEXpLtCgakzgvT1iv7vFDlQljXXms4Mx4mhuLYJTWeFOA4zUCVj6+3AMcjNX+JIvBf5HZnjgrfVS5afFAUcujSuIM5XoXDDpYUBDsanBago81f0QwQ8F5pZJxjrcVdZ5fut1I3wCyD7K+VsAwmOjJYRsL24.h+r6bm67QTSpXTJHHVJICtt40jQSQ2edRsTz860pMzAzoqsNLBu9A6nV0MM1WcLB.JxHtKailz9NiCjvtkQ.6kuCK3Mzv5HYO+Zr1QmeMR1s17Kl2+92+2n7oWTix9vG9veL+xNlMd4K+4+87q67WixfLYDq4WyYCZud8hY04WAjmekqf28t+p+BPa2tciQqhLKnHtD7QtX2xPO6BuwANx4ajGe8RhBXm8bcLicEyiXxSyVg+Io69qKbusda7hoEi20V.dwCE9Di2j2JUPe+98gKrSA6F5sdwm9GFQTM93eniLjgavdx3gcfRDWJt4BNv.O8UaMrnVM1BGiLSGJ2KdvGgeIJswwZIJsmpjLzwMT7ZW0Qi3qwtQrD.S73GklS+PbrwrSD00gtbHCgGI9ZWWjJtKf8E6S4UvmJqfOUWAe1dE7YmUvm6uB97fk5C9978FKECUaS.As2O9lIMs84NPUVbEI4+.lCzoW.
    


  • @iamlamprey Thankyou.... but the snippet is not opening. Snippetproblem.gif

    Thanks
    TM



  • @iamlamprey Can I get archive file? snippet is not opening.



  • @Tania-Mosh Weird, it works on my end. I'll post the code because I never ended up saving the archive.

    It just adds a switch statement and calls Panel1.repaint(); to re-colour the panel.

    Content.makeFrontInterface(500, 400);
    const var laf  = Engine.createGlobalScriptLookAndFeel();
    var colour1 = 0X30000000;
    var colour2 = 0x96323131;
    const var ComboBox1 = Content.getComponent("ComboBox1");
    
    
    laf.registerFunction("drawToggleButton",function (g,obj)
    {
       //g.setColour(obj.bgColour);
       g.setGradientFill([obj.itemColour,0,30,obj.itemColour2,0,2]);
       g.fillRoundedRectangle(obj.area, 15);
       g.setColour(Colours.black);
       g.drawAlignedText(obj.text, obj.area, "centred");
    }
    );
    
    laf.registerFunction("drawComboBox",function (g,obj)
    {
       // g.setColour(obj.bgColour);
        g.setGradientFill([obj.itemColour,0,30,obj.itemColour2,0,2]);
        g.fillRoundedRectangle(obj.area,10.0);
        g.setColour(Colours.black);
        g.drawAlignedText(obj.text, obj.area, "centred");
    });
    
    laf.registerFunction("drawPopupMenuBackground",function (g,obj)
    {
     
       g.fillAll(0xD7000000);
    } 
    );
    const var Panel1 = Content.getComponent("Panel1");
    
    Panel1.setPaintRoutine(function(g)
    {
    	g.fillAll(0xBA323131);
    	g.setGradientFill([colour1,10,30,colour2,10,15]);
    	g.fillRoundedRectangle([4,0,this.getWidth()-8,this.getHeight()-120], 10.0);
    	g.setColour(0xFF171717);
    	g.drawRect([0,0,this.getWidth(),this.getHeight()], 4.0);
    });
    
    
    inline function onComboBox1Control(component, value)
    {
        switch (value)
        {
            case 1:
                colour1 = 0X30000000;
                colour2 = 0x96323131;
                
            case 2: 
                colour1 = 0xFFCF8B43;
                colour2 = 0xFF93611A;
                
            case 3:
                colour1 = 0xFFD9D9D9;
                colour2 = 0xFF464646;
        };
    	Panel1.repaint();
    };
    
    Content.getComponent("ComboBox1").setControlCallback(onComboBox1Control);
    
    
    


  • The snippet opens for me. I don't use LAF for customizing my interface (at least I haven't yet) I use panels, including for combo boxes, I just make them transparent and draw the design I want on the panel. I thought I'd made a video about this but I can't find it so I guess I haven't got around to it yet.



  • @d-healey I just vibe with my png and knobman files 😞

    I enjoy when people ask questions here cause it's like little homework snippets for me to get better at HISE



  • @iamlamprey haha.. Don't worry I will keep asking you.

    Cheers !!



  • @iamlamprey Thank you so much. 🙂


Log in to reply
 

12
Online

955
Users

3.4k
Topics

28.9k
Posts