Start Trial
Rise Vision Blog

Product News, Customer Stories and Updates from Rise Vision

Developer Tips & Tricks - Gadget Fundamentals, Part 4

Odds are, most of the Gadgets that you build for your digital signage will have settings available for the user to configure fonts and colors. It makes your Gadget more flexible and it is easy for the user to customize the look to fit better within their overall Presentation. In Part 4 of the Gadget Fundamentals series (and in case you missed it, you can find Part 3 here), I will show you how you can trigger the font and color selectors to be displayed in the Gadget settings within the Presentation editor.

Get started with Rise Vision

Color Picker

The color picker is easy to include. In the user preference for the color setting, just ensure that the name attribute ends with the word color (case insensitive). If you would like to provide a default color, use an HTML color code for the default_value attribute. In my example, I am setting the default color to black (#000000):


That's it! The color picker will now show up in the Rise Vision Platform beside the color setting:



Font Selector

The font selector involves a bit more work to set up. First, you'll need to give your user preference a name attribute that ends with font-style (case insensitive). To set a default font setting, simply specify a CSS class as the value of the default_value attribute:


This will place a font selector icon beside the field:


In order to be able to use the CSS class, add the following within the CSS section of your Gadget, taking care to customize this depending on the value of your name attribute above:


What we are doing here is using a user preference substitution variable. You can use a substitution variable of the format __UP_userpref__, where userpref matches the name attribute of a user preference. When the Gadget runs, the string value of the corresponding user preference is substituted for the variable. It would look similar to this when substituted:


You are now free to use this CSS class just as you would any other!

This concludes our series on Gadget Fundamentals. You should now know enough of the basics to be able to build amazing Gadgets that run within the Rise Vision Platform. We look forward to seeing what you come up with!


Gadget Fundamentals, Part 1
Gadget Fundamentals, Part 2
Gadget Fundamentals, Part 3

Keep your school displays interesting - pick new templates every week!

Every week, we send Template recommendations that will make you look great and improve your student's experience. And the best part, they save up to 16 hours of content creation time every week.

Not convinced? Check out the email we sent last week.