Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
@Benjamin That's very nice and impressive. Does it just have that one theme or is it skinnable? I looked at your source it if I understood it correctly, all the theme color information is in a shader. This leads me to think most widgets are rects and that cannot be changed easily. What about drawing with vector paths, such as arcs, curves, lines, with fills and strokes? It would seem we are working on similar things. Regarding my work, I am mostly concentrating on the vector graphics part, with the UI toolkit only being developed to aid in configuring options. I am also going to be adding 2D physics to my library. I've got it working on Windows, Mac, Linux, and Pi including the new Pi Zero 2 W. On Pi I am using a display serverless (no Xorg, no window manager) version of SDL with the OpenGL ES2. Five Demo: https://streamable.com/8gk0ss Widgets and Drawing: https://streamable.com/1hfydu Above are links to video captures of vector drawing demos I recorded just now using my library. I have a few more demos I am working on that need to completing before I will publish my first release. ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
> On Nov 5, 2021, at 10:41 PM, Benjamin Rosseaux via fpc-pascal > wrote: > > I'm curious to see how it compares with my vector-based UI framework stuff at > PasVulkan ( https://youtu.be/YR0KruyQbx4 ), where the GPU itself renders > everything by shader, where nothing is bitmap-based, if one ignores the 2D > vector signed distance field textures for fonts and so on. The CPU pushes > just roughly basic draw information to the GPU, where the fragment übershader > itself applies the corresponding design look with help of 2D SDF math in an > always antialiased way then. I really like the text rendering part. I've been picking away at that problem recently and it's pretty difficult to do correctly. Regards, Ryan Joseph ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
wow bero your gui looks amazing , i'am just wondering if this could be run on non vulcan machines ? (gl3 for example) 2021-11-05 16:41 UTC+01:00, Benjamin Rosseaux via fpc-pascal : > I'm curious to see how it compares with my vector-based UI framework stuff > at PasVulkan ( https://youtu.be/YR0KruyQbx4 ), where the GPU itself renders > everything by shader, where nothing is bitmap-based, if one ignores the 2D > vector signed distance field textures for fonts and so on. The CPU pushes > just roughly basic draw information to the GPU, where the fragment > übershader itself applies the corresponding design look with help of 2D SDF > math in an always antialiased way then. > > On Wed, Nov 3, 2021 at 11:45 AM Anthony Walter via fpc-pascal < > fpc-pascal@lists.freepascal.org> wrote: > >> @code >> >> It's a bit weasely to claim immediate or retain based on how the >> underlying implementation works. The UI toolkit is drawn using a vector >> based OpenGL library. The library uses hardware vertex buffers, render >> buffers, and a hardware stencil buffer (for anti-aliasing) to draw lines >> and shapes. With regards to what people familiar with OpenGL would >> consider, this is the opposite of immediate mode. >> >> However, these vertex buffers are repopulated every frame and where the >> entire scene is redrawn. This makes it seem to fall under the auspice of >> immediate mode. >> >> BUT >> >> If you read up a few messages back, I described how you can enable render >> buffers to save your work, and it's quite possible and even I'd say easy >> to >> do with my framework. But it's an opt-in step. >> >> HOWEVER >> >> This UI toolkit is only an incidental part of the library I am writing. >> The actual purpose of the library is to provide users with a very fast 2D >> graphics system with a hardware accelerated backend to render vector >> graphics. Further work will also include a Pascal object oriented >> interface >> to the fairly robust, fast, and powerful Chipmunk2D physics engine. My >> creating of this UI toolkit is only meant to give people writing physics >> simulations, games, or graphical demos a means to select, input, or >> change >> options for their physics simulation, game, or graphical demo. It is not >> meant to be used as a general purpose UI toolkit. >> ___ >> fpc-pascal maillist - fpc-pascal@lists.freepascal.org >> https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal >> > ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
I'm curious to see how it compares with my vector-based UI framework stuff at PasVulkan ( https://youtu.be/YR0KruyQbx4 ), where the GPU itself renders everything by shader, where nothing is bitmap-based, if one ignores the 2D vector signed distance field textures for fonts and so on. The CPU pushes just roughly basic draw information to the GPU, where the fragment übershader itself applies the corresponding design look with help of 2D SDF math in an always antialiased way then. On Wed, Nov 3, 2021 at 11:45 AM Anthony Walter via fpc-pascal < fpc-pascal@lists.freepascal.org> wrote: > @code > > It's a bit weasely to claim immediate or retain based on how the > underlying implementation works. The UI toolkit is drawn using a vector > based OpenGL library. The library uses hardware vertex buffers, render > buffers, and a hardware stencil buffer (for anti-aliasing) to draw lines > and shapes. With regards to what people familiar with OpenGL would > consider, this is the opposite of immediate mode. > > However, these vertex buffers are repopulated every frame and where the > entire scene is redrawn. This makes it seem to fall under the auspice of > immediate mode. > > BUT > > If you read up a few messages back, I described how you can enable render > buffers to save your work, and it's quite possible and even I'd say easy to > do with my framework. But it's an opt-in step. > > HOWEVER > > This UI toolkit is only an incidental part of the library I am writing. > The actual purpose of the library is to provide users with a very fast 2D > graphics system with a hardware accelerated backend to render vector > graphics. Further work will also include a Pascal object oriented interface > to the fairly robust, fast, and powerful Chipmunk2D physics engine. My > creating of this UI toolkit is only meant to give people writing physics > simulations, games, or graphical demos a means to select, input, or change > options for their physics simulation, game, or graphical demo. It is not > meant to be used as a general purpose UI toolkit. > ___ > fpc-pascal maillist - fpc-pascal@lists.freepascal.org > https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal > ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
@code It's a bit weasely to claim immediate or retain based on how the underlying implementation works. The UI toolkit is drawn using a vector based OpenGL library. The library uses hardware vertex buffers, render buffers, and a hardware stencil buffer (for anti-aliasing) to draw lines and shapes. With regards to what people familiar with OpenGL would consider, this is the opposite of immediate mode. However, these vertex buffers are repopulated every frame and where the entire scene is redrawn. This makes it seem to fall under the auspice of immediate mode. BUT If you read up a few messages back, I described how you can enable render buffers to save your work, and it's quite possible and even I'd say easy to do with my framework. But it's an opt-in step. HOWEVER This UI toolkit is only an incidental part of the library I am writing. The actual purpose of the library is to provide users with a very fast 2D graphics system with a hardware accelerated backend to render vector graphics. Further work will also include a Pascal object oriented interface to the fairly robust, fast, and powerful Chipmunk2D physics engine. My creating of this UI toolkit is only meant to give people writing physics simulations, games, or graphical demos a means to select, input, or change options for their physics simulation, game, or graphical demo. It is not meant to be used as a general purpose UI toolkit. ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
2021-11-03 8:16 UTC+01:00, Anthony Walter via fpc-pascal : > Tonight I added a third theme based on nothing in particular. I named it > graphite. With the completion of this theme, the UI toolkit is feature done > for this first release. I am going to work on writing a custom performance > graphing widget, create a few more demos, write a bit of documentation, > then publish. > > Here is a video where I change widget themes while running my text brush > demo: > > https://streamable.com/00amir > this is a good looking gui :) , is this an immediate gui or retained , looks the same as dear imgui (https://github.com/ocornut/imgui) ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
Tonight I added a third theme based on nothing in particular. I named it graphite. With the completion of this theme, the UI toolkit is feature done for this first release. I am going to work on writing a custom performance graphing widget, create a few more demos, write a bit of documentation, then publish. Here is a video where I change widget themes while running my text brush demo: https://streamable.com/00amir ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
New themes are defined by this abstract class from which you would inherit
and implement. Sliced up bitmaps could be used to create a theme for sure,
but I have implemented the themes so far using vector drawing commands
exclusively.
TTheme = class
public
{ Calculate the actual theme color }
function CalcColor(Widget: TWidget; Color: TThemeColor): LongWord;
virtual; abstract;
{ Calculate the size of a widget }
function CalcSize(Widget: TWidget; Part: TThemePart): TSizeF; virtual;
abstract;
{ Render the widget }
procedure Render(Widget: TWidget); virtual; abstract;
end;
There are two themes I have implemented so far. One theme based on the
popular Arc Dark Linux theme, and the other based on Windows 95 or what I
call the Chicago theme. See this screenshot:
https://cache.getlazarus.org/images/desktop/both-acr-dark-and-chicago-theme-at-the-same-time.png
After settling on how to implement my first theme Arc Dark, adding the
Chicago theme was quite easy. I just changed some system colors and a few
of the size / render options and I was done. One difference in the newer
Chicago theme was that active window captions would be a different color,
and I implemented the classic Windows 95 dotted focus rect for controls
that can receive input focus.
An interesting feature is that themes can be applied on a per widget level,
or they can be inherited from the parent widget. Each widget has a computed
property that reflects any property which can be inherited from the visual
parent hierarchy. This includes computed opacity, enabled, visibility,
boundaries, the theme being used, and so on.
Another point of interest is how icons for message boxes, buttons, and
other controls are handled. I reuse the text property and use a vector
glyph font. You can change the glyph font to get different icons, but for
now I am using the FOSS material design font and wrote a cross platform
small utility to assist in picking out icons:
https://cache.getlazarus.org/images/desktop/icon-utility.png
Yesterday I completed modal windows support and added a few modal window
message type functions to the main widget. As an example this is how
MessageBox(const Message: string) implemented in TMainWidget:
procedure TMainWidget.MessageBox(const Message: string);
begin
with Add do
begin
with This.Add do
begin
Align := alignCenter;
with This.Add do
begin
Align := alignCenter;
Text := '';
end;
with This.Add do
begin
Align := alignCenter;
MaxWidth := 400;
Text := Message;
end;
end;
with This.Add do
begin
Align := alignCenter;
Text := 'OK';
ModalResult := modalOk;
end;
Text := 'Message';
Pack;
X := (Self.Width - This.Width) / 2;
Y := (Self.Height - This.Height) / 2;
ShowModal(MessageBoxClose);
end;
end;
And this is the result:
https://cache.getlazarus.org/images/desktop/message-box.png
And with the Chicago theme:
https://cache.getlazarus.org/images/desktop/message-box-chicago.png
Mind you, this UI toolkit is only meant to be a minimal system for
configuring or interfacing with a game, physics simulation, animation or
demo program. It is not intended to be a general use cross platform UI
framework.
___
fpc-pascal maillist - fpc-pascal@lists.freepascal.org
https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
> On Nov 1, 2021, at 5:12 PM, Anthony Walter via fpc-pascal > wrote: > > I plan to add: Write a `redmond` win95 style theme. Write a few example > custom controls. Add modal window support and dialog box functions. > How are you doing themes? I made a MacOS 8 theme by slicing up tons of old screenshots and packing them into texture atlases then pushing them into a sprite batcher. I wonder if making a bitmap context backend when have been easier. Regards, Ryan Joseph ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
At the end of another days work on this UI toolkit: https://streamable.com/5ttp9b I added: hbox, vbox, slider, tooltips, and optimized things a bit. I also added theme color querying, color blending based on opacity, and disabled states for all controls. Stackable windows are now a feature and mouse activation brings the picked top level widget to the front of the Z Order. Custom controls are now available. I plan to add: Write a `redmond` win95 style theme. Write a few example custom controls. Add modal window support and dialog box functions. Then after writing a few more demos and cleaning up my existing demos to use the widget UI system, writing documentation, I'll publish the first release. ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
That's a very good question Ryan. The short answer is this library draws everything each frame. It's meant for writing, games, physics simulations, or drawing animated demos. It runs as fast as you let it go, much like a game program. BUT It includes the ability to easily create and manage render buffers objects. These render buffers allow you to draw to a buffer, then just display the same buffer repeatedly, where you can change it only when needed. This is like the composting system you mention, but it's an opt in feature. The curtains demo linked in my OP is using a render buffer. If I didn't slow it down it would render instantly and there would be no fun watching it draw updates. Additionally, there is a fixed step logic method meant for game or simulation logic that is always invoked at every 1/120 of a second. This ensures simulation logic returns the same results regardless of computing or video render speed. And finally, regarding compositing, the Canvas interface has a set of modes determining how pixels are combined when new pixels are added. These modes can do things like produce a negative image, lighten or darken, multiply pixels, apply masks, and other things. They are like layer modes in Gimp or Photoshop. Oh and I almost forget. You can adjust the vsync or turn it on/off in my library, allowing you more control over CPU / GPU resource usage. ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
Re: [fpc-pascal] First Version Vector Toolkit in OpenGL
> On Oct 31, 2021, at 4:57 PM, Anthony Walter via fpc-pascal > wrote: > > As mentioned before, this library will be released to a git repository soon > with a FOSS license. It will be able to run on Windows, Mac, Linux, and Pi > including the new Pi Zero 2 W. > Thanks, please post when it's up. An open question I have with OpenGL based UI libraries is how (or if) composting happens. For example, are you rendering an entire window to a frame buffer and then updating that when one of the controls requests changes, or are you just drawing the entire window and controls every frame? I made a similar UI library which is loosely based on Cocoa but I didn't use any compositing so the entire window needs to redraw itself each frame. This is good enough for basic UI's in games but it's terribly inefficient so I wanted to tackle the problem of a composition layer (frame buffer) which updates only when controls request it and update only that portion of the window. Regards, Ryan Joseph ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
[fpc-pascal] First Version Vector Toolkit in OpenGL
You might have read in my prior message to this group my announcement of a vector graphics and physics library I've been writing for FPC. In this first release, I am taking a stab at designing a new user interface toolkit from scratch based on the vector graphics library rendered purely in OpenGL. Below is a video of my first test of this toolkit and I thought I'd share. Perhaps some of you may have some suggestions. https://streamable.com/n42kll Please bear in mind, this is meant to be a VERY minimal toolkit for the purpose of configuring or inputting settings in either game like programs or physics simulation programs. It includes a limited set of controls: windows, panels, sliders, push buttons, glyph buttons, check boxes, text entry, labels, image, and one custom paint control where you can draw whatever you want. That said, everything is fully themeable and you can write or switch to different themes. The theme system manages the size of each control element, their visual representation, and the fonts and colors. It operates completely independent of the controls. Layout is handled for you automatically by the container controls, window or panel, where children can be tiled horizontally, or vertically and placed near, center or far. Each control can have custom margins and containers can have custom size borders (space between controls and their four edges). As mentioned before, this library will be released to a git repository soon with a FOSS license. It will be able to run on Windows, Mac, Linux, and Pi including the new Pi Zero 2 W. ___ fpc-pascal maillist - fpc-pascal@lists.freepascal.org https://lists.freepascal.org/cgi-bin/mailman/listinfo/fpc-pascal
