Dimensional Data

Welcome to our new TMS Blog Series, TMS WEB Core and More with Andrew.  In this bi-weekly series, we’ll be looking at many aspects of developing TMS WEB Core projects, including packaging options with PWA, Miletus and Electron.  We’ll look at the support available for deploying projects on various platforms, including in particular Raspberry Pi.  And we’ll be looking at a few development environments where TMS WEB Core can be used, including Visual Studio Code. The other blog series, Extending TMS WEB Core with JS Libraries with Andrew, will return to its regular weekly cadence now that we’ve gotten through the Tabulator miniseries, continuing with taking a stroll through the Slick Carousel JS library next week. To start off this new series, we’re going to have a look at creating PWAs – Progressive Web Apps. We’ll have a look at what they are and what they aren’t.  We’ll create one using the existing TMS WEB Core project template.  And we’ll convert our ongoing Actorious project into a PWA.  We’ll also have a look at some challenges with PWAs, particularly deploying updates, and have a look at some other tools that can help us out along the way. So What’s a PWA? Briefly, PWAs are essentially just your typical modern website designed with HTML, CSS, and JavaScript, much like what we’re already creating with our TMS WEB Core projects. The thinking behind PWA, in part, is that apps should try to support as many devices as possible in order to reach the largest numbers of users.  And to degrade gracefully on devices that lack the latest standards, while offering the best experiences possible when device support is available.  Some of the same thinking behind responsive web design. In practical terms, there are a few reasons why having your app upgraded to function as a PWA may be of interest to you. Some App Stores allow PWAs directly, rather than native apps.  Notably, this isn’t necessarily the case for Apple’s App Store.  Some have made it through using various PWA app-builder-type tools, so it is conceivably possible, but not really their thing. And then there’s Microsoft, who might very well add your PWA app to their App Store without even telling you.  Strange times! PWA apps include functionality that makes it possible for them to work offline to some degree.  Whether this makes sense for your project naturally depends on the kinds of data your app is dealing with.  Storing reference information is a good use of this kind of function, and perhaps collecting data while not connected may also be feasible. Because PWA apps contain additional information about themselves, it is also often possible for the app to appear as a regular app in desktop environments, and as pseudo-apps in mobile devices, even without App Store support.  Some of this you can just do separately anyway, but as a PWA app this support becomes an integral part of the project. So what does it mean then, technically, for a website to qualify as a PWA app?  There are usually three basic qualifications listed.  In practice, though, you’ll want to use something like Google Chrome’s Lighthouse app (part of its built-in developer tools) to analyze your app.  It will let you know if you’ve come up short.  We’ll have a look at […]

Today we focus on two more new framework features in the new TMS WEB Core v2.0 release. It concerns the support for the different material icons types and the new component for dealing with CSS classes at design-time, TWebCSSClass. Material icons types Google Material icons is a library consolidating over 2500 glyphs for use in web applications. For some time, Google material icons offers different types of its icons. These types are: baseline, outlined, two-tone, rounded and sharp. TMS WEB Core controls offering direct support to use such Material Icons with the property MaterialGlyph now also feature the MaterialGlyphType property for selecting one of these 5 types.  Manipulate CSS classes at design-time The TWebCSSClass is a non-visual component that gives design-time (but obviously also run-time) access to a wide range of CSS class properties. You can drop the component on the form, see all available CSS properties in the Object Inspector, change these, st the TWebCSSClass.CSSClassName property and then set this CSSClassName value to the control’s various Element*ClassName properties to have the CSS style applied to the control.  A video is better than thousand words Watch the new video our colleague Dr. Holger Flick to show you everything in detail how you can take advantage of these new TMS WEB Core v2.0 features!  And start exploring TMS WEB Core v2.0! Experience for yourself how fast you can start building your web client application front-end with TMS WEB Core and the typical Delphi RAD component based development. Download the free & fully-function trial version now. Hesitating about the back-end server that fits best with TMS WEB Core? Explore TMS XData, our flag-ship robust and high performance REST API server building library!

We’re happy to announce the release of new versions of TMS Aurelius (5.9), TMS XData (5.6) and TMS Sparkle (3.20) There are very interesting new features in those releases, and also some upcoming changes in the TMS Business product line, which will now be named “TMS BIZ”.  In case you are curious, you can check the new released features in the what’s new section of the product documentation: TMS XData 5.6 what’s new. TMS Aurelius 5.9 what’s new. TMS Sparkle 3.20 what’s new. We are then inviting you for the webinar TMS BIZ Update: What’s new in XData, Aurelius and Sparkle, to happen on July, 21st, 3:00 PM UTC Time. You will learn in details about the new features (in action) and the new TMS BIZ editions. REGISTER for the TMS BIZ Update: What’s new in XData, Aurelius and Sparkle webinar now!

So far, we’ve covered some hugely important and popular JavaScript libraries, like jQuery, Bootstrap and FontAwesome.  We’ve also explored other very important but somewhat lesser-known JavaScript libraries, like Luxon and CodeMirror.  And also some considerably smaller and less widely used JavaScript libraries like Interact.js, BigText.js and Showdown.js. Today we’re going to introduce what has quickly become my favorite JavaScript library, Tabulator, which accurately describes itself as “Easy to use, simple to code, fully featured, interactive JavaScript tables.”  Over the next handful of posts we’ll go into far more detail about how to make the most of it in your TMS WEB Core projects. Why Tabulator? Tabulator is neither wildly popular (yet!) nor particularly obscure. And it has perhaps the misfortune of falling into a hugely popular category of JavaScript libraries – defined with terms like grids or tables. If you were to do a Google search for a new JavaScript grid control, you might run through 10 or 20 before Tabulator even comes up on the list. On the other hand, if you search for a JavaScript ‘data grid’ on GitHub, it might come up second or third. But as with any popular JavaScript library category, there are plenty of criteria you can use to filter out which ones might be the best candidates for your projects. When I’m looking for something, these are the kinds of things I typically consider. Price per user or per developer, licensing terms, and so on? Any development activity in the past year?  Does the developer respond to questions? Are there dependencies?  Like jQuery or other JavaScript environments like React or Angular. How good/complete is the documentation?  Is there plenty of example code available? Style vs. substance and needs vs. wants.  Does it just look pretty or is it actually useful? When the dust settles, you might well reach the same conclusion I have, and give Tabulator a try. But even if you find another control that is more suited to your needs, or perhaps you’re already quite happily using another control, there’s still a lot of interesting ground to cover (and some fun examples) when it comes to using any of these kinds of controls in a TMS WEB Core project.  Motivation. The need for a grid-like control in a modern web application is usually self-evident. Displaying data for the user to see in tabular form, along with maybe some options to filter or sort that data in ways that are easy and convenient, is either something you need in your project, or something you don’t. A better question for our purposes might be what the motivation is for a Delphi developer to use a new and potentially unfamiliar JS library.  Particularly when it comes to providing functionality that we might already have decades of experience with, using popular, reliable, capable, and easy-to-use Delphi VCL components of various flavors. Naturally, this need arises when moving to a different environment – the web – where our preferred set of controls may not be as readily available.  At the same time, this shift to the web also brings with it opportunities to change how these kinds of applications are developed, for better and for worse.    TDataSet vs. The Web. When we covered all those JSON examples (see Part 1 and Part 2), one of […]

Trying to implement facial recognition in your applications can be a daunting task. With the use of TMS Web Core and the vast amount of available JavaScript libraries, this can be made much easier. There is no need for complex functions or algorithms. Just include the library in your HTML and you can access all the functionality. To showcase this, we’ve made a demo with the following library: face-api. This library contains a lot of different functionality that you can use. You can detect faces and match them with previously created models. But you can also use it to detect the age, sex and expressions of the person. You can even draw landmarks on the detected face. You can find the demo here (requires a webcam installed). WebGL vs WebAssembly The library that we used, gives us the option to use WebGL or WebAssembly. whilst WebGL is really fast it does have a initial warm-up time. the first detection of a face will take 5000-6000ms and every subsequent detection will be around 100ms. Performance is also heavily dependent on the installed GPU, as having a dedicated GPU really boosts the performance. Meanwhile, WebAssembly uses the CPU. We recently did some experimentation with this technology. You can read all about it in this blogpost. WebAssembly doesn’t have the initial warm-up time, but every detection takes about 700-900ms. As we only do one detection when logging in, we’ve opted to use WebAssembly .  In the following chart we only used one model to start face recognition (the demo uses 7 models to get all necessary data). this chart also doesn’t take the warm-up time in account. But it should give you a fair comparison between different systems and set-ups.  picture taken from Tensorflow.js which is used in the back-end of the face-api library. Integrating the Face-Api using external classes People who use TMS WEB Core will already know that you can use asm blocks to write JavaScript in Pascal methods. But you can also use the external keyword to wrap classes and functions from libraries. These external classes and methods can then be used directly in your Pascal code, negating the need to use asm blocks. This makes it also very easy to integrate these libraries in different applications as you’ll only need to include the pas file in your project.  Here you can find an example of a procedure: procedure LoadAgeGenderNetModel(AURL: string); async; external name ‘faceapi.nets.ageGenderNet.load’; And this is a example of such a class: TFaceMatcher = class external name ‘faceapi.FaceMatcher’ (TJSObject) public constructor new; overload; constructor new(AInput: TJSObject); overload; labeledDescriptors: TJSArray; function FindBestMatch(Descriptor: TJSObject): TFaceMatch; external name ‘findBestMatch’; function ToJSON: JSValue; external name ‘toJSON’; class function FromJSON(AJSON: TJSObject): TFaceMatcher; external name ‘fromJSON’; end To use this method you also need to add the following code right under the interface {$mode objfpc} {$modeswitch externalclass} Demo For our demo we have used facial recognition to use as authentication. When we can’t match the face, the application will ask to register yourself. This data will be saved in an indexedDb. The model to test against will be updated and stored in local storage. When a face is recognized, we will fetch the data of that person and display it in another form. except for opening forms and writing/reading from the databases, the actual detecting […]