UI future ?

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

UI future ?

26

1.7k

11.8k

102.6k