How was the TMS Dashboard UI Created?

FNC TMS FNC UI Pack
1

Hi TMSSoftware Support

... first, I apologize for all the questions in advance, but I think a lot of people in this group may benefit from this knowledge.

I am very impressed with the graphic interface for the TMS Dashboard software you provide us. I am very desperate to use the same GUI in my own products, but I am having troubles trying to figure out how to do it.

Would it be possible to provide a sample project for the purposes of only providing the GUI? .. no need for anything else, just how the visuals work.

I have the FNC components installed, and I am trying to use the newer TTMSFNCDataGrid along with any other TMS components trying to re-create the GUI, but I cannot get anything to look nearly the same.

In particular ..

image
image1295×873 114 KB

  1. how are the buttons created? I love how they have an animated effect as you hover over the buttons, it slowly changes the button color and text color. Is that done with a regular TRectangle and animation functions, or is that a TMS button component? Plus they seem to have a shadow effect as well. I cannot get the shadow effects to work the same way using the Delphi TShadowEffect component .. it only allows for a directional shadow, not a shadow that goes all around the component.

  2. How are you adding a shadow to the entire data grid. also, is that a TTMSFNCDataGrid?

  3. how did you add a shadow to the header row?

  4. how is the scrollbar detached from the grid and way over to the side? I tried using padding, that didn't work ... I then tried putting a TVertScrollBox in the background and hide the vertical scroll bars on the grid .. but the mouse scroll doesn't work when on the grid. i guess I could create custom event for that. just wondering the logic of how that was done

  5. how are you keeping the header row fixed as you scroll?

  6. how is the background image added? is it added to the TForm or to a TRectangle component. I tried adding an image to fill of the TForm and setting WrapMode to TileStretch, but doesn't seem to have the same behavior as the TMS dashboard app while resizing? seems like some sort of parallax effect or something.

any info would be greatly appreciated :grin:

3

Thank you for your feedback! We are happy to hear you like the interface of TMS Dashboard.

To clarify the interface of the TMS Dashboard is not based on the TTMSFNCDataGrid, which explains the difficulties you're encountering when trying to replicate the visual effects.
Instead, the TMS Dashboard utilizes a custom HTML and CSS interface, built with the Bootstrap framework, which is seamlessly integrated and rendered via the TTMSFNCWebBrowser. This setup enables the creation of the advanced GUI elements and dynamic visual effects you’ve mentioned.

A major advantage of this architecture is its flexibility—it allows updates to the HTML interface without the need to modify or redeploy the entire TMS Dashboard application. This streamlined approach makes it simple to implement design enhancements, introduce new features, and resolve interface issues efficiently, minimizing disruption.

4

How do you use Bootstrap with th TTMSFNCWebBrowser?

5

Ok, now that makes sense. Excellent idea to use bootstrap! I never thought to use it for more interface elements as you guys did, very smart. I've implemented the TinyMCE editor and another javascript based image editor into the TTMSFNCWebBrowser, but didn't think to do more GUI elements.

I love :heart: it .. thanks for letting me know. :grinning:

1 Like
6

We create an HTML page that imports the Bootstrap JavaScript and CSS libraries. Then navigate to that page in the TTMSFNCWebBrowser.
Then we use JavaScript calls to interact with the HTML page.

7

Very clever. So this con be done in a VCL app?

8

Since it relies on JavaScript & HTML yes, you can do whatever you like.

9

Awesome. I have been having great fun with this:

image
image1156×864 110 KB

1 Like