FINtastic Tip: Create Custom UI Graphics Easily

Custom UI graphics and widgets can make all the difference in an application. Custom graphics increase usability, offer end users a better experience, and make the interface more suitable for unique use cases. Traditionally, creating code and embedding custom graphics, however, can be very time consuming. 

If you’ve got a great idea for a custom UI element or custom widget for your next project, we have good news! The FIN Framework supports Ractive.js, a template-driven UI library that simplifies the creation of interactive UI interfaces. We’ve encapsulated that into our FIN Framework Graphics Builder component so that creation is a breeze. 

Let’s say you wanted to build a widget to display values in a visual way so that monitoring your building or equipment is easier. Here’s an example of how you would add a SVG Bar Gauge to easily monitor if a sensor value is in a normal range, and the adjacent warning and critical ranges. 

By launching the Graphics Builder app in FIN, you can pull up the Ractive editor, which allows you to create the template and model for your new widget. Within the Ractive editor, you see that the yellow text is where you can easily edit the visual properties of the graphic. The widget bars define both their colors and their heights.

By simply adding a few tags, we can make those properties editable using a property sheet. 

Here’s what the final graphic looks like after adding tags to pull in the appropriate data.

To learn more about using Ractive in the FIN Framework, check out our docs page.