Alexander Sviridenkov

@Rollo62 thank you. Supported CSS properties for last version are listed there

https://delphihtmlcomponents.com/css3.html

For any version this list can be obtained by calling THtDocument.SupportedCSSProperties function

CSS grids are not supported, but flex is supported since 4.4

@wuwuxin Yes, code is quite simple

in Delphi: uses htfontawesome, htdefscriptadapter.

HTML:

<style>
 body {background: white}
 table {background: #eeeeff; border-collapse: collapse}
 td {padding: 5px}
 .value {border: solid #ddd 1px; background: white; resize: horizontal}
 input {border: solid transparent 1px}
 .left {width: 10px; padding-top: 5px}
 .hidden {display: none}

</style>

<script type="passcript">
procedure Expand(Section);
begin
  $('#'+Section).toggleClass('hidden');
  this.toggleClass('fa-minus');
  this.toggleClass('fa-plus');
end;
</script>

<table width="500">
<tr>
 <td class="left" ><i onclick="expand('1')" class="fas fa-minus"></i></td>
 <td class="title" colspan="2">ID Settings</td>
</tr>
<tr id="1">
 <td class="left"></td>
 <td class="value" width="200">Name</td>
 <td class="value"><input type="text" value="Bill Smith"/></td>
</tr>
<tr id="1">
 <td class="left"></td>
 <td class="value">Address</td>
 <td class="value"><input type="text" value=""/></td>
</tr>
<tr id="1">
 <td class="left"></td>
 <td class="value">Birthday</td>
 <td class="value"><input type="date" value="01.01.1998"/></td>
</tr>

<tr>
 <td class="left" ><i onclick="expand('2')" class="fas fa-minus"></i></td>
 <td class="title" colspan="2">Marketing Settings</td>
</tr>
<tr id="2">
 <td class="left"></td>
 <td class="value">Email</td>
 <td class="value"><input type="text" value="bill@gmail.com"/></td>
</tr>
<tr id="2">
 <td class="left"></td>
 <td class="value">FrequentBuyer</td>
 <td class="value"><input type="checkbox"/></td>
</tr>

</table>

@Dany Marmur Thank you.

@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.

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.

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>

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

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

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.

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>

4 minutes ago, mvanrijnen said:

Will code signing also prevent from virusscanners see an executable as malicious ?

No. Even EV sertificate.

Dangerous bug in 10.4.2 / Android32 compiler (not sure about 64).

a, b : single

a is unitialized (= -nan in debugger), b = some value, f.e. 100.5;

if a <> b then  <code>, <code> is not executed.

ASM code:

if fValue <> aValue then
C5CCAD8C ED9D1A02         vldr s2, [sp, #8]
C5CCAD90 EEF70AC1         vcvt.f64.f32 d16, s2
C5CCAD94 ED901A00         vldr s2, [r0]
C5CCAD98 EEF71AC1         vcvt.f64.f32 d17, s2
C5CCAD9C EEF41BE0         vcmpe.f64 d17, d16
C5CCADA0 EEF1FA10         vmrs APSR_nzcv, fpscr
C5CCADA4 9001             str r0, [sp, #4]
C5CCADA6 ED8D0A00         vstr s0, [sp]
C5CCADAA D027             beq.n 0xc5ccadfc <Htmlcss.TMeasure.SetValue(float)+124>
C5CCADAC D626             bvs.n 0xc5ccadfc <Htmlcss.TMeasure.SetValue(float)+124>
C5CCADAE E7FF             b.n 0xc5ccadb0 <Htmlcss.TMeasure.SetValue(float)+48>

@Attila Kovacs thak you. There is also Calendar sample application in /Sample Projects/ folder.

How mininum enume size may affect this case? This test enum is larger than maximum setting for "Minimum enum size" parameter.

Another test:

  if e191 in LargeEnumSet then
    Writeln('YES');

No YES in output.

Output is the same, but in debugger Evaluate/Modify window Sizeof(LargeEnumSet) shows 8.

Sizeof(LargeEnumSet) is calculated at compile time, in asm code there is explicit $19

Looks like there is bug in 10.3 Linux compiler: maximum enum size is limited to 8 bytes. F.e.

type

 TMyEnum = (a1, a2, ..a100);

 TMyEnums = set of TMyEnum;

var X: TMyEnums;

sizeof(X) returns 8 on Linux platform.

@dummzeuch full source code is included for all licenses / products. Also it includes one year of support and all updates (major/minor).

Only once in a year: any delphihtmlcomponents.com product with 44% discount (5 licenses available).

Please use coupon code HB2020.

TBytes and TIdBytes are binary compatible, both are just "array of byte".

57 minutes ago, Kryvich said:

Hi, Alexander. You create incredible software! They are rich in functionality, cost money and they deserve it. But perhaps you would consider creating a simplified HTML component with basic functionality only for Community Edition users, to use in free and open source projects?

Thank you. I'll think about this.

9 minutes ago, Jacek Laskowski said:

$4000? Really?

Yes. Competitors price (not Delphi because there is no similar library for Delphi) is $15K-$50K Developing somethign similar yourself will cost at least $100K.

So $2k (with discount) for site license is quite low price.