Dimensional Data

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 […]

We’re excited that after many months of hard development work, TMS WEB Core v2.0 is available for you!  All active registered TMS WEB Core v2.0 users get this new release free. TMS WEB Core brings improvements to the web client development experience from your Delphi IDE in many areas! pas2js compiler update & RTL update The latest version of the pas2js compiler, responsible for transpiling the Object Pascal code to JavaScript running in the browser, and updated RTL is integrated now, bringing even better Delphi compatibility New components Various new components have been added: – TWebDropDownControl, TWebEditDropDownControl: flexible control that can be used to show any other control in its dropdown part– TWebCheckListBox: VCL-like check listbox– TWebDBListControl: DB-aware Bootstrap styled list control with optional DB field template– TWebSearchEdit: edit control with embedded search and clear button– TWebEditBtn: edit control with attached button– TCountryComboBox, TWebCountryListBox,TWebCountryDropDown: various controls to show list of countries in the world to pick from, including list of countries with official country flagsTWebXLSX: Microsoft Excel XLSX file import & export component Component enhancementsThere is too much to list here in detail. Many new features have been added to existing components, the most important shown here: – Add controls checkbox/button/progressbar in TWebStringGrid, TWebTableControl cells– Add nodes with checkbox or radiobutton in TWebTreeView– Perform filtering on items in the TWebListControl– New ListSource/ListField property in TWebDBComboBox to load items from a dataset– Row selection in TWebTableControl+ many more… Framework improvementsThe underlying framework has been enhanced and extended: – TCanvas VCL compatible brush style support added,– Material icons style support– Touch & wheel events in TWebElementActionList– Multi-language support in TWebMessageDlg()+ many more… IDE integration improvements Improved interaction with web projects from the Delphi IDE:– Improved live-preview from context menu on form units in the IDE project manager– Delete entire folder from project via IDE project manager New browser APIs exposedNew web browser APIs easily accessible from your Object Pascal code:– Speech recognition component: TWebSpeechRecognition– Classes for multi-screen API use In the coming days and weeks, we’ll unveil via video more details about the new features in TMS WEB Core v2.0. Today, you can already learn about the new dropdown controls, the new country list controls and the TWebCheckListBox in the video from our chief evangelist Dr. Holger Flick: Another interesting source of information is the replay of the recently held webinar with CTO Bruno Fierens walking through all new features of TMS WEB Core v2.0: Meanwhile, our team is also hard at work to bring all new components, new features of TMS WEB Core for Delphi to TMS WEB Core for Visual Studio Code v2.0. You can expect this update also very soon! If you are interested in web client development using Delphi, also have a look at the recent series of blogs from Andrew Simard that covers how to use external JavaScript libraries easily from TMS WEB Core. In the past weeks, Andrew covered how to integrate the impressive Tabulator JavaScript control in a TMS WEB Core project. The series starts here. TMS WEB Core v2.0 couldn’t have been created without all your valuable feedback in the past months and years! We are extremely thankful for all your help steering the development. And we continue to count on you driving further future developments of TMS WEB Core! We invite experienced TMS WEB Core developers having […]