* * *

Author Topic: Designing dashboards  (Read 1575 times)

JD

  • Hero Member
  • *****
  • Posts: 1703
Designing dashboards
« 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
Windows (10, 7) - Lazarus 1.8/FPC 3.0.4, NewPascal, Delphi
Linux Mint Cinnamon  - Lazarus 1.8/FPC 3.0.4, NewPascal

Indy 10.6 series; mORMot; Zeos 7.2.1; SQLite, Firebird, PostgreSQL & MariaDB; VirtualTreeView 5.5.3 R1

lainz

  • Hero Member
  • *****
  • Posts: 2619
  • I'm coding :)
    • Lainz
Re: Designing dashboards
« Reply #1 on: May 05, 2018, 06:31:18 pm »
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

JD

  • Hero Member
  • *****
  • Posts: 1703
Re: Designing dashboards
« Reply #2 on: May 05, 2018, 06:58:12 pm »
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
Windows (10, 7) - Lazarus 1.8/FPC 3.0.4, NewPascal, Delphi
Linux Mint Cinnamon  - Lazarus 1.8/FPC 3.0.4, NewPascal

Indy 10.6 series; mORMot; Zeos 7.2.1; SQLite, Firebird, PostgreSQL & MariaDB; VirtualTreeView 5.5.3 R1

lainz

  • Hero Member
  • *****
  • Posts: 2619
  • I'm coding :)
    • Lainz
Re: Designing dashboards
« Reply #3 on: May 05, 2018, 07:21:30 pm »
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.

jamie

  • Hero Member
  • *****
  • Posts: 709
Re: Designing dashboards
« Reply #4 on: May 05, 2018, 08:01:01 pm »
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..

lainz

  • Hero Member
  • *****
  • Posts: 2619
  • I'm coding :)
    • Lainz
Re: Designing dashboards
« Reply #5 on: May 05, 2018, 08:25:49 pm »
And how you handle property and events?

For that exists controls.

jamie

  • Hero Member
  • *****
  • Posts: 709
Re: Designing dashboards
« Reply #6 on: May 05, 2018, 08:29:59 pm »
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...  :)

lainz

  • Hero Member
  • *****
  • Posts: 2619
  • I'm coding :)
    • Lainz
Re: Designing dashboards
« Reply #7 on: May 05, 2018, 08:38:35 pm »
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.

jamie

  • Hero Member
  • *****
  • Posts: 709
Re: Designing dashboards
« Reply #8 on: May 05, 2018, 09:31:17 pm »
I suppose if one wanted to get crazy you could create a Frame for each item.

lainz

  • Hero Member
  • *****
  • Posts: 2619
  • I'm coding :)
    • Lainz
Re: Designing dashboards
« Reply #9 on: May 05, 2018, 09:40:32 pm »
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.

arneolav

  • Full Member
  • ***
  • Posts: 112
    • ElTranslador
Re: Designing dashboards
« Reply #10 on: May 05, 2018, 11:05:35 pm »
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
« Last Edit: May 06, 2018, 03:09:12 pm by arneolav »
Win XP, Win7, Win 10 win64 , Lazarus 1.8.2
Delphi/DevExpress

jamie

  • Hero Member
  • *****
  • Posts: 709
Re: Designing dashboards
« Reply #11 on: May 05, 2018, 11:45:00 pm »
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..




lainz

  • Hero Member
  • *****
  • Posts: 2619
  • I'm coding :)
    • Lainz
Re: Designing dashboards
« Reply #12 on: May 06, 2018, 12:01:59 am »
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)
« Last Edit: May 06, 2018, 12:16:02 am by lainz »

JD

  • Hero Member
  • *****
  • Posts: 1703
Re: Designing dashboards
« Reply #13 on: May 06, 2018, 12:44:13 am »
@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
Windows (10, 7) - Lazarus 1.8/FPC 3.0.4, NewPascal, Delphi
Linux Mint Cinnamon  - Lazarus 1.8/FPC 3.0.4, NewPascal

Indy 10.6 series; mORMot; Zeos 7.2.1; SQLite, Firebird, PostgreSQL & MariaDB; VirtualTreeView 5.5.3 R1

lainz

  • Hero Member
  • *****
  • Posts: 2619
  • I'm coding :)
    • Lainz
Re: Designing dashboards
« Reply #14 on: May 06, 2018, 12:46:08 am »
@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.

 

Recent

Get Lazarus at SourceForge.net. Fast, secure and Free Open Source software downloads Open Hub project report for Lazarus