Lazarus
Programming => General => Topic started by: JD on May 05, 2018, 06:22:26 pm
-
Hi there everyone,
I'm trying to design a dashboard like the one in the attached screenshot.
Does anyone have any experience with this using Lazarus?
Thanks a lot for your assistance,
JD
-
I can design that exactly how it looks. However, the graphs and stuff inside requires:
- Or drawing it as bitmaps
- Or drawing it as new components, with properties and so on
I already have:
- "Profile completness", is available with BGRAControls, it has the radial progress bar, that can be used to display that rounding percent.
- Tab buttons: with Material Design package, you can use the button as a tab.
The other stuff:
- When you see a panel, it's just a panel, with or without rounding borders, is the same.
- Everything else can be images or drawings with BGRABitmap
-
I can design that exactly how it looks. However, the graphs and stuff inside requires:
- Or drawing it as bitmaps
- Or drawing it as new components, with properties and so on
I already have:
- "Profile completness", is available with BGRAControls, it has the radial progress bar, that can be used to display that rounding percent.
- Tab buttons: with Material Design package, you can use the button as a tab.
The other stuff:
- When you see a panel, it's just a panel, with or without rounding borders, is the same.
- Everything else can be images or drawings with BGRABitmap
Wow! Can you please show me a comprehensive example to point me in the right direction?
Thanks,
JD
-
You need to make controls, I don't know if there is a tutorial for that.
If you don't know how to do that, I can't help you.
-
you can write a Procedure for each dash item That will receive a TRECT and canvas object minimum to start with..
The canvas is the drawing surface and the TRECT is where to place it..
In the procedure code, you then do the graphics using the TRECT and CANVAS that was given..
Parameters needed for the remaining features of the PROCEDURE can also be past to the procedure as arguments or
gotten globally, I like the global way...
For example
PROCEDURE MYCIRCLEGRAPH(ARect:TRECT, aCanvas:TCANVAS);
var
Image:TBitMap;
begin
Image := TBitMap.Create;
Image.SetSize(ARect.Width, Arect.Height);
// Here, draw everything on the Image and when complete,
ACanvas.Draw(ARect.Left,ARect.Top, Image);
Image.Free;
End;
make all your dash items this way, each using a different location of the Canvas.
I think you the idea..
-
And how you handle property and events?
For that exists controls.
-
if you want to go that route you simply create a class and set all that info and during the OnPaint event of the
parent surface they can be called from an array of the base class..
Base class would provide the common info, CANVAS. RECT etc///
The rest of it specific to the needs...
yeah I can see that in my head while sleeping... :)
-
No. I say for example the buttons or tabs. These needs not just a paint event. These needs also OnEnter OnExit OnClick. And position in the form.
For that is better to inherit from TCustomControl or TGraphicControl to use the form editor to place items.
Is easier that way. You can drag and drop elements. Set anchors. Min and Max width or height. Caption and any property you can imagine directly from the object inspector.
-
I suppose if one wanted to get crazy you could create a Frame for each item.
-
I mean, I see your point of drawing everything on a regular canvas, and is factible and good.
But at some point things will get somewhat harder, like calculating the 'mouse over' and 'mouse leave' for buttons, for example. Or creating all these rects by hand.
But it can be done in many ways, I just recommended the way I learned that's making just a control and placing it into a form.
-
Seems you are looking for same as I'm, some kind of MDI app.
My maingoal is a sizeableform with a number sizeable childforms. (May be 4 or 5)
And the user may move the forms into the position and size they want, and save this to next startup. (I'm using a XML file to store positions etc..)
So, after an advice from jamie I have been testing "forms in forms".
In the example zip-file, A mainform contains 2 "child forms".
On move of mainform all childforms does follow. This seem work ok in the example.
The childforms are sizeables and moveables. This seem work ok in the example.
I have not figured out how to avoid move childforms outside the mainform, hope it's possible.
Hope this example may give you some idea.
To avoid stealing of thread, moved to new post http://forum.lazarus.freepascal.org/index.php?topic=41168.new#new
-
If I understand you, you are referring to the child forms sliding (hiding) outside of the visual client area of the
Parent form when moving around?
if that is the case you have a couple of options
Use the OnChangeBounds, test it , and then reset it, if it does not fall within the boundaries of you choice..
The boundaries could be the client area of the parent..
The other option is the OnConstrainedResize which seems to get called on both move and resize as does the OnChangeBounds
These events allow you to test and alter the values.
If you are having issues with the ICON view of the child forms while minimized when sizing the parent form, let me know, I had
to write some windows code for that..
-
I have a demo for the original post question.
First install BGRAControls with OPM, and Material Design package from Git, since the current version in OPM does not have all the features. Then open the project.
I don't have all these components / icons featured in the first post picture right now to finish it, but as you can see is possible.
And there is some flickering in Lazarus trunk, but can be solved iterating all controls and setting DoubleBuffered property for each of them to True.
Is featured here:
- Panel and Label from normal lazarus components
- BGRASpriteAnimation for the profile picture, because it has also 'static' option to display single images with antialiasing stretch
- MDButton from MaterialDesign package (Tabs)
- BCRadialProgressBar (55% thing)
-
@lainz
Thanks for your quick example. But when I try to open your example, I get the following error message
JD
PS: I downloaded the Material Design package from GitHub
-
@lainz
Thanks for your quick example. But when I try to open your example, I get the following error message
JD
PS: I downloaded the Material Design package from GitHub
Yes, you need to install it from Git, not from the download page. The 'kind' feature is only available in the newest commits.
-
@lainz
Thanks, I've got the correct version now. :D Any ideas on how to create the buttons on the blue panel on the left of the model I sent?
JD
-
@lainz
Thanks, I've got the correct version now. :D Any ideas on how to create the buttons on the blue panel on the left of the model I sent?
JD
Is the same as the MDButton, only with the 'bottom blue line' at the left. And just changing the colors. Plus adding glyph support (I've not added that yet).
So you will need to code a bit =)
-
@lainz
Thanks, I've got the correct version now. :D Any ideas on how to create the buttons on the blue panel on the left of the model I sent?
JD
Is the same as the MDButton, only with the 'bottom blue line' at the left. And just changing the colors. Plus adding glyph support (I've not added that yet).
So you will need to code a bit =)
:D Graphics are my weakest point in programming. I gave it up when I was labouring with MFC - Microsoft Foundation Classes (or Microsoft Frustration Classes as some were calling it at that time) on C/C++.
JD
-
@lainz
Thanks a lot for your example. I was able to create a good looking dashboard. :D
JD
-
Wow this is amazing, it looks almost exactly like the original.
You can draw the shadows like this (attachment)
I suppose this could still be optimized. If the panels are all the same size it should be enough to store on shadow in the image and draw it under each control.
-
This is what I've been able to do for the moment. :D
JD