(Finished) Your best UI design - contest lazarus / 39-Graphics ---------------------------------------------------------------------- lainz · 2024-02-13 18:40 Hi, please share your best UI design made with FPC. You can use any UI controls, made by you or third party. Hope this thread get full of cool UI. The limit is December 31. And we can vote the winners in 2025. Vote now! I'm organizing this so I will be not participating. Existing apps are not welcome, you must create something for the contest. The app can be for a platform only or multiplatform. Any more ideas about the rules can be discussed here. Thanks. Ok. We can have 2 categories. One. For existing projects and one for the Todo list. One where you can show your best project. Only look will be voted because you do not have to share the source. Just share some screenshots. And the Todo list that must include sources to compile and test. Better now? We have a lot of time to work in our Todo list or improve our existing project. All projects can participate even if they are closed source or open source. But screenshot is mandatory else we can't decide. All right I think all is good so we can start the contest. ---------------------------------------------------------------------- 440bx · 2024-02-13 19:48 I think that's a good idea however, what is best often depends on the purpose.  In this case the purpose of the application. Here is an example.  Back in the days of MS-DOS I tried a number of editors, among them Multi-Edit.  I chose Multi-Edit for a number of reasons but, one critical reason was that when a shift/control/alt key combination was started (either by pressing shift, control or alt) the editor would show a reverse-highlighted set of squares (8, one for each function key at the time) showing what shift-F1, shift-F2, ... shift-F8 did, the same for Ctrl and Alt.  That single UI feature greatly increased productivity while learning the editor. Unfortunately, they got rid of that feature in the Windows version and, because of that, I occasionally have to look in the menus to remember what key combination is assigned to a particular feature (usually one that I only use rarely.) I suggest that those who decide to enter your contest should specify what the purpose of the app is and, their U.I be evaluated in that context which means there could be more than one winner. ---------------------------------------------------------------------- KodeZwerg · 2024-02-13 22:09 How is this contest held, are we supposed to make screenshots of GUI designs we've made? ---------------------------------------------------------------------- domasz · 2024-02-14 11:32 Quote from: lainz on February 13, 2024, 07:40:03 pmExisting apps are not welcome We have like 5 people active on the forum. The rule above might discourage some of them. Perhaps this rule should be out? ---------------------------------------------------------------------- Joanna · 2024-02-14 11:40 I’m not sure what constitutes good ui design? There are probably many different conflicting opinions about this. I know that things I consider important are considered unnecessary/unpleasant by other programmers. ---------------------------------------------------------------------- lainz · 2024-02-14 13:47 Quote from: KodeZwerg on February 13, 2024, 11:09:10 pmHow is this contest held, are we supposed to make screenshots of GUI designs we've made? Yes or share the sources, both better. Quote from: domasz on February 14, 2024, 12:32:52 pmQuote from: lainz on February 13, 2024, 07:40:03 pmExisting apps are not welcome We have like 5 people active on the forum. The rule above might discourage some of them. Perhaps this rule should be out? We have almost an entire year to make something for the contest. Quote from: Joanna on February 14, 2024, 12:40:46 pmI’m not sure what constitutes good ui design? There are probably many different conflicting opinions about this. I know that things I consider important are considered unnecessary/unpleasant by other programmers. Well there should be principles, I'm not an expert but usability, readability, modern look and feel, easy of use... ---------------------------------------------------------------------- korba812 · 2024-02-14 14:23 Quote from: lainz on February 14, 2024, 02:47:43 pmQuote from: Joanna on February 14, 2024, 12:40:46 pmI’m not sure what constitutes good ui design? There are probably many different conflicting opinions about this. I know that things I consider important are considered unnecessary/unpleasant by other programmers. Well there should be principles, I'm not an expert but usability, readability, modern look and feel, easy of use... At least three of the criteria listed above cannot be verified from a screenshot. Moreover, it seems that these three criteria can only be evaluated by users of a particular type of software, e.g. graphic designers should evaluate graphics programs, accountants should evaluate accounting programs, programmers evaluate development environments, etc.... ---------------------------------------------------------------------- lainz · 2024-02-14 14:36 Quote from: korba812 on February 14, 2024, 03:23:08 pmQuote from: lainz on February 14, 2024, 02:47:43 pmQuote from: Joanna on February 14, 2024, 12:40:46 pmI’m not sure what constitutes good ui design? There are probably many different conflicting opinions about this. I know that things I consider important are considered unnecessary/unpleasant by other programmers. Well there should be principles, I'm not an expert but usability, readability, modern look and feel, easy of use... At least three of the criteria listed above cannot be verified from a screenshot. Moreover, it seems that these three criteria can only be evaluated by users of a particular type of software, e.g. graphic designers should evaluate graphics programs, accountants should evaluate accounting programs, programmers evaluate development environments, etc.... Programmers can evaluate anything, since it's our job. We're testers as well, and debuggers of software. So a requisite can be share the sources and steps to compile. ---------------------------------------------------------------------- Joanna · 2024-02-14 15:33 Quote Well there should be principles, I'm not an expert but usability, readability, modern look and feel, easy of use... I’m not sure what modern look and feel is but I have noticed a trend towards users having less and less control over what software does and a lot of wasted space that forces users to scroll. My idea of perfect ui is a lot closer to hexchat than discord. ---------------------------------------------------------------------- VisualLab · 2024-02-14 19:02 Quote from: lainz on February 14, 2024, 03:36:30 pmQuote from: korba812 on February 14, 2024, 03:23:08 pmQuote from: lainz on February 14, 2024, 02:47:43 pmQuote from: Joanna on February 14, 2024, 12:40:46 pmI’m not sure what constitutes good ui design? There are probably many different conflicting opinions about this. I know that things I consider important are considered unnecessary/unpleasant by other programmers. Well there should be principles, I'm not an expert but usability, readability, modern look and feel, easy of use... At least three of the criteria listed above cannot be verified from a screenshot. Moreover, it seems that these three criteria can only be evaluated by users of a particular type of software, e.g. graphic designers should evaluate graphics programs, accountants should evaluate accounting programs, programmers evaluate development environments, etc.... Programmers can evaluate anything, since it's our job. We're testers as well, and debuggers of software. So a requisite can be share the sources and steps to compile. As for the evaluation of the software by programmers - I have doubts here. There are outstanding programmers like Linus Torvalds and Lennart Poettering (or at least that's how they are described in the media). At the opposite extreme, there are programmers such as Joel Spolsky or Eric Raymond, who evaluate software based on its usability (Joel in particular is a proponent of this approach). Years of using software created by the first ones (LT, LP) give me the impression that it is created on the principle: "it's supposed to be this way, because that's how I want it - if you don't like it, f... o..." I am definitely on the side of the latter (i.e. JS, ER). Unfortunately, usability and ergonomics in IT have been not only neglected but even combated for many years. Joanna rightly pointed out that there should be certain criteria. Lainz's examples of criteria are fine, but a bit too vague and incomplete. This may later result in disputes in the outcome of the competition. The suggestions given by Korb812 also seem correct to me. For example: if someone creates a chemical structure editor, an accountant or graphic designer is unlikely to evaluate it objectively, if only because they do not need such programs (and generally such people do not have the knowledge to evaluate this type of software). And vice versa: a chemist is unlikely to be able to objectively evaluate a good program for the financial management of an enterprise. I am leaving out rare cases of people with extensive competences. ---------------------------------------------------------------------- lainz · 2024-02-14 21:15 Understand. maybe we can define the app to be the same for all. Like a Todo list for the basic app and a small file Explorer for the difficult app. Or tell your app ideas as well ---------------------------------------------------------------------- 440bx · 2024-02-14 21:36 part of the problem is how is "best UI design" determined ? Some considerations could be a.) visual appeal b.) intuitiveness c.) motion economy e.g, no ctrl-alt-shift right click to delete one character at the cursor d.) use of space (IMO, current interfaces waste way too much space, I long for the days of ms-dos where space economy was given a lot of importance.  e.) likely many other things that are likely obvious to some people but not to me. It is important to be able to _measure_ with some degree of accuracy how desirable a U.I feature is and, account for poorly implemented features that may be deal breakers (you may launch Saturn V but, if it misses the moon because the controls are hard to use, that would be a bit of a problem.) ---------------------------------------------------------------------- d7_2_laz · 2024-02-14 21:40 I don’t know where the increasing number of pros, contras and concerns about criteria might end. But would like to give a simple thing to consider. It might be very well of interest for “normal one” users not quite skilled in elaborated artist sciences to see how others are doing things. What’s behind of questions or issues they raised, what they were good for. How things may look like that others did. Not for to win contests, but to get ideas, be inspired  and widen imagination of possible designs. Admittedly that might be a somehow different thread though. Lainz, basically i'd like your last proposal. But if there are already existing products and the source cannot/won’t be published for diverse reasons … unlucky, no chance. Those won't reach here. ---------------------------------------------------------------------- lainz · 2024-02-14 22:09 Well the thing is as well that we're all humans, so all is relative to us. Each individual is so different that will measure differently. So I think we need to create new content because is a contest, no old projects with years of development, because that's unfair with the others. A ToDo list will do, you can use databases, arrays, json, objects, lists, anything for the backend. That will not be the main discussion here. The thing is the UI, again, show us a compilable project, source code required. Each user can test all the projects and vote, and say why he/she chooses that project. If because the keyboard shortcut is nice, if because it uses material design, if because it uses native controls, if because it's minimalist, if because it uses fancy gradients and so on. No one can tell why you choose that app. Is not a decision by some, but all the users that want to take the time to build and test all the apps. Mabe we get 10 apps with too much luck. ---------------------------------------------------------------------- Joanna · 2024-02-14 22:15 Quote Years of using software created by the first ones (LT, LP) give me the impression that it is created on the principle: "it's supposed to be this way, because that's how I want it - if you don't like it, f... o..." I would think that all programmers who aren’t being told what to do by employers would be in the “that’s how I want it” category. My approach to programming ui is pretty much what makes the program easier for ME to use. I once had my project tested by some other people though. One of the testers told me that my highlights for some numerical values was annoying.. so I ended up adding code to allow turning off what I considered to be a valuable feature. ---------------------------------------------------------------------- colo · 2024-02-15 07:43 I like the idea, but I think that excluding existing projects is kinda a bad call. I'd argue that without purpose for an application, there cannot be "good" UI (maybe there can be flashy and "pretty" UI, but that does not imply good, in my experience) - and who's going to create an application with a specific purpose pretty much because of this very contest? Also, objective criteria for "good"/"best" are neither possible, nor necessary. Just let users submit their own creations that they happen to be proud of, UI-wise, and let the popular vote decide. ---------------------------------------------------------------------- lainz · 2024-02-15 11:27 Ok. We can have 2 categories. One. For existing projects and one for the Todo list. One where you can show your best project. Only look will be voted because you do not have to share the source. Just share some screenshots. And the Todo list that must include sources to compile and test. Better now? We have a lot of time to work in our Todo list or improve our existing project.  All projects can participate even if they are closed source or open source. But screenshot is mandatory else we can't decide. All right I think all is good so we can start the contest. ---------------------------------------------------------------------- d7_2_laz · 2024-02-15 14:49 Nobody will start? So here my 5 pennies. As already told, my scope and interest is not a "contest" but sharing of idaas for to get inspired by "how do others". Here my file explorer as taylored for own needs. Light and dark mode; ---------------------------------------------------------------------- d7_2_laz · 2024-02-15 14:51 2 dialogs already attached (both dark here), but separately ("The maximum attachment size allowed is 500 KB") ---------------------------------------------------------------------- lainz · 2024-02-15 16:02 Thanks for sharing =) Looking good. ---------------------------------------------------------------------- KodeZwerg · 2024-02-16 12:22 work in progress, first step to fill a box with actual existing data is done Alpha worked on OwnerDrawn, currently its on a light theme but will finally auto do theming (windows) Limit text drawing to the actual size of column Selected item gets italic and bold Selected item gets highlighted blue My idea is, for a near one year project, to ownerdraw update more and more like adding icon in same way explorer does it etc... Since I must do invent existing wheels again and again it needs time My projects running speed will be good for slow or normal speed users since retrieving data needs a little. (nothing else but file or folder name exists right now) At the end a small widget that you can move alphablended on screen around and react on a click to open the first listview mode: explorer listing and this explorer listing is what I do show plus effects ---------------------------------------------------------------------- Dzandaa · 2024-02-16 16:16 Hi, this is a game of Yathzee I did in 2022 Learning Lazarus: B-> ---------------------------------------------------------------------- lainz · 2024-02-16 19:44 Thanks KodeZwerg and Dzandaa ---------------------------------------------------------------------- KodeZwerg · 2024-02-17 15:48 Its getting darker and now a base set of information is getting interpreted already, for the attribute field i plan something nice ... ---------------------------------------------------------------------- lainz · 2024-02-17 20:52 I can't resist, I'm not participating but sharing my old 'WinDS PRO Apps 2015', made with Lazarus. ---------------------------------------------------------------------- KodeZwerg · 2024-02-17 23:28 Finished the attribute field, should I continue with this or redo? (Later a click event on those dots will open an extended attribute editor, including system compression and system encryption) Currently it display the most important attributes A - Archive R - ReadOnly H - Hidden S - System C - Compressed X - Encrypted Later the filenames do also color differently on different attribute levels. Click event to get correct index back from whatever row/column is finished. Now I do jump into IDE and begin with Attribute Editor ---------------------------------------------------------------------- lainz · 2024-02-17 23:53 Great job ---------------------------------------------------------------------- d7_2_laz · 2024-03-01 22:40 I’m wondering that there‘s so few input from other apps. So i try to trigger a bit for ideas by input from an existing app. It is a folder synch app, and the task was here, in dark mode to have a good styling for to differentiate a toolbar panel against a panel having two different folder input combo boxes. There are a couple of options to show: ---------------------------------------------------------------------- lainz · 2024-03-01 23:29 I don't like the first, too much contrast in the top panel. But I like the lot of contrast, if given in both directions like in the 2nd. The others are good. But again I don't like the top panel, is a very big contrast there. Try something softer... IMHO. ---------------------------------------------------------------------- d7_2_laz · 2024-03-01 23:50 #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 (if softer, either the readability of the text will suffer, or it appears in overall too dark). But it is a very very  interesting stuff to search a layout one itself is happy to work with! ---------------------------------------------------------------------- lainz · 2024-03-01 23:59 Quote from: d7_2_laz on March 02, 2024, 12:50:59 am#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 · 2024-03-02 02:33 Quote from: lainz on March 02, 2024, 12:29:02 am... 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 · 2024-03-02 14:07 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 · 2024-03-02 20:22 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 · 2024-03-02 20:39 Quote from: d7_2_laz on March 02, 2024, 03:07:33 pm“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_renderingExactly! Regarding to glyph I am unaware it BRGABitmap got option to outline on its own on RGBA data. (transparent/alphachanneled source) ---------------------------------------------------------------------- d7_2_laz · 2024-03-02 21:19 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 · 2024-03-03 00:08 With this code you can add shadows to any TBGRABitmap. Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i procedure SingleColor(Bitmap: TBGRABitmap; Color: TBGRAPixel);var  i: integer;  p: PBGRAPixel;begin  p := Bitmap.Data;   for i := Bitmap.NBPixels - 1 downto 0 do  begin    p^.red := Color.Red;    p^.green := Color.Green;    p^.blue := Color.Blue;    Inc(p);  end;end; function Shadow(Source: TBGRABitmap; Color: TBGRAPixel; Blur: integer): TBGRABitmap;begin  Result := TBGRABitmap.Create(Source.Width + (2 * Blur), Source.Height + (2 * Blur));  Result.PutImage(Blur, Blur, Source, dmDrawWithTransparency);  SingleColor(Result, Color);  BGRAReplace(Result, Result.FilterBlurRadial(Blur, rbFast));end; ---------------------------------------------------------------------- d7_2_laz · 2024-03-03 14:06 @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 "" libwebp.pas(595,1) Error: Wrong number of parameters specified for call to "" libwebp.pas(596,1) Error: Wrong number of parameters specified for call to "" 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 · 2024-03-03 17:57 Quote from: d7_2_laz on March 03, 2024, 03:06:14 pm@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 "" libwebp.pas(595,1) Error: Wrong number of parameters specified for call to "" libwebp.pas(596,1) Error: Wrong number of parameters specified for call to "" 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 · 2024-03-03 18:30 Quote from: lainz on March 03, 2024, 06:57:29 pmTry 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 · 2024-03-03 21:51 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 · 2024-03-03 22:48 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 · 2024-03-04 03:27 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 · 2024-03-04 08:39 @Lainz: no other thread needed  ….  Reason found: another consequence of mode Delphi; - Fix: Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i unit libavif; {$mode objfpc}Now it compiles. ---------------------------------------------------------------------- d7_2_laz · 2024-03-04 13:24 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][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i // Controlling procedureprocedure dxRenderText(const AParent: TControl; const ACanvas: TCanvas;  AText: string; const AFont: TFont; const AEnabled, DrawPressed, AShowAccelChar: Boolean;  var Rect: TRect; Flags: Integer); overload; // Old draw:  procedure DoDrawText;  begin    DrawTextW(ACanvas.Handle, PWideChar(WideString(AText)), -1, Rect, Flags);  end; // BGRA draw:  procedure DoDrawTextBgra;  var  bmp: TBGRABitmap;  renderer: TBGRATextEffectFontRenderer; aLeftOffs: Integer;  begin    //DrawTextW(ACanvas.Handle, PWideChar(WideString(AText)), -1, Rect, Flags);    //bmp := TBGRABitmap.Create(ClientWidth,ClientHeight,ColorToRGB(clBtnFace));  // Wiki example    //bmp := TBGRABitmap.Create(110, 40, $00616161); // WANTED: transparent  // Wiki sample:  clBtnFace    bmp := TBGRABitmap.Create(AParent.Width, AParent.Height, $00616161); // *** TODO: transparent ***  // Wiki sample:  clBtnFace    renderer := TBGRATextEffectFontRenderer.Create;    bmp.FontRenderer := renderer;  renderer.ShadowVisible := True;    renderer.OutlineVisible := True;  renderer.OutlineColor := BGRABlack;    renderer.OuterOutlineOnly := True;    bmp.FontFullHeight := (AFont.Size * 2) - 1;   // 15    aLeftOffs :=  (Rect.Width -  ACanvas.TextWidth(AText)) Div 2;  // Need to assure text centering now    bmp.TextOut(Rect.Left + aLeftOffs, Rect.Top, AText, clWhite);    bmp.Draw(ACanvas, 0, 0);    bmp.Free;  end;// .....// .....  Btw:  is it worthy the effort? Don’t know … the exe will grow by 1,5 MB as from the new 130 extra modules. ---------------------------------------------------------------------- lainz · 2024-03-04 13:32 In color parameter use BGRAPixelTransparent in unit BgrabitmapTypes ---------------------------------------------------------------------- d7_2_laz · 2024-03-04 13:55 Quote from: lainz on March 04, 2024, 02:32:23 pmIn color parameter use BGRAPixelTransparent in unit BgrabitmapTypes Oh, I already had tried this Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i  //bmp := TBGRABitmap.Create(AParent.Width, AParent.Height, $00616161); // *** TODO: transparent ***  // Wiki sample:  clBtnFace  bmp := TBGRABitmap.Create(AParent.Width, AParent.Height, BGRAPixelTransparent); // *** TODO: transparent ***  // Wiki sample:  clBtnFace ---------------------------------------------------------------------- lainz · 2024-03-04 14:21 bmp.Draw(ACanvas, 0, 0); Try the last parameter with true or false. ---------------------------------------------------------------------- d7_2_laz · 2024-03-04 14:49 Ah, i see, optional 4th parameter Opaque, defaulted to true. Unfortunately it doesn't change anything here. Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i     bmp.Draw(ACanvas, 0, 0, False);  // False or true, no difference here ---------------------------------------------------------------------- lainz · 2024-03-04 15:56 Can you share a small demo project, showing the issue? So we can test and try? ---------------------------------------------------------------------- d7_2_laz · 2024-03-04 16:02 @Lainz,i think i found it!  -         ->   Using “bmp.FillTransparent” Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i     bmp.FillTransparent;      // !!!!!!    bmp.TextOut(Rect.Left + aLeftOffs, Rect.Top + 2, AText, AFont.Color);    bmp.Draw(ACanvas, 0, 0, False); ---------------------------------------------------------------------- lainz · 2024-03-26 04:31 No one else is sharing? There's Lazpaint. CudaText... Please share your screenshots ---------------------------------------------------------------------- cdbc · 2024-03-26 08:20 Hi Well ok then... This little app started life as a small tool, for me to keep track on the wife's internet-shopping-portals logins & passwords etc.  I started coding the backend and did the testing in a small console- app, because that's easier & quicker  Then I thought, 'what the he**' why not kick it, while you're at it... So, this /little/ app turned out to be: 1) a showcase for programming the 'MVVM'-pattern, literally. 2) a showcase for simple, yet effective use of ...tadaaaa: the 'Crt'-unit. 3) a showcase for the use of my 'Plugin-framework', very aptly named:     P.I.S.S (P)lug(I)n (S)ervices (S)olution  4) a proof of the concept behind both 'MVVM' & 'Plugins'. 5) showing off 'fine grained' encryption via 256bit hashed Rijndael algorithm. I'm right now, coding the /gui/-frontend and again, I thought 'wthn', why not make it look like its cli-cousin?!?  It is harder than you think! Oh, and it's blazingly fast. The rest of the pics comes in next post... Regards Benny ---------------------------------------------------------------------- cdbc · 2024-03-26 08:21 2 ---------------------------------------------------------------------- cdbc · 2024-03-26 08:22 3 ---------------------------------------------------------------------- cdbc · 2024-03-26 08:22 4 ---------------------------------------------------------------------- cdbc · 2024-03-26 08:23 5 ---------------------------------------------------------------------- cdbc · 2024-03-26 08:25 Hi 6 & the last one... I know this may all look dated and childish to you all, but here it is anyway... Regards Benny ---------------------------------------------------------------------- Josh · 2024-03-26 08:26 Does this count???  95% finished, done during last weekend. need to finish and tidy code up. Will share when finished, so others can test and fix for other OS's. Due to limitation of attachment size, will need to put on git or somethimg, compiled size is <5mb on win, which includes all the sound and images graphics (in the resource files). it uses bgrabitmap, uos for sound. ---------------------------------------------------------------------- cdbc · 2024-03-26 08:42 Hi Hell Yeah Josh, good on you man!  Regards Benny ---------------------------------------------------------------------- Ally · 2024-03-26 10:12 Hello, here are the screenshots of my Lazarus program. FiRenTo: Rename files and folders. FiTiTo: Change file date and time. GeoGear: Calculate areas, angles, volumes, weights etc. IconTable: Creates an HTML table from the contents of an image/icon folder. Has been included with Lazarus since version 3.0 (\lazarus\tools\icons_to_html\) and is used there, for example, to create the table of contents of the folder \lazarus\images\general_purpose\ KassEx: Entering, calculating and printing the cash register. Scripter: text editor. Best regards Roland ---------------------------------------------------------------------- Ally · 2024-03-26 10:13 KassEx: Entering, calculating and printing the cash register. Scripter: text editor. ---------------------------------------------------------------------- d7_2_laz · 2024-03-26 12:01 cdbc and Ally, those look pretty cool  For info, for the “rename” and “change date” part, my own approach below. ---------------------------------------------------------------------- hrayon · 2024-03-27 14:08 A type of software for hospitals. Not yet finished, development is actually at a standstill. Note the possibility of changing the colors of various elements. ---------------------------------------------------------------------- lainz · 2024-03-27 15:41 LazPaint by @circular ---------------------------------------------------------------------- zamtmn · 2024-03-27 16:23 zcad ---------------------------------------------------------------------- hrayon · 2024-03-27 17:42 Responsibility control with kanban method for accounting office integrated with electronic document management. Project also stopped. ---------------------------------------------------------------------- circular · 2024-03-28 08:36 Quote from: lainz on March 27, 2024, 04:41:48 pmLazPaint by @circular Thank you the mention. There is as well a light theme: ---------------------------------------------------------------------- lainz · 2024-03-29 15:19 Basically any design can be done with bgrabitmap and bgracontrols with svg! ---------------------------------------------------------------------- marcov · 2024-03-29 17:38 Well, actually I went for opengl with a set of canvas layers on top. (the opengl widget has more work than the surround GDI widgets) This is the top of a beer bottle, and the picture zooms and pans in sub ms times. (search for opengl canvas on the forum) ---------------------------------------------------------------------- Thaddy · 2024-03-29 17:48 What? no oliebollen? ---------------------------------------------------------------------- mgc · 2024-03-29 19:33 GPProj - Gerenciador Pessoal de Projetos (Personal Project Manager). The idea is everything in one screem. ---------------------------------------------------------------------- AlexTP · 2024-03-30 03:32 CudaText text editor; theme: Solarized Dark. More screenshots: https://pazera-software.com/cudatext/ Important note: even scrollbars and toolbar and statusbar are themed here. ---------------------------------------------------------------------- Lulu · 2024-04-15 18:51 Hi all! Thanks you for this context Lainz. here's my entry: a UI demo entirely rendered with OpenGL 3.3 with the new version of OGLCScene. https://github.com/Lulu04/OGLCScene ---------------------------------------------------------------------- Key-Real · 2024-04-20 20:02 @Lulu : Ah, Yes finaly!!!!! This contest is about UI, the one from Lulu is one, are the others an UI,   ? here is mine. It is made from scratch and is drawn on a vscreen. and a program made with it ---------------------------------------------------------------------- Guva · 2024-04-21 01:50 Ray4Laz Control UI Demo ---------------------------------------------------------------------- circular · 2024-04-22 03:19 Very colorful indeed ---------------------------------------------------------------------- lainz · 2024-04-22 12:27 The future version of WinDS PRO, rebuilt in Lazarus. ---------------------------------------------------------------------- lainz · 2024-04-22 12:28 With color picker as well ---------------------------------------------------------------------- circular · 2024-04-24 16:48 Quote from: lainz on April 22, 2024, 02:27:21 pmThe future version of WinDS PRO, rebuilt in Lazarus. Square tile style? ---------------------------------------------------------------------- lainz · 2024-04-28 01:23 Quote from: circular on April 24, 2024, 06:48:12 pmQuote from: lainz on April 22, 2024, 02:27:21 pmThe future version of WinDS PRO, rebuilt in Lazarus. Square tile style?  Without rounded borders or blur or gradients. Plain colors and square shapes. The 4k background looks fine in any resolution. Small resolution images looks pixelated with stretch drawing with cover. Seems that is fast but no smooth scaling. ---------------------------------------------------------------------- nomorelogic · 2024-05-06 09:33 application for electronic invoicing in Italy: generate XML and send to tax agency legend: buttons: generazione XML = XML generationinvio documenti = send generated documentsciclo passivo = received invoices / self-billing / reverse- charge grid: autorizzate = authorized[ documentsvalidate = valid documentsgenerate = generated (xml) documentsVen/Acq = emitted or received invoicesTipo Doc. = document typeAlfa = alphanumeric part of document numberNr. Doc = document numberData Doc. = document dateTipo eFatt = electonic invoice typeCliente = customer idRagione Sociale = customer descriptionFile generato = XML file name contextual menu: anteprima = previewannulla generazione = remove XML generationControllo fattura = perform check invoice documentRigenera documente = re-create XML documentImposta = set (some document properties) ---------------------------------------------------------------------- lainz · 2024-05-07 01:43 Lookin good! I've seen you're using bgracontrols for the buttons. ---------------------------------------------------------------------- nomorelogic · 2024-05-07 07:53 Quote from: lainz on May 07, 2024, 03:43:49 amLookin good! I've seen you're using bgracontrols for the buttons.  Exactly, I replaced some standard buttons with bgracontrols buttons and the look of the whole form (IMHO) has improved a lot ---------------------------------------------------------------------- petevick · 2024-05-07 08:33 This is a stylesheet designer specifically for a Cad programme called Qcad. This is a Linux screenshot, but I also compile it for Windows, it looks pretty much identical. ---------------------------------------------------------------------- lainz · 2024-05-18 23:08 Looking good. Thanks for participating. Any more screenshots someone else? ---------------------------------------------------------------------- Lulu · 2024-05-31 18:45 Hi, a screenshot of the main window of Give Your Voice (a software to record audio book) To the top, the treeview with all chapter of the book, at bottom the audio editing panel. The second screenshot is the mixing window. https://github.com/Lulu04/Give-Your-Voice ---------------------------------------------------------------------- BrassGear · 2024-05-31 19:10 I am still learning good UI practices, but I am improving. This is from a game I released, the lobby and match configuration. Then a little eye candy where a normal TPanel and its child controls impart a quick 3x3 resampling on an OpenGL control. I must say, I really enjoyed working with OpenGL, and FreePascal+Lazarus makes it easy. ---------------------------------------------------------------------- lainz · 2024-06-01 01:59 Hi. Looking good! In my opinion add a bit more of detail like a different color for the borders to get extra details. But is just my personal taste. If you like flat controls is good as well. ---------------------------------------------------------------------- Dzandaa · 2024-06-03 13:32 Hi, Just for the fun, this is a 3D scanner with 4 line lasers,4 LEDs to light the stage, a stepper and a Webcam. Which I built a few years ago All controlled with an Arduino. It runs on Linux with a Webcam. I create the Program in C# first, and translate it in Pascal for Linux. On the right, the camera capture and on the left the reconstructed 3D model (OpenGL) B-> ---------------------------------------------------------------------- lainz · 2024-06-04 01:30 Looking good thanks for sharing! ---------------------------------------------------------------------- circular · 2024-06-05 17:44 There is great stuff here. Games and 3D scanning! Wow! ---------------------------------------------------------------------- lainz · 2024-06-15 14:16 I think we can finish the contest now if all agree because there was few contributions lately. Now it's time to vote. There are just 7 pages so it's easy to look 7 pages and choose your favorite. ---------------------------------------------------------------------- lainz · 2024-06-15 14:20 Quote from: circular on March 28, 2024, 09:36:11 amQuote from: lainz on March 27, 2024, 04:41:48 pmLazPaint by @circular Thank you the mention. There is as well a light theme: That's my favorite. Quote your favorite too. ---------------------------------------------------------------------- petevick · 2024-06-15 14:28 Quote from: zamtmn on March 27, 2024, 05:23:57 pmzcad this gets my vote ---------------------------------------------------------------------- circular · 2024-06-15 16:30 I vote Geogear by Ally. The interface looks really neat and consistent. ---------------------------------------------------------------------- cdbc · 2024-06-15 17:25 Hi I vote for ZCad Regards Benny ---------------------------------------------------------------------- Lulu · 2024-06-15 18:59 Hi, its difficult to choose without using the software... I vote also for GeoGear by Ally, the interface is very clear ---------------------------------------------------------------------- lainz · 2024-06-20 20:22 The winners are; Geogear and zcad in first place and lazpaint in second place. Thanks to everyone that used his/her time participating. ---------------------------------------------------------------------- circular · 2024-06-21 05:32 Congrats to Ally and and zamtmn! ---------------------------------------------------------------------- Lulu · 2024-06-22 18:35 Well done to all participants ! ---------------------------------------------------------------------- zamtmn · 2024-06-22 18:39 Thanks! I'll raise a mug of tea in honor of this))