Example of themed GUI

[Christoph Hart]

Nice. BTW, is the settings icon a imported SVG or a image? This would be a prime use case for importing vector graphics.

EDIT: Didn't saw your edit, which makes me look stupid :)

[d.healey]

SVG path from Inkscape, imported via the Projucer tool

[Christoph Hart]

Oh and I see your not scaling the attack / release sliders. I'd suggest setting the midpoint to 1000ms in order to make the adjustments more musical.

[d.healey]

Is there a middlePosition setting for panels?

[Christoph Hart]

Nope, just for Sliders (I thought it would be a Slider). For Panels, you'll need to implement this yourself. The formula for this is not entirely trivial, but IIRC it involves log and exp :)

[d.healey]

Oh I'm dumb, I forgot we could change the knob style, I implemented my own slider system with panels. Oh well, I'm going to change them to knob controls now :)

[d.healey]

And for a little fun here's a colour picker module:

/**
 * Title: colourPicker.js
 * Author: David Healey
 * Date: 07/09/2017
 * Modified: 07/09/2017
 * License: Public Domain
*/

Content.setHeight(175);

reg colour = [];
reg colourString;

const var alpha = Content.addKnob("Alpha", 0, 0);
alpha.setRange(0, 255, 1);
alpha.set("style", "Vertical");
alpha.set("itemColour", 0xFFAAAAAA);
alpha.set("bgColour", 0xFF000000);
const var red = Content.addKnob("Red", 150, 0);
red.setRange(0, 255, 1);
red.set("style", "Vertical");
red.set("itemColour", 0xFFFF0000);
red.set("bgColour", 0xFF000000);
const var green = Content.addKnob("Green", 300, 0);
green.setRange(0, 255, 1);
green.set("itemColour", 0xFF64FF4E);
green.set("bgColour", 0xFF000000);
green.set("style", "Vertical");
const var blue = Content.addKnob("Blue", 450, 0);
blue.setRange(0, 255, 1);
blue.set("style", "Vertical");
blue.set("itemColour", 0xFF1C00FF);
blue.set("bgColour", 0xFF000000);

const var code = Content.addLabel("code", 600, 10);
code.set("bgColour", 0xFF000000);

const var pnlColour = Content.addPanel("pnlColour", 0, 50);
pnlColour.set("width", 750);
pnlColour.set("height", 100);
pnlColour.setPaintRoutine(function(g){g.fillAll(parseInt(colourString));});

inline function convertToHex(v)
{
	reg hexTable = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
	reg d1 = hexTable[Math.floor(v/16)];
	reg d2 = hexTable[Math.floor(v % 16)];
	
	return d1 + d2;
}

inline function updateCode()
{
	code.set("text", "0x" + colour[0] + colour[1] + colour[2] + colour[3]);
	colourString = "0x" + colour[0] + colour[1] + colour[2] + colour[3];	
}function onNoteOn()
{
	
}
function onNoteOff()
{
	
}
function onController()
{
	
}
function onTimer()
{
	
}
function onControl(number, value)
{
	switch (number)
	{
		case alpha:
			colour[0] = convertToHex(parseInt(value));
			updateCode();
			pnlColour.repaintImmediately();
		break;
		
		case red:
			colour[1] = convertToHex(parseInt(value));
			updateCode();
			pnlColour.repaintImmediately();
		break;
		
		case green:
			colour[2] = convertToHex(parseInt(value));
			updateCode();
			pnlColour.repaintImmediately();
		break;
		
		case blue:
			colour[3] = convertToHex(parseInt(value));
			updateCode();
			pnlColour.repaintImmediately();
		break;		
	}
}

[Christoph Hart]

Nice - although there are a million websites which do the same thing :)

BTW, here are some conversion functions that might come in handy to convert between a normalised range and the full value (you can eg. use those in your vector knob):

/** Converts a normalized value to the given range.
*
*   - value:  the value from 0 to 1
*   - min:	  the low end of the range
*   - max:    the upper end of the range
*   - skew:   changes the scale 
*       1 = linear, 
*      <1 = high extended
*      >1 = low extended
*/
namespace NormalisedRange
{
	inline function from0to1(value, min, max, skew)
	{
		local v = Math.pow(value, skew);
		v = min + v * (max-min);
		return v;
	}

	inline function to0to1(value, min, max, skew)
	{
		local v = value / (max-min) - min;
		v = Math.pow(v, 1.0/skew);
		return v;
	}
};

[d.healey]

Nice - although there are a million websites which do the same thing :)

Yeah but that means opening another window :) which is what I was doing previously. There's no fun in that.

Thanks, I've been using a similar conversion function but yours is far more elegant.

[Christoph Hart]

Lol, I thought about adding a web browser as floating tile for stuff like this but then I discovered that there's a name for this software development approach :)

[d.healey]

Hmmmm now you mention it, can HISE parse web links and open a browser?

[Christoph Hart]

There's a JUCE method that opens a URL in the OS' default browser, and I could add a wrapper for this. For what purpose would you need this?

[d.healey]

I was thinking it would be nice to include a link to my website somewhere on the GUI.

[Christoph Hart]

I also had this idea in mind (that's precisely what the company URL field in the User Settings dialogue is for). I think the best way for this is adding an About page floating tile, which also shows the registered e-mail address of the user along with some other useful information.