#WEBWONDERS : Using device tech from your web app

TMS Software Delphi  Components

In todays #WEBWONDERS blog, we uncover two new components from the latest TMS WEB Core v1.8.2.0 release that show how easy it is to access device hardware. As a bonus, there is a small free component based on one of these new system functionality components.

Speech synthesis

To bring your message with an extra touch, you can these days easily take advantage of speech synthesis that is built-in in any modern browser. The browser offers an API for it and a new TMS WEB Core non-visual component makes it extremely easy to use. It is literally not more difficult that dropping the component on the form and call:

WebSpeechSynthesis.Speak('It cannot be easier to make me speak');

There are some additional settings that let you further customize this. If you do not like the default voice the browser offers, you can change the voice pitch and rate with the WebSpeechSynthesis.Pitch and WebSpeechSynthesis.Rate properties. And there is more, most browsers will offer different voices you can select from. The WebSpeechSynthesis component retrieves the available voices and makes these accessible via the WebSpeechSynthesis.Voices: TStringList property. This holds a descriptor name for the different voices offer and this descriptor name can be set toWebSpeechSynthesis.Voice to select another voice.

Of course, you will want to experience this speech synthesis yourself first hand, so head-over to our demo and have fun playing with it or watch a recording

Device orientation

Most modern smartphones and tables come these days with a built-in device orientation sensor. And the modern browsers running on these devices already offer access to this sensor. So, in the same philosophy where the VCL offers Windows system functionality via components, TMS WEB Core offers browser functionality via easy to use components. The new TWebDeviceOrientation component is extremely simple to use. Drop it on the form, call the WebDeviceConnection.Start method to start retrieving the sensor info and the event OnHeadingChange is triggered whenever the physical orientation of the device changes. It returns in degrees the direction of the device. 

Now, we have created a small free component that turns the non-visual device orientation sensor component into a visual compass component. You can use this easily from a TMS WEB Core web client application by including the unit WEBLib.Compass in the uses list and create the component:

  compass := TWebCompass.Create(Self);
  compass.Parent := Self;
  compass.Top := 10;
  compass.Left := 10;
  compass.OnClick := CompassClick;

Here the component is created and from an event handler for clicking the compass, the compass will start to capture the device orientation sensor info:

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

One important notice: for the device orientation sensor data to be available for your web app, the app needs to be hosted on a HTTPS enabled domain!

You can discover this demo from a device with such device orientation sensor here or watch this replay:
TMS Software Delphi  Components

Free compass component

Finally, a small word about the free component to visualize the device orientation info via a compass. This is basically a visual component (so, it descends from TWebCustomControl) that shows a picture of a compass (a default one or a customized one) and internally, a non-visual TWebDeviceOrientation component is created and its OnHeadingChange event is handled by the component. From this event handler, a transform is applied to the image of the component to let the compass rotate according to the heading of the device. The code comes down to: 

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.

Expand your horizons