Sup guys!

Inspired by a huge project that needs a bunch on different knobs, I created an online knob editor that is specific to HISE users. My app lets you design a knob online and export a fully written LAF function.

I've provided 4 Presets to get you started.
At the bottom, you can 'Save' your project and 'Load' previous works at a later time.

With all these options you can make some pretty cool looking knobs!
(not showing: Value Text, Component Label, Pointer Dual, Pointer)
Easily activate/deactivate and drag to re-order the layers to achieve different visual effects.

All knobs are fully scalable within HISE.

Fully written LAF function. Just click Export code. There is a convenient 'Copy' button as well. Simply paste the script into your code editor and apply to your knobs.

Easy screenshot button to save an image of your knob for future reference or to send to a client for review.

Full List of editable paramters/elements:

ROX KNOB DESIGNER — LAYERS & PARAMETERS

DROP SHADOWS
- Highlight: Y center, width, height, glow, alpha, colour
- Shadow: Y center, width, height, glow, alpha, colour

SKIRT (outer ring under the knob)
- Radius, Offset X/Y
- Gradient toggle, Top colour, Bottom colour, Gradient midpoint
- Flat colour (when gradient off)
- Outline toggle, colour, alpha, width
- Highlight arc toggle, colour, alpha, width, distance
- Hover Tint toggle, colour, alpha

ARC TRACK (background ring behind the value arc)
- Thickness, Distance from center, Offset Y
- Background colour + alpha
- Outer ring colour + alpha + extra width
- Outer gradient toggle, top/bottom colour, midpoint
- End cap (flat / round)

ARC VALUE BASIC (the main value arc)
- Thickness, Distance, Offset Y
- Colour
- End cap (flat / round)
- Glow toggle, colour, size, alpha
- Gradient (thermometer) toggle, low colour, high colour

ARC VALUE PAN (centered, sweeps both ways from 12 o'clock)
- Thickness, Distance, Offset Y, Colour, End cap
- Glow toggle, colour, size, alpha

ARC VALUE FILTER (LPF/HPF style)
- Thickness, Distance, Offset Y, Colour, End cap
- LPF mode toggle (reverses direction)
- Glow toggle, colour, size, alpha
- Gradient toggle, low/high colour

ARC VALUE WIDTH (centered spreader)
- Thickness, Distance, Offset Y, Colour
- Reveal colour (fades in as value increases)
- End cap

BODY 1 / BODY 2 / BODY 3 (stacked knob bodies)
- Radius, Offset X/Y
- Gradient toggle, top colour, bottom colour, midpoint
- Flat colour
- Outline toggle, colour, alpha, width
- Highlight arc toggle, colour, alpha, width, distance
- Hover Tint toggle, colour, alpha

CAP (top circle of the knob)
- Radius, Offset X/Y
- Gradient toggle, top/bottom colour, midpoint
- Flat colour
- Outline toggle, colour, alpha, width
- Drop shadow alpha, colour, Y offset
- Inner ring toggle, ratio, alpha, colour, width
- Hover Tint toggle, colour, alpha

HASHMARKS OUTSIDE (ticks around the outer edge)
- Major count, start distance, end distance, thickness, colour, alpha
- Minor per gap, start, end, thickness, colour, alpha
- Round caps toggle
- Offset Y

HASHMARKS ON BODY (ticks on the knob body)
- Count, start, end, thickness, colour, alpha
- Round caps toggle
- Full circle toggle (full 360 vs arc-only)
- Rotate with cap toggle (spins with value)
- Offset Y

LABELS (text around the knob)
- Names (comma separated)
- Radius, Size, Colour, Alpha
- Offset X/Y

POINTER (the value indicator)
- Style (line / rect / circle / triangle)
- Start, End, Thickness, Width, Rounding, Offset Y
- Colour
- Outline toggle, colour, width
- Hover Tint toggle, hover colour, hover alpha

STATIC POINTER (a fixed indicator at a chosen angle)
- Style (line / rect / circle / triangle)
- Angle, Start, End, Thickness, Width, Rounding, Offset Y
- Colour, Outline toggle, outline colour, width

POINTER DUAL WIDTH (spreads outward as value increases)
- Start, End, Width, Thickness, Rounding, Offset Y
- Colour

CENTER DOT
- Radius, Offset X/Y
- Gradient toggle, top/bottom colour, midpoint
- Flat colour, alpha
- Outline toggle, gradient toggle, colour(s), alpha, width
- Hover Tint toggle, colour, alpha

CENTER RING
- Radius, Offset X/Y, Thickness
- Gradient toggle, top/bottom colour, midpoint
- Solid colour, alpha

GLOW DOT (small dot that follows the value)
- Radius, Distance, Colour, Alpha
- Halo size, halo alpha
- Follows value toggle

COMPONENT LABEL (text label like "GAIN")
- Text, Placement (top/bottom)
- Offset X/Y, Size, Colour, Alpha
- Font (9 cross-platform fonts)

VALUE TEXT (live numeric readout)
- Offset X/Y, Size, Colour, Alpha
- Decimals, Suffix
- Font (9 cross-platform fonts)

GLOBAL
- LAF Name (used for variable name + downloaded filename)
- Canvas BG colour
- Padding (resize margin)
- Max width
- 4 starter presets: ArcValue, HashValue, AnalogGain, BasicStarter
- Save / Load project (.knob.json)
- Snapshot to PNG
- Export Code / Copy / Wrap in Namespace toggle
- Reset to defaults
- Drag-to-reorder layer list with show/hide toggles

There are a ton of options ready to edit!

Im currently trying to find a place to host this app but I want to release this beta version for you guys to start testing.

Im open to suggestions! This is for us!

Here's the link!:
https://rox-knob-builder-for-hise.netlify.app/

Enjoy!

All Feedback is welcomed and appreciated!

Here are a few extra examples of what it can do:
Very basic examples to show different elements available.

Good Morning! I agree. Here's something I've been doing. Aside from working on my personal plugins, I've been wanting to show my appreciation to the community by designing a set of 3d assets / filmstrips that people can use on their projects.

There are quite a few regulars in here that always get me going when im stuck. I Love it here!

This is just a mockup of one of the kits im working on. All of these assets should be available for anyone to use soon. Dont quote me on "soon". Im sure everyone in here has 10 things going at once lol.

Im still messing around with the faceplate so the actual release might not be exact.

Much Love to the community!
Special Thanks to @Christoph-Hart
and honorable mention to Mr. @d-healey who got me going on all this in the first place!
Im soaking it all in!

Just thought I'd hop on and wish everyone a great day! If you see this, I hope you're doing great!

COMING SOON!

Rox Designer Suite!

Knob Designer (Rotary Knobs & Meters)
Slider Designer (Linear Sliders & Meters including LED modes)
Button Designer (2 or 6 State modes)
Panel Designer [Beta](Shapes, lines, gradients, text etc)

All apps put out HISE code or PNG snapshots/filmstrip animations.
Every app also has its own "Community Presets" library which will expand over time.
Components can either be designed styled independently or together using the global 'Colour Theme' token which can be further customized and saved as a custom user colour theme.

I've taken all of the advice i've received from everyone using the KnobBuilder app and implemented them accordingly across all 4 apps.

The PanelDesigner app will come pre-loaded with curated presets for shapes/styles to get you started on formatting a layout quickly.

Easily handles complex vector designs, custom images (jpgs/pngs), and SVG's.
SVG usage is a one-time-auto-parse function in every app (HISE ready code-gen).

There is a lot more to say about each app which I will include in the official release announcement for sure. Just wanted to tease the new drop and say Thank You to everyone that has been using the app and giving me positive feedback on this post and via pm's.

The KnobBuilder app has been maintaining about 70-80 unique visitors weekly so Im sure some people are getting great usage out of it so far and will love these new apps/suite just as much!

Thank You to everyone using the app!

'Rox Designer Suite' coming soon!

Switching between the 4 apps...

Yo! Blessed day!

Im proud to announce that I've launched 'Rox Designer Suite' which is a 5-in-1 app suite geared towards GUI design/ers. If you've been enjoying the 'Knob Builder' app I released a demo of, you can be assure to find the same features and more throughout each component designer. This is a standalone Mac OS app only right now because im working on getting my windows developer account still. This app is signed and notarized. This is the culmination of months of work and research to make it as easy and FUN as possible to design vector based components.

5 apps in 1

Design in 4 apps at once and unite component styles with optional global parameters.

Knob Designer, Slider Designer, Button Designer and Panel Designer:
!

Export as , HISE code, Javascript, PNG snapshots, PNG filmstrips, theme colour codes, a RDS project file to share/archive, and a 'Package' export feature that includes all of the above.

The website is live now although im still working on some visual aspects.
You can hit the website now for a free trial version. The export features are gated behind a 'Pro License'.

I wanted to offer a discount code to the HISE community for showing me support in making my first app so you can all get it at an introductory price. I decided (after much debate) to go with the one-time purchase model and offer free updates for life.

I want to stay up to date with current design methods so I will always be adding and updating features to the Designer Suite app which users will get for free with a pro license.

If anyone is interested....
Heres the link to the website!:

roxdesignersuite.com

Click the 'FREE TRIAL' button on the home page to download the app.

If you decide to purchase PRO license:
ENTER DISCOUNT CODE: FOUNDERS100

The code is good for the first 100 users!

Thank you for all the support!

• ROX

Join the DISCORD server for latest updates and keep in touch about feature requests and questions.

DISCORD SERVER: https://discord.gg/hRxKWEkHD

Freebie for the community.

Here's the script:

namespace LafRealKeyboard
{
	const var FloatingTile1 = Content.getComponent("FloatingTile1");
	const var Laf_RealKeys = Content.createLocalLookAndFeel();
	
	//! DRAW WHITE NOTE
	Laf_RealKeys.registerFunction("drawWhiteNote", function(g,obj)
	{
		var a = obj.area;
		var WhiteUp = Laf_RealKeys.loadImage("{PROJECT_FOLDER}WHITE KEY - UP 11.png", "WHITE KEY - UP 11.png");
		var WhiteDown = Laf_RealKeys.loadImage("{PROJECT_FOLDER}WHITE KEY - DOWN 11.png", "WHITE KEY - DOWN 11.png");
		
		if (obj.down)
		{
			g.drawImage("WHITE KEY - DOWN 11.png", a, 0, 0);
			g.setColour(Colours.red);			
		}
		if (!obj.down)
		{
			g.drawImage("WHITE KEY - UP 11.png", a, 0, 0);	
		}	
	});
	Content.getComponent("FloatingTile1").setLocalLookAndFeel(Laf_RealKeys);
	
	//! DRAW BLACK NOTE
	Laf_RealKeys.registerFunction("drawBlackNote", function(g,obj)
	{
		var a = obj.area;
		var BlackUp = Laf_RealKeys.loadImage("{PROJECT_FOLDER}BLACK KEY - UP 11.png", "BLACK KEY - UP 11.png");
		var BlackDown = Laf_RealKeys.loadImage("{PROJECT_FOLDER}BLACK KEY - DOWN 11.png", "BLACK KEY - DOWN 11.png");
		
		if (!obj.down)
		{
			g.drawImage("BLACK KEY - UP 11.png", a ,0, 0);	
		}
		if (obj.down)
		{	
			g.drawImage("BLACK KEY - DOWN 11.png", [a[0], a[1], a[2], a[3] + 10] ,0, 0);
		}
	});
	Content.getComponent("FloatingTile1").setLocalLookAndFeel(Laf_RealKeys);
}

Download these images and add them to your projects 'Images' folder. F5. Enjoy.
FILES---> CUSTOM KEYBOARD IMAGES

I've been struggling with this one for a while and finally got a solid working script! I just wanted to share with the community an easy working template.

Functions:
Save
Delete
Rename
Back
Next
Random
Combobox presets with custom name save

Hope this helps someone down the line!

const var PresetList = Content.getComponent("PresetList"); 
const var PresetNameToSave = Content.getComponent("PresetNameToSave");    
const var SaveOk = Content.getComponent("SaveOk");
const var TableEnvelope1Pro = Synth.getTableProcessor("Table Envelope1");

// File path for saving/loading
const var presetFile = FileSystem.getFolder(FileSystem.Desktop).getChildFile("myFile.json");

// Declare object to hold presets
var AttackTablePresets = {};
var lastRandomPresetName = "";

//------------------------ LOAD existing presets on init ------------------------//

if (presetFile.isFile())
{
	AttackTablePresets = presetFile.loadAsObject();

	// Manually extract keys
	var keyList = [];
	for (k in AttackTablePresets)
		keyList.push(k);

	PresetList.set("items", keyList.join("\n"));
}


//------------------------ SAVE PRESET ------------------------//

inline function onSaveOkControl(component, value)
{		
	if (!value)
		return;

	local presetNameNOW = PresetNameToSave.get("text").trim();
	if (presetNameNOW == "")
		return;

	local tableData0 = TableEnvelope1Pro.exportAsBase64(0);

	// Add to object
	AttackTablePresets[presetNameNOW] = tableData0;

	// Save to file
	presetFile.writeObject(AttackTablePresets);

	// Update ComboBox
	local keyList = [];
	for (k in AttackTablePresets)
		keyList.push(k);

	PresetList.set("items", keyList.join("\n"));
	PresetList.setValue(keyList.indexOf(presetNameNOW) + 1);
	PresetNameToSave.set("text", "(Enter Preset Name)");
};

SaveOk.setControlCallback(onSaveOkControl);

//--------------------------COMBOBOX RESTORE TABLE CONTROLS --------------------------//
inline function onPresetListControl(component, value)
{
    if (value <= 0)
        return;

    // Get the selected preset name from the ComboBox using the selected index
    local selectedPresetName = PresetList.getItemText();

    // Look up the table data in the preset object
    local presetData = AttackTablePresets[selectedPresetName];

    // Restore the table if data exists
    if (presetData)
        TableEnvelope1Pro.restoreFromBase64(0, presetData);
};
PresetList.setControlCallback(onPresetListControl);

// ---------------------------DELETE CURRENT PRESET CONTROLS -------------------------------//
const var DeletePresetButton = Content.getComponent("DeletePresetButton");

inline function onDeletePresetButtonControl(component, value)
{
    if (!value)
        return;

    local selectedIndex = PresetList.getValue();
    if (selectedIndex <= 0)
        return;

    // Get preset name
    reg presetNameToDelete = PresetList.getItemText();

    if (!isDefined(AttackTablePresets[presetNameToDelete]))
        return;

    Engine.showYesNoWindow("Delete Preset",
        "Are you sure you want to delete \"" + presetNameToDelete + "\"?",
        function(result) // nested callback
        {
            if (result)  // IF 'YES' 
            {
                var newPresets = {};
                for (k in AttackTablePresets)
                {
                    if (k != presetNameToDelete) 
                        newPresets[k] = AttackTablePresets[k];
                }

                AttackTablePresets = newPresets;

                presetFile.writeObject(AttackTablePresets);

                var keyList = [];
                for (k in AttackTablePresets)
                    keyList.push(k);

                PresetList.set("items", keyList.join("\n"));
                PresetList.setValue(PresetList.getValue() - 1); // Clear selection
            }
        });
};

DeletePresetButton.setControlCallback(onDeletePresetButtonControl);

//------------------------------------RANDOMIZER BUTTON CONTROLS ------------------------//
const var RandomizePresetButton = Content.getComponent("RandomizePresetButton");

inline function onRandomizePresetButtonControl(component, value)
{
	if (!value)
		return;

	// Collect preset names
	local presetNames = [];
	for (k in AttackTablePresets)
		presetNames.push(k);

	local total = presetNames.length;
	if (total == 0)
		return;

	local randomPresetName = "";
	local tries = 10; // safety cap to avoid infinite loop

	while (tries > 0)
	{
		local i = Math.floor(Math.random() * total);
		randomPresetName = presetNames[i];

		// Stop if the new name is different, or only one preset exists
		if (randomPresetName != lastRandomPresetName || total == 1)
			break;

		tries--;
	}

	// Find index of selected name in ComboBox
	local comboIndex = 0;
	for (i = 0; i < presetNames.length; i++)
	{
		if (presetNames[i] == randomPresetName)
		{
			comboIndex = i + 1;
			break;
		}
	}

	if (comboIndex > 0)
		PresetList.setValue(comboIndex);

	// Load the new preset
	local presetData = AttackTablePresets[randomPresetName];
	if (presetData)
		TableEnvelope1Pro.restoreFromBase64(0, presetData);

	// Store the name to avoid repetition next time
	lastRandomPresetName = randomPresetName;
};

RandomizePresetButton.setControlCallback(onRandomizePresetButtonControl);


//--------------------------BACK BUTTON CONTROLS -------------
const var BackPresetButton = Content.getComponent("BackPresetButton");

inline function onBackPresetButtonControl(component, value)
{
	if (!value)
		return;

	local currentIndex = PresetList.getValue();
	local totalItems = 0;

	for (k in AttackTablePresets)
		totalItems++;

	// Wrap to last if we're at the first
	if (currentIndex <= 1)
		currentIndex = totalItems + 1;

	local newIndex = currentIndex - 1;
	PresetList.setValue(newIndex);

	local presetName = PresetList.getItemText();
	local presetData = AttackTablePresets[presetName];

	if (presetData)
		TableEnvelope1Pro.restoreFromBase64(0, presetData);
};
BackPresetButton.setControlCallback(onBackPresetButtonControl);


//-------------------------------NEXT BUTTON CONTROLS ---------------

const var NextPresetButton = Content.getComponent("NextPresetButton");

inline function onNextPresetButtonControl(component, value)
{
	if (!value)
		return;

	local currentIndex = PresetList.getValue();
	local totalItems = 0;

	for (k in AttackTablePresets)
		totalItems++;

	// Wrap to first if we're at the last
	if (currentIndex >= totalItems)
		currentIndex = 0;

	local newIndex = currentIndex + 1;
	PresetList.setValue(newIndex);

	local presetName = PresetList.getItemText();
	local presetData = AttackTablePresets[presetName];

	if (presetData)
		TableEnvelope1Pro.restoreFromBase64(0, presetData);
};
NextPresetButton.setControlCallback(onNextPresetButtonControl);

// -------------------------RENAME PRESET BUTTON CONTROLS-----------------------
const var RenamePresetButton = Content.getComponent("RenamePresetButton");

inline function onRenamePresetButtonControl(component, value)
{
	if (!value)
		return;

	local selectedIndex = PresetList.getValue();
	if (selectedIndex <= 0)
		return;

	local oldName = PresetList.getItemText();
	local newName = PresetNameToSave.get("text").trim();

	if (newName == "" || newName == oldName)
		return;

	// If new name already exists, do nothing (or optionally warn)
	if (isDefined(AttackTablePresets[newName]))
	{
		Console.print("A preset with that name already exists.");
		return;
	}

	// Copy data to new name
	AttackTablePresets[newName] = AttackTablePresets[oldName];

	// Rebuild the object without the old key
	local newPresets = {};
	for (k in AttackTablePresets)
	{
		if (k != oldName)
			newPresets[k] = AttackTablePresets[k];
	}

	AttackTablePresets = newPresets;

	// Save updated object to file
	presetFile.writeObject(AttackTablePresets);

	// Update ComboBox
	local keyList = [];
	for (k in AttackTablePresets)
		keyList.push(k);

	PresetList.set("items", keyList.join("\n"));

	// Select the renamed preset
	PresetList.setValue(keyList.indexOf(newName) + 1);
};
RenamePresetButton.setControlCallback(onRenamePresetButtonControl);

I had the help of @d-healey and @Lindon with making this and a few extra helps from gpt.

Bless!

• ROX

PS> if anybody wants to make improvements and toss it back, have at it! Together we can make the ULtimate Table preset menu. haha.

@rglides SAMPLE:

*HISE Logo for fun. Dont sue me. lol

Ok just sharing my first 3d Knob that I made! This is gonna be fun.

@lalalandsynth how do you get your shadows to show up in the animation? I can seem to get mine to show up on the transparent areas.

@ustk The man is too good! @lalalandsynth

@udalilprofile Glad we got that working!

@Lindon There are file-handling features that cant be done in a web-browser so Im switching to stand-alone.

@Lindon I apologize. I assure you its worth it once you get in and you wont have to login every time so I think its fair exchange. Hope you're having a great day brotha!

@dannytaurus Thank You! I realize the choice i've made is a big one but I really do enjoy it so I guess I'll have to put up with all the pains that are coming my way including getting bashed for rookie mistakes. haha

@HISEnberg Thanks! JUCE, Yeah I've already considered that, may have already started on that =)

@ustk @Lindon It was some weird supabase/resend backend stuff that was getting snuffed. I got it all fixed as far as i've tested. You should be able to log in with the email you signed up with, and if you need to reset your password that should be working fine now as well. Thanks guys for being patient. This is my first time doing this back end stuff.

@udalilprofile There was a bottleneck with supabase email verification. Try again please. Also, if you join the Discord server you can hit me up there about anything regarding the app so we dont flood this thread. Thanks!

For everyone using the Knob app, I just pushed a new update. This is the latest version that is included in the new 'Designer Suite' app that has all of the other component designer apps.

Heres the link to the updated Knob-Builder:
https://rox-knob-builder-for-hise.netlify.app/

Link to the Full Rox Designer Suite:
http://roxdesignersuite.com

Yo! Blessed day!

Im proud to announce that I've launched 'Rox Designer Suite' which is a 5-in-1 app suite geared towards GUI design/ers. If you've been enjoying the 'Knob Builder' app I released a demo of, you can be assure to find the same features and more throughout each component designer. This is a standalone Mac OS app only right now because im working on getting my windows developer account still. This app is signed and notarized. This is the culmination of months of work and research to make it as easy and FUN as possible to design vector based components.

5 apps in 1

Design in 4 apps at once and unite component styles with optional global parameters.

Knob Designer, Slider Designer, Button Designer and Panel Designer:
!

Export as , HISE code, Javascript, PNG snapshots, PNG filmstrips, theme colour codes, a RDS project file to share/archive, and a 'Package' export feature that includes all of the above.

The website is live now although im still working on some visual aspects.
You can hit the website now for a free trial version. The export features are gated behind a 'Pro License'.

I wanted to offer a discount code to the HISE community for showing me support in making my first app so you can all get it at an introductory price. I decided (after much debate) to go with the one-time purchase model and offer free updates for life.

I want to stay up to date with current design methods so I will always be adding and updating features to the Designer Suite app which users will get for free with a pro license.

If anyone is interested....
Heres the link to the website!:

roxdesignersuite.com

Click the 'FREE TRIAL' button on the home page to download the app.

If you decide to purchase PRO license:
ENTER DISCOUNT CODE: FOUNDERS100

The code is good for the first 100 users!

Thank you for all the support!

• ROX

Join the DISCORD server for latest updates and keep in touch about feature requests and questions.

DISCORD SERVER: https://discord.gg/hRxKWEkHD