Here I am experimenting with Figma and Webview

The idea is a moving field of hex cells with a lot of parameters.

Main ones are the Cell fracture, Sparks, moving exclusion zones, Hotspots, orange comets, cyan frames that capture a bunch of cells, cell size.

Spectrum is also done via webview.

I am really hoping that Webview matures in Juce/Hise as its a great way to design any intricate moving graphics although at the moment its great for prototyping and I am exploring converting a design into GLSL ? If even possible.
I gather that the current issues are platform compatibility, overall stability and sample accurate response, hopefully this will advance.

HEX GRAIN UI

HEX GRAIN UI

HEX GRAIN UI

HEX GRAIN UI

HEX GRAIN UI Controller

HEX GRAIN AD 4:5

@griffinboy said in [DEVLOG] Pro EQ:

My humble beginnings took place on this platform and forum, and now I code DSP fulltime as my living.

That is just awesome :)

@griffinboy Just wow...

@dannytaurus Yes, I have concerns , but its absolutely amazing for doing dynamic graphics.

@dannytaurus I think Clause is overstating its limitations (ScriptWebView is explicitly excluded from being a plugin parameter) YEs, technically but you can still make a slider in HIse communicate with webview and from webview to HISE slider .

Cross platform is an issue and probably DPI scaling although that is probably solvable?

Also some other issues , but I think it should be shippable on Win, unless I am missing something .

@David-Healey Oh, that is not great.
I did look at converting the webview graphics into paint routines, somewhat possible but again, heavy, a combo of png, paint and glsl gets me somewhere , but yes.

I wanted to create a topic around UI and maybe show and discuss some of my testing as well as seeing what others are up to.

I am doing all kinds of experiments but been out of the loop for a bit on HISE so interested in others experiments and conclusions.

Have people been using GLSL or Webview for example and what are the implications in terms of CPU/GPU and dependencies?

Webview is absolutely amazing for dynamic graphics so what have people been using for dynamic graphics since the paint routines are on cpu and not that suitable for fancy moving graphics.

Is it viable to keep the fancy stuff as webview ( perfectly viable in terms of making the graphics ) but what is the practical experience? is it stable on all platforms?

Also Three.js , anyone been using that and are there different considerations than 2D ?

Also CSS, dont know much about that and have yet to really test that, what are the advantages of that?

I am doing some glsl experiments but its quite limited "usable but limited" It would be nice to be able to feed it a png like in shadertoy, but i have had some success making masks from png into js array.

Still experimenting with GLSL, making a pretty cool UI with a combo of png and GLSL for an everchanging UI. Again, wondering if it will be mostly conceptual or if its usable in projects and stable.

Are there any plans for a future graphic methods that would outdate the current ones or plans to strengthen the implementation of the current ones like GLSL or webview ?

I am also interested in paint routines in terms of delivered code, I can now do pretty fancy vector UI´s in paint routines but i am interested in the backend of the code delivered.
Currently I have all callbacks in a sep include as well as all text,optimisations ( flip between png and vector shadows, stuff like that) , color maps and styles.

Before I build out that delivery setup I would love to know how someone would prefer recieving a fully built paint routine UI.

@Chazrox absolutely brilliant!

I was not planning on making another one today as I am deep diving into glsl, but got an idea and had to flesh it out.

So this is "KOMPRESS"

Minimal with a central large knob, Figma design.

This one uses quite a lot of blur for the glow on the black knob which is a HISE problem but since its stationary on the knob , I could move only the line indicator on the knob and just either print the blur or if keeping as vector see if I can get away with one blurred component?

KOMPRESS UI

KOMPRESS DAW

KOMPRESS D16:9

KOMPRESS 4:5

Solune - Morph Engine.

WebView experiment running in Hise.

So I can see the webview being used for some isolated hero elements or something , this whole ui is made in webview and it has that annoying hand cursor, it seems i can connect the sliders and all that stuff but its a bit janky.

Hand Cursor fix.

html, body, * {
    cursor: default !important;
}

This would be a nice way to make UI´s if it had a better implementation, not sure if this is planned at all?

Next test is GLSL something.
After some glsl testing, this ui could be recreated with a combo of paint routines, some sprites and glsl

Solune UI

Solune AD 4:5

Latest UI Experiment.

VERY inspired by Neural DSP ;)

This is a blend of Figma and Blender.
Kind of a cross between steampunk and the 60´s , refined steampunk I guess you could say.

Sundial UI

Sundial Standalone

Sundial 16:9 AD

Sundial 4:5 AD

@Chazrox yes, I know this is a problem that is addressed with Harfbuzz in 8, and in fact still somewhat of a problem.

Just looking for a way to get closer, some good points there to test.

Thanks

@ustk its worth trying the same test at 35,4 5 just to know although I would not exoect much of a difference, but yes, will try it.

I am at my wits end to try and match fonts in Figma , In Figma I am using local fonts so its the same as in HISE project , but its seems to stretch in HISE , same baseline, same start , same height but ...longer ? Tweaking sizes to eyeball this and i can get it to fit end to end but then off in the middle, almost like i am not using the correct font.

Is this something I just have to live with as a Juce quirk or is there a solution?

I am testing inter (whole family) Montserrat (family ) Ariel (family.
For some reason Arial is behaving and almost identical, the other ones ar all too long , like i applied kerning but more like a stretch.

Also trying some random font , same. Too long, stretched

Wondering if I should just call it, spent days on this. :)
Stretched font is not the correct font so its a problem, might be aknown problem to everyone but i am just encountering this.

Black printed as glyph from figma , perfect match to ref oveerlay.
Red is paint routine font ( not label)

If i change its size it fits end to end but wrong in the middle

If i make a text label and set it to 16 (12 in figma) its better and different ?

I might just be losing my mind, quite possible.

Of course i could just print everything static as glyphs and have any font from figma and be done with it but I would rather solve this, although iI would probably settle for just understanding this better :)

Thoughts?

@David-Healey quick question, for static fonts do you use a font , or do you just print as vector ? I assume fonts is lighter , but a bit unsure what methods are solid and tested.

@ustk Sweet , thanks !

@ustk How can I enable this profiler, cant find it ? ;)
In an empty project , is it in the watchtable once i got something going

@HISEnberg will using webview not require including a dependency, dont think its in win 10.

@David-Healey i will have to test, that might be a solution if I am understanding correctly.

@HISEnberg for shadows excusively or can css or webview be overlayed on vectors for " layer blur".
Css is only for laf right , not paint routines or have i gotbit wrong?