Example of themed GUI

d.healey

I've been trying out different GUI concepts with my project and settled on a minimalistic modern look, as I'm playing around with colour schemes I decided to add a theme system - basically a namespace with a bunch of colour constants. This is a quick demo of switching between two different colour schemes, I can of course extend this theme system to include layout and font variations but for this project I'm keeping them fixed and just changing the colours.

Every control is either a panel or a label. The settings/gear button in the top right which is a vector path from inkscape drawn on a panel. This allows me to fully customise the GUI from within HISE without having to mess around with exporting images, it also means the GUI should scale nicely to different monitor resolutions.

alt text

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:

alt text

/**
 * 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.

Example of themed GUI

8

1.8k

10.2k

89.1k