Dimensional Data

TMS VCL UI Pack is our flag-ship VCL product comprising over 600 VCL components to help you create more feature-rich VCL Windows applications faster. Today, we have released TMS VCL UI Pack v10.7.7.0 that is the 8th release so far in this year 2022. We actually lost count on the number of releases since the inception of TMS VCL UI Pack (formerly named TMS Component Pack in 1998). With TMS VCL UI Pack we not only want to enable you to include very powerful features fast in your VCL applications, we also want to deliver fixes, improvements as well as your wishes for new features fast. After all, we are in a fast moving world and software developers want to roll-out updates to their customers also fast. All this inspired by the famous words of Mark Twain: “Continuous improvement is better than delayed perfection”. So, today, we have released TMS VCL UI Pack 10.7.7.0, release number 8 this year. This is a shortlist of new features & improvements that already went into TMS VCL UI Pack just in 2022: 10.7.7.0 New : VCL styles support added in TAdvMoneyEdit New : Support to persist keyboards with unicode characters in TAdvTouchKeyboard New : Support for use of TVirtualImageList for use in high-DPI scenarios for TDBAdvGlowNavigator New : Support for drawing overlapped events added in TPlannerCalendar TPlannerCalendarGroup New : Setting SelectionColor SelectionTextColor = clNone allows to always use specified custom color in TAdvDBLookupComboBox New : CalculatorLook.BorderColor added in TAdvMoneyEdit New : Binary identifier setting in syntax styler to highlight also binary formatted numbers in TAdvMemo New : AutoShowCalculator property added in TAdvMoneyEdit Improved : cblChrome close button appearance in high DPI in TAdvOfficeTabSet Improved : LabelFont handling in connection with ParentFont in controls with attached label Improved : Alignment preserve when entering new line in TAdvRichEditor  10.7.6.0 New : Visible property to show or hide the extra needles in TAdvSmoothGauge New : VCL Style enabled cell checkbox drawing in TAdvStringGrid New : OnItemClick and OnItemDblClick events in TAdvKanbanBoard New : Added wpSftpList support in TWebCopy New : Added support for use of TVirtualImageList in TPlannerMonthView Improved : Error handling when invalid time was entered in TAdvTimePickerDropDown Improved : Dropdown control sizing in Delphi 11 for high DPI in TAdvControlDropDown Improved : Closed button look in high DPI scenarios in TAdvOfficeTabSet Improved : ButtonWidth handling with high DPI in TAdvEditBtn Improved : Added Key in TAdvSmoothListBoxItem.CopySettings()  10.7.5.0 New : Property FindText added to control whether the node is looked up or not in TAdvTreeComboBox New : BeginUpdate/EndUpdate methods added in TAdvWordCloud Improved : High DPI drawing of sys icons and per monitor DPI handling in TDirectoryListBoxEx TFileListBoxEx Improved : Exposed Font and Align properties for TAdvGradientDirectionSelector  10.7.4.1 Improved : telephone type specifier adding in export in TvCard Improved : Label font size initialization at design-time for high DPI in TAdvSpinEdit TAdvComboBox TAdvDropDown … Improved : Exception handling for opening unsupported files from TAdvRichEditorEditToolBar  10.7.4.0 New : TVirtualImageList support added in TInspectorBar New : TAdvOfficePage.TextAlignmentTAdvOfficePage.TextVerticalAlignment added Improved : THTMLStatusBar high DPI support for Delphi 11 Improved : Stop editing by setting Key = #0 in OnKeyPress() in TAdvStringGrid Improved : RowHeight updating via Zoom() in high DPI / Delphi 11 in TAdvStringGrid Improved : Popup toolbar behavior in high in TAdvRichEditor Improved : Performance in […]

WebAssembly is a low-level language with a compact binary format that runs with near-native performance. Free Pascal offers, since some time, a way to compile Pascal to WebAssembly and integrate these modules inside your web applications. So, of course we had to experiment with it, to see if it lives up to the hype. It is important to know that, while WebAssembly is fast and very compact, it is very low level. WebAssembly has no direct connection to the browser DOM and communication between JavaScript and WebAssembly is limited to arrays of bytes, integer and float values. Fortunately, you can allocate memory for the WebAssembly module and use this to read/write more complex data. But all the interfacing that is needed for this (and for accessing the DOM) is something that you’ll need to write yourself.  Image Processing For our experiment we’ve created an image processing application as this typically involves heavy data processing. You can watch a live demo of the application here. You can upload an image and use different filters on it. You can use the toggle switch to choose between pure JavaScript or WebAssembly to process the image and see for yourself how much faster WebAssembly is.  The first test only took the processing of the image in account, and not the reading & writing of data. As you can see in the graph, in this test, WebAssembly is about 3 times as fast.  For the second test, we timed the full function. This included writing and reading from WebAssembly. And even then, WebAssembly is about 1.5 times faster than JavaScript.  Conclusion JavaScript is much slower than WebAssembly when processing of large amounts of data is involved. For small tasks, JavaScript might still be the way to go, as the difference is neglectable. For resource-intensive tasks, like video editing and advanced image processing,  WebAssembly is the way to go. These tasks require a lot of computing and that is where WebAssembly shines, performing at near native speed.  Source code You can download the demo project source code here. This includes the TMS WEB Core web client application as well as the source code of the Pascal based image processing to be compiled to a WebAssembly module. We have shipped a pre-compiled WebAssembly file in the project so that you don’t have to compile it yourself. But if you want to compile or write your own WebAssembly modules you’ll need to install the FPC team Object Pascal to WebAssembly compiler. You can find the installation guide for the compiler here.  

So far in this blog series, we’ve covered JS libraries that included Helpers, Tools, and Assets.  This time out, we’re going to dig into the first of many JS libraries that feature some sort of Control – a component or widget or element of some kind that can extend your TMS WEB Core project beyond what the standard components offer.  Our first control describes itself as “a lightweight and powerful datetime picker” and indeed it is!  It’s called FlatPickr and in this first part, we’ll cover how to get it up and running in your TMS WEB Core projects, with a few examples to show off its key features.  In part two, we’ll take a different approach by creating a TFlatPickr component that can then be added to the Delphi IDE Palette, making it even easier to use in your projects. Motivation TMS WEB Core comes with a datetime picker of course, the TWebDateTimePicker component.  And if you’re a fan of FNC components, there are the TTMSFNCDatePicker and TTMSFNCDateTimePicker components. And if you’re hunting around the Delphi IDE Palette, you’ll also run across a jQuery-based component called TWebJQXDateTimeInput. So plenty of options right off the bat.  But it would be hard to think of another class of component where people (like me!) have very strongly-held opinions on how they should look and work, and what kinds of options they absolutely need to have.  And that’s before we even get to the whole epic tale of date and time formats, something we’ll also be covering very shortly when we get to Luxon.  Also, datetime pickers hide away a surprising amount of complexity for something that, on the surface, appears to be very simple.  When it comes to choosing a datetime picker, here are some of the considerations that I have in mind. I would consider these to be “minimum requirements” rather than “nice-to-haves” for my projects. Your projects may have an entirely different set of priorities of course.  What is perhaps most important is that the same datetime picker component is used throughout a project, where possible. Week Numbers.  I work with many clients from the agriculture industry where week numbers are used all the time, probably more often than dates, in fact. Variations.  Sometimes it makes sense to display a full month calendar on the page. Maybe even two months.  Sometimes it is a drop-down.  Sometimes there’s also a time.  Sometimes there’s only a time.  Being able to use the same control in different variations helps with providing a consistent user experience and results in fewer headaches as a developer. Restrictions.  Having a start/end range for selectable dates is important, but it is often necessary to be able to provide a list of available dates to the component, and for the component to make it clear to the user which dates are available to be selected.  Selections.  The flexibility to be able to select an individual date, multiple dates, or a range is important, but making it simple is just as important. Themes.  The component has to fit in visually with the rest of the project.  My projects typically use CSS for theme work, so bonus points if it can be themed easily with CSS. But at the very list it should provide some options for the ubiquitous light and […]

For the rest of this document, we’re going to be doing triple the work – showing the JavaScript version (JS), the TMS WEB Core wrapper version (WC), and the Delphi version (PAS) of each scenario, presented as a block of code suitable for inclusion (and tested!) within a TMS WEB Core project, which supports all three of these seamlessly.  If you were working on a part of a project that used only Delphi VCL code, you could use just the PAS code equally well there.  Or if you were working on a part of a project that used pure JavaScript, then the JS code within the asm … end blocks would work just as well in that environment.  We’ll even cover a little bit about moving between these three environments.   To begin with, we’ll need to know how to define variables to reference JSON objects. We’ll also need to know how to supply JSON to them (sometimes referred to as serialization), and how to see what they contain (de serialization). For the sake of simplicity, we’re going to show our work using console.log() which works in both Delphi and JavaScript in our TMS WEB Core environment. Simply substitute with ShowMessage or some other equivalent debugging output if you’re working in any other environment.   But why do we have to define variables at all?  Well, one of the key differences between JavaScript and Delphi is how data types are managed.  Delphi is a strongly-typed language meaning that, at nearly every step, the data type assigned to a variable is known, usually in advance of its being used.  And these data types tend to be rather specific in nature.  A JSON Object is not necessarily interchangable with a JSON Array, for example.  JavaScript, on the other hand, is a weakly-typed (some might even say non-typed) language.  Data types are sort of an afterthought and you can write all kinds of code without having to think about what kind of data is flowing through it.   There are significant trade-offs to both approaches.  JSON is also very closely tied to the JavaScript language itself, and some aspects of the JavaScript language that have evolved over the years have led to significant improvements in using JSON in that environment. The overall result is that the JS code we’ll be showing tends to be very short, sometimes a little cryptic, but often very efficient.  The Delphi equivalents often have to do a little more work to achieve the same thing, but not always less efficiently, as we shall see. Using JS code in TMS WEB Core just involves wrapping it in an asm … block.  We’re not using any other libraries or supporting code to do our work here. The WC variations similarly will work without anything special in terms of the TMS WEB Core environment.  The classes we’ll be using are there by default, collectively referred to as the TJS* classes.  For Delphi though, we do need the extra little step of adding WEBlib.JSON to the uses clause of our project (or Form, etc.).  This brings in the TJSON* classes that we’ll be using. Here then is our sample WebButtonClick procedure that we’ll use in nearly every example that follows.  It will start with whatever JS, WC or PAS variables we need and then contain […]

20 : Relative Performance. I’ve often heard that while it is possible to use the TJSONObject variant of these approaches (the PAS code we’ve been working so diligently on), it is preferable instead to use the WC variant as it will be better performing.  We’ll put that to the test here in a bit of a contrived example.  Often, readability and re-usability of code is more important than straight-up performance, particularly for difficult code that isn’t executed frequently. But at the same time, situations certainly do come up where a bit of code is executed frequently in a tight loop, and squeezing out every bit of performance is important. procedure TForm1.WebButton1Click(Sender: TObject); var   WC_Object: TJSObject;   PAS_Object: TJSONObject;   ElapsedTime: TDateTime;   i: Integer;   Count: Integer; begin   ElapsedTime := Now;   // JS Create 1,000,000 Objects   asm     var JS_Object = {};     for (var i = 0; i

In previous articles in this series, we’ve covered some big JS libraries like Bootstrap and FontAwesome.  But there’s another important JS library out there.  It can be found lurking under approximately 75% of all websites globally.  It first arrived on the scene more than 15 years ago.  And it is likely to be with us for the foreseeable future, even though its use has started to decline. I’m talking of course about jQuery.  But while you can use Bootstrap and FontAwesome in your TMS WEB Core projects without needing to resort to JavaScript coding, the same cannot really be said for jQuery.  At its core, jQuery can be thought of as a kind of extension of sorts to the JavaScript language.  Their motto is Write Less, Do More. We’ll be taking a look at where jQuery might find a good fit in TMS WEB Core projects, and also some of the unexpected challenges that might arise. Good jQuery First, the briefest of histories.  jQuery first surfaced around 2006.  It was a time when writing JavaScript code meant that you had to be very much aware of the target browser that would be running your code.  Standards of the day were tenuous at best.  And as the saying goes, the great thing about standards is that there are so many to choose from. jQuery offered developers a consistent approach to writing JavaScript (an API, essentially) which meant that you could write code using jQuery that would then work across many browsers.  So naturally it rose quickly in popularity.  In fact, it became so popular, particularly among new developers, that it has been said that some developers struggle to write actual Vanilla JavaScript (aka JavaScript that doesn’t make use of any frameworks like jQuery). Not surprising given how easy it has been to use jQuery when compared to the Vanilla JS equivalents of even just a few years ago.    jQuery has also evolved over the years to keep up with current web trends, and perhaps has even helped drive to some degree the adoption of new browser technologies. Even if some of those technologies ultimately end up removing the need for jQuery in the first place.  Progress, all the same.  And given the almost ubiquitous presence of jQuery, many (previously, most) JS libraries have been built on top of it, further ensuring it has a long life ahead of it.  Last time out, we looked at BigText, one such JS library, with jQuery as its only dependency.  Bootstrap 4 was also dependent on jQuery, but this was removed for Bootstrap 5.  Removing jQuery as a dependency seems to be a bit of a trend of late, perhaps ironically at the same time that many JS libraries are increasingly being released with variants that are specifically tailored to other (competing) JS frameworks.  Less Good jQuery Being around for such a long time, and being actively improved all the while, naturally a good deal of bloat is destined to be part of the mix, as would be the case in any software product.  For some projects, this will be the largest JS library in the project, dwarfing all others and negatively impacting the overall performance of the resulting web application.  While I don’t doubt that this can be a real problem, we also […]

 Are you keeping up with our latest developments? We know it is hard to keep up with our latest developments, it is going super fast! Best way to stay updated? Of course TMS ALL-ACCESS! To give our customers access to all our latest developments we have created our no-nonsense subscription TMS ALL-ACCESS! Because we want our customers to be able to use all our products with no restrictions or limitations. And when we say ALL we really mean ALL our products we offer now and also all new products we’ll release in the year of the subscription. Moreover, our all-access users are the first to receive the previews and betas of our non-released products! A quick recap In the first quarter of 2022, we already released 3 new products: Get full access with:  Easy plan: All current and new products for 1 price! Easy renewal: Yearly renewal only for 520 EUR! Easy install: all products accessible via TMS Subscription Manager tool Easy support: Full online support center access to all areas Easy up-to-date: Early access to product betas Easy learning: Access to TMS WEB Academy Pleasant user experience Use the TMS Subscription Manager with a single login to get instant access to all products in your TMS ALL-ACCESS subscription. TMS Subscription Manager categorizes the products per technology : VCL, WEB, FMX, BIZ, FNC, DEV, .NET, IntraWeb and LCL. Per product, you get a description, link to the product webpage, info on latest available version and release date, info on your last download version and download date and info on your last product install version and date. You can mark specific TMS products as your favorite products. It allows you to start multiple downloads. Behind the scenes, TMS Subscription Manager keeps a backup of any product versions you have downloaded. Right-click on the downloaded version number cell per product and from the context menu you can see all available versions (if there are any) and activate another version for install. The TMS Subscription Manager keeps you always informed about the validity of your subscription and will guide you to the renewal order upon expiry. From the TMS Subscription Manager there is a comprehensive list of links to interact with us, via email, social media, forums, RSS, Youtube videos … Did you know… … that the renewal price after 1 year is at 70% discount from the new license price, i.e. currently just 520 EUR ?!  So, once you are a TMS ALL-ACCESS subscriber, you’re covered the next years for just this fraction of the price. We wish to offer fair prices to ALL our customers at ANY time! We believe the customer should be able to purchase at an attractive and correct price on the day the customers wants to make the purchase and not the day we want this.  So what are you waiting for? Contact sales for special upgrading pricing for existing customers of other products. Requests are looked at case by case and a best possible offer is made. 

Last week we did a blog on visualizing your own data structure, which showed the capabilities of virtual data, and the little code required to get up and running. Today’s blog is demonstrating how to interact with the chart. When the data is loaded, how do we zoom in, out? How can we get more details about a specific point in the data? Panning Panning is enabled by default, you can pan left to right on the X-Axis. To enable/disable panning, you can use the InteractionOptions.Panning property. Panning is done by moving the finger/mouse from right to left, or left to right. By default, the chart is showing the full range of points, starting at point 1. Dragging from left to right will show points before the zero valuepoint on the chart Dragging from right to left will show points after the last visible  The chart can be reset by using the following code TMSFNCChart1.BeginUpdate; for I := 0 to TMSFNCChart1.Series.Count – 1 do TMSFNCChart1.Series[I].AutoXRange := arEnabled; TMSFNCChart1.EndUpdate; Zooming Zooming in / out is also enabled by default, on the x-range, which means that you can zoom/scale horizontally. This can be done by holding the CTRL key on the keyboard, dragging the mouse / finger left & right or by doing a pinch gesture on iOS/Android. Below are 2 screenshots of the chart in action whilst zooming in and out   The chart can be reset in the same way as with panning. The property to support scale interaction is located under InteractionOptions.ScaleMode which can be set to smHorizontal (default), smVertical (y-values scaling) or smNone. Point Detection The chart exposes a series of events that are triggered when clicking on a point, bar, slice or an item in the legend. For this sample, we want to click on a bar, visualize the value and change the color. The code to do this is shown below. procedure TForm1.TMSFNCBarChart1SerieBarClick(Sender: TObject; APoint: TTMSFNCChartPoint); begin APoint.Color := gcOrange; ShowMessage(‘The point clicked has a value of ‘ + APoint.YValue.ToString); end; v2.0 Our team is working hard on the next version which will include a significant amount of new features and improvements related to data import, look & feel and out of the box experience. Stay tuned for more! Want to explore the capabilities of TMS FNC Chart, go ahead and download it from our product page.

TMS iCL is our Delphi iOS component library. The components are in fact wrappers around the iOS operating system level defined controls and are usable from a FireMonkey form. As iCL controls wrap iOS operating system controls, the entire look & feel as well as feature set of the iCL control is defined by what the iOS control offers. It is rendered by the iOS operating system.Another advantage is the performance, the control remains extremely fast and responsive, irrespective of the number of items or the complexity of what is displayed. Both iCL controls and FNC or Firemonkey controls can be used together on the same form. Update 4.0.0.0 In this update we added four new components, replaced some deprecated components by Apple and updated our demo’s to work out of the box on Delphi 11. Application Shortcuts On a device that supports 3D Touch, a user invokes the quick action by pressing the app’s icon on the Home screen and then selecting the quick action’s title. The TMSFMXNativeAppShortcuts component has a list of shortcut items which will trigger an event when the item was selected to open the application. Speech Recognition Two components were introduced for speech recognition. TMSFMXNativeSpeechRecognition to retrieve the text from the spoken input or from an audio file. And the TMSFMXNativeSpeechCommandRecognition, which will execute an event when the required text has been recognized by the component. Sheet Controller TMSFMXNativeUIViewSheetController lets you present a view as a sheet on top. The height can be set and there is the possibility to show or hide a grabber. Replacing deprecated components TMSFMXNativeUIViewPopOverController replaces UIPopoverController as the UIPopoverController is deprecated by Apple. TMSFMXNativeUIViewPopOverController now inherits from the UIViewController. TMSFMXNativeWIWebView replaces UIWebView. It is a new component, but has all of the same procedures and properties as TMSFMXNativeUIWebView. This will make it easy to update your application. And the demos were updated to work out of the box on Delphi 11 and with iOS 14+. More information on TMS iCL.

In April, we did a blog on how to retrieve Google Analytics results, and display them in a TMS FNC Chart instance. The data, coming from the request, was displayed in a points collection. Did you know that you can also map your own data structure? TMS FNC Chart is designed to easily integrate your own data with a couple of lines of code. This blog will cover this, but first, let’s take a look at a general introduction video on what TMS FNC Chart has to offer.  Introduction Data mapping For the purpose of this sample, we take our CARS.csv file, shipped with a couple of our FNC demos. The file contains a list of cars, with useful info such as the power, cylinder capacity and price. First of all, we load our csv data in a TTMSFNCGrid. TMSFNCGrid1.IOOffset := Point(1,1); TMSFNCGrid1.LoadFromCSV(‘CARS.CSV’); TMSFNCGrid1.SortData(1, sdAscending); TMSFNCGrid1.Cells[1,0] := ‘Brand’; TMSFNCGrid1.Cells[2,0] := ‘Type’; TMSFNCGrid1.Cells[3,0] := ‘CC’; TMSFNCGrid1.Cells[4,0] := ‘Hp’; TMSFNCGrid1.Cells[5,0] := ‘Cyl’; TMSFNCGrid1.Cells[6,0] := ‘Kw’; TMSFNCGrid1.Cells[7,0] := ‘Price’; TMSFNCGrid1.Cells[8,0] := ‘Country’; Next, we want to visualize the price for each car in a bar chart. First, we add a new series, and set the type. var s: TTMSFNCChartSerie; begin TMSFNCChart1.Series.Clear; s := TMSFNCChart1.Series.Add; s.ChartType := ctBar; s.XValues.Angle := 90; end; To visualize the data in the chart, we can loop through the rows in the grid, and manually add a point for each row, pointing to the data. But there is an easier way. To load data in the chart, mapping directly on the grid data, we begin by implementing the OnGetNumberOfPoints event. procedure TForm1.TMSFNCChart1GetNumberOfPoints(Sender: TObject; ASerie: TTMSFNCChartSerie; var ANumberOfPoints: Integer); begin ANumberOfPoints := TMSFNCGrid1.RowCount – 1; end; The data is requested for each index between 0 & ANumberOfPoints through the OnGetPoint event. In this event, we can map the index on the series data. procedure TForm1.TMSFNCChart1GetPoint(Sender: TObject; ASerie: TTMSFNCChartSerie; AIndex: Integer; var APoint: TTMSFNCChartPointVirtual); var v: Integer; begin v := 0; if TryStrToInt(TMSFNCGrid1.Cells[7, AIndex + 1], v) then APoint.YValue := v; APoint.XValueText := TMSFNCGrid1.Cells[1, AIndex + 1] + ‘ ‘ + TMSFNCGrid1.Cells[2, AIndex + 1]; end; As you can see, a couple of lines of code immediately gives you a first impression of your data. Further customizations can be done, but the chart will map on the data, even if it refreshes the next time your app starts. CSV is a small sample and of course, the data delivered to TMS FNC Chart can be of any source type. v2.0 Our team is working hard on the next version which will include a significant amount of new features and improvements related to data import, look & feel and out of the box experience. Stay tuned for more! Want to explore the capabilities of TMS FNC Chart, go ahead and download it from our product page.