How Can I Make Multiple Skins/Themes

[d.healey]

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.

[A Former User]

@d-healey But How? I have seen your Paint Routine YT Video. 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.

[A Former User]

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

[A Former User]

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

[A Former User]

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.

[A Former User]

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

[A Former User]

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.

[A Former User]

@iamlamprey Thankyou.... but the snippet is not opening.

Thanks
TM

[A Former User]

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

[A Former User]

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

[d.healey]

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.

[A Former User]

@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

[A Former User]

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

Cheers !!

[A Former User]

@iamlamprey Thank you so much. :)

[Sawer]

@iamlamprey
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?

[d.healey]

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

[Sawer]

@d-healey Just One

[d.healey]

@nesta99 Are you using git to manage versions?

[Sawer]

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

[d.healey]

@nesta99

GitHub - christophhart/HISE at scriptnode

The open source framework for sample based instruments - GitHub - christophhart/HISE at scriptnode

GitHub (github.com)