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

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