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



  • @iamlamprey Screen Shot 2021-02-09 at 17.08.48.png
    Hi! Strange man but Hise on my mac doesnt see the ".createGlobalScriptLookAndFeel()" function , it is not in the api. But my version of Hise is the current so I dont know why there are some mismatches...Can someone help me out?



  • @nesta99 How many copies of the HISE source code do you have on your system?



  • @d-healey Just One



  • @nesta99 Are you using git to manage versions?



  • @d-healey no to be honest, just went there before to look for some updates but nothing... maybe I'm looking at the wrong place... can you send me the link kindly?


Log in to reply
 

18
Online

1.1k
Users

3.8k
Topics

33.4k
Posts