Dimensional Data

Here is the code of a Delphi console application, that simulates a simple computer algebra system using the ‘Run’ method: program Simulator; {$APPTYPE CONSOLE} {$R *.res} uses   System.SysUtils,   Analytix.Utilities,   Analytix.Assembly,   Analytix.Float.Assembly,            Analytix.LinearAlgebra.Assembly,    Analytix.Derivatives.Assembly,      Analytix.Integrals.Assembly,        Analytix.Translator; var   translator: TTranslator;   command, msg: string;   lines: TArray;   i: integer; begin   translator:= TTranslator.Create;                while true do   begin     Write(‘Input command: ‘);     ReadLn(command);     if command=” then exit;     translator.Run(command, msg);                    lines:= msg.Split([#13]);     for i:=Low(lines) to High(lines) do       WriteLn(lines[i]);     WriteLn;   end; end. In the simplest case, we can use commands for creating new variables, assigning new values to the existing variables, or evaluating symbolic expressions, as shown in the picture below. Assignment statement in the ‘Run’ method supports arrays, indexed expressions, and array slicing. Let us consider the following commands and the console output: Input command: A=[1 -1 2 3/4]Variable created. A=Array[4]=(1 -1 2 0.75 )Input command: B=[e 1/2 3 -3/4]Variable created. B=Array[4]=(2.71828182845905 0.5 3 -0.75 )Input command: M=Matrix{3 4}(0)Variable created. M=Array[3][4]=( 0 0 0 0)( 0 0 0 0)( 0 0 0 0)Input command: M[0]=A+BVariable M[0] assigned: Array[4]=(3.71828182845905 -0.5 5 0 )Input command: M[2]=A-BVariable M[2] assigned: Array[4]=(-1.71828182845905 -1.5 -1 1.5 )Input command: MM=Array[3][4]=(  3.71828182845905 -0.5  5   0)(                 0    0  0   0)( -1.71828182845905 -1.5 -1 1.5) First, two arrays ‘A’ and ‘B’ are created, using so called array expression syntax (array elements in the brackets ‘[]’), and the ‘M’ matrix 3×4, using the ‘Matrix’ function. Then we assigned the sum of the arrays to the zero row of the matrix, and the difference of the arrays to the 2nd row. The assignment statement used so called array slicing feature. That is, we can use not entire matrix or its individual element, but also the part of the matrix – a row or a column. The library supports array expressions and slicing for Real, Complex, and Boolean arrays up to the 3 dimensions. Another application of the assignment statement is creating user-defined functions. In the following example, we created two functions: the first calculates the volume of a sphere of radius ‘r’; the second calculates the length of a 3D vector, defined by the ‘x’, ‘y’, and ‘z’ coordinates. Input command: V(r)=4/3*Pi*r^3Function created. V(r)->4/3*Pi*r^3Input command: L(x y z)=(x^2+y^2+z^2)^(1/2)Function created. L(x y z)->(x^2+y^2+z^2)^(1/2) Once a function is defined, it can be then used in expressions to calculate their values for the specified arguments: Input command: V(1/2)V(1/2)=0.523598775598299Input command: L(-1 e 3/4)L(-1 e 3/4)=2.99191512228048 The ‘Run’ method also supports more complicated commands, such as conditional statement and loop statement. The following console output shows how the user solves a square equation with specified coefficients ‘a’, ‘b’, ‘c’, using the conditional ‘IF’ statement:  Input command: a=1Variable created. a=1Input command: b=-2Variable created. b=-2Input command: c=-3Variable created. c=-3Input command: d=b^2-4*a*cVariable created. d=16Input command: IF{d

With so many incredible JS libraries available to developers, it might be hard to pick a place to start. But one in particular touts itself as The most popular JS, CSS and HTML library in the world and indeed it is, with good reason. I’m talking of course about Bootstrap.  One would be hard-pressed to find a modern website today that doesn’t take advantage of this library.  In fact, there is even a TMS WEB Core Bootstrap template to help you get started using Bootstrap right out of the gate.  And, unlike many of the JS libraries we’ll be covering, you can make use of Bootstrap without knowing any JS at all, or really any CSS or HTML for that matter.  In this article, we’ll cover a bit about what Bootstrap is and how to get started using it in your TMS WEB Core projects. So What is Bootstrap? Bootstrap is essentially an enormous collection of JS code and CSS styles that allow you to quickly design modern, mobile-first and responsive websites. Beyond just marketing hype though, it does this by providing a robust framework of CSS classes that help organize a typical website into a structure that works well in many different browser environments.  Indeed, if you were starting from nothing and didn’t have an IDE or other development tools, it is possible to do quite a bit of layout and design work just with Bootstrap by itself.  Fortunately we don’t have to work at that level.  Instead, we can simply use these Bootstrap classes in all kinds of ways with standard TMS WEB Core components. Adding Bootstrap to Your Project If you’ve got an existing TMS WEB Core project that you want to add Bootstrap to, it is just a few minutes  to get it installed.  As we covered in the introduction for this blog series, there are a few considerations here.  But the easiest way is to just use the “Manage JavaScript Libraries” feature of the IDE: Using this option, or creating a new TMS WEB Bootstrap Application will setup the necessary links in the Project.html file and will include a copy of the necessary Bootstrap library code in your project directly.  No need for a CDN or external links.  If you’d prefer to use a CDN instead, you can add the following links to your Project.html, as per the Bootstrap website: I’ve also included the Bootstrap Icons in the above links.  More on that a bit later.  Popper is another JS library that is used to display popup dialogs and other things. The Bootstrap folks have conveniently included it in their “bundle” distribution but you could choose a smaller package if you really didn’t need any of that functionality.  These links also reference Bootstrap 5 (or later) which no longer has a dependency on jQuery. So it doesn’t much matter where Bootstrap appears in the order, if you have multiple JS libraries in your project. If you’re using an older version of Bootstrap (v4 or earlier) then be sure to check that jQuery is loaded first. So. Many. Classes. The Bootstrap website is an excellent source of documentation for all the many features they offer, complete with many examples.  One of the better sites for documentation of all the JS libraries we’re likely to cover.  However […]

Always wanted to use interesting JavaScript libraries with functionality not readily available in Delphi or C++Builder in you VCL and FireMonkey applications? Or integrate HTML Components? The TTMSFNCWXContainer component let’s you do just that! Simply adding a container to the component and setting the HTML, CSS & JavaScript is enough to get you started. This example is a simple HTML Button styled with Bootstrap. We’ve tweaked the CSS a bit to make sure the button is the size of the whole component to get this result.  From here you can write your own JavaScript to be executed when the user clicks the button. But you can also add assign an action to it. To do this, simply add an action to the Actions collection and assign the HTMLElementID. Subscribe to the OnExecute event and put your code there. the AEventData contains all information from the JavaScript. Or you can go the other way around and call JavaScript functionality from the pascal side with the ExecuteJavaScript function. procedure TForm5.TMSFNCWXContainer1ElementContainers0Actions0Execute( Sender: TObject; AEventData: TTMSFNCCustomWEBControlEventData); begin TMSFNCWXContainer1.ExecuteJavaScript(‘$(“#clickbutton”).removeClass().addClass(“btn btn-danger”)’); end; As you can see this OnExecute event calls the ExecuteJavaScript and uses jQuery functionality to remove all CSS classes and add the “btn btn-danger” class. This means that when you click the button it will change from blue to red.  Last but not least you can use the JavaScript Bridge to send data from the JavaScript to the pascal code. To do this call the ‘CallBack(‘eventname’, eventData) function in your JavaScript and subscribe to the OnCustomEvent of the component. 

  Welcome to the first post in a new series for the TMS Blog, “Extend TMS WEB Core with JS Libraries with Andrew “.  In this ongoing series we’ll look at how to quickly and easily incorporate third-party JavaScript libraries into TMS WEB Core projects.  Each week will typically focus on a particular JS library and the problem it is trying to solve.  A sample project will be included to showcase some of its key features and how they can be integrated into TMS WEB Core. And some additional commentary will offer insight as to what it is like to work with the particular JS library as most of those to be featured in this series are used regularly in my own projects. For those new to TMS WEB Core or new to JavaScript, we’ll spend the rest of this first post covering a lot of the basics of what this is all about.   So. Many. JS Libraries. It is quite possible to develop fantastic 100% pure JavaScript/HTML/CSS web applications using just TMS WEB Core and the included components, just as you would expect with any other popular web frameworks. When it comes to extending a project with additional functionality beyond the included components, you’ve got options. You can of course write code yourself. You can use components from vendors like TMS Software and others that are specifically designed for TMS WEB Core.  Or you can tap into the huge reservoir of both open source and commercial JavaScript libraries.  On GitHub for example there at least several thousand such JS libraries covering everything from the simplest little CSS tweaks to hugely complex and involved APIs for machine learning.  If you’ve run into a problem developing your web application and need a bit of functionality that just isn’t there, there’s a pretty good chance someone has come along and made a JS library to address it.  Here’s a bit of an idea about the categories of JS Libraries that are available. Helpers.  Provide developers with shortcuts for common tasks.  JQuery and Bootstrap fall in this category. Assets.  Icons, fonts, themes and so on that are likely to make a big impact on the look and feel of your web application.  FontAwesome is an example.   Bootstrap comes with icons as well. Controls.  Interactive UI elements that provide functionality roughly equivalent to what a Delphi component might offer.  There are countless date/time pickers, for example FlatPickr. Tools.  Similar to Helpers, these are used to extend or otherwise enhance the components core controls that you are already using.  Interact.js adds drag+resize functionality to any control, for example. Services.  These include libraries for connecting to external services or communications, and libraries that help with sending e-mail and SMS messages, that sort of thing. Devices.  Typically these are APIs that allow for interacting with local devices or other hardware. Anything to do with Raspberry Pi, for example, would fall into this category. In this series we’re going to start out by focusing on those JS libraries that can help us craft better looking and easier to use web applications, so typically the first four categories. While the last two categories, Services and Devices, are hugely popular and important, they’re also very specific in nature.  Coverage of these would likely be far less about JS and TMS […]