Dimensional Data

This time out, we are exploring FontAwesome, another wildly popular JS library. Like Bootstrap last week, FontAwesome requires no JavaScript coding knowledge and very little in the way of HTML or CSS knowledge either.  And while it does have a lot to do with fonts, and is indeed truly awesome, the main benefit we’re going to get from FontAwesome in terms of our TMS WEB Core projects is its enormous icon library. Great. More Icons. Last week, we touched briefly on the topic of Bootstrap Icons. 1,600 or so freely usable icons that you can directly use in your projects. There are also Google Material Icons. Several thousand more icons that also come in five different styles. The Google Material Icons library is even included in the JavaScript Library Manager in the Delphi IDE, so getting started is easy enough. If you’ve used one of these sets of icons previously in your projects, you might be reluctant to switch to something else.  The look of the Google icons will be familiar to many and might be somewhat of a safe choice.  Long-time developers might feel a bit of a chill when reflecting back on icons of ages past. There was a time when you could pretty accurately guess what tools were used to create an app based entirely on how audacious the icons were.  Like acid-wash jeans and tie-dye shirts, these are thankfully well behind us and we now have mostly sane choices to pick from.  Also long gone are less-than-fun topics like multi-res bitmaps, bmp-vs-ico, transparency issues, and anything to do with scaling.  I suspect our children will never care what a pixel is because they won’t actually be able to see any individual pixels anywhere without a microscope.  Back to the topic at hand.  Like Google Material Icons, FontAwesome has a handful of different styles to choose from.  And I personally much prefer FontAwesome styles to the Google equivalents, but there’s more to the story than just the look of the icons.  Much more. Making Your Project FontAwesome The FontAwesome library was recently added to the “Manage JavaScript Libraries” list, sometime around TMS WEB Core 1.9.8 or so.  It lists both FontAwesome 4 and FontAwesome 5. FontAwesome 6 also came out a couple of months ago.  We’ll run into some of the differences closer to the end of this article.  But I think everything we’re going to cover today will work the same in any version unless otherwise noted.  One thing that is different between versions is the icons themselves – new icons are added and occasionally icons are changed or removed or, more likely, renamed or redesigned.  This can even happen mid-version, so something to keep an eye out for, particularly if you want to use the very latest icons.  If your project doesn’t already use FontAwesome, just pick the highest version available from the “Manage JavaScript Libraries” list and you’re done! If you’d like to use a  particular version of the FontAwesome library, or a particular CDN, or even host the libraries yourself, then the usual approach of adding files to your Project.html file works just fine as well.  Or you can use the JavaScript Library Manager to update the list to suit your particular needs.  Both FontAwesome themselves as well as any reputable CDN will […]

With the release of Google Chrome 100 came the new Multi-Screen Window Placement API. This API allows you to enumerate the displays connected to your machine and to place windows on specific screens. We’ve wrapped this API with TMS WEB Core, so that you can use this inside your Web Applications with minimal effort.  Before we had this API, we could use the window.open() to control windows. This method however, is unaware of additional screens. We can specify the position by passing the coordinates as left and top and pass the size as width and height. To get the information about the current screen we could check the window.screen property.  How to use First of all we have to check if the API is supported. we can simply do this by calling the GetScreenAvailability function. this will return true if it is supported.  To get all necessary screen information you can call the following asynchronous function: GetScreensInfo. This will result in a TJSScreenInfo object containing a list of all the available displays as well as the current screen the window is rendered on.  screens := await(TJSScreeninfo, GetScreensInfo); screens.OnCurrentScreenChange := DoCurrentScreensChange; screens.OnScreensChange := DoScreensChanged; The Screens object also has 2 events: OnCurrentScreenChange: This event updates the screens object when the web application changes screen. OnScreenChange: This event updates the screens object when the browser detects that the displays have been changed.(i.e. adding/removing a display) The Screens object looks like this on my machine. As you can see I have to 2 Displays connected to my machine. And my CurrentScreen is “External Display 2” which is not my primary screen. Using the left and top properties of the TJSScreenDetails object, we can accurately position our window wherever we want on the display that you want. Before we can use the Multi-Screen Window Placement API we must ask the user for permission to use it. To do this, we can call the GetPermissions function. Be aware that this function is asynchronous. so you’ll have to await it. you can use it like this: allowed := await(boolean, GetPermissions); Weather around the world! Using this API we made a demo application that let’s you check the weather in several locations all around the world. If you have a multi display setup the weather popups will be shown on the screen the web application is not currently on.  The result will be something like this when clicking the button. Screen 1: Screen 2: And a screenshot from both screens together: To make this possible, we simply calculate how large the windows can be if we want to show a 5 x 2 table of windows. w := Math.floor((screens.screens[i].availableWidth – FColumns * 1) / FColumns); h := Math.floor((screens.screens[i].availableHeight – FRows * 51) / FRows); After that we loop over the columns and rows and calculate for each window the X and Y offset. we than add it to a WindowFeatures string and call the CreatePopup function.  for j := 0 to FColumns -1 do begin for k := 0 to FRows -1 do begin x := j * w + screens.screens[i].availableLeft + j * 1; y := k * h + screens.screens[i].availableTop + k * 51; Features := ” + ‘screenX=’ + IntToStr(x)+ ‘,’ + ‘screenY=’ + IntToStr(y)+ ‘,’ + ‘width=’ + IntToStr(w)+ ‘,’ + ‘height=’ + IntToStr(h)+ ‘,’ […]