Dimensional Data

Noi, ca dezvoltatori, căutăm noi API-uri interesante, noi componente care să ofere acel pic în plus sau ceva complet nou și uimitor. În calitate de dezvoltatori de componente, este o încercare zilnică de a introduce caracteristici noi și interesante în componentele noastre și de a le oferi clienților noștri. Acum, cadrul FNC oferă o mulțime de componente pentru a finaliza diverse sarcini. Chiar și atunci când sunteți entuziasmați să creați o mulțime de componente noi, este adesea bine să reflectăm la ceea ce s-a făcut deja și să vedem unde ne putem îmbunătăți. TMS FNC Chart a fost primul produs FNC și a fost o introducere în dezvoltarea cross-platform, cross-framework și cross-IDE. La momentul lansării, VCL și FMX erau acceptate. Ulterior am adăugat suportul Lazarus și TMS WEB Core. A fost nevoie de mai mult timp pentru a suporta mai multe cadre și sisteme de operare și pentru a rezolva toate diferențele. Am avut imediat ideea de a crea mai multe componente UI, ceea ce a dus la varietatea de seturi de componente bazate pe framework FNC pe care le avem astăzi. Între timp, am decis că este timpul să ne întoarcem la început, la primul nostru produs FNC și să vedem ce poate fi îmbunătățit. Astăzi, dorim să dezvăluim câteva funcții noi și interesante care vor apărea în versiunea 2.0, precum și un mic eșantion despre ceea ce înseamnă asta pentru tine ca client/dezvoltator. TMS FNC Chart v2.0 Apare în v2.0 Tipuri moștenite : TTMSFNCChart era singura componentă disponibilă, iar tipurile de serie trebuiau schimbate acolo, de fiecare dată când se folosea o nouă instanță a TTMSFNCChart. În v2.0 introducem tipurile moștenite , ceea ce înseamnă că va exista un tip de clasă descendentă pentru fiecare tip de serie, de exemplu: TTMSFNCBarChart, TTMSFNCLineChart, TTMSFNCPieChart, … . Utilizarea acestui nou set de clase va preseta tipul de serie la creare, adăugarea de noi serii va fi, de asemenea, tipul corect și există o previzualizare în timp de proiectare care va semăna mai mult cu ceea ce ar trebui să reprezinte tipul ales. Aspect și teme de culoare : diagrama afișează diverse elemente, cum ar fi un titlu, axa x, axa y și fiecare dintre aceste elemente poate fi personalizat cu o mulțime de proprietăți. Modificarea aspectului general al diagramei poate dura destul de mult. În v2.0 dorim să introducem un aspect global, care aplică numele fontului, culoarea și capacitatea de a mări toate fonturile din diagramă dintr-o singură mișcare. În plus, am dorit să facem diagrama mai prietenoasă cu culorile și mai dinamică. 2.0 introduce o nouă listă de culori personalizată, stil Excel și culori monocromatice. Import de date : diagrama poate vizualiza în mod evident datele. Datele provin din diferite tipuri de surse și, în prezent, nu există metode de ajutor de niciun fel care să facă acest lucru posibil. În v2.0, va fi posibil să încărcați date din CSV, JSON și matrice de date predefinite cu o mulțime de opțiuni de personalizare. Suport pentru baze de date: În v2.0 oferim și suport pentru baze de date doar pentru citire. TTMSFNCChartDatabaseAdapter va fi disponibil ca o componentă separată și va recunoaște dinamic câmpurile ca serie, cu flexibilitatea de a adăuga personalizare suplimentară. Conectarea la grilă : În pachetul TMS FNC UI , avem componenta TTMSFNCGrid. În v2.0, va fi […]

Ultimele postări au acoperit FlatPickr , o bibliotecă JS populară și foarte capabilă de datepicker. Ne-am uitat la multe dintre opțiunile sale și am analizat două moduri complet diferite de a-l adăuga la proiectele noastre TMS WEB Core. În ceea ce nu ne-am aprofundat prea mult este întreaga zonă a formatelor de dată și oră, fusuri orare, internaționalizare și diferențele dintre gestionarea datei în Delphi și JavaScript. Ei bine, am făcut puțin, dar suficient pentru a trece prin câteva exemple. De data aceasta, vom intra în mai multe detalii și vom introduce, de asemenea, cea mai recentă bibliotecă JS în repertoriul nostru – Luxon – care se descrie ca „un înveliș puternic, modern și prietenos pentru datele și orele JavaScript”. Nu sunt deloc sigur că cumpăr bitul „prietenos”, dar este într-adevăr puternic și modern, așa că să vedem unde se potrivește. Motivația. Dezvoltatorii Delphi de lungă durată sunt probabil să fie destul de familiarizați cu TDateTime și cu diferitele sale avantaje și deficiențe. Și chiar dacă ești relativ nou în Delphi și nu ai avut prea multă oportunitate de a interacționa cu TDateTime, nu există prea multe lucruri care să te împiedice și, în general, nu este probabil să atragă prea multă atenție de la sine . Acesta este un lucru bun, desigur. Când aveți de-a face cu JavaScript, totuși, frumosul și confortabilul TDateTime este înlocuit cu un format de dată JavaScript destul de sinistru, care nu este niciunul dintre aceste lucruri. Sigur, este destul de ușor să începeți cu o dată JavaScript, dar este într-adevăr o fiară complet diferită. Deplasarea între cele două poate fi o provocare și chiar și doar încercarea de a face cea mai mică parte de formatare poate fi uneori mult mai multe probleme decât ar putea părea posibil. Deci, în această postare, vom trece peste o grămadă de astfel de lucruri. Scoateți totul dintr-o singură lovitură, smulgeți aparatul, ca să spunem așa, ca să putem trece cu sinceritate și încredere la alte subiecte, dar să avem asta în buzunarul din spate atunci când avem nevoie. Și crede-mă, vom avea nevoie de el! Epocă epică. Să ne scufundăm mai întâi degetul în capătul superficial și să trecem rapid peste ce este TDateTime. Delphi folosește clasa TDateTime pentru a codifica, în mod natural, o dată și o oră. Face acest lucru într-un mod foarte simplu – prin utilizarea unui număr în virgulă mobilă (în special, un dublu), în care întreaga parte a numărului reprezintă numărul de zile de la 1899-12-30, iar partea fracțională a numărului reprezintă timpul ca o fracțiune de zi. Amiaza ar fi reprezentată ca .5, 18:00 ar fi reprezentată ca .75 și așa mai departe. Alegerea lui 1899-12-30 este oarecum arbitrară, dar am dat peste acest link care a descris-o astfel: Se pare că motivul pentru Delphi începând cu 30 decembrie 1899 este acela de a-l face cât mai compatibil cu Excel și, în același timp, nu adoptă incorectitudinea Excel cu privire la date. Din punct de vedere istoric, Excel a jucat al doilea lăutar în fața lui Lotus 1-2-3. Lotus (care poate să fi primit această eroare de la Visicalc) a considerat în mod incorect 1900 ca fiind un an bisect, prin urmare, o valoare de 60 vă oferă 29 februarie 1900 în Excel, dar este interpretat ca 28 februarie 1900 în […]

Doriți să afișați sau să editați codul direct în aplicația dvs. TMS WEB Core? Atunci aceasta este postarea pentru tine. De data aceasta, ne aruncăm cu capul întâi în CodeMirror 5 , care se descrie ca „un editor de text versatil implementat în JavaScript pentru browser”. Ceea ce cu siguranță este. Pe lângă faptul că este doar un editor de text, este conștient în mod nativ de peste 100 de limbaje de programare diferite. În plus, are numeroase suplimente și opțiuni configurabile pentru a imita numeroasele stiluri și convenții ale altor editori cu care ați putea fi deja familiarizați, cum ar fi Vim, Emacs și așa mai departe. Și folosirea acestuia într-un proiect TMS WEB Core este la fel de ușoară ca oricare dintre celelalte biblioteci JS pe care le-am acoperit până acum. Motivația. De ce avem nevoie de un editor de cod? Primul beneficiu al unui editor de cod, în comparație cu un simplu editor de text sau un câmp editabil TWebMemo, de exemplu, este că de obicei vine cu evidențiere de sintaxă care este configurată pentru limbajul de programare pe care îl editați. Pentru Pascal, aceasta înseamnă că începutul și sfârșitul sunt afișate automat într-o culoare diferită, precum și orice alte cuvinte cheie rezervate legate de Pascal. Acest lucru înseamnă, de obicei, că diferitele tipuri de paranteze sunt afișate într-un mod care facilitează găsirea perechilor de paranteze potrivite sau că comentariile apar într-o culoare sau stil diferit. Poate că nu pare mult, dar dacă ați încercat vreodată să scrieți cod fără acest lucru, este o experiență foarte diferită. Desigur, probabil că ești foarte familiarizat cu acest tip de lucruri, deoarece IDE-ul Delphi face exact acest lucru (și mult, mult mai mult!) atunci când editează codul. Uneori este chiar util să afișați alt text folosind acest tip de mecanism, dacă nu există niciun alt motiv decât pentru a-l face puțin mai frumos de privit. Dacă aveți fișiere jurnal care sunt potențial vizibile pentru utilizatorii dvs., de exemplu, acestea pot fi configurate astfel încât să fie vizualizate prin CodeMirror. Poate că setat la ceva de genul SQL (preferința mea personală) va face fișierele jurnal puțin mai ușor de citit, în funcție de modul în care au fost formatate, cu datele și numerele și alte lucruri afișate potențial într-o culoare diferită. Sau poate doriți să afișați text care are numere de rând lângă el. Sau, poate, cel mai comun dintre toate, doriți să editați sursa HTML și să aveți etichetele afișate într-o culoare diferită. Vom arunca o privire atât la Summernote , cât și la SunEditor într-o postare viitoare, ambele utilizând CodeMirror pentru a oferi funcționalitatea de „editare sursă HTML”. CodeMirror 5 vs. CodeMirror 6. Înainte de a merge mai departe, hai să rezolvăm rapid asta. În mod normal, sunt 100% all-in când vine vorba de a folosi marginea de vârf a oricărei biblioteci JS, cu gândul că va avea probabil cel mai bun suport pentru cele mai recente browsere și cele mai active eforturi de dezvoltare, în comparație. la versiuni mai vechi ale aceleiași biblioteci. Și acest lucru se aplică într-adevăr și aici. Cu toate acestea, în acest moment sunt puțin prea departe de vârf. Până acum, CodeMirror 6 este într-adevăr o colecție de module care nu pot fi încărcate direct (poate cu ușurință ar fi mai precis) într-o aplicație […]

The last couple of posts covered FlatPickr, a popular and very capable datepicker JS Library.  We looked at many of its options, and looked at two completely different ways to add it to our TMS WEB Core projects.   What we didn’t really delve too much into is the whole area of date and time formats, timezones, internationalization, and the differences between date-handling in Delphi and JavaScript. Well, we did a little, but just enough to get through some examples.  This time out, we’ll go into a bit more detail and also introduce the latest JS Library to our repertoire – Luxon – which describes itself as “a powerful, modern, and friendly wrapper for JavaScript dates and times.”  I’m not at all sure that I buy the “friendly” bit, but it is indeed powerful and modern, so let’s see where it fits in. Motivation. Long-time Delphi developers are likely to be pretty familiar with TDateTime and its various advantages and shortcomings.  And even if you’re relatively new to Delphi and haven’t had much of an opportunity to interact with TDateTime, there’s not much there to trip you up and, by and large, it isn’t likely to garner much attention on its own. This is a good thing, of course. When dealing with JavaScript, however, the nice and comfy TDateTime is replaced with a rather sinister JavaScript date format that is none of these things.  Sure, it is easy enough to get started with a JavaScript date, but it really is an entirely different beast.  Moving between the two can be a challenge, and even just trying to do the tiniest bit of formatting can sometimes be a lot more trouble than might seem possible.  So in this post we’re going to go over a bunch of this kind of stuff.  Get it all out in one fell swoop, rip off the band-aid so to speak, so we can candidly and confidently move on to other topics, but have this in our back pocket when we need it.  And believe me, we’ll be needing it! Epic Epoch. Let’s dip our toe into the shallow end first and quickly go over what TDateTime is. Delphi uses the TDateTime class to encode, naturally, a date and a time.  It does this in a very simple way – by using a floating point number (specifically, a double) where the whole part of the number represents the number of days since 1899-12-30 and the fractional part of the number represents the time as a fraction of a day.  Noon would be represented as .5, 18:00 would be represented as .75, and so on.  The choice of 1899-12-30 is somewhat arbitrary, but I ran across this link which described it this way: It appears that the reason for Delphi starting at 30 Dec 1899 is to make it as compatible as possible with Excel while at the same time not adopting Excel’s incorrectness about dates. Historically, Excel played second fiddle to Lotus 1-2-3. Lotus (which may have got this error from Visicalc) incorrectly considered 1900 to be a leap year hence a value of 60 gives you 29 Feb 1900 in Excel but is interpreted as 28 Feb 1900 in Delphi due to Delphi starting 1 day before. From the 01 Mar 1901 the two date systems […]

We, as developers, seek for new exciting APIs, new components that offer that little bit extra, or something completely new and mindblowing. As component developers, it’s a daily quest to put new and exciting features into our components, and offer them to our customers. Now, the FNC framework offers a lot of components to complete various tasks. Even when being excited to create a lot of new components, it’s often good to reflect on what has been done already and see where we can improve. TMS FNC Chart was the first FNC product and was an introduction into cross-platform, cross-framework and cross-IDE development. At the time it was released, VCL and FMX were supported. Later we added Lazarus, and TMS WEB Core support. More time was required to support multiple frameworks and operating systems and iron out all the differences. We immediately had an idea to create more UI components which resulted in the variety of FNC framework based component sets we have today. Meanwhile, we decided it was time to go back to the beginning, to our very first FNC product and see what can be improved. Today, we want to reveal some new and exciting features coming up in v2.0 as well as a small sample on what that means for you as a customer/developer. TMS FNC Chart v2.0  Coming up in v2.0 Inherited types: TTMSFNCChart was the only component available, and the series types had to be changed there, each time a new instance of TTMSFNCChart was used. In v2.0 we introduce inherited types, which means that there will be a descendant class type for each series type, for example: TTMSFNCBarChart, TTMSFNCLineChart, TTMSFNCPieChart, … . Using these new set of classes will preset the series type upon creation, adding new series will also be the correct type and there is a designtime preview that will resemble more what the chosen type should represent. Appearance & color themes: The chart displays various elements such as a title, x-axis, y-axis and each of those elements can be customized with a lot of properties. Changing the overal look & feel of the chart can take quite some time. In v2.0 we want to introduce a global appearance, which applies font name, color and the ability to up-scale all fonts in the chart in one go. Additionally, we also wanted to make the chart more color friendly and dynamic. 2.0 introduces a new custom color list, excel style and monochromatic colors. Data import: The chart can obviously visualize data. The data comes from various source types and currently, there are no helper methods of any kind to makes this possible. In v2.0 it will be possible to load data from CSV, JSON and predefined data arrays with a lot of customization options. Database support: In v2.0 we also bring read-only database support. The TTMSFNCChartDatabaseAdapter will be available as a separate component and will dynamically recognize fields as series with the flexibility of adding further customization.  Grid linking: In the TMS FNC UI Pack, we have the TTMSFNCGrid component. In v2.0 it will be possible to link the grid to the chart via the TTMSFNCChartGridAdapter component. An example based on cryptocurrency Cryptocurrency is hot topic and, in one way or another, keeps us occupied, interested at the very least. Looking up various known and […]

Last time out, we looked at how to incorporate FlatPickr into a TMS WEB Core project.  We had taken what might be considered the manual approach.  A link to a CDN or other source for the library is added to the Project.html file, and then a little  JavaScript code is used to manually link the library’s code to an element that has been placed on a TWebForm.  This works quite well, and is typically how I use this and many other JS libraries in my projects.  But there is another way that might be more inline with how Delphi is used much of the time – by using components. So in this post, we’ll revisit the same JS library, but we’ll walk through how to create a component that will appear on the Delphi IDE’s Component Palette.  From there, we will be able to add FlatPickr controls to any TWebForm or wherever we need the component to appear, just as easily as we do with a TWebLabel or a TWebEdit. And we’ll be able to adjust many of the options that we want to pass to FlatPickr by setting properties in the Delphi IDE Object Inspector. Motivation. Beyond just making it easier to use FlatPickr in a TMS WEB Core application, the idea of this post is to get a handle on how to create a Delphi package that can include many such controls.  As we make our way through more JS Libraries and their controls in the posts to come, we’ll hopefully be able to upgrade this package with those new controls as well, and maybe even toss in some others along the way.  This package can then be installed by anyone working on TMS WEB Core projects and thus get easier access to all the JS Libraries we’re covering in one simple step.  Note that if you’re using a JS Library in a one-off kind of situation, the work needed to create a component wrapper is likely to be substantially more work than the manual approach. But there is the potential to save time and effort in (at least) the following scenarios. When you want to use many instances of a component, perhaps in multiple forms. When you want to use the same component in multiple projects. When you don’t want to have to meddle with JavaScript or the nuances of the underlying JS Library. When you want to create something to be used with others, saving them time and effort. By having these kinds of controls in Delphi, you can simply work away as you normally would without even really having to know that you’re using a JavaScript library.   Creating a Package. But before we run off creating components, the first thing we’re going to do is create a package to hold these kinds of components.  Right out of the gate, we’ve got a few things to cover.  Writing TMS WEB Core applications in Delphi means that we’re using the Delphi IDE to do part of the work, and then transpiling our code using pas2js behind the scenes to produce the final code that runs in a browser.  But the Delphi IDE doesn’t know all that much about JavaScript or HTML or CSS or things like that – it is a Delphi environment, after all.  And once […]

We are used to inspect a call-stack when something goes wrong in our application and it crashes. Delphi has excellent add-on tools that log detailed call-stack information when an application crashes. But it is not always when an application crashes that call-stack information can be useful. We experience ourselves from time to time that having detailed call-stack information during a regular running application could help us trace undesired situations. Recently, it happened that in rare cases, a component property ended up with an unexpected value. In the application where the component was used, it was from many parts of the code and VCL framework itself that this property was set and it was mostly a matter of knowing from where exactly the unexpected value was set. Once we knew, we could understand and address the problem. The ability to just take at runtime a snapshot of the call-stack when a specific value was set was sufficient to find the culprit. So, while this capability saved us already for several cases an enormous amount of time, we thought it was interesting to make it also available to you in TMS MemInsight. While TMS MemInsight will also give you at run-time insight into the call-stack when exceptions occur, now there is a simple method GetCallStack(sl: TStrings) that you can call from anywhere and as many times as you want and it will return detailed call-stack information. Only requirement is that you link your application with a detailed map information (see Linker options under Project options) How it works? Imagine there is a class TMyClass with a property Text:   TMyClass = class(TPersistent)   protected     procedure SetText(const Value: string);   public     property Text: string read FText write SetText;   end; Now, we want to know from where exactly in our application, this class Text property would be set with an empty string value. We can write the property setter in the following way: uses    TMS.MI.Core; interface type   TMyClass = class(TPersistent)   protected     procedure SetText(const Value: string);   public     property Text: string read FText write SetText;   end; implementation proceduer TMyClass.SetText(const Value: string); var   sl: TStringList; begin   FText := Value;   if FText = ” then   begin     sl := TStringList.Create;     try       GetCallStack(sl);       sl.SaveToFile(‘c:tempcallstack.log’);     finally       sl.Free;     end;   end; end; Now, at application level we can use this class for example like:   MyClass.Text := Edit1.Text; and when the text property is being set with an empty string, we’ll get a nice stack-trace report giving us the information we wanted. For this example, we create at TForm class level the method to set the myClass.Text via:   TForm1 = class(TForm)   private     { Private declarations }     procedure SetClassText(s: string);   end; implementation procedure TForm1.SetClassText(s: string); begin myclass.Text := s; end;    and when we call this from both the an edit control’s OnChange event and a form button OnClick event: procedure TForm1.Button1Click(Sender: TObject); begin   SetClassText(Edit1.Text); end; procedure TForm1.Edit1Change(Sender: TObject); begin   SetClassText(Edit1.Text); end; Now, we get a nice stack trace log when the class Text property is set with an empty string value: TMyClass.SetText (57)TForm1.SetClassText (77)TForm1.Button1Click (43)TControl.Click (7443)TWinControl.WndProc (10162)TButtonControl.WndProc (2617)…. […]

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