TMS Software | Newsletter

NEWSLETTER June 18, 2020


In this newsletter ...

FNC styles


FNC Styles has been released! FNC Styles is currently available for the TMS FNC UI Pack (v3.1) only. The core styling mechanism is implemented in TMS FNC Core (v2.3) and will be further pushed through other FNC components such as the TMS FNC Dashboard Pack in the future. FNC Styles targets 6 styles.
  • Default
  • Dark
  • Light
  • Office 2019 White
  • Office 2019 Black
  • Office 2019 Gray

Getting Started

Designtime
To start styling the FNC components, drop a TMS FNC UI Pack component on the form, right-click the component and select the Style->Manager option from the context-menu.



This will prompt you with a dialog that initially shows the built-in styles. Built-in styles are stored in the TMSFNCStylesResources.res file, separately available.



Click on a style to select it and click on the “Apply” button to apply the style to each component on the form. You can also load your own style file by clicking on the “Open” button. The built-in styles are combined style files containing styles from multiple components. The corresponding style files for the built-in styles are included in the Styles subfolder in TMS FNC Core. When right-clicking on the component, you can save your own style to a style file. This separate component style can be loaded and managed via the style manager. Please note that individual component styles for the built-in styles are not available separately.
Runtime
To start with runtime loading, add {$R 'TMSFNCStylesResources.res'} to your application first, so built-in styles are available. To load a style at runtime there are several options. When you have a style file, you can either load it via [Component].LoadSettingsFromFile, or via the TTMSFNCStylesManager. The TTMSFNCStylesManager instance also allows you to load files from a resource (via the StyleResource property), from a file (LoadStyleFromFile), a stream (LoadStyleFromStream), or plain text (LoadStyleFromText). The format for loading the resource through LoadFromResource or the StyleResource property can be found in the manager. The built-in style has the format TTMSFNCStyle_[StyleName].style, with [StyleName] being the actual style name of the file and can be loaded by using the code below:
implementation

{$R 'TMSFNCStylesResources.res'}
TMSFNCStylesManager1.LoadStyleFromResource(‘TTMSFNCStyle_FNC_Dark’);
Or
TMSFNCStylesManager.StyleResource := ‘FNC_Dark’;

JSON Formatting

The style mechanism is based on the persistence interfaces that already exist in FNC. It will generate JSON that only contains the necessary information based on the components appearance properties. The detection happens automatically, but finetuning can be done with the IsAppearanceProperty virtual. Some components need to save more information than others. Even custom components that you have designed will be styleable through the ITMSFNCPersistence interface, when inheriting from TTMSFNCCustomControl.

{
"$type":"TTMSFNCCalendar",
"Color":"#484848",
"DateAppearance":{
"$type":"TTMSFNCCalendarDateAppearance",
"BadgeFill":{
"$type":"TTMSFNCGraphicsFill",
"Color":"#FF0000",
"ColorMirror":"gcNull",
"ColorMirrorTo":"gcNull",
"ColorTo":"#808080",
"Kind":1,
"OnChanged":null,
"Opacity":1,
"Orientation":1,
"Texture":"",
"TextureMode":2
},
"BadgeFont":{
"$type":"TTMSFNCGraphicsFont",
"Color":"#FFFFFF",
"Family":"Segoe UI",
"Name":"Segoe UI",
"OnChanged":null,
"Size":10,
"IsFMX":true,
"Style":0
},
"BadgeStroke":{
"$type":"TTMSFNCGraphicsStroke",
"Color":"#FF0000",
"Kind":1,
"OnChanged":null,
"Opacity":1,
"Width":1
},
"DateAfterFill":{
"$type":"TTMSFNCGraphicsFill",
"Color":"#484848",
...





Real-time video communication from TMS WEB Core apps





As software developers having worked from home during the covid-19 lockdown, chances are you will have communicated with colleagues or customers over the web and shared audio, video, desktop... all from the browser. And to do this, no software installation was needed and it works on any Windows PC, macOS Apple device or Linux computer with a modern browser. The wonderful technology behind this is WebRTC (Web Real-Time Communication) and is an open-source protocol specification/protocol controlled by the World Wide Web Consortium (W3C).

WebRTC is usable on one side via the WebRTC API meanwhile available in any current popular browser and on the other side WebRTC servers.

During the covid-19 lockdown, Michael Van Canneyt, one of the two masterminds behind the pas2js compiler and RTL, was tasked to write a web application for real-time video communication. For his project, the web application could make use of existing free to use WebRTC servers Jitsi or OpenTok.

As Jitsi and Tokbox offer both JavaScript libraries for WebRTC communication with their servers from a web application, Michael wrote the necessary Object Pascal classes for consuming these WebRTC libraries from a TMS WEB Core web client application. Michael Van Canneyt was so impressed with these libraries, that he re-created and extended these classes for inclusion in pas2js so the open-source community could enjoy them and also wrote two demos for the TMS WEB Core framework using these classes and showcasing the integration of real-time video communication from a TMS WEB Core application.

You can explore the Jitsi demo here:
https://download.tmssoftware.com/tmsweb/demos/jitsi/

You can explore the Opentok demo here:
https://download.tmssoftware.com/tmsweb/demos/opentok/

Note that for Opentok you need to register for an OpenTok API key, Session ID and Token from Tokbox. After getting this information from a test account, you can use OpenTok free.

The full source code of both demos can be downloaded here. You need the latest version of TMS WEB Core v1.4 Ravenna for this. You will notice that these demos are HTML template based. That means that the layout of the page is done with HTML/CSS (Bootstrap) and bound to TMS WEB Core web controls via which all UI logic is provided. The nice thing is that you can not only explore these projects via your Delphi IDE, but if you are a TMS ALL-ACCESS user, you can now also open and run these demos from our beta version of TMS WEB Core for Visual Studio Code on Windows, macOS or Linux.

It clear that web technology and TMS WEB Core exposing this in an easy RAD component based way to Object Pascal developers is fascinating.






TWebScreenCapture in TMS WEB Core


Free component for making screen captures in TMS WEB Core applications


Sometimes it might be interesting to capture the content of the browser window, or parts of the browser window, as an image and send it back to a server or service. This can be a handy utility especially for customer support when wanting to see what is on the user browser when something is happening. This is at first sight not trivial to do though. The browser window is rendered from the DOM and consists typically of a collection of HTML elements. So, how could we convert this DOM of HTML elements to an image?

Fortunately the world-wide web development offerings are so incredibly rich that also for this particular need a nice JavaScript library exists. The handy JavaScript library for this case is html2canvas, an open source library for this particular task.

The documentation of html2canvas isn't extensive but specifies the essence of what we need:

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});
To start using this library, add the following library to your project HTML file

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript"></script>

As you can see, a capture is performed on the HTML element returned by document.querySelector("#capture") and returned as a HTML CANVAS element. With this, we still do not have an image though.

That's why we did a little bit more effort to create a TMS WEB Core Pascal wrapper class for this that offers 6 methods:
 
  TScreenCaptureToCanvasProc = reference to procedure(ACanvas: TJSElement);
  TScreenCaptureToDataURLProc = reference to procedure(ADataURL: string);

  TWebScreenCapture = class(TComponent)
  public
    procedure CaptureElementToCanvasElement(AElement: TJSElement; Proc: TScreenCaptureToCanvasProc);
    procedure CaptureScreenToCanvasElement(Proc: TScreenCaptureToCanvasProc);

    procedure CaptureElementToDataURL(AElement: TJSElement; Proc: TScreenCaptureToDataURLProc );
    procedure CaptureScreenToDataURL(Proc: TScreenCaptureToDataURLProc);

    procedure CaptureElementToImageFile(AElement: TJSElement;AFileName: string; AType:TImageType);
    procedure CaptureScreenToImageFile(AFileName: string; AType:TImageType);
  end;

These methods are quite straightforward to understand.

There are the first 2 method to capture the browser window or a particular HTML element and return its rendered content as a HTML CANVAS element.

To capture the screen into a HTML CANVAS element, the Pascal code becomes:
 
var
  sc: TWebScreenCapture;
begin
  sc := TWebScreenCapture.Create(Self);

  sc.CaptureScreenToCanvasElement(
    procedure(ACanvas: TJSELement)
    begin
      document.body.appendChild(ACanvas);
    end
  );
end;

As you can see, an anonymous method is used that is being called when the rendering to CANVAS is ready and it returns this CANVAS element.

The second methods capture the content as data URL. A data URL can be set as URL for a HTML IMG element for example to make it visible. It is basically base64 encoded image data. This image data could for example also be used to send the capture back to a server.

To capture the screen this way, we can write code to show this data URL in a memo control:
 
var
  sc: TWebScreenCapture;
begin
  sc := TWebScreenCapture.Create(Self);

  sc.CaptureScreenToDataURL(
    procedure(ADataURL: string)
    begin
      WebMemo1.Lines.Add(ADataURL);
    end
  );

Finally, the last 2 methods allow to perform the capture and then save the captured image to a file that can be saved on the local file system. These methods have two additional parameters, the filename that is proposed for the image file download and the image type.

To save to a PNG file for example, the code now becomes:
 
var
  sc: TWebScreenCapture;
begin
  sc := TWebScreenCapture.Create(Self);
  sc.CaptureScreenToImageFile('webcorescreen', TImageType.itPNG);
end;

To make it even more convenient, we created a non-visual component that you can drop on the form and call the methods you wish to use when you want. A very nice feature in TMS WEB Core is that you can add an attribute of the type JSLibReference to a TMS WEB Core Pascal class to specify the dependencies on JavaScript libraries. In the case of this screen capture component, this is specified via:
  [ComponentPlatforms(TMSWebPlatform)]
  [JSLibReference('https://html2canvas.hertzen.com/dist/html2canvas.min.js')]
  TWebScreenCapture = class(TScreenCapture);

The first attribute here specifies that this component is available on the tool palette whenever a TMS WEB Core web form is opened in the designer.

You can download this component free for use with TMS WEB Core v1.4 Ravenna here. To install, open, compile & install the package from the "Component Library Source" folder. This will install the design-time TWebScreenCapture component.

For use at runtime, make sure that the file from the "Core Source" folder WEBLib.ScreenCapture.pas is in your TMS WEB Core specific library path that you can set via IDE Tools, Options, TMS Web, Library path.



Barnsten webinar


Webinar, June 23: Building web applications with TMS WEB Core : standard UI, HTML templates, FNC



In this webinar, Bruno Fierens will give an overview of the different ways one can use to build user interfaces for web applications with TMS WEB Core. In a first part, focus will be on VCL-like user interfaces with use of a few controls to achieve responsive design. In a next step, he will introduce the use of HTML templates with binding to TMS WEB Core client UI control logic from Delphi with the Object Pascal language. Finally, Bruno Fierens will discuss the use of the FNC framework UI controls as another way to build web client applications from Delphi




As always, we thank all users for the numerous inputs, feedback, comments and suggestions. This is an invaluable help to steer our developments here at TMS software.

Kind regards,
TMS software team
Email: info@tmssoftware.com
Web: http://www.tmssoftware.com
Support, FAQ & Manuals: http://www.tmssoftware.com/support.asp


Follow latest developments at tmssoftware.com


NOTICE: If you wish to unsubscribe from the TMS software Newsletter, please click here.