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.
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:
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
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
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!