When it comes to deploying an IoT application to end-users, a big portion of the user reception and adoption of the solution is related to the look and feel of whatever they're using, if it's catchy and nice to the eye, this undoubtedly helps changing the perspective and makes the on-boarding easier.
For that reason, besides Ubidots' basic customization options at the App branding level, there's an advanced editor for dashboards and widgets providing additional options to change their aspect even further.
The advanced customization feature is a JSON-based editor where users can input element-defined keys to set parameters for the look and feel of each of the available elements. Here's an example of how it looks at the dashboard level:
IMPORTANT NOTES:
– This feature will override any customization set at the App level.
Requirements
Active Ubidots account.
1. Custom style from Dashboards
The elements available to customize on a dashboard are:
Property | Accepted values | Behavior |
| - Named colors. | Sets the color of text and text decorations. |
| Applies solid colors as background on an element. |
|
ContextBar
You can also customize your context bar, this is where the dashboard title, date time picker and device dropdown selector –if dynamic dashboard– are located.
Property | Accepted values | Behavior |
| JSON with the properties ( | Specifies the properties of the selected title. |
| - Keywords: xx-small, x-small, small, medium, large, x-large, xx-large. | Specifies the size, or height, of the font |
| - Horizontal offset (required): positive or negative number | Puts shadows on elements |
| Numeric value. | Gives any element “rounded corners” |
| - Family name. | Defines the font that is applied to the selected element |
| - Named colors. | Sets the color of text and text decorations. |
| Applies solid colors as background on an element. |
|
Following the below steps you'll be able to customize the appearance, to further extend, of the below dashboard and widget elements:
Step 1: Open the Dashboard Drawer.
Step 2: Open the settings by clicking the sprocket option on the right side.
Step 3: Click on the "Custom Style" option, located in the Appearance section.
Step 4: Input the JSON-based file in the editor to indicate the desired customization.
Example: Note that every text different from a number needs to be wrapped up in double quotes as a string.
{
"widget": {
"color": "#5e5e5e",
"header": {
"color": "#ffffff",
"backgroundColor": "#202d4d",
"borderRadius": 0
},
"fontSize": 14,
"fontFamily": "Helvetica",
"boxShadow": "3px 3px 5px 6px #cccccc",
"fontWeight": "normal",
"borderRadius": 7,
"borderStyle": "solid",
"borderColor": "#5e5e5e",
"borderWidth": 1,
"backgroundColor": "#ffffff"
},
"dashboard": {
"color": "#5e5e5e",
"backgroundColor": "#f2f2f2"
},
"contextBar": {
"color": "#ffffff",
"title": {
"fontSize": 30,
"fontFamily": "Helvetica",
"fontWeight": "bold"
},
"fontSize": 14,
"fontFamily": "Helvetica",
"boxShadow": "3px 3px 5px 6px #ccc",
"borderRadius": "0px 0px 7px 7px",
"backgroundColor": "#192c54"
}
}
Step 5: Click on the "Accept" button.
Step 6: Click the green check-mark button in the dashboard settings.
IMPORTANT NOTES:
Applying a Custom Style will override any App level styling.
Applying a Custom Style for widgets at the dashboard level will cause all widgets to change equally.
To learn more about boxShadow, borderRadius, borderStyle, borderWidth and borderColor, please refer to the respective hyperlink.
By default, the unit for the numerical key is px. If other is to be used, it needs to be specified.
Examples:"fontSize": "1.5rem" – "fontSize": "1.5em" – "fontSize": "70%"
2. Custom style from Widgets
Similarly to the customization at the Dashboard level, widgets also allow individual look and feel options and just as in that case, applying a styling to a widget will not only override the settings given by the App's style but also any "Custom Style" set at the dashboard level.
Here the case is the same, the elements available to customize are:
Property | Accepted values | Behavior |
| - Named colors. | Sets the text's color |
| Applies solid colors as background on an element. |
|
| Sets the color of an element's four borders |
|
| Numeric value. | Give any element rounded corners |
| - Solid. | Specifies the type of line drawn around the element |
| - Numeric value: px, em, rem, vh and vw units. | Specifies the thickness of the border. |
| JSON with the properties ( | Specifies the properties of the selected header |
| - Keywords: xx-small, x-small, small, medium, large, x-large, xx-large. | Specifies the size, or height, of the font |
| - Family name. | Defines the font that is applied to the selected element |
| - Horizontal offset (required): positive or negative number | Puts shadows on elements |
| - Keyword value: normal, bold, bolder, lighter. | Sets the weight, or thickness, of a font |
Step 1: Open the widget settings by clicking the three top-right dots and then "Edit".
Step 2: Click on the "Custom Style" option, located in the Appearance section.
Step 3: Input the JSON-based file in the editor to indicate the desired customization.
Example:
{
"color": "#5e5e5e",
"header": {
"color": "#ffffff",
"backgroundColor": "#F47373",
"borderRadius": 7,
"fontWeight": "bold",
"boxShadow": "3px 3px 5px 6px #cccccc"
},
"fontSize": 15,
"fontFamily": "Helvetica",
"boxShadow": "3px 3px 5px 6px #cccccc",
"fontWeight": "bold",
"borderRadius": 7,
"borderStyle": "solid",
"borderColor": "#FFC4E1",
"borderWidth": 2,
"backgroundColor": "#ffffff"
}
Step 4: Click on the "Accept" button.
Step 5: Click the green check-mark button in the dashboard settings.
Add a linear gradient overlay to a background image
You can add a color gradient or a semi transparent color on top of a background image in Widgets and Dashboards by using the key background
in the custom style, where the first parameter is linear-gradient()
, and the second one is the image's URL. Learn more here.
{
"color": "#5e5e5e",
"header": {
"color": "#5e5e5e",
"backgroundColor": "#ffffff"
},
"fontSize": 14,
"background": "linear-gradient(to right, transparent, mistyrose), url(<IMAGE_URL>)",
"borderRadius": 20,
"backgroundColor": "#ffffff"
}
3. Custom style: HTML canvas widget
The HTML canvas widget allows users to create their own widgets in order to fit visualization needs that are not necessarily available within Ubidots default widget palette.
In this section, you'll learn to change this widget's header styling in a dynamic fashion right from the JavaScript code.
Step 1: Create a HTML canvas widget.
Step 2: Open the HTML editor.
Step 3: Paste the below code in the corresponding tab
HTML
<button id="color">Click here to change header styling</button>
JavaScript
const button = document.querySelector("#color");
button.addEventListener("click", () => {
const event = new CustomEvent("widget_changeHeaderColor", {
detail:{
"backgroundColor": "#00bcd4",
"borderRadius": 7,
"color": "#ffffff",
"boxShadow": "3px 3px 5px 6px #cccccc",
"fontWeight": "bold"
}
});
document.dispatchEvent(event);
});
Step 4: Click on the green check-mark button
Step 5: Click the green check-mark button in the dashboard settings.
Other users also found helpful...