UI future ?
-
Is there a possibility of vector based UIs in the future of HISE, while bitmap based UIs can look amazing, creating somethings is just impossible with bitmap only, but even more so, with super high res displays becoming the norm nowadays, it would be good to have sizing, which is much much easier with vector based UIs.
Obviously JUCE was designed from day one with vector UI in mind, so is this something we can expect/hope for in HISE ? -
I posted this in feature requests by the way.
The forum is still terrible ;) -
Any thoughts on this ?
-
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.
-
So we can create our own vector UI ?
-
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).
-
Does HISE support the use of SVG files for controls?
-
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.
-
Would it be limited to monochromatic images only?
-
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?
-
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.
-
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
