procedure TCompassForm.CompassClick(Sender: TObject);
begin
  if not compass.Started then
  begin
    compass.Start;
  end;
end;

unit WEBLib.Compass;

interface

uses
  Classes, Web, JS, WEBLib.WebTools, WEBLib.WebCtrls, WEBLib.Controls;

type
  TCompassHeadingEvent = procedure(Sender: TObject; Heading: double) of object;

  TCompass = class(TWebCustomControl)
  private
    FImageURL: string;
    FDeviceOrientation: TWebDeviceOrientation;
    FOnHeadingChange: TCompassHeadingEvent;
    function GetStarted: boolean;
    procedure SetImageURL(const Value: string);
  protected
    procedure HandleHeadingChange(Sender: TObject; AHeading: double);
    function CreateElement: TJSElement; override;
  public
    procedure CreateInitialize; override;
    destructor Destroy; override;
    function Enabled: boolean;
    procedure Start;
    property Started: boolean read GetStarted;
  published
    property ImageURL: string read FImageURL write SetImageURL;
    property OnHeadingChange: TCompassHeadingEvent read FOnHeadingChange write FOnHeadingChange;
  end;

  TWebCompass = class(TCompass); {NOPP}

implementation

const
  compassURL = 'https://www.tmssoftware.com/site/webcore/demos/compass.png';

{ TCompass }

function TCompass.CreateElement: TJSElement;
begin
  // the control consists of an IMG HTML element
  Result := document.createElement('IMG');

  // the URL of the image is either set to the default image or a custom compass image
  if FImageURL <> '' then
    Result.setAttribute('src', FImageURL)
  else
    Result.setAttribute('src', compassURL);
end;

procedure TCompass.CreateInitialize;
begin
  inherited;
  // internally created non-visual component to capture the orientation info
  FDeviceOrientation := TWebDeviceOrientation.Create(Self);
  FDeviceOrientation.OnHeadingChange := HandleHeadingChange;
  // default size of the control
  Width := 270;
  Height := 270;
end;

destructor TCompass.Destroy;
begin
  FDeviceOrientation.Free;
  inherited;
end;

function TCompass.Enabled: boolean;
begin
  Result := FDeviceOrientation.Enabled;
end;

function TCompass.GetStarted: boolean;
begin
  Result := FDeviceOrientation.Started;
end;

procedure TCompass.HandleHeadingChange(Sender: TObject; AHeading: double);
var
  el: TJSHTMLElement;
begin
  // get the handle of the HTML element that represents the compass control
  el := TJSHTMLElement(ElementHandle);

  // apply a rotation transform on the IMG element holding the compass
  asm
    el.style.transform = `rotate(${-AHeading}deg)`;
  end;

  if Assigned(OnHeadingChange) then
    OnHeadingChange(Self, AHeading);
end;

procedure TCompass.SetImageURL(const Value: string);
begin
  // property setter for the compass image URL property. Updates the HTML IMG element with it when needed.
  if FImageURL <> Value then
  begin
    FImageURL := Value;

    if Assigned(ElementHandle) then
    begin
      if FImageURL <> '' then
        ElementHandle.setAttribute('src', FImageURL)
      else
        ElementHandle.setAttribute('src', compassURL);
    end;
  end;
end;

procedure TCompass.Start;
begin
  FDeviceOrientation.Start;
end;

end.