I tried and did not manage to add the ofxGui addon to Ofelia (it needs additional OF addons, but i am sure it is possible).
But for now I made some GUI abstractions with basic functionality without the use of addons. Based on the toggle and the slider that I made some time ago. Could be nice to have kind of a GUI library for Ofelia...
-
Some basic Ofelia GUI elements...
-
@alexandros thanks. i think i fixed the issue (i used the wrong string formatting).
-
Now the number box has the basic features from the Pure Data Number2 GUI Object...
Perhaps the abstraction is a bit overcomplicated? But it works as far as I can see...
A Multislider/Array and XY-Pad could be the next steps. Maybe a Knob? I already made a grid, but not sure how to generalize it as an abstratction. -
here are the abstractions in use. it works as a patch and as a standalone app, but not with emscripten (because i need to port the glsl shader to gl es, which seems not too easy in this case. but that has nothing to do with the gui).
-
btw. this is the game of life glsl shader from the patch above. does anyboby know how to convert it to a gl es shader (the main problem is that the gl es version that i use cannot handle arrays)?
// fragment shader #version 120 uniform sampler2D Tex0; uniform vec2 resolution; uniform float lCell_0; uniform float lCell_1; uniform float lCell_2; uniform float lCell_3; uniform float lCell_4; uniform float lCell_5; uniform float lCell_6; uniform float lCell_7; uniform float lCell_8; uniform float dCell_0; uniform float dCell_1; uniform float dCell_2; uniform float dCell_3; uniform float dCell_4; uniform float dCell_5; uniform float dCell_6; uniform float dCell_7; uniform float dCell_8; vec2 rule[9] = vec2[9]( vec2(lCell_0, dCell_0), vec2(lCell_1, dCell_1), vec2(lCell_2, dCell_2), vec2(lCell_3, dCell_3), vec2(lCell_4, dCell_4), vec2(lCell_5, dCell_5), vec2(lCell_6, dCell_6), vec2(lCell_7, dCell_7), vec2(lCell_8, dCell_8) ); int get(int x, int y) { return int(texture2D(Tex0, (gl_FragCoord.xy + vec2(x, y)) / resolution).a); } void main() { int sum = get(-1, -1) + get(-1, 0) + get(-1, 1) + get( 0, -1) + get( 0, 1) + get( 1, -1) + get( 1, 0) + get( 1, 1); vec2 r = rule[sum]; if (get(0, 0) == 1) { gl_FragColor = vec4(0., 0., 0., r.x); } else { gl_FragColor = vec4(0., 0., 0., r.y); } }
-
i ported the shader to gl es 300, and had to make some other changes (a lot of try and error) but it works now:
https://gameoflife.handmadeproductions.de/
https://github.com/Jonathhhan/Pure-Data-Ofelia-Game-of-Life-Shader-Emscripten -
I made a multislider for Ofelia v4, its in the style of the other GUI elements. I made one once for Ofelia v2, but that isnt compatible for v4. There are some things that need to be optimized, maybe it would be nice to combine it with the functionality of ofArray(). But the interpolation of values does work now (that was the most difficult part for me...).
pure data multiSlider with font.zip -
What kind of GUI elements do you think are missing (I have a XY-pad in mind) or could be optimized?
-
Now with an XY-pad and a variant of the slider...
pure data gui with font - expanded.zipedit: also updated the emscripten version: https://puredatagui.handmadeproductions.de/
-
Looks nice
You asked which GUI elements are missing, I'd suggest a knob
-
@jaffasplaffa now also with a knob (with Emscripten it is not antialiased because of an unknown bug, but with Ofelia it is)...
https://github.com/Jonathhhan/Pure-Data-Ofelia-Emscripten/tree/main/pure data gui with font - expanded
As a side note: ofSetLineWidth() does not seem to work with Emscripten. Possibly an issue with OpenGL ES: https://stackoverflow.com/questions/24494495/opengl-es-line-thickness
edit: I combined the multislider with ofArray (in the ofelia_arraySlider abstraction...), which means the interface is directly connected to a PD array. -
Here are the new elements in use, its basically a modification of the PD example C08.analog.sequencer.pd: https://arrays.handmadeproductions.de/