slider: demo unit

demo/Slider/CustomSlider.lpi

@@ -47,6 +47,10 @@
         <ResourceBaseClass Value="Other"/>
         <ResourceBaseClassname Value="TFresnelForm"/>
       </Unit>
+      <Unit>
+        <Filename Value="DemoSlider.pas"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
     </Units>
   </ProjectOptions>
   <CompilerOptions>

demo/Slider/CustomSlider.lpr

@@ -10,7 +10,7 @@ uses
   athreads,
   {$ENDIF}
   Fresnel, // this includes the Fresnel widgetset
-  Fresnel.Forms, MainUnit
+  Fresnel.Forms, MainUnit, DemoSlider
   { you can add units after this };
 
 {$R *.res}

demo/Slider/DemoSlider.pas

@@ -0,0 +1,206 @@
+unit DemoSlider;
+
+{$mode ObjFPC}{$H+}
+
+interface
+
+uses
+  Classes, SysUtils, math, Fresnel.DOM, Fresnel.Controls, Fresnel.Classes;
+
+type
+
+  { TDemoSlider }
+
+  TDemoSlider = class(TDiv)
+  private
+    FMaxPosition: TFresnelLength;
+    FMinPosition: TFresnelLength;
+    FPosition: TFresnelLength;
+    FValueFormat: string;
+    function GetCaption: TFresnelCaption;
+    procedure SetCaption(const AValue: TFresnelCaption);
+    procedure SetMaxPosition(const AValue: TFresnelLength);
+    procedure SetMinPosition(const AValue: TFresnelLength);
+    procedure SetPosition(AValue: TFresnelLength);
+    procedure SetValueFormat(const AValue: string);
+    procedure UpdateValueLabel;
+    procedure UpdatePosition;
+  public
+    const
+      cStyle = ''
+       +'.SliderCaptionDiv {'
+       +'  margin-bottom: 4px;'
+       +'  font-size: 12px;'
+       +'  width: 100%;'
+       +'}'
+       +'.SliderLabel {'
+       +'}'
+       +'.SliderValue {'
+       +'  margin-left: 5px;'
+       +'  font-size: 13px;'
+       +'  font-weight: 700;'
+       +'  color: #f66020;'
+       +'}'
+       +'.SliderDiv {'
+       +'  margin: 7px 0 5px;'
+       +'  position: relative;'
+       +'  border: 1px solid #5080e0;'
+       +'  background-color: #b6d6f0;'
+       +'  height: 9px;'
+       +'  border-radius: 6px;'
+       +'  width: 100%;'
+       +'}'
+       +'.SliderRange {'
+       +'  display: block;'
+       +'  position: absolute;'
+       +'  z-index: 1;'
+       +'  font-size: .7em;'
+       +'  border: 0;'
+       +'  background-color: #5ca0cc;'
+       +'  top: 0;'
+       +'  height: 100%;'
+       +'}'
+       +'.SliderPoint {'
+       +'  position: absolute;'
+       +'  z-index: 2;'
+       +'  width: 15px;'
+       +'  height: 15px;'
+       +'  border: 1px solid #385590;'
+       +'  background-color: #fff;'
+       +'  border-radius: 50%;'
+       +'  cursor: pointer;'
+       +'  top: -.3em;'
+       +'  margin-left: -.6em;'
+       +'}';
+    var
+    CaptionDiv: TDiv;
+    SliderLabel: TLabel; // inside CaptionDiv
+    SliderValue: TLabel; // inside CaptionDiv
+    SliderDiv: TDiv;
+    SliderRange: TDiv; // inside SliderDiv
+    SliderPoint: TDiv; // inside SliderDiv
+    constructor Create(AOwner: TComponent); override;
+    property MinPosition: TFresnelLength read FMinPosition write SetMinPosition;
+    property MaxPosition: TFresnelLength read FMaxPosition write SetMaxPosition;
+    property Position: TFresnelLength read FPosition write SetPosition;
+    property Caption: TFresnelCaption read GetCaption write SetCaption;
+    property ValueFormat: string read FValueFormat write SetValueFormat;
+  end;
+
+implementation
+
+{ TDemoSlider }
+
+function TDemoSlider.GetCaption: TFresnelCaption;
+begin
+  Result:=SliderLabel.Caption;
+end;
+
+procedure TDemoSlider.SetCaption(const AValue: TFresnelCaption);
+begin
+  SliderLabel.Caption:=AValue;
+end;
+
+procedure TDemoSlider.SetMaxPosition(const AValue: TFresnelLength);
+begin
+  if FMaxPosition=AValue then Exit;
+  FMaxPosition:=AValue;
+  FMinPosition:=Min(MinPosition,MaxPosition);
+  FPosition:=Min(MaxPosition,Max(MinPosition,Position));
+  UpdatePosition;
+end;
+
+procedure TDemoSlider.SetMinPosition(const AValue: TFresnelLength);
+begin
+  if FMinPosition=AValue then Exit;
+  FMinPosition:=AValue;
+  FMaxPosition:=Max(MinPosition,MaxPosition);
+  FPosition:=Min(MaxPosition,Max(MinPosition,Position));
+  UpdatePosition;
+end;
+
+procedure TDemoSlider.SetPosition(AValue: TFresnelLength);
+begin
+  AValue:=Min(MaxPosition,Max(MinPosition,AValue));
+  if AValue=FPosition then exit;
+  FPosition:=AValue;
+  UpdatePosition;
+end;
+
+procedure TDemoSlider.SetValueFormat(const AValue: string);
+begin
+  if FValueFormat=AValue then Exit;
+  FValueFormat:=AValue;
+  UpdateValueLabel;
+end;
+
+procedure TDemoSlider.UpdateValueLabel;
+var
+  s: String;
+begin
+  s:=Format(ValueFormat,[Position]);
+  writeln('AAA1 TDemoSlider.UpdateValueLabel ',Position,' ',s);
+  SliderValue.Caption:=s;
+end;
+
+procedure TDemoSlider.UpdatePosition;
+var
+  p: TFresnelLength;
+  s: String;
+begin
+  p:=(Position-MinPosition)/(MaxPosition-MinPosition);
+  s:=FloatToStr(p)+'%';
+  SliderRange.Style:='width: '+s;
+  SliderPoint.Style:='left: '+s;
+  UpdateValueLabel;
+end;
+
+constructor TDemoSlider.Create(AOwner: TComponent);
+begin
+  inherited Create(AOwner);
+  FMinPosition:=0;
+  FMaxPosition:=100;
+  FValueFormat:='%fpx';
+
+  CaptionDiv:=TDiv.Create(Self);
+  with CaptionDiv do begin
+    Name:='CaptionDiv';
+    CSSClasses.Add('SliderCaptionDiv');
+    Parent:=Self;
+  end;
+  SliderLabel:=TLabel.Create(Self);
+  with SliderLabel do begin
+    Name:='SliderLabel';
+    CSSClasses.Add('SliderLabel');
+    Caption:='Position';
+    Parent:=CaptionDiv;
+  end;
+  SliderValue:=TLabel.Create(Self);
+  with SliderValue do begin
+    Name:='ValueLabel';
+    CSSClasses.Add('SliderValue');
+    Parent:=CaptionDiv;
+  end;
+
+  SliderDiv:=TDiv.Create(Self);
+  with SliderDiv do begin
+    Name:='SliderDiv';
+    CSSClasses.Add('SliderDiv');
+    Parent:=Self;
+  end;
+  SliderRange:=TDiv.Create(Self);
+  with SliderRange do begin
+    Name:='SliderRangeDiv';
+    CSSClasses.Add('SliderRange');
+    Parent:=SliderDiv;
+  end;
+  SliderPoint:=TDiv.Create(Self);
+  with SliderPoint do begin
+    Name:='SliderPointDiv';
+    CSSClasses.Add('SliderPoint');
+    Parent:=SliderDiv;
+  end;
+end;
+
+end.
+

demo/Slider/MainUnit.lfm

@@ -5,38 +5,4 @@ object FresnelSliderForm: TFresnelSliderForm
   FormWidth = 320
   FormHeight = 240
   OnCreate = FresnelSliderFormCreate
-  object Div1: TDiv
-    object CaptionDiv: TDiv
-      CSSClasses.Strings = (
-        'SliderCaptionDiv'
-      )
-      object CaptionLabel: TLabel
-        CSSClasses.Strings = (
-          'SliderLabel'
-        )
-        Caption = 'Caption'
-      end
-      object ValueLabel: TLabel
-        CSSClasses.Strings = (
-          'SliderValue'
-        )
-        Caption = 'Value'
-      end
-    end
-    object SliderDiv: TDiv
-      CSSClasses.Strings = (
-        'Slider'
-      )
-      object SliderRangeDiv: TDiv
-        CSSClasses.Strings = (
-          'SliderRange'
-        )
-      end
-      object SliderPointDiv: TDiv
-        CSSClasses.Strings = (
-          'SliderPoint'
-        )
-      end
-    end
-  end
 end

demo/Slider/MainUnit.pas

@@ -5,20 +5,13 @@ unit MainUnit;
 interface
 
 uses
-  Classes, SysUtils, Fresnel.Forms, Fresnel.DOM, Fresnel.Controls;
+  Classes, SysUtils, Fresnel.Forms, Fresnel.DOM, Fresnel.Controls, DemoSlider;
 
 type
 
   { TFresnelSliderForm }
 
   TFresnelSliderForm = class(TFresnelForm)
-    CaptionDiv: TDiv;
-    Div1: TDiv;
-    CaptionLabel: TLabel;
-    SliderDiv: TDiv;
-    SliderPointDiv: TDiv;
-    SliderRangeDiv: TDiv;
-    ValueLabel: TLabel;
     procedure FresnelSliderFormCreate(Sender: TObject);
   private
   public
@@ -34,58 +27,20 @@ implementation
 { TFresnelSliderForm }
 
 procedure TFresnelSliderForm.FresnelSliderFormCreate(Sender: TObject);
+var
+  Slider: TDemoSlider;
 begin
-  Stylesheet.Text:=
-     'div { border: 1px solid; }'
-    +'.SliderCaptionDiv {'
-    +'  margin-bottom: 4px;'
-    +'  font-size: 12px;'
-    +'  width: 100%;'
-    +'  border: 1px solid;'
-    +'}'
-    +'.SliderLabel {'
-    +'}'
-    +'.SliderValue {'
-    +'  margin-left: 5px;'
-    +'  font-size: 13px;'
-    +'  font-weight: 700;'
-    +'  color: #f66020;'
-    +'}'
-    +'.Slider {'
-    +'  margin: 15px 0 5px;'
-    +'  position: relative;'
-    +'  border: 1px solid #5080e0;'
-    +'  background-color: #b6d6f0;'
-    +'  height: 9px;'
-    +'  border-radius: 6px;'
-    +'  width: 100%;'
-    +'}'
-    +'.SliderRange {'
-    +'  display: block;'
-    +'  position: absolute;'
-    +'  z-index: 1;'
-    +'  font-size: .7em;'
-    +'  border: 0;'
-    +'  background-color: #5ca0cc;'
-    +'  top: 0;'
-    +'  height: 100%;'
-    +'}'
-    +'.SliderPoint {'
-    +'  position: absolute;'
-    +'  z-index: 2;'
-    +'  width: 15px;'
-    +'  height: 15px;'
-    +'  border: 1px solid #385590;'
-    +'  background-color: #fff;'
-    +'  border-radius: 50%;'
-    +'  cursor: pointer;'
-    +'  top: -.3em;'
-    +'  margin-left: -.6em;'
-    +'}'
-    ;
-  Div1.Style:='width: 150px';
-  SliderRangeDiv.Style:='width: 50%;';
-  SliderPointDiv.Style:='left: 50%;';
+  Stylesheet.Text:=TDemoSlider.cStyle;
+
+  Slider:=TDemoSlider.Create(Self);
+  with Slider do begin
+    Name:='Slider';
+    Style:='width: 150px';
+    MinPosition:=0;
+    MaxPosition:=100;
+    Position:=30;
+    Parent:=Self;
+  end;
 end;
 
 end.

src/skia/fresnel.skiarenderer.pas

@@ -93,6 +93,8 @@ type
     FCanvas: ISkCanvas;
   protected
     procedure DrawElBorder(El: TFresnelElement; Params: TBorderAndBackground); override;
+    procedure DrawImage(const aLeft, aTop, aWidth, aHeight: TFresnelLength;
+      const aImage: TFPCustomImage); override;
     procedure FillRect(const aColor: TFPColor; const aRect: TFresnelRect); override;
     procedure Line(const aColor: TFPColor; const x1, y1, x2, y2: TFresnelLength); override;
     procedure TextOut(const aLeft, aTop: TFresnelLength;
@@ -358,9 +360,9 @@ begin
     SkFamily:=aTypeFace.CSSFamily;
     if SkFamily='' then
       SkFamily:=SkDefaultFamilyname;
-    aTypeface.SKTypeFace := TSkTypeface.MakeFromName(SkFamily, aFontStyle);
+    aTypeface.SKTypeFace := TSkTypeface.MakeFromName(UnicodeString(SkFamily), aFontStyle);
     if aTypeface.SKTypeFace=nil then
-      aTypeface.SKTypeFace := TSkTypeface.MakeFromName(SkDefaultFamilyname, aFontStyle);
+      aTypeface.SKTypeFace := TSkTypeface.MakeFromName(UnicodeString(SkDefaultFamilyname), aFontStyle);
   end;
 
   aFont:=TFresnelSkiaFont.Create;
@@ -442,6 +444,8 @@ var
   SkCorner: TSkRoundRectCorner;
   Side: TFresnelCSSSide;
 begin
+  if El=nil then ;
+
   if (Params.Box.Width<=MinStrokeWidth)
       or (Params.Box.Height<=MinStrokeWidth) then
   begin
@@ -521,6 +525,12 @@ begin
   end;
 end;
 
+procedure TFresnelSkiaRenderer.DrawImage(const aLeft, aTop, aWidth,
+  aHeight: TFresnelLength; const aImage: TFPCustomImage);
+begin
+  writeln('ToDo: TFresnelSkiaRenderer.DrawImage ',aLeft,' ',aTop,' ',aWidth,' ',aHeight,' ',aImage<>nil);
+end;
+
 procedure TFresnelSkiaRenderer.FillRect(const aColor: TFPColor;
   const aRect: TFresnelRect);
 var
@@ -554,12 +564,12 @@ var
   X, Y: TFresnelLength;
 begin
   if not TFresnelSkiaFontEngine.GetFont(aFont,FreSkiaFont) then exit;
-  //writeln('TFresnelSkiaRenderer.TextOut Origin=',Origin.ToString,' LeftTop=',aLeft,',',aTop,' FontSize=',FreSkiaFont.SKFont.Size,' Col=',dbgs(aColor),' "',aText,'" Top=',FreSkiaFont.SKMetrics.Top,' Ascent=',FreSkiaFont.SKMetrics.Ascent,' Descent=',FreSkiaFont.SKMetrics.Descent,' Bottom=',FreSkiaFont.SKMetrics.Bottom,' CapHeight=',FreSkiaFont.SKMetrics.CapHeight);
+  //writeln('TFresnelSkiaRenderer.TextOut Origin=',Origin.ToString,' Left=',aLeft,' Top=',aTop,' FontSize=',FreSkiaFont.SKFont.Size,' Color=',dbgs(aColor),' "',aText,'" FontTop=',FreSkiaFont.SKMetrics.Top,' Ascent=',FreSkiaFont.SKMetrics.Ascent,' Descent=',FreSkiaFont.SKMetrics.Descent,' FontBottom=',FreSkiaFont.SKMetrics.Bottom,' CapHeight=',FreSkiaFont.SKMetrics.CapHeight);
   SkPaint:=TSkPaint.Create;
   SkPaint.setColor(FPColorToSkia(aColor));
   aTextBlob:=TSkTextBlob.MakeFromText(UnicodeString(aText),FreSkiaFont.SKFont);
   X:=FOrigin.X+aLeft;
-  Y:=FOrigin.Y+aTop + FreSkiaFont.SKMetrics.CapHeight;
+  Y:=FOrigin.Y+aTop - FreSkiaFont.SKMetrics.Ascent;
   Canvas.DrawTextBlob(aTextBlob, X, Y, SkPaint);
 end;