@David-Healey Basic is good! Nothing ever wrong with that. I'm also a designer so this is just more intuitive and fun (because why not fun? lol) for me and probably also for people alike. I've seen some pretty interesting knobs with some of the new plugin releases i've been seeing so I just hope this will help Hise users that dont have much coding experience make more and more unique styles faster and easier (which keeps it fun). The knobs i've shown in these examples take less than 5 minutes to make when i've taken hours to make one knob trying to figure out how things work. No more of that. 👍
I've already built a 6-State Button Designer that spits out LAF code and PNG filmstrips. Thats coming soon and it will be just as feature stacked!
Basic button Sample output:
FILMSTRIP>>
button_6_state_strip (7).png
LAF>>
const var MyButtonLaf = Content.createLocalLookAndFeel();
MyButtonLaf.registerFunction("drawToggleButton", function(g, obj)
{
var a = obj.area;
var cx = a[0] + a[2] * 0.5;
var cy = a[1] + a[3] * 0.5;
var stableSize = Math.min(a[2], a[3]);
var sw = stableSize / 200.0;
var stateIndex = 0;
if (!obj.enabled) stateIndex = 3;
else if (obj.value && obj.over) stateIndex = 5;
else if (obj.value) stateIndex = 4;
else if (obj.down) stateIndex = 2;
else if (obj.over) stateIndex = 1;
var widths = [133, 260, 260, 260, 260, 260];
var heights = [70, 70, 70, 70, 70, 70];
var radii = [14, 14, 14, 14, 14, 14];
var offXs = [0, 0, 0, 0, 0, 0];
var offYs = [0, 0, 0, 0, 0, 0];
var useGrad = [true, true, true, true, true, true];
var cTop = [0xff56565D, 0xff707078, 0xff202026, 0xff363636, 0xffD99A2B, 0xffF2BC55];
var cBot = [0xff25252B, 0xff34343C, 0xff0E0E12, 0xff1F1F1F, 0xff7C4B09, 0xff9C610F];
var cFlat = [0xff25252B, 0xff34343C, 0xff0E0E12, 0xff1F1F1F, 0xff7C4B09, 0xff9C610F];
var gradMid = [0.5, 0.5, 0.5, 0.5, 0.5, 0.5];
var outlineOn = [true, true, true, true, true, true];
var cOutline = [0xa6000000, 0xa6000000, 0xa6000000, 0xa6000000, 0xa6000000, 0xa6000000];
var outlineW = [2, 2, 2, 2, 2, 2];
var innerOn = [true, true, true, true, true, true];
var cInner = [0x1fFFFFFF, 0x1fFFFFFF, 0x1fFFFFFF, 0x1fFFFFFF, 0x1fFFFFFF, 0x1fFFFFFF];
var innerW = [1, 1, 1, 1, 1, 1];
var shadowOn = [true, true, true, true, true, true];
var cShadow = [0x73000000, 0x73000000, 0x73000000, 0x73000000, 0x73000000, 0x73000000];
var shadowR = [12, 12, 12, 12, 12, 12];
var shadowX = [0, 0, 0, 0, 0, 0];
var shadowY = [6, 6, 6, 6, 6, 6];
var texts = ["BUTTON", "BUTTON", "BUTTON", "BUTTON", "BUTTON", "BUTTON"];
var textSize = [18, 18, 18, 18, 18, 18];
var cText = [0xffFFFFFF, 0xffFFFFFF, 0xffFFFFFF, 0xff777777, 0xffFFFFFF, 0xffFFFFFF];
var textX = [0, 0, 0, 0, 0, 0];
var textY = [0, 0, 0, 0, 0, 0];
var bw = widths[stateIndex] * sw;
var bh = heights[stateIndex] * sw;
var br = radii[stateIndex] * sw;
var bx = cx - bw * 0.5 + offXs[stateIndex] * sw;
var by = cy - bh * 0.5 + offYs[stateIndex] * sw;
if (shadowOn[stateIndex])
g.drawDropShadow([bx + shadowX[stateIndex] * sw, by + shadowY[stateIndex] * sw, bw, bh], cShadow[stateIndex], shadowR[stateIndex] * sw);
if (useGrad[stateIndex])
{
var sh = bh * (gradMid[stateIndex] - 0.5);
g.setGradientFill([cTop[stateIndex], cx, by + sh, cBot[stateIndex], cx, by + bh + sh, false]);
}
else
g.setColour(cFlat[stateIndex]);
g.fillRoundedRectangle([bx, by, bw, bh], br);
if (innerOn[stateIndex])
{
g.setColour(cInner[stateIndex]);
g.drawRoundedRectangle([bx + 2 * sw, by + 2 * sw, bw - 4 * sw, bh - 4 * sw], Math.max(0, br - 2 * sw), innerW[stateIndex] * sw);
}
if (outlineOn[stateIndex])
{
g.setColour(cOutline[stateIndex]);
g.drawRoundedRectangle([bx, by, bw, bh], br, outlineW[stateIndex] * sw);
}
g.setFont("default", textSize[stateIndex] * sw);
g.setColour(cText[stateIndex]);
g.drawAlignedText(texts[stateIndex], [a[0] + textX[stateIndex] * sw, cy - textSize[stateIndex] * sw * 0.5 + textY[stateIndex] * sw, a[2], textSize[stateIndex] * sw + 4 * sw], "centred");
});
When I call this knob designer 'done' i'll move on to finishing this one.
🍻
