UI future ?

[Win Conway]

I posted this in feature requests by the way.
The forum is still terrible ;)

[Win Conway]

Any thoughts on this ?

[Christoph Hart]

Yes, you can already use some vectorized interface elements (sliders / tables / sliderpacks) and even define your own widgets and draw on them directly (the Panel).

What's currently missing is the ability to use relative positions however it should handle retina displays and double the resolution automatically.

[Win Conway]

So we can create our own vector UI ?

[Christoph Hart]

It depends on what you are trying to do. The basics are there. If you'd give me an example of a UI I could tell you if it's possible (or what needs to be done to make it possible).

[d.healey]

Does HISE support the use of SVG files for controls?

[Christoph Hart]

JUCE can import SVGs and render them as monochromatic path (the icons in HISE are drawn this way). I could add a scripting wrapper for this (you can already define paths and adding a import function shouldn't be hard.

[d.healey]

Would it be limited to monochromatic images only?

[Christoph Hart]

Yes, think of it as shapes that can be filled with one colour. You can combine of course different SVGs with multiple colours. Can you give me an example UI that you would like to create?

[Christoph Hart]

I just realized it's already there :)

const var path = Content.createPath();
const var svg_data = [110, 109, 75, 83, 99, 67, 135, 164, 114, 68, 98, 74, 215, 93, 67, 213, 143, 114, 68, 238, 59, 88, 67, 14, 224, 114, 68, 75, 43, 83, 67, 135, 160, 115, 68, 98, 165, 80, 70, 67, 253, 136, 117, 68, 132, 197, 65, 67, 16, 150, 121, 68, 75, 67, 72, 67, 135, 226, 124, 68, 108, 75, 3, 72, 67, 136, 236, 124, 68, 108, 75, 51, 73, 67,
		136, 100, 125, 68, 108, 75, 155, 73, 67, 135, 142, 125, 68, 108, 75, 187, 74, 67, 136, 8, 126, 68, 108, 75, 251, 74, 67, 135, 254, 125, 68, 98, 204, 156, 83, 67, 170, 112, 128, 68, 82, 171, 99, 67, 140, 223, 128, 68, 75, 67, 112, 67, 136, 224, 127, 68, 98, 254, 196, 125, 67, 69, 223, 125, 68, 41, 32, 129, 67, 244, 124,
		121, 68, 75, 59, 122, 67, 136, 28, 118, 68, 98, 38, 56, 117, 67, 68, 0, 116, 68, 77, 119, 108, 67, 6, 199, 114, 68, 75, 83, 99, 67, 136, 164, 114, 68, 99, 109, 75, 3, 99, 67, 135, 32, 116, 68, 98, 100, 56, 106, 67, 36, 59, 116, 68, 8, 25, 113, 67, 202, 51, 117, 68, 75, 19, 117, 67, 135, 224, 118, 68, 98, 132, 112, 123, 67,
		130, 142, 121, 68, 55, 235, 119, 67, 57, 255, 124, 68, 75, 51, 109, 67, 135, 150, 126, 68, 108, 78, 27, 109, 67, 127, 154, 126, 68, 98, 205, 127, 99, 67, 194, 1, 128, 68, 148, 129, 87, 67, 82, 111, 127, 68, 78, 139, 80, 67, 127, 90, 125, 68, 108, 78, 83, 99, 67, 127, 98, 122, 68, 108, 78, 43, 96, 67, 127, 26, 121, 68, 108,
		78, 19, 77, 67, 127, 240, 123, 68, 98, 245, 183, 72, 67, 230, 97, 121, 68, 77, 102, 76, 67, 30, 96, 118, 68, 78, 59, 86, 67, 126, 234, 116, 68, 98, 71, 64, 90, 67, 193, 81, 116, 68, 64, 176, 94, 67, 134, 16, 116, 68, 78, 3, 99, 67, 126, 32, 116, 68, 99, 101, 0, 0];
path.loadFromData(svg_data);


const var Panel = Content.addPanel("Panel", 0, 0);
// [JSON Panel]
Content.setPropertiesFromJSON("Panel", {
  "height": 100
});
// [/JSON Panel]
Content.setHeight(100);

Panel.setPaintRoutine(function(g)
{
	g.setColour(Colours.white);
	g.fillPath(path, [0, 0, 100, 96]);
	g.setColour(Colours.black);
	g.fillPath(path, [2, 2, 96, 92]);
});

The weird number array is the SVG data that is converted using the SVG Path Converter from the Introjucer. You'll have to insert a valid SVG XML string and it spits out some C++ array that you can paste into the script.

[d.healey]

Aha I think I get it, I'll have to play around with it. I don't have an example in mind, it just occurred to me that SVG might be a good format for a scalable ui