Example of themed GUI
-
SVG path from Inkscape, imported via the Projucer tool
-
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.
-
Is there a middlePosition setting for panels?
-
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 :)
-
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 :)
-
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; } }
-
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; } };
-
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.
-
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 :)
-
Hmmmm now you mention it, can HISE parse web links and open a browser?
-
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?
-
I was thinking it would be nice to include a link to my website somewhere on the GUI.
-
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.