Need suggestion on developing a custom component

[wuwuxin 28]

I need to develop a custom component, with its visual effect like below - those color bands should be able to be dragged to increase or decrease widths. 

This is certainly NOT a graphic-heavy component - I can use TPanel -  that is,  use TPanel for each band, and put all of them inside one parent panel.  but I am not sure if that is the best way.

 

Any suggestions? 

 

[Pat Foley 52]

I would use Vcl.Samples.Gauges for a start. 

 

Set some of these in a form setting TGaugeKind = (.. gkHorizontalBar 

 

Use the form mouse down events to resize the gauges by dragging. 

 

Then convert the form into a component by editing the forms dfm file. Be sure to add/set the parent.

 

This scheme allows the control to load its controls in runtime but not in the IDE.        

[Guest]

I suggest to use one component instead of two, so may be TListView or even the better option for your case, use one of these TStringGrid, TDrawGrid.

The hardest thing is to make the second row to behave like the first in matter of mouse resize, but it should be doable.

 

 

[wuwuxin 28]

Thank you @Kas Ob. and @Pat Foley

 

Actually I am trying to have the following result:  The cells are "jagged", with the freedom to INDEPENDENTLY resize cell 1/2, cell 3/4,  cell 5/6, and cell 7/8

 

Is this possible with TDrawGrid?

 

[Guest]

6 minutes ago, wuwuxin said:

Is this possible with TDrawGrid?

I don't think so, to my humble knowledge there is only one component can draw such full independent resizable cells, which is Delphi HTML components https://delphihtmlcomponents.com/ , and that using its splendid HTML table and CSS.

 

It will be relatively huge work to make VCL component with all that independent mouse resizing, but it doable, and i think TDrawGrid source will give you push on how to do it, but still huge work as you will have to build yours from the ground up.

 

 

[Lars Fosdal 1793]

TMS has some pretty powerful and flexible grids - and you can have controls in grid cells, but for something like you suggest, you'd have to do some creative programming.

https://www.tmssoftware.com/site/tmsvcluipack.asp

https://www.tmssoftware.com/site/advgrid.asp

 

What you could do, in theory, is to use several TGridPanels and splitters - but yeah - it depends on the functionality you require to be grid-like.

[Alexander Sviridenkov 360]

Zero lines of Delphi code, just one HtPanel: (artefacts on video are from GIF compression)

HTML:

 

<style>
body {padding: 20px}
td {height: 20px; resize: horizontal}
.gauge1 {background: linear-gradient(to bottom, steelblue, blue);}
.gauge2 {background: linear-gradient(to bottom, lightgreen, green);}
</style>
<table width="800">
<tr>

 <td width="50%">
  <table width="100%">
   <tr>
    <td class="gauge1" width="70%"></td>
    <td class="gauge2"></td>
   </tr>
  </table>
 </td>

 <td>
  <table width="100%">
   <tr>
    <td class="gauge1" width="70%"></td>
    <td class="gauge2"></td>
   </tr>
  </table>
 </td>


</tr>

<tr>

 <td>
  <table width="100%">
   <tr>
    <td class="gauge1" width="70%"></td>
    <td class="gauge2"></td>
   </tr>
  </table>
 </td>

 <td>
  <table width="100%">
   <tr>
    <td class="gauge1" width="70%"></td>
    <td class="gauge2"></td>
   </tr>
  </table>
 </td>

</tr>

</table>

 

Edited June 25, 2021 by Alexander Sviridenkov

[wuwuxin 28]

4 minutes ago, Alexander Sviridenkov said:

Zero lines of Delphi code, just one HtPanel: (artefacts on video are from GIF compression)

 @Alexander Sviridenkov

 

Wow!  That is exactly I am looking for.   This is HTML Component?  Fantastic.  After resizing,  is it possible to get the size of each sub "cell"?

[Alexander Sviridenkov 360]

Yes, f.e. you can give ID to each cell and use something like

 

  Caption := FormatFloat('0.0', HtPanel1.Doc.GetElementbyId('cell1').InnerWidth)

 

Also HtPanel has event OnElementResizeEnd where Sender is sized element.

[wuwuxin 28]

25 minutes ago, Alexander Sviridenkov said:

Yes, f.e. you can give ID to each cell and use something like 

 

  Caption := FormatFloat('0.0', HtPanel1.Doc.GetElementbyId('cell1').InnerWidth)

 

Also HtPanel has event OnElementResizeEnd where Sender is sized element. 

I am sold.  Now I am looking at how to order this component.

[wuwuxin 28]

@Alexander Sviridenkov

Some further questions (sorry I am an HTML novice) -

[Alexander Sviridenkov 360]

1. Resize hint is fixed. Any element can have normal hint (using title attribute or HTML hint using data--hint attribute, see HCL main demo) but on mouse hover.

2, Vertical bar within table can be added by setting border-right for first cells of outer table, larger bar can be added as absoulte positioned element

3. Row name behind table right border can be added as relatively positioned text for last cells

[wuwuxin 28]

19 minutes ago, Alexander Sviridenkov said:

1. Resize hint is fixed. Any

If so, can I hide it? 

[Alexander Sviridenkov 360]

I've sent you library update with new event OnShowResizeHint.
Please override this method to hide hint or draw custom hint.

[wuwuxin 28]

7 hours ago, Alexander Sviridenkov said:

2, Vertical bar within table can be added by setting border-right for first cells of outer table, larger bar can be added as absoulte positioned element

3. Row name behind table right border can be added as relatively positioned text for last cells

Thanks again.  I am novice to HTML/CSS - to help me jump start, do you think you can provide a little more details for ITEM 2/3, possibly with illustrative html/css sample? 

[Alexander Sviridenkov 360]

Here is updated sample

 

<style>
body {padding: 20px}
td {height: 20px; resize: horizontal; }
.gauge1 {background: linear-gradient(to bottom, steelblue, blue);}
.gauge2 {background: linear-gradient(to bottom, lightgreen, green);}
#main > tbody > tr > td:first-child {border-right: solid red 2px}
</style>
<table width="800" id="main">
<tr>

 <td width="50%">
  <table width="100%">
   <tr>
    <td class="gauge1" width="70%"></td>
    <td class="gauge2"></td>
   </tr>
  </table>
 </td>

 <td>
  <table width="100%">
   <tr>
    <td class="gauge1" width="70%"></td>
    <td class="gauge2"><div style="position:relative; left:calc(100%+10)">Row 1 name</div></td>
   </tr>
  </table>
 </td>


</tr>

<tr>

 <td>
  <table width="100%">
   <tr>
    <td class="gauge1" width="70%"></td>
    <td class="gauge2"></td>
   </tr>
  </table>
 </td>

 <td>
  <table width="100%">
   <tr>
    <td class="gauge1" width="70%"></td>
    <td class="gauge2"><div style="position:relative; left:calc(100%+10)">Row 2 name</div></td>
   </tr>
  </table>
 </td>

</tr>

</table>

 

[Mike Torrettinni 198]

On 6/25/2021 at 10:06 AM, Alexander Sviridenkov said:

 

This would be great sample to showcase on your website what can be done. Perhaps also adding some text into the grid.

Those full screenshots from projects in Gallery look great, but , except in a few examples, it's not really clear what is your component.

[Alexander Sviridenkov 360]

43 minutes ago, Mike Torrettinni said:

This would be great sample to showcase on your website what can be done. Perhaps also adding some text into the grid.

Those full screenshots from projects in Gallery look great, but , except in a few examples, it's not really clear what is your component.

Please check download section https://delphihtmlcomponents.com/download.html there are compiled samples, especially

https://delphihtmlcomponents.com/hcldemo.zip

https://delphihtmlcomponents.com/dbreports.zip

https://delphihtmlcomponents.com/csstransforms.zip

Sample above is very simple, demos contains much more complex examples.

[Mike Torrettinni 198]

 

1 hour ago, Alexander Sviridenkov said:

Sample above is very simple, demos contains much more complex examples.

Yes, it's hard to imagine how to use your components if I'm not creating full blown HTML editor or email client. Simple examples like the one above, could be very useful.

Look at the almdev style controls... long page of simple examples, menus, controls, options, selections... and more complex examples and designs.

[Guest]

The question in the topic is answered i think, and i want to go off topic.

 

@Alexander Sviridenkov I have suggestions and i would love to hear the input from Alexander and others on them, who knows may be nagging him will yield some great results.

HTML components can easily be full blown UI (VCL or FMX), the power of them is exceed any other UI library for Delphi and Pascal, by power i pointing to many things like

1) Flexibility.

2) Skinning and theming ability by changing only the CSS, and they are ready for any DPI settings.

3) Speed, the engine is faster in scrolling and drawing than FireMonkey big lists.

4) Visually the result are the same on every platform.

5) The code is the same on every platform.

6) Support Right-To-Left, also can handle and draw every font with every symbol in right way, not only drawing but support input and selecting for RTL text.

7) Great scripting engine, that can do what every one want.

 

These few things what come to mind now, but the list is more longer than that, also the site have listed few but not all as anyone looking at the site will not have full idea of what the library can do, still i didn't mention what can be drawn on HTML and CSS levels.

 

Two years ago, i built UI for android, in it i added many tweaks and workaround, but in one particular case i used the Html Editor to draw table and make some cells editable while the others read only and it worked just fine, the client was happy with the result, i wasn't because i had to use hammer and chisel in few places to overcome few obstacles, these obstacles weren't huge per se, but the workaround is to depend on script and switching between readonly and editable for a tag was somehow slow because it done on the full component.

 

So here are my thoughts 

1) I see above you solved the OP problem by adding and event, this is the main point here, more events, please add more events, the more the better, because without this new event one should add pascalscript internally and then callback Delphi code, which is fine and will work but for the OP case it is intimidating, the process is not trivial as there is no many show cases or examples does show what HTML have for events and how to do it right in this library, HTML events need searching and reading then checking if supported by DHTML.

2) Many worldwide popular applications now are using HTML with an embedded browser as UI, (Signal, Skype..) and DHTML lack one last step to be even better than them all, by adding events mentioned above and cut corners with something new, see, the UI is only input (editboxs, memos, comboboxs) and output (in this case all sort of tags, ) so what is missing is these specific targeted callbacks (event) , like hovering, adding an element and the ability to prevent it, double clicking...., again, like above this can solved by scripting but it is not trivial and will need deeper knowledge while consuming time, also will generate code that is hard to change, alter, adjust..

3) While it is not my place, but i can think of few approaches, to not solve, but make this library more usable as UI, a full use interface that replace VCL and FMX, because it can, one approach is by supporting custom classes (elements) which one can write in pascal and register them, they will have there own events that will trigger in Pascal code directly, another approach by using something like TActions or like columns in ListView, (you got the idea, it is adding them visual in object inspector and IDE designer, even if they need more html it will still simpler and more accurate than only HTML and pascalscript), where one can add a tag (an item) and it will appear on the lets say HtPanel, while all sorts of events be available to be added in object inspector means your library will handle the code and connecting it, may be (and i am saying may be) another component is needed something like htUi will be easier and will not affect the speed or functionality of HtPanel or the editor.

 

In all cases i believe you the qualified one to decide, what can be done and how, others might suggest few things or at least support this view, so if you or anyone are up to share a view, then please share what do you think.

Edited June 29, 2021 by Guest

[wuwuxin 28]

19 hours ago, Mike Torrettinni said:

Yes, it's hard to imagine how to use your components if I'm not creating full blown HTML editor or email client. Simple examples like the one above, could be very useful.

Exactly my impression - the HTML Component Web Site is quite confusing, about what that component is capable of .  The samples/demos are good, but honestly, not visually impressive/captivating at all - no offense they all look something from the 1990's.  Sorry.

 

But from the "small" example presented with this thread, it seems quite (interestingly) powerful (thanks to @Kas Ob. for pointing to HCL's capability and to @Alexander Sviridenkov kindly providing detailed examples addressing my questions).  Does HCL have the potential to be something like, WPF/XAML, or QT/QML?  Maybe too much but the official website definitely underplays its potential power, while missing the range of more creatively exciting use cases.

Edited June 29, 2021 by wuwuxin

[Guest]

1 hour ago, wuwuxin said:

the HTML Component Web Site is quite confusing

The way Alexander solved the OP problem is a brilliant example for when to use one "technology" and ditch another.

The OP was about VCL? Yes? I would have thought that FMX already had thingies to cover for what i these days find are easier achieved in HTML5/CCS3 compared to Win32/VCL painting approach.

But each time i read a post on FMX, if digging, i conclude that FMX is... they peeps that are into it are not happy. (I have only used VCL, oh and OWL and C++ and APIs, but never FMX).

I actively subscribe to Alexanders "office suite". This is gold for me. But regarding desktop VCL stuff i have DX. Regarding desktop VCL stuff there are a lot of alternatives!

Alexander do not need to put effort into the site, because all and every one who payed up for any version of his components is happy. Me too!

Mr. Sviridienkov is showing some pretty effective "muscles" regarding building components. I have some personal ideas and comments about the way support and subscription is handled, but i am sure that as his business grows he will put those thing in place. If not for me so for him, himself and and his.

If you have only the finances for one 3rd party component suite, go HTML components!

[wuwuxin 28]

Thank you all for the advice, perspective, discussion.

 

@Alexander Sviridenkov  Please allow me to ask another question:  is it doable to use HTML Component Library (HCL) to make a Property Grid, something like this:

 

 

If so,  do you think you might be able to provide some sample code illustrating that?   I think that would be cool.

[Alexander Sviridenkov 360]

@Kas Ob.Thank you.

1. Currently editor supports CSS content-editable property which enables/disables editing for any element.

2. There is CSS pointer-events property for disabling mouse events for any element. What else events you think should be added to HtPanel?

3. Library supports regsitering custom element cllasses. Class for any tag (f.e. img) can be registered using HtRegisterElementClass, this is f.e. how SVG is implemented

 HtRegisterElementClass('svg', TSVGElement);
 HtRegisterElementClass('g', TSVGGElement);

etc.

 

[Alexander Sviridenkov 360]

@Dany Marmur Thank you.