#WEBWONDERS : Using device tech from your web app
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!
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.