A local school in the town where the TMS office is located organized last week for the kids a project where they could experience an entire day in a working place they dream of for their future career.
We had the pleasure to welcome Obama in our office. Obama is an 11-year-old boy who would love to become a software developer. We at TMS Software offered him the opportunity to follow us for a day and see what it takes to be a software developer. To inspire Obama and raise the interest of the next generation, we wanted to show Obama what a great variety of platforms we could tackle with our beloved tool Delphi and our frameworks. And what better way to captivate the youth then to create a game?

We choose the code-breaking game Mastermind that was invented in 1970 by Mordecai Meirowitz.
For those who don’t know the game, the purpose is to guess the code created by your opponent, or in this case the computer, by using four colored pegs. There are six colors to choose from and after each guess the opponent gives feedback on how many colors are correct and how many colored pegs are in the right position. In our game we decided that the red mark would indicate that the peg was in the correct place and a white mark if the color was used in the code, but not on the position you’ve guessed. To make it a little easier, we’ve also made sure that the colors are only used once and no empty spots are in the pattern.

If you already want to play our game before we explain how everything works, you can do this at www.tmssoftware.com/MasterMind.

As we wanted to show the power of our components and use it on almost every platform on the planet, it was a logical choice to work with our FNC components. This way we can use the same codebase to create a VCL, FMX and web application. A progressive web application to be precise. The advantages for a PWA application are clear:
- The application has a responsive design, this means that it adapts automatically to the device screen so it looks good on mobile and desktop.
- It is aware of status, it continues to work also when you are offline.
- You can install the application on mobile devices and Chrome OS, without going to a censored application store.
- It looks like a native application running full-screen with access to the hardware.
The only remark here is that it should initially be accessed via HTTPS. As you can see on both pictures below an example where you can see the web application on the left and then the downloaded app on the right which is launched as installed app and is running full-screen and offline.



So, a TMS web progressive web application is the best way to let Obama show what he built to all of his friends and family. It is as easy as sharing the link to play the game in an internet browser and you can also download and install it on your phone or tablet to have it available even when you are offline or want to save some mobile data.

To put the icing on the cake, we didn’t just create the game as progressive web application. This served also as a proof of concept to create a TMS Electron project created in Delphi from the same source code! This technology is in development in our lab and this will be part of the TMS WEB Core 1.2 Padua release. It allowed us to have an out-of-the-box working and installable desktop application for Windows, macOS (macOS 64-bit app to be precise), and on Linux in a matter of minutes. Here are some screenshots of this cross platform TMS Electron desktop application on Windows, macOS and Ubuntu. As we guess that many of you are eager to work with this awesome technology, we are working hard to make a TMS WEB Core 1.2 Padua Beta release available as soon as possible to our TMS ALL-ACCESS users.


Now to get to the programming. We started with the idea to create a control for one entry containing the four colored pins, a check button and the four markers that evaluate your guess.

A quick look in the wide range of FNC UI components we’ve already available, taught us that the TTMSFNCBitmapSelector looks the most similar component to what we want to create. So we took the custom FNC component this TTMSFNCBitmapSelector was derived from and started with the TTMSFNCDefaultSelector. This would be the basis for our FNC UI component TTMSFNCMasterMindControl. We built the board by creating 12 of our UI controls and placed them underneath each other with the use of top align.

It took us no effort to evenly space everything horizontally or to scale everything when the window is resized, as this is already done in the class TTMSFNCDefaultSelector. We just had to draw our images and the first line was already visible on our screen.



To get a little more in detail. We’ve created one row with five columns, where we use images to draw the four pegs with one TTMSFNCBitmapContainer, which contains the images for all the colors. The public property DataInteger that exists for every TTMSFNCCustomSelectorItem in the TTMSFNCDefaultSelector is used to hold the value of the selected color. The “Check” is just text shown in the item and the four check markers are drawn via TTMSFNCGraphics, where we just calculate the optimal size to draw four circles and fill the color of the ellipsis according to the number of correct pegs.
Then we checked how the interaction with mouse, keyboard and touch could be realized to ensure the game can be played on a variety of devices. With mouse or touch, consecutive clicks on each of the 4 positions cycles through the colors. We’ve added navigation between positions with the left and right arrow keys and cycling through color per position with arrow up and down. This UI behavior was again fairly easy to implement due to the fact that most of the behavior was already in the superclass.
We use the left and right arrow keys to navigate within our own control and as you can see below, you have the prove that this is very simple as the GetPreviousSelectableItem and GetNextSelectableItem are both functions from the TTMSFNCCustomSelector.

procedure TTMSFNCMasterMindControl.HandleKeyDown(var Key: Word;
  Shift: TShiftState);
var
  dataInt: NativeInt;
begin
  case Key of
    KEY_LEFT: SelectedItemIndex := GetPreviousSelectableItem;
    KEY_RIGHT: SelectedItemIndex := GetNextSelectableItem;
    KEY_UP:
      begin
        if (SelectedItemIndex >= 0) and (Items.Items[SelectedItemIndex].DataString = 'image') then
        begin
          dataInt := 1 + Items[SelectedItemIndex].DataInteger;
          if (dataInt > 6)then
            dataInt := 1;
          Items[SelectedItemIndex].DataInteger := dataInt;
          Invalidate;
        end;
      end;
      ….

end;

procedure TTMSFNCMasterMindControl.HandleMouseUp(Button: TTMSFNCMouseButton;
  Shift: TShiftState; X, Y: Single);
var
  dataInt: NativeInt;
begin
  if Enabled then
  begin
    inherited;
    if (SelectedItemIndex >= 0) and (Items.Items[SelectedItemIndex].DataString = 'image') then
    begin
      dataInt := 1 + Items[SelectedItemIndex].DataInteger;
      if (dataInt > 6)then
        dataInt := 1;
      Items[SelectedItemIndex].DataInteger := dataInt;
      Invalidate;
  end;
end;

procedure TTMSFNCMasterMindControl.DrawItemContent(AGraphics: TTMSFNCGraphics;
  ADisplayItem: TTMSFNCCustomSelectorDisplayItem);
var
  di: TTMSFNCCustomSelectorItem;
  idx: Integer;
  bmp: TTMSFNCBitmap;
  pt1: TPointF;
  checkPinsRect: TRectF;
  side: Single;
  i: Integer;
  tempPCorrect: Integer;
  tempCCorrect: Integer;
  w, h: Single;
  s: string;
begin
  inherited;
  di := ADisplayItem.Item;
  // draw the peg using a bitmapcontainer image
  if Assigned(di) and (di.DataString = 'image') then
  begin
    idx := di.DataInteger;
    AGraphics.BitmapContainer := BitmapContainer;
      case idx of
        1: s := 'red';
        2: s := 'blue';
        3: s := 'yellow';
        4: s := 'orange';
        5: s := 'green';
        6: s := 'purple';
        else s := 'empty';
      end;
    AGraphics.DrawBitmapWithName(ADisplayItem.Rect, s);
  end;
  // draw the score
  if Assigned(di) and (di.DataString = 'check') then
  begin
    w := ADisplayItem.Rect.Right - ADisplayItem.Rect.Left;
    h := ADisplayItem.Rect.Bottom - ADisplayItem.Rect.Top;
     if(w < h) then
       side := w / 2
     else
       side := h / 2;
     tempPCorrect := FPosCorrect;
     tempCCorrect := FColorCorrect;
     // retrieve scores
     for i := 0 to 3 do
     begin
       if(tempPCorrect > 0) then
       begin
         FTColors[i]:= gcRed;
         Dec(tempPCorrect);
       end
       else if (tempCCorrect > 0) then
       begin
         FTColors[i] := gcWhite;
         Dec(tempCCorrect);
       end
       else
         FTColors[i] := gcNull;
     end;
     // Mastermind row is active, so use active color
     if (Enabled = true) or (FPosCorrect = 4) then
     begin
       AGraphics.Fill.Color := activeColor;
       AGraphics.Stroke.Color := activeColor;
     end
     else
     begin
       AGraphics.Fill.Color := boardcolor;
       AGraphics.Stroke.Color := boardcolor;
     end;
     // draw 4 score circles in correct score color
     AGraphics.DrawRectangle(ADisplayItem.Rect);
     AGraphics.Stroke.Color := gcBlack;
     checkPinsRect := RectF(ADisplayItem.Rect.Left + 2, ADisplayItem.Rect.Top + 2, ADisplayItem.Rect.Left + side - 2, ADisplayItem.Rect.Top + side - 2);
     AGraphics.Fill.Color := FTColors[0];
     AGraphics.DrawEllipse(checkPinsRect);
     checkPinsRect := RectF(ADisplayItem.Rect.Left + 2, ADisplayItem.Rect.Top + side + 2, ADisplayItem.Rect.Left + side - 2, ADisplayItem.Rect.Top + (side * 2) - 2);
     AGraphics.Fill.Color := FTColors[1];
     AGraphics.DrawEllipse(checkPinsRect);
     checkPinsRect := RectF(ADisplayItem.Rect.Left + side + 2, ADisplayItem.Rect.Top + 2,  ADisplayItem.Rect.Left + (side*2) - 2, ADisplayItem.Rect.Top + side - 2);
     AGraphics.Fill.Color := FTColors[2];
     AGraphics.DrawEllipse(checkPinsRect);
     checkPinsRect := RectF(ADisplayItem.Rect.Left + side + 2, ADisplayItem.Rect.Top + side + 2, ADisplayItem.Rect.Left + (side*2) - 2, ADisplayItem.Rect.Top + (side * 2) - 2);
     AGraphics.Fill.Color := FTColors[3];
     AGraphics.DrawEllipse(checkPinsRect);
  end;
end;

Time flies as today we already celebrate the 24th birthday of Delphi. The past 24 years have been an amazing, adventurous and always exciting voyage!

Looking back at 1995, Delphi was nothing short of a dramatic breakthrough in productivity for software development.



Before, I still remember that creating a Windows application created with Turbo Pascal for Windows also required having the Resource Workshop tool ready. We'd typically create dialogs and other resources via the Resource Workshop. And then came the tedious process of linking the UI control logic to the elements on the dialog via IDs. One mismatching ID and the dialog would be broken. Other than this, we merely had to use the Windows API to achieve even the smallest UI feature.

Then came Delphi. No more need for Resource Workshop. Direct usage of the Windows API could be dramatically decreased as Delphi introduced the integrated form designer and more importantly the UI control model mapping on existing Windows controls but also open to extend and create custom controls, seamless binding to a database and even live design-time data. In a nutshell, us, Pascal developers could create Windows applications 10 times faster with 10 times more features.

The next 24 years continued that quest for packing ever more programming productivity and reaching out to new targets. Soon Win32 support was added in Delphi 2. The world of web development opened with the inclusion of the breakthrough product IntraWeb from Atozed. Ever more out of the box support for all kinds of databases, multi-tier development and internet server development found a place in successive Delphi releases. It was waiting till 2009 for the breakthrough to add Unicode support and 2011 to bring the power of Delphi to the 4 major operating systems: Windows, macOS, iOS and Android. We conveniently skip the short passages of bringing Delphi to Linux with Kylix and to the .NET framework world with Delphi 8


In a fast moving and ever changing technology landscape, one could wonder why someone can have this passionate relationship with Delphi?

For a change, let's try to find an analogy with real estate instead of with cars :) The three most important things when looking for real estate are: "Location, Location, Location".

So, the three most important things for a Delphi developer are:

• Component model: abstracting technology and allowing to focus on business problems instead of technology
• Component model: allowing code reuse among developers in the team, across applications and across platforms
• Component model: providing an access to 3rd party code libraries in a consistent way

A few months ago we have started our experimental work with Electron. After the working proof of concept, our goal was to wrap as many Electron API for the Delphi developers as possible. But of course it's not just the Electron API that can be used, you can easily transfer your already existing code to make it a desktop application! We have already given a small teaser about this in a previous blog post.
Right now we would like to take the opportunity to give a bit more insight on the new upcoming TMS Web Electron Application support.

IDE integration

You are probably already familiar with creating a TMS Web Application or a progressive web application. The procedure is identical, and all you have to do to create a new Electron application is to select the TMS Web Electron Application from the wizard:



It generates a project similar to a TMS Web PWA Application, but instead of the manifest and serviceworker files, it has generated a main JavaScript file, a package file and 3 icons for the different platforms. Both the default generated package.json and main.js are capable of creating, running and packaging an application, but they can be further customized by editing them. The icon files can also be changed through the project options.



You can now develop your application like you would normally do with a TMS Web Application.
Upon pressing F9 in Debug mode, the project will compile as usual, then the Electron engine starts up and launches the application.
When it comes to Build mode, there are little differences and platform limitations. Pressing F9 in Windows 32/64-bit Build mode will package the application and launch it. Pressing F9 in Linux 32/64-bit Build mode will create the packaged application for Linux, which then can be moved onto a Linux machine and launched. While macOS 32/64-bit Build mode is added, unfortunately currently it's not possible to create a packaged macOS application from a Windows machine. But the good news is that a packaged macOS 64-bit application still can be made by copying the source files to a prepared Mac machine, and running a single command. Not to mention that if you would like to distribute a macOS application, then it's recommended to sign it, which can only be done on a Mac.

Creating a photo editor application

Electron provides a way for TMS Web Applications to create cross-platform (Windows/macOS/Linux) desktop applications and to use native operating system calls and directly access the local file system. So we would like to show the power of this by creating a basic photo editor application.
To keep this simple for now, we are only going to allow to apply filters on a selected photo through the CSS filter property, which is already an easier and faster approach than writing it for example in VCL since image filters like blur, contrast, gray-scale ... are not out of the box available in VCL . As a first step we add every component we will need in our photo editor.



Of course we cannot edit an image if we don't have an image. To tackle this problem, we are going to use TWebImageControl, TElectronMainMenu and TElectronOpenDialog. With TElectronMainMenu we can add a menu bar with menu items such as 'Open' or 'Save as...'. In the OnClick event of the Open menu item, we can then execute the TElectronOpenDialog and use the retrieved file name to load the image from the local file system.

procedure TForm1.Open1Click(Sender: TObject);
begin
  if ElectronOpenDialog1.Execute then
  begin
    WebImageControl1.Picture.LoadFromFile(ElectronOpenDialog1.FileName);
  end;
end;

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  FImgEl := TJSHTMLElement(document.getElementById(WebImageControl1.ElementID));
end;

procedure TForm1.BrightnessTBChange(Sender: TObject);
begin
  FBrightnessFilter := ' brightness(' + IntToStr(BrightnessTB.Position) + '%)';
  CreateFilter;
end;

procedure TForm1.CreateFilter;
begin
  FFilter := FBlurFilter + FBrightnessFilter + FContrastFilter + FGrayscaleFilter + FHueRotateFilter + FInvertFilter + FOpacityFilter + FSaturateFilter + FSepiaFilter;
  FImgEl.style.setProperty('filter', FFilter);
end;

procedure TForm1.Save1Click(Sender: TObject);
begin
  if ElectronSaveDialog1.Execute then
  begin
    //save image
  end;
end;

procedure TForm1.Save1Click(Sender: TObject);
var
  canvas, el: TJSHTMLCanvasElement;
  ctx: TJSCanvasRenderingContext2D;
  bd: TElectronBinaryDataStream;
  w, h: Integer;
begin
  if ElectronSaveDialog1.Execute then
  begin
    //1: get image as TJSHTMLCanvasElement
    el := TJSHTMLCanvasElement(document.getElementById(WebImageControl1.ElementID));
    asm
      w = el.naturalWidth;
      h = el.naturalHeight;
    end;
    //2: create the canvas element
    canvas := TJSHTMLCanvasElement(document.createElement('canvas'));
    canvas.width := w;
    canvas.height := h;
    ctx := canvas.getContextAs2DContext('2d');
    asm
      ctx.fillStyle = "rgba(255, 255, 255, 0.0)"; //set a transparent background
      ctx.filter = el.style.filter; //3: add the filter
    end;
    ctx.fillRect(0, 0, w, h);
    //4: render our image
    ctx.drawImage(TJSObject(el), 0, 0, w, h);

    //5: save to file
    bd := TElectronBinaryDataStream.Create;
    bd.Base64 := canvas.toDataURL;
    bd.SaveToFile(ElectronSaveDialog1.FileName);
  end;
end;

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  FImgEmpty := True;  //flag
  FImgEl := TJSHTMLElement(document.getElementById(WebImageControl1.ElementID));
end;

procedure TForm1.Open1Click(Sender: TObject);
begin
  if ElectronOpenDialog1.Execute then
  begin
    WebImageControl1.Picture.LoadFromFile(ElectronOpenDialog1.FileName);
    if FImgEmpty then
    begin
      Save1.Enabled := True;
      ElectronMainMenu1.EndUpdate;
      FImgEmpty := False;
    end;
  end;
end;

At TMS, we are a team of software developers, developing software for software developers. We do exactly the same as our customers are doing, that is developing software. And so we know all too well that when we are stuck with something, a fast helping hand is much appreciated.

That is why giving good and fast support is high on our priority list. That is why all our products come with minimum one year free support and free updates included. Yes, it is standard included in the product price, no extra costs at all, no limit on the number of questions!

Our support is handled in two ways: via a support online forum and by direct email for those who prefer a direct and private conversation.
For reasons of efficiency and quality of the support there is a very short line to the experts of the specific product support is asked for. In many cases, a direct dialogue is possible with the product expert.

On a daily basis, our support is standby for answering your questions about:

• your account, licensing conditions, purchasing products, renewing licenses
• doubts about product features, supported operating systems, supported IDEs
• issues with installing products
• doubts about a specific behavior in the product
• advice for achieving a high performance implementation with our products
• a problem, bug, unexpected behavior in a component
• ...

Intro

Cross-Platform / Cross-Framework

• FMX
  • Windows
  • macOS
  • iOS
  • Android
• VCL
  • Windows
• LCL
  • Windows
  • macOS
  • Linux
• WEB
  • Classic
  • PWA (Progressive Web Application)
  • Electron

Asynchronous

procedure TRequestForm.DoRequestExecute(const ARequestResult: TTMSFNCCloudBaseRequestResult);
begin
  //File Download Finished
end;

procedure TRequestForm.DownloadFile;
var
  c: TTMSFNCSimpleCloudBase;
begin
  c := TTMSFNCSimpleCloudBase.Create;
  try
    c.Request.Clear;
    c.Request.Host := 'http://myhost.com';
    c.Request.Path := '/download';
    c.Request.Query := 'fileid=123';
    c.Request.Name := 'Download File';
    c.Request.Method := rmGET;
    c.ExecuteRequest(DoRequestExecute);
  finally
    c.Free;
  end;
end;

procedure TRequestForm.DownloadFile;
var
  c: TTMSFNCSimpleCloudBase;
begin
  c := TTMSFNCSimpleCloudBase.Create;
  try
    c.Request.Clear;
    c.Request.Host := 'http://myhost.com';
    c.Request.Path := '/download';
    c.Request.Query := 'fileid=123';
    c.Request.Name := 'Download File';
    c.Request.Method := rmGET;
    c.ExecuteRequest(
      procedure(const ARequestResult: TTMSFNCCloudBaseRequestResult)
      begin
        //File Download Finished
      end
    );
  finally
    c.Free;
  end;
end;

One code base

Custom development

• Make GET, POST, PUT, UPDATE, DELETE and PATCH requests
• Support for multi-part form data via a separate form data builder class
• Built-in OAuth 2.0 authentication flow
• Built-in URL encoding, JSON parsing, file to Base64 encoding and many more

Let us ask you a question

More REST

The main functionality of TMS Analytics & Physics developing library is evaluating math formula. The library supports evaluation of expressions containing real and complex numbers, common fractions, 3D vectors and tensors, arrays and matrixes. Nevertheless, one of the advantages of the library is that it can work with data of any types, specific for the developing application. The evaluation engine of the library is abstract and not bounded with real or other data types. Therefore, the library allows easily writing extensions for working with user defined types.

Let us consider the example for simple data type. Suppose we are writing some application and there is 2D vector type:

type
  TVec2D = record
  public
    X, Y: real;
    
  end;

var
  translator: TTranslator;

var
  x: TVariable;
  v: TVec2D;
begin
  translator:= TTranslator.Create;

  v.X:= 2.0;
  v.Y:=-3.0;
  x:= TObjectVariable.Create('u', TValue.From<TVec2D>(v), nil);
  translator.Add(x);

  v.X:= 0.0;
  v.Y:= 1.0;
  x:= TObjectVariable.Create('v', TValue.From<TVec2D>(v), nil);
  translator.Add(x);

  v.X:= 1.5;
  v.Y:= 2.5;
  x:= TObjectVariable.Create('w', TValue.From<TVec2D>(v), nil);
  translator.Add(x);
end;

type
  TVec2D = record
  …

  public
    class function Add(const v1, v2: TVec2D): TVec2D;
  end;

…

class function TVec2D.Add(const v1, v2: TVec2D): TVec2D;
begin
  result.X:= v1.X+v2.X;
  result.Y:= v1.Y+v2.Y;
end;

type
  TVectorAdd = class sealed (TGenericAddOperator<TVec2D,TVec2D,TVec2D>)
  protected
    function TypedOperation(const v1, v2: TVec2D): TVec2D; override;
  public
    class function IsRealized: boolean; override;
  end;

…

function TVectorAdd.TypedOperation(const v1, v2: TVec2D): TVec2D;
begin
  result:= TVec2D.Addition(v1, v2);
end;

class function TVectorAdd.IsRealized: boolean;
begin
  result:= true;
end;

var
  f: string;
  r: TValue;
begin
  f:= EditF.Text;

  try
    if translator.CheckSyntax(f) then
    begin
      r:= translator.Calculate(f);

      // code for processing result ‘r’
      RichEditOut.Text:= RichEditOut.Text +#13#13+f+' = '+TUtilities.SafeToString(r);
    end;
  except
    on ex: Exception do
    begin
      // code for error (exception) processing
      RichEditOut.Text:= RichEditOut.Text +#13#13+f+#13+ex.Message;
    end;
  end;
end;

  TClassFinder.InstantiateClass(TVectorAdd);

u+v = (2 -2)

type
  TVectorMinus = class sealed (TGenericMinusOperator<TVec2D,TVec2D>)
  protected
    function TypedOperation(const v: TVec2D): TVec2D; override;
  public
    class function IsRealized: boolean; override;
  end;

function TVectorMinus.TypedOperation(const v: TVec2D): TVec2D;
begin
  result:= TVec2D.Negation(v);
end;

class function TVectorMinus.IsRealized: boolean;
begin
  result:= true;
end;

type
  TVec2D = record
  …
  public
    class operator Multiply(const v1, v2: TVec2D): TVec2D;
  end; 

…

class operator TVec2D.Multiply(const v1, v2: TVec2D): TVec2D;
begin
  result.X:= v1.X*v2.X;
  result.Y:= v1.Y*v2.Y;
end;

type
  TVectorSin = class sealed (TGenericSimpleFunction<TVec2D,TVec2D>)
  protected
    function Func(const v: TVec2D): TVec2D; override;
    function GetName(): string; override;
  public
    class function IsRealized: boolean; override;
  end;

function TVectorSin.GetName: string;
begin
  result:= 'sin';
end;

function TVectorSin.Func(const v: TVec2D): TVec2D;
begin
  result.X:= sin(v.X);
  result.Y:= sin(v.Y);
end;

class function TVectorSin.IsRealized: boolean;
begin
  result:= true;
end;

if{condition}(x1 x2) 

type
  TVec2D = record
  …
  public
 	class operator GreaterThan(const v1, v2: TVec2D): boolean;
  end;
…
class operator TVec2D.GreaterThan(const v1, v2: TVec2D): boolean;
begin
  result:= (sqr(v1.X)+sqr(v1.Y)) > (sqr(v2.X)+sqr(v2.Y));
end;

type
  TVectorIf = class sealed (TGenericIfFunction<TVec2D>)
  public
    class function IsRealized: boolean; override;
  end;

class function TVectorIf.IsRealized: boolean;
begin
  result:= true;
end;

Our team is working hard on the next major release of TMS WEB Core. This will be TMS WEB Core v1.2 Padua. Padua is the next city after Brescia (1.0) and Verona (1.1) on our Mille Miglia race track.

We have shown already a preview of the support for Electron based cross platform desktop apps that will come out of the box with TMS WEB Core v1.2. The new version 1.2 will also come with numerous Object Pascal to JavaScript transpiler enhancements (Pas2JS v1.4) with most importantly the support for anonymous methods. There is a lot more coming that we will unveil in the coming weeks!

With this blog, we wanted to take you to the 3rd dimension that will be added to TMS WEB Core in v1.2, that is the support for 3D graphics based on the amazing WebGL / ThreeJS technology. Thanks to this technology, rendering 3D scenes is fluid and fast right out of any modern browser. This means Chrome, FireFox, Opera, Safari on desktop and on mobile devices.

The WebGL / ThreeJS technology is powerful but it can be quite complex and daunting. Here comes the TMS WEB Core framework with easy usable classes for taking advantage of this technology.

In the upcoming TMS WEB Core this will be exposed via 3 UI controls:

• TWebThreeJSPaintBox
• TWebThreeJSChart
• TWebThreeJSMathChart

var
  anObject: TThreeJsObject3D;

begin
  anObject := threeJsPaintBox.addSphere(2, clRed, 10, 8, 4);
  anObject.name := 'sphere1';
  threeJsPaintBox.Invalidate;
end;

procedure TForm2.LoadSampleSeries;
var
  aSeries: TThreeJsChartSeries;
  brands: TJSArray;
  months: TJSArray;
  values: TJSArray;
  i,j,v: integer;
begin
  brands := TJSArray.new;
  months := TJSArray.new;

  // create the X-axis for the series filled with the car brand names from the string row header
  for i := WebStringGrid1.ColCount - 1 downto 1 do
    brands.push(WebStringGrid1.Cells[i,0]);

  // create the Y-axis for the series filled with the month names
  for i := 1 to WebStringGrid1.RowCount - 1 do
    months.push(WebStringGrid1.Cells[0,i]);

  // create the series in the 3D chart
  aSeries := TThreeJsChartSeries.Create(brands, months);

  // loop through the normal grid cells to pick the sales values and add these to the series
  for i := WebStringGrid1.ColCount - 1 downto 1 do
  begin
    values := TJSArray.new;
    for j := 1 to WebStringGrid1.RowCount - 1 do
    begin
      v := StrToInt(WebStringGrid1.Cells[i,j]);
      values.push(v);
    end;
    aSeries.addLegendRow(WebStringGrid1.Cells[i,0], values);
  end;

  // set the general 3D chart properties  
  aSeries.AutoMarkValueAxis := true;
  aSeries.valueFormatFloat := '#,##0';
  aSeries.valueAxisFormatFloat := ''; //use the above
  aSeries.Title := 'Monthly unit sales per brand';
  aSeries.ValueAxisTitle := 'Monthly Sales';
  aSeries.LegendAxisTitle := 'Brands';
  aSeries.CategoryAxisTitle := 'Months';
  threeJsChart.Series := aSeries;
end;

begin
  aSeries := TThreeJsMathChartSeries.Create;
  aSeries.addParametricSurface(-10, +10, -10, +10, resolution, @surfaceCallBack);

  aSeries.Title := '3D Surface';
  aSeries.ZAxisTitle := 'Values';
  aSeries.YAxisTitle := 'Y-axis';
  aSeries.XAxisTitle := 'X-axis';

  threeJSMathChart.Series := aSeries;
end;

function TForm2.surfaceCallBack(x, y: double): double;
begin
  // the function is selected via the combobox cbSeries
  case cbSeries.ItemIndex of
    1: Result := abs(x-y);
    2: Result := -x*x - y*y + 6;
    3: Result := sin(x)*x+cos(y)*y;
    4: Result := 2 * sqrt(x*x/3 + y*y/8);
    5: Result := sqrt(abs(1.5 * (x*x/3 - y*y/4) - 6));
    6: Result := 8 * (sin(x) + cos(y));
  else
    Result := x*x + y*y;
  end;
end;

We have already covered many exciting things that are coming to TMS WEB Core v1.2 Padua such as support for 3D graphics or cross platform desktop applications with Electron, but there is still more to come!
We would like to introduce another addition to you, that we have created from the widely known and used open source Ace editor.



In the new TWebSyntaxMemo component we have exposed a lot of Ace's basic functionalities, like:

• language/mode setting
• theme setting
• numerous editor settings related to gutter, text wrapping, tabs, etc... that are responsible for the look and behavior of the editor

In the past two weeks we have given some insight on the upcoming support for 3D graphics and a new syntax highlighting editor, and we have promised that there will be more to come to TMS WEB Core v1.2 Padua. It's time to continue with some more new components: TWebCamera, TWebQRDecoder and TWebBarcodeDecoder.

The TWebCamera is based on the MediaDevices.getUserMedia() API. It provides an easy access to the users' web camera via the exposed and implemented methods, properties and events. The TWebQRDecoder and TWebBarcodeDecoder components are using the external jsQR and quaggaJS JavaScript libraries. As you have probably already guessed from the name, they are capable of decoding QR codes and barcodes of different types. Let's take a look at a quick and simple example with the TWebQRDecoder.

Example

We would like to access a camera that we can use to decode QR codes. It might seem like a complicated task at first glance, but it only takes a minute and two lines of codes to achieve this!

First drop the needed components onto the form: a TWebCamera, a TWebQRDecoder and a TWebMemo to show the results (and don't forget to add the needed external library to the project!). Then assign the TWebCamera component to the TWebQRDecoder.Camera property. Now that they are connected, as a next step, set the TWebQRDecoder.EnableTimer property to True. With that enabled, the decoder will try to get and decode images from the assigned camera.
Let's start the camera in the form's OnCreate event:

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  WebCamera1.Start;
end;

procedure TForm1.WebQRDecoder1Decoded(Sender: TObject; ADecoded: string);
begin
  WebMemo1.Text := ADecoded;
end;

Our team is working around the clock for the huge update that TMS WEB Core v1.2 is. The combination of the number of improvements and new features is mind-blowing. We thought it was time to give our TMS WEB Core v1.2 Padua beta in your hands so you can not only benefit from the many improvements but also assist with your feedback for the further polishing for the release.

Here is a list of what is improved and new in TMS WEB Core v1.2:

• New: Latest pas2js compiler integration with support for anonymous methods, class helpers, advanced records
• New: Electron target that can be choosen to create cross-platform desktop applications for Windows, macOS, Linux
• New: Easier browser target selection with the TMS browser selector toolbar for the Delphi IDE
• New: Support for Lazarus 2.x
• New: 3D chart, objects and scenes support
• New: Syntax highlighting editor control added
• New: Camera control component & QR code + barcode decoder component
• New: File picker for local file retrieval
• New: IndexedDB access classes
• New: Grid checkbox cell & column support
• New: Responsive grid panel
• New: Treeview and accordion component
• Numerous improvements to existing components, integration in the IDE, use of templates, ...

First BETA!

What's included

• Implement and use your own service(s) built on top of the TMS FNC Cloud Pack core
• Make GET, POST, PUT, UPDATE, DELETE and PATCH requests
• Support for multi-part form data via a separate form data builder class
• Built-in OAuth 2.0 authentication flow
• Built-in URL encoding, JSON parsing, file to Base64 encoding and many more

Google Tasks Google Calendar Google Contacts Google Firebase Database Google Drive Google GMail Google Search terms Google Maps address data Google Photos

Microsoft Onedrive Outlook Calendar Outlook Contacts Outlook Mail

Apple CloudKit

DropBox Cloud storage

PayPal

YouTube

Hubic

myCloudData.net

We want your feedback!

How to get access to the BETA version?

The previous version 2.7 of TMS Analytics & Physics library introduced the capability of converting formula and units of measurements to the TeX format. The TeX representation allows then drawing formula in natural math form, using some external tools, such as MathJax.
The new version 2.8 provides some improvements of formula conversion and includes new capabilities. The main new feature is converting standard functions to math operators. For example, exponent function ‘exp(x)’ can be converted to the form of power operation as ‘ex’. The following standard functions supported: sqrt, root, pow, abs and exp. The option of converting functions to the operation format can be on or off, allowing different representation of the formula.
Let us consider the following formula, containing several standard functions ‘sqrt(x^2-1)+root{3*n}(x/2)*abs(x-A)-exp(x^2)*pow{n/2}(x+1)’. This formula can be converted to the TeX format in two different ways: with or without converting functions to the operation format. Here is the formula drawing for these two cases:

• without function conversion:
  

• with function conversion:
  

• Expanding nested sum, product and power expressions
• Collecting constant addends in sum expressions
• Reducing addends in sum expressions
• Combining constant multipliers in product expressions
• Reducing multipliers in fraction expressions
• Combining power expressions with multipliers
• Simplifying integer square roots and modulus of negative data

Delphi is the number one tool for developing Desktop applications on and for Windows. There is little opposition to this statement. A couple of years ago, the compiler for 64-Bit Windows was also released. Having the VCL at your mercy and extensive database connectivity included in the product, Delphi is also at the top whenever databases come into the mix. However, Delphi never has become known as the front-runner for Web Application development. Even though components to access the web and a web framework come with the product, for many Delphi and Web Development are never mentioned in the same train of thought.

Winter Change is here

Practical examples

• Data taken from a real, active data source/database that is still being maintained
• Demos should be reproducible and easily accessible, including the data that is being used
• Build it all from scratch and start with a very simple example
• Further, more complicated tutorials will be based on the foundation

Video 1: Connect to database, access from Web App

• Introduction to the video series
• Get to know the data
• Build a REST web service with JSON support using TMS XData
• Build a TMS Web Core application with
  • connecting to the web service
  • using database connections and datasets during design-time
  • display all data in a grid
• Outlook on other parts of the series
  • adding data from the database to Google Maps
  • display charts based on the info from the database with Google Charts
  • add professional web design using Bootstrap

Part 2 of the School Data Video Series shows you how to write a web application that offers an interactive Google Map with data that is taken from a database. In order to access the database it uses the REST web service that was built in part 1.

The video shows by giving easy to follow step-by-step instructions:

• Getting to know the data in the database
• Build REST queries in the web browser
• Implement a TMS Web Core application
  • Access the REST web service
  • Request data
  • Add markers to the Google Map component
  • Use a special, pre-defined icon for the marker

Another video in the School Data Series adds professional modern web design to the web application that was built in the previous video. It is a common misconception that the form designer restricts the design capabilities of web frameworks built with Delphi. Giving a practical example will make it very easy for you to build your own projects with web design. You will also know how to include web designers into the development process of your web applications.

You will see how to transform this form…

…into this form:


To sum up the complete contents of the video:

• Review of what has been developed so far
• Replace Google Maps API marker with custom icon
• Build a mockup for the design in Adobe Photoshop
• Transfer the design into HTML with Adobe Dreamweaver
• Add the web design to your existing project
• Link TMS Web Core components to the new web design

We're pleased to announce TMS WebGMaps v3.1 has been released today. TMS VCL WebGMaps is our component for VCL development that exposes a myriad of geographical functions for integration in Delphi or C++Builder Windows applications while TMS FMX WebGMaps offers the same functionality for cross-platform FireMonkey applications on Windows, Mac, iOS and Android.

In this new version we introduce the functionality to display the map in a custom style. You can use the pre-defined Night Mode style or any other custom style.



The code needed for this is just one line of code:

    WebGMaps1.MapOptions.MapStyle := mstNightMode; 

  WebGMaps1.MapOptions.CustomStyle.Text := '[JSON Object]';
  WebGMaps1.MapOptions.MapStyle := mstCustom;

var
  m: TMarker;
begin
  m := WebGMaps1.Markers.Add(WebGMaps1.MapOptions.DefaultLatitude, WebGMaps1.MapOptions.DefaultLongitude);
  m.Shape := msStar;
  m.ShapeColor := clYellow;
  m.ShapeScale := 2;
  WebGMaps1.UpdateMapMarker(m);

  m := WebGMaps1.Markers.Add(WebGMaps1.MapOptions.DefaultLatitude + 0.1, WebGMaps1.MapOptions.DefaultLongitude - 0.1);
  m.Shape := msStar;
  m.ShapeColor := clYellow;
  WebGMaps1.UpdateMapMarker(m);

  m := WebGMaps1.Markers.Add(WebGMaps1.MapOptions.DefaultLatitude - 0.1, WebGMaps1.MapOptions.DefaultLongitude - 0.1);
  m.Shape := msFavorite;
  WebGMaps1.UpdateMapMarker(m);

  m := WebGMaps1.Markers.Add(WebGMaps1.MapOptions.DefaultLatitude + 0.1, WebGMaps1.MapOptions.DefaultLongitude + 0.1);
  m.Shape := msHome;
  m.ShapeColor := clSkyBlue;
  m.ShapeScale := 2;
  WebGMaps1.UpdateMapMarker(m);
end;

The next videos of the School Data Series tackle the visualization of numbers using Google Charts.
Due to the amount of detail, I decided to split this topic into 3 separate videos.


The end result will look like this:



Student numbers will be grouped by zip code. Users are able to click on the bars and drill-down all the schools in that area (master-detail).

The first video covers:

• Looking at the database
• Build the database query for the chart
• Convert database query into URL
• Add service method to XData web service for charting

First release!

What's included

• Create your own REST service client(s) built on top of the TMS FNC Cloud Pack core
• One source code base to use on multiple frameworks (FMX, VCL, WEB and LCL)
• Make GET, POST, PUT, UPDATE, DELETE and PATCH requests
• Support for multi-part form data via a separate form data builder class
• Built-in OAuth 2.0 authentication flow
• Built-in URL encoding, JSON parsing, file to Base64 encoding and many more

Google Tasks Google Calendar Google Contacts Google Firebase Database Google Drive Google GMail Google Search terms Google Maps address data Google Photos

Microsoft Onedrive Outlook Calendar Outlook Contacts Outlook Mail

Apple CloudKit

DropBox Cloud storage

PayPal

YouTube

Hubic

myCloudData.net

How to create your own REST service client?

function TTMSFNCCustomCloudGoogle.GetAuthenticationURL: string;
begin
  Result := InitializeAuthenticationURL(Self);
end;

function InitializeAuthenticationURL(const ACloudBase: TTMSFNCCloudBase): string;
var
  url, sc: string;
begin
  sc := TTMSFNCCloudBaseOpen(ACloudBase).GetScopes('+', True);
  url :=
      '?scope=' + sc
    + '&state=profile'
    + '&redirect_uri='+ TTMSFNCUtils.URLEncode(ACloudBase.Authentication.CallBackURL)
    + '&response_type=code'
    + '&client_id=' + ACloudBase.Authentication.ClientID
    + '&approval_prompt=force'
    + '&access_type=offline'
    + '&hl=en';

  url := 'https://accounts.google.com/o/oauth2/auth' + url;

  Result := url;
end;

  Scopes.Clear;
  Scopes.Add('https://www.googleapis.com/auth/drive');
  Scopes.Add('https://www.googleapis.com/auth/drive.file');
  Scopes.Add('https://www.googleapis.com/auth/userinfo.profile');

procedure TTMSFNCCustomCloudGoogle.RetrieveAccessToken;
begin
  InitializeRetrieveAccessTokenRequest(Self);
  ExecuteRequest({$IFDEF LCLWEBLIB}@{$ENDIF}DoRetrieveAccessToken);
end;

procedure InitializeRetrieveAccessTokenRequest(const ACloudBase: TTMSFNCCloudBase);
begin
  ACloudBase.Request.Clear;
  ACloudBase.Request.Name := 'RETRIEVE ACCESS TOKEN';
  ACloudBase.Request.Host := 'https://accounts.google.com';
  ACloudBase.Request.Path := '/o/oauth2/token';
  ACloudBase.Request.Query :=  'client_id=' + ACloudBase.Authentication.ClientID
  + '&client_secret=' + ACloudBase.Authentication.Secret
  + '&redirect_uri=' + ACloudBase.Authentication.CallBackURL
  + '&code=' + ACloudBase.Authentication.AuthenticationToken
  + '&grant_type=authorization_code';
  ACloudBase.Request.Method := rmPOST;
end;

procedure TTMSFNCCustomCloudGoogle.TestTokens(const ATestTokensRequestResultEvent: TTMSFNCCloudBaseRequestResultEvent = nil);
begin
  InitializeTestTokensRequest(Self);
  ExecuteRequest(ATestTokensRequestResultEvent);
end;

procedure InitializeTestTokensRequest(const ACloudBase: TTMSFNCCloudBase);
begin
  ACloudBase.Request.Clear;
  ACloudBase.Request.Name := 'TEST TOKENS';
  ACloudBase.Request.Host := 'https://www.googleapis.com';
  ACloudBase.Request.Path := '/oauth2/v1/tokeninfo';
  ACloudBase.Request.Query := 'access_token=' + ACloudBase.Authentication.AccessToken;
  ACloudBase.Request.Method := rmGET;
end;

function TTMSFNCCustomCloudGoogle.GetTestTokensResult(
  const ARequestResult: TTMSFNCCloudBaseRequestResult): Boolean;
begin
  Result := InitializeTestTokensResult(Self, ARequestResult)
end;

function InitializeTestTokensResult(const ACloudBase: TTMSFNCCloudBase; const ARequestResult: TTMSFNCCloudBaseRequestResult): Boolean;
var
  o: TJSONValue;
  s: string;
begin
  Result := False;
  s := ARequestResult.ResultString;
  if s <> '' then
  begin
    o := TTMSFNCUtils.ParseJSON(s);
    if Assigned(o) then
    begin
      Result := not Assigned(TTMSFNCUtils.GetJSONValue(o, 'error'));
      o.Free;
    end;
  end;
end;

procedure TTMSFNCCustomCloudGoogleDrive.GetAccountInfo;
begin
  Request.Clear;
  Request.Host := Service.BaseURL;
  Request.Path := FBasePath + '/about';
  Request.Query := 'access_token=' + Authentication.AccessToken;
  Request.Method := rmGET;
  Request.Name := 'GET SPACE USAGE';
  ExecuteRequest({$IFDEF LCLWEBLIB}@{$ENDIF}DoRequestGetSpaceUsage);
end;

procedure TTMSFNCCustomCloudGoogleDrive.DoRequestGetSpaceUsage(const ARequestResult: TTMSFNCCloudBaseRequestResult);
var
  o: TJSONValue;
begin
  if ARequestResult.ResultString <> '' then
  begin
    o := TTMSFNCUtils.ParseJSON(ARequestResult.ResultString);

    if Assigned(o) then
    begin
      try
        FInfo.UserName := TTMSFNCUtils.GetJSONProp(o, 'displayName');
        FInfo.Quota := TTMSFNCUtils.GetJSONDoubleValue(o, 'quotaBytesTotal');
        FInfo.QuotaUsed := TTMSFNCUtils.GetJSONDoubleValue(o, 'quotaBytesUsed');

      finally
        o.Free;
      end;
    end;
  end;

  DoGetSpaceUsage(FInfo, ARequestResult);
  DoGetCurrentAccount(FInfo, ARequestResult);
end;

Demo

We want your feedback!

After having created the service to retrieve the statistical information from the database and prepare it for our web application, we can develop the web application.

We will, of course, use TMS Web Core to develop the web application quickly and efficently. As we use a web service that is created with XData we can rely on the XData controls that are offered for TMS Web Core to develop using the RAD principle.

In detail, you will learn how to:

• Create a new TMS Web Core application
• Use non-visual data components to connect to XData
• Use Google Maps component in a web application

The video series has taught us how to build a custom web service to deliver data to the web application showing a Google Chart. Displaying information is wonderful, but the chart shows only aggregated values. Any user of the application will have the desire to drill down into the data and not just see the sums and averages.

That is why this video will show you how to add user-interaction and query the database to show specific information:

You will learn how to:

• Add interaction to your chart
• Add a pop-up window that displays drill-down information, also requested from the web service
• Specify XData Query operations