- Регистрация
- 9 Май 2015
- Сообщения
- 1,071
- Баллы
- 155
- Возраст
- 51
In todays #WEBWONDERS blog, we uncover two new components from the latest 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 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 or watch this replay:
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 = '
{ 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
No time better than a summer-time holiday to expand your horizons and set your first steps in the wonderful world of web development with TMS WEB Core. We have are, or for you looking at TMS WEB Core from different angles. Get the for Delphi or and dive into web development using all your Object Pascal RAD component based development skills!