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.
Sarah joined J2 Innovations as a developer in February of 2017. She is a front-end developer that specializes in UI. Sarah works closely with customers to create custom apps and components. She is also responsible for designing demos. Outside of work Sarah enjoys digital art, food, and travel.
Subscribe to our blog
Get our expert knowledge delivered straight to your inbox, and keep up-to-date with the latest goings on in your industry.