(Finished) Your best UI design - contest

[lainz]

#1 resulted from the original gradient settings of the panel component .. and I was not happy, it appears to unrest.

So the search for good looking alternatives and at the end I couldn’t decide, sigh .. so I let is as option ..
My own personal favorite is #2, which I’m working with daily for my data backup purposes.

If you mean with “top panel”: the toolbar, yes, maybe, but I’d played a lot here too and that was my favorite at the end / dark theme.
But it is a very very  interesting stuff to search a layout one itself is happy to work with! 

Yes the number 2 is the best. Congrats. 

[KodeZwerg]

... too much contrast in the top panel ...

I do agree you.

@d7_2_laz
maybe you emboss the clickable things (turn all RGB values from background -25% or more behind items), it would make it look way better I think.
or outline your text and glyph black.
that would be my style.
just suggestions to increase the look and eye friendly doing.

[d7_2_laz]

Thank you for inspirations, appreciated 

“outline your text and glyph black”
Do you mean something like an ownerdrawn toolbutton caption text with an effect as shown here?
https://wiki.freepascal.org/BGRABitmap_tutorial_Font_rendering
What would that mean regarding a glyph?

[d7_2_laz]

About  the readability of the button texts with the toolbar, I forgot to mention something. Initially (if the target drive is not plugged in), the texts appear disabled / low color. If actions can start, then the possible main actions will appear better recognizable of course.

[KodeZwerg]

“outline your text and glyph black”
Do you mean something like an ownerdrawn toolbutton caption text with an effect as shown here?
https://wiki.freepascal.org/BGRABitmap_tutorial_Font_rendering

Exactly!

Regarding to glyph I am unaware it BRGABitmap got option to outline on its own on RGBA data. (transparent/alphachanneled source)

[d7_2_laz]

Personally i’d doubt a bit if outlined texts for those small toolbuttons will give a real benefit (rather to appear maybe a bit manieristic), but indeed it sounds interesting to try (if possible with affordable efforts). I'll keep in mind. Thank you!

[lainz]

With this code you can add shadows to any TBGRABitmap.

Code: Pascal  [Select][+][-]

1. procedure SingleColor(Bitmap: TBGRABitmap; Color: TBGRAPixel);
2. var
3.   i: integer;
4.   p: PBGRAPixel;
5. begin
6.   p := Bitmap.Data;
7.  
8.   for i := Bitmap.NBPixels - 1 downto 0 do
9.   begin
10.     p^.red := Color.Red;
11.     p^.green := Color.Green;
12.     p^.blue := Color.Blue;
13.     Inc(p);
14.   end;
15. end;
16.  
17. function Shadow(Source: TBGRABitmap; Color: TBGRAPixel; Blur: integer): TBGRABitmap;
18. begin
19.   Result := TBGRABitmap.Create(Source.Width + (2 * Blur), Source.Height + (2 * Blur));
20.   Result.PutImage(Blur, Blur, Source, dmDrawWithTransparency);
21.   SingleColor(Result, Color);
22.   BGRAReplace(Result, Result.FilterBlurRadial(Blur, rbFast));
23. end;

[d7_2_laz]

@Lainz, in my case, bgrabitmap is not yet involved at all. So I’d need – first – to replace a toolbutton text rendering using DrawTextW by a bgrabitmap operation  … should be no mystery though regarding the link mentioned above. I’ll give it a try.

----
… and did run into the need for more deep-digging here: Picked up the zipfile from
https://github.com/bgrabitmap/bgrabitmap/releases/tag/v11.5.8
expanded the subdir “bgrabitmap” into my project (Laz 3.0 x64 Win 10) and included it in the path’s option, as well as “uses BGRABitmap, BGRATextFX” in the use clause.
-> Endless series of compiler errors in libwebp.pas, eg.
libwebp.pas(593,1) Error: Typecast has different size (4 -> in assignment
libwebp.pas(594,1) Error: Wrong number of parameters specified for call to "<Procedure Variable>"
libwebp.pas(595,1) Error: Wrong number of parameters specified for call to "<Procedure Variable>"
libwebp.pas(596,1) Error: Wrong number of parameters specified for call to "<Procedure Variable>"
etc.

That for sure finally runs out of the current scope here, should be rather a separate topic.

--- EDIT; ok, that's probably due to Mode Delphi, but that's not changeable now
Found solution in: https://github.com/bgrabitmap/bgrabitmap/issues/235
but then there will be other errors ...

[lainz]

@Lainz, in my case, bgrabitmap is not yet involved at all. So I’d need – first – to replace a toolbutton text rendering using DrawTextW by a bgrabitmap operation  … should be no mystery though regarding the link mentioned above. I’ll give it a try.

----
… and did run into the need for more deep-digging here: Picked up the zipfile from
https://github.com/bgrabitmap/bgrabitmap/releases/tag/v11.5.8
expanded the subdir “bgrabitmap” into my project (Laz 3.0 x64 Win 10) and included it in the path’s option, as well as “uses BGRABitmap, BGRATextFX” in the use clause.
-> Endless series of compiler errors in libwebp.pas, eg.
libwebp.pas(593,1) Error: Typecast has different size (4 -> in assignment
libwebp.pas(594,1) Error: Wrong number of parameters specified for call to "<Procedure Variable>"
libwebp.pas(595,1) Error: Wrong number of parameters specified for call to "<Procedure Variable>"
libwebp.pas(596,1) Error: Wrong number of parameters specified for call to "<Procedure Variable>"
etc.

That for sure finally runs out of the current scope here, should be rather a separate topic.

--- EDIT; ok, that's probably due to Mode Delphi, but that's not changeable now
Found solution in: https://github.com/bgrabitmap/bgrabitmap/issues/235
but then there will be other errors ...

Try dev-bgrabitmap. Is a branch at github.

[d7_2_laz]

Try dev-bgrabitmap. Is a branch at github.

Thank you Lainz! - But with this branch, compiler error at the same place, which is:
libavif.pas(157,41) Error: Syntax error, ")" expected but ":=" found
Line 157 is a type definition:        avifPlanesFlag = (AVIF_PLANES_YUV := 1 shl 0,AVIF_PLANES_A := 1 shl 1,

Does not happen  in a mini sample project, but in a real project

Edit: not dependent from the order of units in the use clause; i just checked this by placing the bgra units  in front.

[lainz]

Try using the package file lpk instead of the source folder.

I'm using dev-branch and I have no problems on Lazarus 3.0

[d7_2_laz]

Btw. with 3.2 it's the same as with 3.0. – As told, I saw that it compiled in a mini sample project, so I suspect  a very specific context or setting, and not that the package lpk would be needed to be installed.  The first suspicion (mode Delphi) appeared to be true; the second (order of units in the “uses”)  probably not. I think i’ll open a separate topic for that later, because it absolutely doesn’t belong to the current discussion. Before, I’d need some time to dig for to exclude it’s only by a trivial mistake on my side.

[vfclists]

I think the best UI design is the one used by Emacs, which combines easily memorable command names which are mapped to shortcuts. The commands can be invoked by Alt-x (Meta-x in Emacs parlance) and can be searched/filtered for the exact command.

Some shortcuts are standardized and some are decided by the end user. Quite simply commands are easier to remember than shortcuts and menus, and it can be quite easy to search for them.

Then they are combined with which-key which shows all the commands avaiiable after entering a prefix.

This can also be combined with Lazarus method of listing all objects that can get focus, hot keys and clicks? when it becomes a reality for Lazarus.

[d7_2_laz]

@Lainz: no other thread needed  ….  Reason found: another consequence of mode Delphi; - Fix:

Code: Pascal  [Select][+][-]

1. unit libavif;
2.  
3. {$mode objfpc}

Now it compiles.

[d7_2_laz]

With reference to the wiki sample (link aboive) a first POC approach, as a first impression how the outlined text on the toolbutton could look like (see picture, right side).
With a big TODO: how to achieve the paint is transparent and not eg. clBtnFace -> wiki example. See TBGRABitmap.Create. Question to a bgra expert, i'm a noob here.
My code snippet:

Code: Pascal  [Select][+][-]

1. // Controlling procedure
2. procedure dxRenderText(const AParent: TControl; const ACanvas: TCanvas;
3.   AText: string; const AFont: TFont; const AEnabled, DrawPressed, AShowAccelChar: Boolean;
4.   var Rect: TRect; Flags: Integer); overload;
5.  
6. // Old draw:
7.   procedure DoDrawText;
8.   begin
9.     DrawTextW(ACanvas.Handle, PWideChar(WideString(AText)), -1, Rect, Flags);
10.   end;
11.  
12. // BGRA draw:
13.   procedure DoDrawTextBgra;
14.   var  bmp: TBGRABitmap;  renderer: TBGRATextEffectFontRenderer; aLeftOffs: Integer;
15.   begin
16.     //DrawTextW(ACanvas.Handle, PWideChar(WideString(AText)), -1, Rect, Flags);
17.     //bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));  // Wiki example
18.     //bmp := TBGRABitmap.Create(110, 40, $00616161); // WANTED: transparent  // Wiki sample:  clBtnFace
19.     bmp := TBGRABitmap.Create(AParent.Width, AParent.Height, $00616161); // *** TODO: transparent ***  // Wiki sample:  clBtnFace
20.     renderer := TBGRATextEffectFontRenderer.Create;
21.     bmp.FontRenderer := renderer;
22.     renderer.ShadowVisible := True;
23.     renderer.OutlineVisible := True;
24.     renderer.OutlineColor := BGRABlack;
25.     renderer.OuterOutlineOnly := True;
26.     bmp.FontFullHeight := (AFont.Size * 2) - 1;   // 15
27.     aLeftOffs :=  (Rect.Width -  ACanvas.TextWidth(AText)) Div 2;  // Need to assure text centering now
28.     bmp.TextOut(Rect.Left + aLeftOffs, Rect.Top, AText, clWhite);
29.     bmp.Draw(ACanvas, 0, 0);
30.     bmp.Free;
31.   end;
32. // .....
33. // .....
34.  

Btw:  is it worthy the effort? Don’t know … the exe will grow by 1,5 MB as from the new 130 extra modules.